Jack Lukic
10 years ago
1 changed files with 0 additions and 96 deletions
Split View
Diff Options
@ -1,96 +0,0 @@ |
|||
## Getting Semantic UI |
|||
|
|||
For links to download Semantic UI, check our our [download page](http://www.learnsemantic.com/guide/download.html). |
|||
|
|||
## Setting Up |
|||
|
|||
### Dependencies |
|||
Semantic uses command-line tools to build your project while theming. After getting Semantic, you will need to install [nodejs](http://nodejs.org/download/) and [gulp](https://github.com/gulpjs/gulp/) to run the build process. |
|||
|
|||
Once you're up and running. Navigate to the semantic directory and install the npm dependencies |
|||
```bash |
|||
# install dependencies |
|||
npm install |
|||
# start install script |
|||
gulp |
|||
``` |
|||
|
|||
### Installing Semantic |
|||
|
|||
The first time you run gulp you will be greeted with an interactive installer |
|||
```bash |
|||
# install |
|||
gulp |
|||
``` |
|||
|
|||
The installer will let you select which components to include, and specify paths for your project. |
|||
|
|||
| Installation Type | Description | |
|||
| ------------- | ------------- | |
|||
| Automatic | Installation will use the default paths, outputing css files to `dist/` and packaging all components together | |
|||
| Express | Will let you move your site folder and your dist folder and select from a list of components to include in your concatenated release. | |
|||
| Custom | Will prompt you for all available options | |
|||
|
|||
The install process will create two files: `semantic.json` stores paths for your build and sits on the top-level of your project, `theme.config` is a **LESS** file that exists in **src/** and allows you to centrally set the themes for each UI component. |
|||
|
|||
The installer will also create a special folder which contains your site-specific themes. The default location for this is `src/site`. For more information on using site themes, see the theming guide below. |
|||
|
|||
### Manual Install |
|||
If you prefer these files and folders can be moved manually instead of using the installer. |
|||
```bash |
|||
mv semantic.json.example semantic.json |
|||
mv src/theme.config.example src/theme.config |
|||
mv src/_site src/site |
|||
vi semantic.json |
|||
``` |
|||
|
|||
### Upgrading Semantic |
|||
|
|||
You can use normal package manager functions to update your project, just be sure to re-install semantic after upgrading. Re-install will **extend your `semantic.json` but not overwrite it** |
|||
```bash |
|||
bower update |
|||
cd ./bower_modules/semantic-ui |
|||
gulp install |
|||
``` |
|||
|
|||
> For a full list of settings for **semantic.json**, check the <a href="https://github.com/Semantic-Org/Semantic-UI/blob/1.0/tasks/defaults.js">defaults values</a> which it inherits from. |
|||
|
|||
## Using Semantic Build Tools |
|||
|
|||
### Gulp commands |
|||
After setting up your project you have access to several commands for building your css and javascript. |
|||
|
|||
```bash |
|||
gulp # runs default task (watch) |
|||
gulp watch # watches files for changes |
|||
gulp build # builds all files from source |
|||
gulp install # re-runs install |
|||
``` |
|||
|
|||
|
|||
Semantic creates minified, and uncompressed files in your source for both individual components, and the components specified for your packaged version. |
|||
|
|||
|
|||
Keep in mind semantic will automatically adjust URLs in CSS and add vendor-prefixes as part of the build process. This means **definitions and theme files do not need vendor prefixes**. |
|||
|
|||
#### Advanced Usage |
|||
|
|||
> In addition to the paths set in `semantic.json`, you can serve files to a second location, for example, a docs instance by using a separate config file `tasks/admin/docs.json`. Using a copy of the SUI documentation may work well internally for creating a style guide to hack on the theme designs for your project. |
|||
|
|||
```bash |
|||
gulp serve-docs |
|||
gulp build-docs |
|||
``` |
|||
|
|||
### Workflow |
|||
|
|||
Building and watching Semantic is only necessary while adjusting your UI. This is usually the first part of building a new project, and a separate process than building-out pages in your site. |
|||
|
|||
During this architecting phase you can try <a href="http://www.learnsemantic.com/themes/creating.html">downloading different themes</a>, adjusting your <a href="http://www.learnsemantic.com/developing/customizing.html#setting-global-variables">site-wide settings</a> (font-family, colors, etc) and tweaking components in your site's <a href="http://www.learnsemantic.com/developing/customizing.html#designing-for-the-long-now">component overrides</a>. |
|||
|
|||
|
|||
Files in the `examples/` folder of your project can be useful for testing out changes in your UI. For example, you might run `gulp watch` download a new theme to `src/site/themes/` then adjust your `theme.config` file with the name of the new theme and refresh `examples/kitchensink.html` to inspect changes in the theme. |
|||
You will only need to use Semantic's build tools while refining your UI, while designing pages you can rely on the packages in `dist/` and your software stack's normal build set-up. |
|||
|
|||
`gulp watch` will automatically recompile only the necessary definition files when you update `semantic.config` or any `.variables` or `.overrides` file. |
|||
|
|||
Write
Preview
Loading…
Cancel
Save