Wallogit.com
2017 © Pedro Peláez
library bowtie
CSS framework
modpreneur/bowtie
CSS framework
- Monday, October 2, 2017
- by jjanekk
- Repository
- 28 Watchers
- 1 Stars
- 3,161 Installations
- HTML
- 1 Dependents
- 1 Suggesters
- 0 Forks
- 0 Open issues
- 52 Versions
- 0 % Grown
The README.md
BOWTIE
Simple and elegant CSS framework to make you life easier! Whole framework is build to fit modern flat design., (*1)
Compile
In order to compile the framework, install node dependencies by npm install and then after every change in LESS files, recompile the final CSS via this command: lessc src/less/core.less src/css/style.css. Enjoy :-), (*2)
Modules - Widgets
The entire CSS framework consists of individual modules - widgets. You can compile and use only some of them, take your pick :-), (*3)
-
grid- Grid system to make your position blast -
spacing- Margin and padding classes to take your distance -
variables- Overrides and custom variables for the framework -
variables-default- All the default variables for the framework -
alerts- All the alert messages you ever wanted -
buttons- Nice and clean buttons -
navbar- Navbar
Grid
Spacing
Spacing allows you to set classes for margins and paddings., (*4)
Variables
Variables used in this module are:
- @space-big - Big space in the design, used to // TODO
- @space-medium - Medium space
- @space-small - Small space, (*5)
Classes
All the classes have this pattern: <type>-<size>-<position> where type is padding/margin, size is big/medium/small/none, position is top/right/bottom/left/vertical/horizontal/all., (*6)
Variables
Variables Default
Alerts
Buttons
Module built for buttons., (*7)
Variables
Variables used in this module are:
- @space-small - Small space used in padding of the buttons
- @color-primary - Primary color
- @color-primary-hover - Primary hover color
- @color-secondary - Secondary color
- @color-secondary-hover - Secondary hover color
- @color-tertiary - Tertiary color
- @color-tertiary-hover - Tertiary hover color
- @color-success - Success color
- @color-success-hover - Success hover color
- @color-danger - Danger color
- @color-danger-hover - Danger hover color
- @color-info - Info color
- @color-info-hover - Info hover color
- @color-warning - Warning color
- @color-warning-hover - Warning hover color
- @color-dark-grey - Grey (default) color
- @color-dark-grey-hover - Grey (default) hover color, (*8)
Classes
-
button- Default class for any button -
button-<SLUG>- Additional class to the default one,<SLUG>is one of these:success,info,danger,warning,primary,secondary,tertiary
Navbar
Use nav tag with navbar class, use ul and li for individual items., (*9)
Variables
Variables used in this module are:
- @space-small - Small space used in padding of the links in navbar, (*10)
Classes
-
navbar- Main navbar class