Fomantic-UI Documentation

Fomantic-UI uses a three-level inheritance model for themes:

1. Default theme: The neutral default theme.
2. Packaged theme: A specific pre-packaged theme (e.g., "amazon" or "material").
3. Site theme: A theme specific to your own site.

Folder Structure:

• definitions/: Contains CSS and JavaScript definitions for each component.
• themes/: Contains pre-packaged themes, including the default theme.
• site/: Contains your custom site theme.

When reporting bugs or suggesting enhancements on GitHub, follow these steps to ensure your issue can be triaged:

1. Check if the issue has already been raised.
2. Create a reproducible example using this JSFiddle boilerplate.
3. For bugs, include a test case. If the bug is in the documentation, link to the specific documentation example and explain how to reproduce it.
4. For enhancements, explain clearly what you want (using JSFiddle is optional but encouraged).

You can import collections of tasks into a Gulp workflow by requiring the tasks/collections/install module. This module injects the necessary tasks into your Gulp instance, making them available for execution (e.g., via gulp.start).

const gulp = require('gulp');
// modified to point to semantic folder
const install = require('tasks/collections/install');
gulp = install(gulp);

// tasks are now injected and ready to be used
gulp.start('install');

To use Fomantic-UI source files in your own LESS files, you must first prepare your environment by renaming theme.config.example to theme.config and renaming the _site/ folder to site/.

Importing all components:

/* Import all components */
@import 'src/semantic';

Importing individual components: You must wrap individual component imports in a scope using & {} to ensure correct nesting.

/* Import a specific component */
& { @import 'src/definitions/elements/button'; }

Note: LESS files do not contain vendor prefixes. You must add them during your build step.

Fomantic-UI provides pre-defined Gulp tasks that you can import directly into your own gulpfile.js. This allows you to leverage Fomantic's build logic (such as watching for changes or building files) without needing to use the full Fomantic build toolchain manually.

Available tasks include:

• Watch: Compiles only changed files from the source.
• Build: Builds all files from the source.
• Version: Outputs the current version number.
• Install: Runs the Installer to set up paths.

const watch = require('path/to/fomantic/tasks/watch');
gulp.task('watch ui', watch);

Depending on your environment, you may want to install specific versions of Fomantic-UI:

• CSS Only: npm install fomantic-ui-css
• LESS: npm install fomantic-ui-less
• SASS: gem 'fomantic-ui-sass'

# CSS Only
npm install fomantic-ui-css

# LESS
npm install fomantic-ui-less

# SASS (Ruby Gem)
gem 'fomantic-ui-sass'

You can integrate Fomantic-UI's Gulp tasks directly into your own Gulpfile by requiring the specific task files.

const watch = require('path/to/semantic/tasks/watch');

gulp.task('watch ui', 'Watch Fomantic-UI', watch);

To test new features and bug fixes early, you can install the nightly build of Fomantic-UI.

npm install fomantic-ui@nightly

To set up the Fomantic-UI development environment, run npm install from the Fomantic directory. A post-install script will automatically configure the package. Once set up, you can use the built-in Gulp tasks to manage your CSS builds.

Use gulp watch to monitor files for changes and gulp build to compile all files.

npm install

# Watch files
gulp watch

# Build all files
gulp build

For more granular control, you can customize individual components:

1. Component Variables: Modify specific variables for a component in its dedicated variable file (e.g., /site/elements/button.variables).
2. Component Overrides: Specify custom LESS in /site/elements/button.overrides. This file has access to all underlying variables available for that specific component.

The simplest way to customize Fomantic-UI is by overriding variables in your site/variables/site.variables file. This file acts as a stub for overriding global settings such as:

• Base font size
• Named color hex codes
• Header/Page Font-families
• Primary and secondary colors
• Grid column count

To see all available variables, inspect the default theme files located in themes/default/.