#Semantic-UI Color Generator Generating your new color class for semantic-ui components effort-less!

###The best color in the whole world is the one that looks good on you! ~coco chanel

• If you are a frontend engineer and believe that color play a crucial part of your visual artwork, this will fit on you!,
• If you use semantic-ui a lot, try this! and look how colorful person you'll be come.
• 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!

You can call it a Mixin, but i prefer to call it a Generator, because you only need to define one line of code, so that you can achieved hundreds and more lines of code to get semantic-ui components colored and generated automatically, i guarantee this will save you precious time.

---

How to start a project with this

Basic requirement

1. Basic understanding of less css
2. 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.
3. Basic knowledge of semantic-ui

Starting Up

1. $git clone https://github.com/sieteminerva/Semantic-UI-Color-Generator.git or download the source code
2. Define colors and components you want to generate in semantic.color.less
3. 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
4. include semantic.color.css to your index.html. also don't forget to include the semantic-ui library

---

Have you tried the demo page? take a look at the custom color on the left menu section, there is six new color i created. I call it in class as: flatgold, concrete, darkgreen, autumnbrown, darkblue, and litecream. here is the generated code.

Those custom colors now AutoMagically available for 12 components. Here is the List of Components: grid, table, segment, card, message, progress, menu, icon, header, label, button, dimmer.

		<div class="ui grid">
			<div class="flatgold row">
				<div class="concrete column">
					<!-- Your Great Content -->
				</div>
			</div>
		</div>
		<!-- or -->
		<button class="ui darkgreen button">
			<i class="flatgold user icon"> User </i>
		</button>

Except for dimmer you need to define your color at variation settings in the javascript code, because the dimmer.js code only manipulate the <div class="ui dimmer"></div>, so it wont take any effect if you define it in HTML eq: <div class="ui red dimmer"></div>, maybe there will be a consideration for future enhancement after this.

		// So if you want red dimmer define it like this
		$('#containerWhereDimmerLives')
	        .dimmer({
	          on: 'hover',
	          variation: 'red'
	        });

I'm not covering how to use semantic-ui frameworks here. We just add a new additional color class, for detail example and further information how to use it, Please check Semantic-UI Official Documentation.

Done for the intro, now get straight to the Interesting part

Those custom color were created only by writing (.less) code below

	.GENERATE-UI-COLOR(flatgold, @flatgold);
	.GENERATE-UI-COLOR(concrete, @concrete);
	.GENERATE-UI-COLOR(darkgreen, @darkGreen);
	.GENERATE-UI-COLOR(autumnbrown, @autumnBrown);
	.GENERATE-UI-COLOR(darkblue, @darkblue);
	.GENERATE-UI-COLOR(litecream, @liteCream);

Of course i considering the need of generating color for specific components only, here to do that:

	/* generate colored button */
	.GENERATE-COLORED-BUTTON(colorClass, @colorVariable);

	/* generate colored card */
	.GENERATE-COLORED-CARD(colorClass, @colorVariable);

	/* generate colored grid */
	.GENERATE-COLORED-GRID(colorClass, @colorVariable);

	/* generate colored segment */
	.GENERATE-COLORED-SEGMENT(colorClass, @colorVariable);

	/* generate colored header */
	.GENERATE-COLORED-HEADER(colorClass, @colorVariable);

	/* generate colored message */
	.GENERATE-COLORED-MESSAGE(colorClass, @colorVariable);

	/* generate colored icon */
	.GENERATE-COLORED-ICON(colorClass, @colorVariable);

	/* generate colored label */
	.GENERATE-COLORED-LABEL(colorClass, @colorVariable);

	/* generate colored dimmer */
	.GENERATE-COLORED-DIMMER(colorClass, @colorVariable);

	/* generate colored table */
	.GENERATE-COLORED-TABLE(colorClass, @colorVariable);

	/* generate colored menu */
	.GENERATE-COLORED-MENU(colorClass, @colorVariable);

What happen there? that's pretty interesting question but i'm afraid i cannot clearly explain it to you. basically i just extract the original css selector for every components into a single component generator, i also took and redifining existing global variables into local variables specific for every components, so you can call it like that. global variable will still work here if you want it, just import them!

How to Customize it

1. Go to /generators folder
2. Open 1 of generator file available (*.less eq: ui-colored-menu.generator.less)
3. Modify the variable. every variable will be start with @, customize it meet to your need!
4. Repeat Steps before

If you look closer i also make a variable for classes, then i call it back using interpolation syntax. not only for coloring, with this recipe i think it will open possibilities for translating classes, theming or other tweaks.

for example:

• 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. after that .yourThemeName class automatically added into your generated component.
• then use it in your HTML <div class="ui yourThemeName red button"></div>.
  in my case it's more easy for theming, without affecting the original version, and when semantic-ui got updated your site still up and running!

---

Known Bugs

• Grid

  you should define how many column you want to use for your layout in grid or row, otherwise the layout will break

    <!-- This Example Working fine -->
    <div class="ui three column grid">
    	<div class="column"></div>
    	<div class="column"></div>
    	<div class="column"></div>
    </div>
  
    <!-- or -->
  
    <div class="ui grid">
    	<div class="two column row">
    		<div class="column"></div>
    		<div class="column"></div>
    	</div>
    </div>
  
  
    <!-- This Example will break the layout-->
    <div class="ui grid">
    	<div class="column"></div>
    	<div class="column"></div>
    	<div class="column"></div>
    </div>
  
    <!-- or -->
  
    <div class="ui grid">
    	<div class="row">
    		<div class="column"></div>
    		<div class="column"></div>
    		<div class="column"></div>
    	</div>
    </div>

  i'll fix this later, as soon as i have time. or you want to help? just let me know