This is a CSS framework designed to have basic functionalities. Sample Website Live Demo
- HTML5
- CSS3
- SASS
The framework was designed to be responsive using display: flex
property. The javascript is meant to make the navigation bar responsive
You can add these classes -- text-primary
, text-secondary
, text-tertiary
, text-accent
, text-white
, text-gray-1
, text-gray-2
, and text-gray-3
-- to change the text color.
You can add background colors using these classes -- bg-primary
, bg-secondary
, bg-tertiary
, bg-accent
, bg-white
, bg-gray-1
, bg-gray-2
, and bg-gray-3
.
Use the class .btn
to use predefined CSS styling for your form input, buttons or links.
Body has a predefined font-size of 16px and font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
.
We defined breakpoints using:
$huge: 1300px
$large: 1024px
$medium: 900px
$small: 540px
The classes .container
and .container-fluid
defines the max-width of the layout. The class .container-fluid
stretches to the full screen while .container
class has a max-width.
- The classes --
text-center
,text-right
, andtext-left
align the text according to the naming convention. - The classes --
align-right
andalign-left
align elements according to the naming convention. - The classes --
float-right
andfloat-left
float elements according to the naming convention. - The class
.clearfix
clears any float overflow. - The classes --
text-uppercase
,text-lowercase
, andtext-capitalize
transform the text according to the naming convention. - These classes are used for adding margin and padding. The
m
stands for margin and thep
for padding, after that you can add a-
and a value from 1 to 3 in order to add 5, 10 or 15 pixels respectively. You can use the lettersx
,y
,t
,b
,r
orl
between the letter and the-
to specify the side.
m-1 m-2 m-3
mx-1 mx-2 mx-3
my-1 my-2 my-3
mr-1 mr-2 mr-3
ml-1 ml-2 ml-3
p-1 p-2 p-3
px-1 px-2 px-3
py-1 py-2 py-3
pr-1 pr-2 pr-3
pl-1 pl-2 pl-3
Use the class .navbar
to make your navigation bar responsive. You can use .navbar-logo
class to make the logo align and the class navbar-nav
for any other list of links in the navigation bar. The .navbar-toggle
makes the list of navigation bar links disappear and display under the icon toggle on click.
This framework uses a 6-column grid to define the width. It is necessary to specify the row by adding class .row
which makes every child a column. If you want to specify the width, you can add the class .col
followed by -
and varying number from 1 to 6
which proportionates each column with 6
being 100% width. You can also specify the responsiveness of the column by adding small
, medium
, large
, and huge
after the col-
before the 1 to 6
.
col col-small col-medium col-large col-huge
col-1 col-small-1 col-medium-1 col-large-1 col-huge-1
col-2 col-small-2 col-medium col-large col-huge-2
col-3 col-small-3 col-medium col-3-large col-huge-3
col-4 col-small-4 col-medium col-4-large col-huge-4
col-4 col-small-4 col-medium col-4-large col-huge-4
col-6 col-small-6 col-medium col-6-large col-huge-6