Download Fomantic UI navigate to the install folder then run a gulp command.
To build all files:
To watch for changes
Fomantic UI uses Gulp for several reasons:
A Fomantic UI project includes the following folder structure.
Below is a list of all available gulp commands
| Command | Description |
|---|---|
| install | Asks install questions to setup semantic.json |
| watch (default) | Watches for changes in source files, and builds file on change |
| build | Build all files |
| clean | Cleans dist/ folder |
| version | Outputs current version |
| build-javascript | Build JS files |
| build-css | Build CSS files |
| build-assets | Build assets files |
| serve-docs | Serves files to local docs instance |
| build-docs | Builds files to docs folder |
Build tool settings are stored in a special file called semantic.json It can be included in any folder that is in a parent folder of the fomantic install folder.
If you used the npm or meteor, a semantic.json file is automatically generated for you in the root of your project. If you used a different package manager you can run gulp install to run the interactive installer.
By default, all components listed in semantic.json are added to semantic.css and semantic.js on build, but sometimes you don't need a component to be included on every page. To keep the file size of your main assets down, it's better to separate these components and reference them individually in your HTML.
To make this work, add these components to your semantic.json as "individuals" (see above example). Then the css/js files will still be generated/updated as usual under dist/components.
Note: You can specify only the individuals in semantic.json and leave the components list empty. The individuals are automatically excluded from the main components list.
LESS uses a special configuration file theme.config which lets you specify what theme each component should use. If you have not generated this file yet, you will receive an error message when running build tools
You can learn more about theme.config by checking out the theming guide
See our recipes section for examples on how to import individual gulp tasks into your custom Gulpfile.
We've added a new setting to semantic.json in 2.2 to help make working with a CLI, or other automated deployments more streamlined.
Specifying autoInstall: true in an environments semantic.json configuration will prevent any user prompting when running npx gulp install allowing for automated deployment.
This translation is only % complete!
We need your help to make Semantic available to people who speak your language.
Our translation tools are easy to use and allow you to translate text without having to leave the site.
