Quickly cook up a new website with Griddle, a small responsive css framework. Griddle is lightweight standing at around 11kb including normalize.css.
Check out the repository on github.
Current list of tested and supported browsers
A prebuilt version of Griddle with default settings can be found in the build folder, you can create a custom build from the supplied SASS file.
To build a custom version of Griddle you can use the original SASS file along with the provided gulpfile to build the css file. You can adjust the amount of columns, breakpoints, gutters and more.
You can create a custom build using the following steps
The responsive grid can be set to any number of columns by specifying the $columns(default 8) variable before building the sass file and has options for different column widths depending on screen size.
The grid will also allow us to push columns accross the row by adding the push-* to class, this will push the column along by the amount of columns specified.
Turning off responsiveness: If don't want to use the responsive elements of the grid this can be turned off by setting the SASS variable $isResponsive to false and creating a new build.
The default grid for larger resolutions, the grid will stack below the $large breakpoint.
4
4
5
3
6
2
7
1
8
4 col push 2
2 col push 0
2 col push 4
The default grid for medium, the grid will stack below the $small breakpoint.
4
4
5
3
6
2
7
1
8
4 col push 2
2 col push 0
2 col push 4
The default grid for smaller resolutions.
4
4
5
3
6
2
7
1
8
4 col push 2
2 col push 0
2 col push 4
Hide and show elemented based on screen resolution.
hide-for-*
show-for-*
Visible on small screens.
Visible on medium screens.
Visible on small and medium screens.
Visibile on medium and up screens.
Visibile on large screens.
Visible on small screens.
Visible on medium screens.
Visible on small and medium screens.
Visibile on medium and up screens.
Visibile on large screens.
Panels are used to draw the users attention, they can be in situations such as warning messages or highlighting specific information.
This is the default style panel
It's designed to draw a users attention
This is the bland style panel
This is the success style panel
This is the warn style panel
This is the default style panel
It's designed to draw a users attention
This is the bland style panel
This is the success style panel
This is the warn style panel
Basic navigation components are provided in the form of a top bar nav and a side nav, the top nav can become a fix navigation by adding the class fixed.