Documentation | Semantic-UI Generator

Intro How it Works How to Setup Docs Info

Please check Semantic-UI Official Documentation, for detail example and further information how to use it

.flatgold .concrete .darkgreen .autumnbrown .darkblue& .litecream. For now we only need to write code below in semantic.color.less, and compile it. But in real world you can do whatever you want, depend on how you integrate it to your project structure.

In this section we will learn how to use the generator

Basic understanding of less css

Know how to compile less to css.

You can use SublimeText extension, Brackets, or any code editor that support less to compile it
Using Grunt or Gulp taks runner even better
Using precompiler like Prepros, Koala, etc. is Recommended *since it only an light task.

Basic knowledge of Semantic-UI

$ git clone https://github.com/sieteminerva/Semantic-UI-Color-Generator.git or download the source code

Define colors and components you want to generate in semantic.color.less

Compile it to any place with any name you want. in this case you can look the ./dist folder named semantic.color.css for compiled version

Include semantic.color.css to your index.html. also don't forget to include the semantic-ui library

At the end we wanted more, we want to extend as many as possible components from semantic-ui, and extracting functionalities like alignment, color for single text, border, etc. to be able for customization. so we can help to build and colorize your great next project. Please wait for it!

Because the dimmer.js code only manipulate the <div class="ui dimmer"></div>, So it wont take any effect if you define it like this: <div class="ui flatgold dimmer"></div> in the Markup, instead you also need defining which color of dimmer you want to use in Variation Settings of your javascript code,

              
                // So if you want flatgold dimmer define it like this

                $('#containerWhereDimmerLives')
                      .dimmer({
                        on: 'hover',
                        variation: 'flatgold'
                      });

Go to /generators folder

Open one of generator file available find *.less ( example: ui-colored-menu.generator.less file )

Modify the variable. every variable will be start with @ customize it as you needed!

Repeat Setup Steps before

If you take a closer look i also make a new Variable for Classes, then i call it back using Interpolation Syntax. not only for coloring, i think with this recipe, will open possibilities for translating classes, theming or other tweaks.

There is a variable called @prefix: .ui; modify it to @prefix: .ui.yourThemeName;

Customize the CSS property of the selected component, dont forget to put !important; mark for overriding.

Compile it. and now .yourThemeName class automatically added into your generated component.

Then use it in your HTML markup <div class="ui yourThemeName red button">

In my case this approach more Clean and Easy for theming, without affecting the original version, and when semantic-ui got updated your site still up and running!

You can call it a Less Parametric Mixin, but we prefer to call it a Generator!
Because you only need to define single line of code, so that you can achieved hundreds and more lines of code to get semantic-ui components colored and autogenerated.

Web Designer
If you are web designer, try this! and look how colorful person you'll be come.

Frontend Engineer
If you are a frontend engineer and believe that color play a crucial part of your visual artwork, this will fit on you!

Semantic-UI Addicts
If you aware that semantic-ui is great but lack of colors that fits to your need, you knew how to customize it but you're to lazy to do it. or maybe you've tried and finally back off confused with every chaining @variable been made, congrats! Yes, Obviously this meant for you!

In this demo page there are six new color newly created.
look custom color at left menu section

Those colors now available as new color class, I call it:

Those custom colors now Automagically available for 12 components. Here is the generated CSS code.

Basic Requirement
Before we started you need to check yourself

Start a project
Now that you're ready lets get started!

How to Customize it

For example:

You can call it a Less Parametric Mixin, but we prefer to call it a Generator! Because you only need to define single line of code, so that you can achieved hundreds and more lines of code to get semantic-ui components colored and autogenerated.

Web Designer If you are web designer, try this! and look how colorful person you'll be come.

Frontend Engineer If you are a frontend engineer and believe that color play a crucial part of your visual artwork, this will fit on you!

Semantic-UI Addicts If you aware that semantic-ui is great but lack of colors that fits to your need, you knew how to customize it but you're to lazy to do it. or maybe you've tried and finally back off confused with every chaining @variable been made, congrats! Yes, Obviously this meant for you!

In this demo page there are six new color newly created. look custom color at left menu section