The StatSheet Frameless CSS framework is based on the frameless grid. We have a responsive and non-responsive version of the grid.
This particular framework utilizes a 12 column grid for the desktop version and portrait tablet, a 4 column grid for a landscape mobile device and a 2 column grid for a portrait mobile device.
When shrinking from a larger grid to a smaller grid, any column greater than the max grid level for that layout be shrunk to the size of the max grid size...
Sample code:
This is how the sample code snippet above would translate as a responsive template:
DESKTOP VERSION |----|----|----|----|----------------|--------|--------| | 1 | 1 | 1 | 1 | 4 | 2 | 2 | |----|----|----|----|----------------|--------|--------|
TABLET VERSION |---|---|---|---|------------|------|------| | 1 | 1 | 1 | 1 | 4 | 2 | 2 | |---|---|---|---|------------|------|------|
LANDSCAPE MOBILE |---|---|---|---| | 1 | 1 | 1 | 1 | |---|---|---|---| | 4 | |-------|-------| | 2 | 2 | |-------|-------|
PORTRAIT MOBILE |---|---| | 1 | 1 | |---|---| | 1 | 1 | |---|---| | 4 | |-------| | 2 | |-------| | 2 | |-------|
The css files included are:
- frameless.scss
Responsive Sass - frameless.css
Responsive Grid<- you will never need to edit this file - frameless_default.css
- print.css
- reset.css
- style.css
- style_r.css
Responsive styles
Every grid must be inside a container with the class wrapper. This wrapper will center the grid and make it the appropriate width:
Every column should have two classes... col and col# where # is replaced with a number between 1 and 12
col# determines the width of the column.
Every column has a 10 pixel margin on the left and the right. These margins can cause layout probelms if you have nested columns like this:
This presents a tiny issue... every nested column will add more padding to the container column. We can account for this by getting rid of the left or right padding of a column by adding the class alpha or omega respectively. These naming conventions were adopted from the widely popular 960 Grid System.
So the correct way to do nesting would be as follows:
That way, we get rid of the excess margins on the first and last elements of the nested columns.
The following classes will allow you to hide/show certain elements in specific layouts. These styles will only work on the responsive version of the grid.
-
.show-default-- Will only display element in the desktop version -
.show-tablet-- Will only display element on a portrait tablet -
.show-mobile-wide-- Will only display element on a landscape mobile device -
.show-mobile-- Will only display element on a mobile device (Landscape or Portrait) -
.hide-default-- Will hide element in the desktop version only -
.hide-tablet-- Will hide element on a portrait tablet only -
.hide-mobile-wide-- Will hide element on a landscape mobile device only -
.hide-mobile-- Will hide element on a mobile device only (Landscape or Portrait)
These styles can come in handy:
The code above would show the banner ad on a desktop and tablet only and hide it on a mobile device.
CSS3 media queries are useful for setting specific styling for elements on specific devices. If the conditional classes discussed in the previous section aren't enough, you can add more specific styling in the style_r.css file under the appropriate media query:
The snippet above would replace the background image for the #logo div on a mobile device.