Overview

Flatron is a Bootstrap 3 flat theme that restructures bootstrap and make it more beatiful and more easy to edit & use. One important thing to notice about Flatron is that it removes the default bootstrap spacings between different block this is beacause every desgin has its proper spacing that differ from design to design so the only thing that you are asked to do when using flatron is to set your the spacing that you see that it fits in your project main stylesheet.

Structure

The less folder in this theme consists of three main parts that are easy to figure out

_general folder

• This folder consists of the some useful general mixins used to generate diffrenet different styles like border radius, box shadow .... etc

• It also contains variables.less file that contains the basic variable necessary for generating the theme

base folder

• This folder contains the general style like for elements like body, a, p ... etc those styles are fond in scaffolding.less file

• It contains the basic utilities and bootstrap helpers classes like .clearfix class. All of this found in helpers.less file

• In custom-helpers.less file you will find the color classes that can be used to easly set the background, text, border, svg fill, strokes colors. i.e. .text-red sets the text color to red

other folders

• All other folders are the default modules used by bootstrap like badges, blockquotes, buttons ... etc

• In each folder you will find a .less file and .html file, the less file contains the basic styles for the element and the html file contains the structure you should use in your project

Notes

• The basic structure of default bootstrap project is changed to element base structure meaning you can find, edit or remove elements in seconds.
• As mentioned in the overview section the default bootstrap spacing beween elements are removed and you set it based on what fits your design without overriding anything
• This theme uses grunt for compiling less files you can read about it here

Compiling

As mentioned above this theme uses grunt to compile its less files. What happens when you run the grunt command is that it compiles all the less files into two versions of CSS files one minified for production purpose and the unminified version for the development purpose

If you want to use another compliling method that is totally fine all what you have to compile to get you bootstrap css file is to compile the bootstrap.less file in the less folder and your are good to go

Contact

Enough talking, Stuck and want help? I will do my best to help, just click the contact link on your right and send me a message. Cheers :)