Fomantic-ui-sass
A community fork of the popular Semantic-UI framework.
The sass version of fomantic ui. It is fully customizable with isolated variable names.
Each component variable file is accompanied by a json file of the same name associating the name of the variable in the LESS version with its new name of the SASS version.
All variables of the original project are customizable. You can take a look at the source code on github.
Don't forget to manually copy the theme folder to the assets folder of your site. It's up to you to manage manually so that the icons fonts are downloaded by the browser.
NOTE
The package only has the default theme.
Installation and Usage
npm i -D fomantic-ui-sass
SCSS Usage
Copy the custom
directory into your project. It contains your custom
theme templates which you can customize. In the below example, the
directory is copied and renamed fomantic-custom-theme
.
It is also helpful to copy the default theme assets (fonts and images) to
your project. In this example, the assets have been moved into
fomantic-custom-theme/assets
, but you can put them anywhere and set the
path variables (keep reading).
It's helpful to create an SASS file as an entrypoint. In this file,
you can set up some directory variables, import your custom theme,
and pull in the variables and styles in the correct order.
For example, you can have a file named fomantic.scss
:
$theme-folder : ' fomantic-scss-custom ' !default ;
$image-path : " #{ $theme-folder }/assets/images " !default ;
$font-path : " #{ $theme-folder }/assets/fonts " !default ;
@ import ' ../../node_modules/fomantic-ui-sass/src/utils/all ' ;
@ import ' ../../node_modules/fomantic-ui-sass/src/themes/default/globals/fonts/all ' ;
@ import ' ../../node_modules/fomantic-ui-sass/src/themes/default/globals/colors/all ' ;
@ import ' fomantic-custom-theme ' ;
@ import ' ../../node_modules/fomantic-ui-sass/src/variables ' ;
@ import ' ../../node_modules/fomantic-ui-sass/src/semantic.scss ' ;
Customization and choice of components and their variants
Button
$use-button : true !default ;
$use-button-type-animated : true !default ;
$use-button-type-labeled : true !default ;
$use-button-type-basic : true !default ;
$use-button-type-inverted : true !default ;
$use-button-type-tertiary : true !default ;
$use-button-variation-social : ' facebook ' , ' twitter ' , ' google ' , ' google plus ' ,
' linkedin ' , ' youtube ' , ' instagram ' , ' pinterest ' , ' vk ' , ' whatsapp ' , ' telegram ' !default ;
$use-button-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
$use-button-variation-consequences : ' positive ' , ' negative ' !default ;
Header
$use-header : true !default ;
$use-header-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
Input
$use-input : true !default ;
$use-input-variation-icon : true !default ;
$use-input-variation-labeled : true !default ;
$use-input-variation-action : true !default ;
$use-input-variation-transparent : true !default ;
$use-input-variation-inverted : true !default ;
Label
$use-label : true !default ;
$use-label-type-image : true !default ;
$use-label-type-pointing : true !default ;
$use-label-type-corner : true !default ;
$use-label-type-tag : true !default ;
$use-label-type-ribbon : true !default ;
$use-label-type-horizontal : true !default ;
$use-label-type-attached : true !default ;
$use-label-type-floating : true !default ;
$use-label-variation-circular : true !default ;
$use-label-variation-basic : true !default ;
$use-label-variation-inverted : true !default ;
$use-label-variation-basic-pointing : true !default ;
$use-label-variation-basic-tag : true !default ;
$use-label-variation-colors : $colors-variations-names !default ;
List
$use-list : true !default ;
$use-list-type-bulleted : true !default ;
$use-list-type-link : true !default ;
$use-list-type-ordered : true !default ;
$use-list-variation-horizontal : true !default ;
$use-list-variation-inverted : true !default ;
$use-list-variation-selection : true !default ;
$use-list-variation-divided : true !default ;
$use-list-variation-celled : true !default ;
$use-list-variation-relaxed : true !default ;
Loader
$use-loader : true !default ;
$use-loader-variation-inverted : true !default ;
$use-loader-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
Reveal
$use-reveal : true !default ;
$use-reveal-type-fade : true !default ;
$use-reveal-type-slide : true !default ;
$use-reveal-type-move : true !default ;
$use-reveal-type-rotate : true !default ;
Segment
$use-segment : true !default ;
$use-segment-type-placeholder : true !default ;
$use-segment-type-piled : true !default ;
$use-segment-type-stacked : true !default ;
$use-segment-variation-inverted : true !default ;
$use-segment-variation-attached : true !default ;
$use-segment-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
Step
$use-step : true !default ;
$use-step-type-ordered : true !default ;
$use-step-type-vertical : true !default ;
$use-step-variation-inverted : true !default ;
$use-step-variation-attached : true !default ;
Breadcrumb
$use-breadcrumb : true !default ;
$use-breadcrumb-variation-inverted : true !default ;
Menu
$use-menu : true !default ;
$use-menu-type-secondary : true !default ;
$use-menu-type-pointing : true !default ;
$use-menu-type-tabular : true !default ;
$use-menu-type-text : true !default ;
$use-menu-type-vertical : true !default ;
$use-menu-type-pagination : true !default ;
$use-menu-variation-inverted : true !default ;
$use-menu-variation-attached : true !default ;
$use-menu-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' , ' teal ' ,
' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
Message
$use-message : true !default ;
$use-message-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
$use-message-variation-consequences : ' positive ' , ' negative ' !default ;
Table
$use-table : true !default ;
$use-table-type-definition : true !default ;
$use-table-type-structured : true !default ;
$use-table-variation-basic : true !default ;
$use-table-variation-celled : true !default ;
$use-table-variation-padded : true !default ;
$use-table-variation-compact : true !default ;
$use-table-variation-inverted : true !default ;
$use-table-variation-sortable : true !default ;
$use-table-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
Card
$use-card : true !default ;
$use-card-variation-inverted : true !default ;
$use-card-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' , ' teal ' ,
' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
Comment
$use-comment : true !default ;
$use-comment-variation-inverted : true !default ;
Feed
$use-feed : true !default ;
$use-feed-variation-inverted : true !default ;
Item
$use-item : true !default ;
$use-item-variation-inverted : true !default ;
Statistic
$use-statistic : true !default ;
$use-statistic-variation-inverted : true !default ;
$use-statistic-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
Checkbox
$use-checkbox : true !default ;
$use-checkbox-type-slider : true !default ;
$use-checkbox-type-toggle : true !default ;
$use-checkbox-variation-fitted : true !default ;
$use-checkbox-variation-inverted : true !default ;
$use-checkbox-variation-size : ' mini ' , ' tiny ' , ' small ' , ' medium ' , ' large ' , ' big ' ,
' huge ' , ' massive ' !default ;
Dimmer
$use-dimmer : true !default ;
$use-dimmer-variation-inverted : true !default ;
$use-dimmer-variation-blurring : true !default ;
$use-dimmer-variation-partially : true !default ;
$use-dimmer-variation-shades : true !default ;
Dropdown
$use-dropdown : true !default ;
$use-dropdown-type-selection : true !default ;
$use-dropdown-type-multiple : true !default ;
$use-dropdown-type-search : true !default ;
$use-dropdown-type-clearable : true !default ;
$use-dropdown-type-inline : true !default ;
$use-dropdown-type-simple : true !default ;
$use-dropdown-type-pointing : true !default ;
$use-dropdown-variation-inverted : true !default ;
$use-dropdown-variation-columnar : true !default ;
Modal
$use-modal : true !default ;
$use-modal-type-inverted : true !default ;
$use-modal-type-basic : true !default ;
$use-modal-type-fullscreen : true !default ;
Popup
$use-popup : true !default ;
$use-popup-variation-inverted : true !default ;
Progress
$use-progress : true !default ;
$use-progress-variation-inverted : true !default ;
$use-progress-variation-attached : true !default ;
$use-progress-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
Rating
$use-rating : true !default ;
$use-rating-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
Slider
$use-slider : true !default ;
$use-slider-variation-inverted : true !default ;
$use-slider-variation-vertical : true !default ;
$use-slider-variation-reversed : true !default ;
$use-slider-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;
Toast
$use-toast : true !default ;
$use-toast-variation-inverted : true !default ;
$use-toast-variation-colors : ' red ' , ' orange ' , ' yellow ' , ' olive ' , ' green ' ,
' teal ' , ' blue ' , ' violet ' , ' purple ' , ' pink ' , ' brown ' , ' grey ' , ' black ' !default ;