Install sass and compass if not installed
gem install sass
gem install compass
Config Rb file
require 'susy'
require 'breakpoint'
require 'compass/import-once/activate'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true
Style.scss file
@import "compass";
@import "compass/reset";
@import "susy";
@import "breakpoint";
grid.scss file
$susy: (
flow: ltr, // ltr | rtl
output: float, // float | isolate
math: fluid, // fluid | static (requires column-width)
column-width: false, // false | value
container:auto, // length or % | auto
container-position: center, // left | center | right | <length> [*2] (grid padding)
last-flow: to,
columns: 12,
gutters: 1/4,
gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
global-box-sizing: border-box, // content-box | border-box (affects inside/inside-static)
debug: (
image: show,
color: rgba(#656, .25),
output: background,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
// using different layouts
$gallery_layout: layout(12 .125 fluid float after);
$nav_layout: layout(12 0 fluid float inside);
$golden_layout: layout(1 1.318 2.618) .0 fluid float outside);
This is good to have to have your images fit inside the container
img{
width:100%;
height: auto
}
Include this for the border box sizing
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}