ui/
Files from fomantic ui repo
Custom Pipelines
Importing Gulp Tasks
You don't have to use our gulp pipeline, just import the task into your own gulpfile
You can fork this example project to see an example of how to import Fomantic UI tasks into your project.
var
gulp = require('gulp'),
watch = require('./semantic/tasks/watch'),
build = require('./semantic/tasks/build')
;
// import task with a custom task name
gulp.task('watch ui', watch);
gulp.task('build ui', build);
Semantic.json Settings
Auto-Install
Running npx gulp install normally will launch an interactive installer, to allow this installer to run without user interaction and use all settings from your semantic.json instead, include a special flag autoInstall: truein your semantic.json file.
{
// install will now automatically build your project files without user interaction
"autoInstall": true,
// these settings may be different
"base": "",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "dist/",
"uncompressed": "dist/components/",
"compressed": "dist/components/",
"themes": "dist/themes/"
},
"clean": "dist/"
},
"permission": false,
"rtl": false,
}
Right-to-left (RTL) Languages
Including the flag rtl:true will build Fomantic UI using RTLCSS.
To build both LTR and RTL versions use the flag rtl: 'both'
{
// builds both LTR and RTL version
"rtl": "both",
// these settings may be different
"base": "",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "dist/",
"uncompressed": "dist/components/",
"compressed": "dist/components/",
"themes": "dist/themes/"
},
"clean": "dist/"
},
"permission": false,
}
Prototyping with Fomantic UI
Sketch Files
If you are looking to prototype layouts using Sketch with Fomantic UI check out Semantic UI Sketch Files
Single Components
Tagged Releases
Component repos are released on NPM and as tagged releases on GitHub.
Check the list of repos available under fomantic on GitHub
Each component's release notes will automatically update with the relevant notes for that component from the main release.
npm install semantic-ui-component
Server-Side Rendering
Individual components repos include an auto-generated index.js file to simplify require use with NodeJS, for server-side rendering or with Browserify.
npm install semantic-ui-dropdown
var
dropdown = require('semantic-ui-dropdown')
;
foo.dropdown();
Importing LESS
LESS Only Distribution
A special distribution Fomantic-UI-LESS is available for projects that use custom integrations and do not require our build tools.
Importing Semantic
semantic.less is available in all releases as an entry point for importing multiple components from other LESS files.
/* Import all components */
@import 'src/semantic';
Importing Components
If you need to import individual components, you should scope each import to avoid inheritance issues.
/* Import specific components with scope */
& { @import 'src/definitions/elements/button'; }
& { @import 'src/definitions/elements/list'; }
Running Docs Locally
Download Docs Server
The easiest way to get Fomantic UI docs is to clone the repo
git clone https://github.com/fomantic/Fomantic-UI-Docs.git
Install Dependencies
Fomantic UI's documentation is written in Docpad an amazing static site generator built in NodeJS
cd docs/
npm install
A Note About Paths
Fomantic UI's build tools include two special commands build-docs and serve-docs for use with the documentation. These will pass changes from the ui/ folder directly to a live docs server.
These gulp tasks expect two sibling folders
docs/
Files from docs repo
Build UI
The first time you run docs you will need to build the whole project once
cd ui/
npx gulp build-docs
Run Docpad Server
Docpad
cd docs/
# initial build may take several minutes
docpad run
Serve UI to Docs
You can then continue to make modifications to UI and "serve" these files to a live docs instance to see your changes immediately
cd ui/
gulp serve-docs
Hosted Docs
If you are managing your documentation you can automatically deploy to GitHub Pages using a built in docpad gh-pages plugin
For more information about GitHub Pages, check out the docs on GitHub
docpad deploy-ghpages --env static
Custom Docs Paths
Doc task paths are specified in a file tasks/config/docs.js and can be adjusted to use any folder set-up necessary for your project.