How to compile SASS to CSS in Compass

Step 1:
Go to http://rubyinstaller.org/ and download ruby.

Step 2:
In the installation when you go through “Installation Destination and Optional Tasks” step you should check the second and third option.

Step 3:
When the installation is finished you should open command prompt(cmd)

Step 4:
Then install  first “gem install compass” second “gem install sass”.

Step6:
Then go to your project folder like: “D:Projects\Content\styles” and create a file “config.rb” and write in the file.

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = ""
sass_dir = ""
images_dir = ""
javascripts_dir = ""

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Step 7:
After all the above is finished
in cmd navigate to that same path where you’ve put the config.rb and just type “compass watch”. it will listen for changes in the scss files

How to extend Bootstrap 3 grid system

Bootstrap 3 is Awesome!!! I am using this in my project, where I am leaving the Bootstrap Scss/less files untouched and I do not want to modified.

But, I am facing some issues… According to the bootstrap 3 documentation, extra small devices Phones (< 768px) grids are horizontal at all times. But, in my project it is (< 768px) too large width for mobile device. So, I am looking for a way to make the mobile grids to become stacked when the screen is smaller than 480px. So I need to extend bootstrap grid system in between 480 > to < 768 and to declare that I have make new class col-ms-* and that will all the facilities like push, pull, offset, responsive width etc.

Let’s follow how to extend bootstrap grid system with Scss way:

/*
    Extend Bootstrap Grid System
    by - Ruhul - UX Engineer at Brain Station-23
*/


/*Make new grid width
ms means Mid Small*/

$screen-ms:                  480px !default;
$screen-ms-min:              $screen-ms !default;
$screen-tablet-mid:          $screen-ms-min !default;


/*So media queries don't overlap when required, provide a maximum*/

$screen-ms-max:              ($screen-sm-min - 1) !default;



/* For `$screen-sm-min` and up.*/

$container-ms:                 100% !default;




/*Using boostrap loop Framework grid generation*/


@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-ms-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-ms-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ($grid-gutter-width / 2);
    padding-right: ($grid-gutter-width / 2);
  }
}



/* [converter] This is defined recursively in LESS, but Sass supports real loops*/
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
}


@mixin calc-grid-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .col-#{$class}-#{$index} {
      width: percentage(($index / $grid-columns));
    }
  }
  @if ($type == push) and ($index > 0) {
    .col-#{$class}-push-#{$index} {
      left: percentage(($index / $grid-columns));
    }
  }
  @if ($type == push) and ($index == 0) {
    .col-#{$class}-push-0 {
      left: auto;
    }
  }
  @if ($type == pull) and ($index > 0) {
    .col-#{$class}-pull-#{$index} {
      right: percentage(($index / $grid-columns));
    }
  }
  @if ($type == pull) and ($index == 0) {
    .col-#{$class}-pull-0 {
      right: auto;
    }
  }
  @if ($type == offset) {
    .col-#{$class}-offset-#{$index} {
      margin-left: percentage(($index / $grid-columns));
    }
  }
}

/* [converter] this is defined recursively in less, but sass supports real loops*/

@mixin loop-grid-columns($columns, $class, $type) {
  @for $i from 0 through $columns {
    @include calc-grid-column($i, $class, $type);
  }
}


/*create grid for specific class*/
@mixin make-grid($class) {
  @include float-grid-columns($class);
  @include loop-grid-columns($grid-columns, $class, width);
  @include loop-grid-columns($grid-columns, $class, pull);
  @include loop-grid-columns($grid-columns, $class, push);
  @include loop-grid-columns($grid-columns, $class, offset);
}



/*Generate the small columns*/
@mixin make-ms-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);

  @media (min-width: $screen-ms-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
}
@mixin make-ms-column-offset($columns) {
  @media (min-width: $screen-ms-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
}
@mixin make-ms-column-push($columns) {
  @media (min-width: $screen-ms-min) {
    left: percentage(($columns / $grid-columns));
  }
}
@mixin make-ms-column-pull($columns) {
  @media (min-width: $screen-ms-min) {
    right: percentage(($columns / $grid-columns));
  }
}



/*Custom grid*/
.container{
    @media (min-width: $screen-ms-min) {
    width: $container-ms;
  }
}
  

@media (min-width: $screen-ms-min) {
  @include make-grid(ms);
}

This extend grid file should declare in main scss file. like:

// Core variables and mixins

@import "bootstrap/variables";
@import "bootstrap/mixins";


// Bootstrap Grid Extend
@import "extend-grid/bootstrap-grid-extend";

In normal css file it will looks like:

/*
    Extend Bootstrap Grid System
    by - Ruhul - UX Engineer at Brain Station-23
*/
/*Make new grid width
ms means Mid Small*/
/*So media queries don't overlap when required, provide a maximum*/
/* For `$screen-sm-min` and up.*/
/*Using boostrap loop Framework grid generation*/
/* [converter] This is defined recursively in LESS, but Sass supports real loops*/
/* [converter] this is defined recursively in less, but sass supports real loops*/
/*create grid for specific class*/
/*Generate the small columns*/
/*Custome grid*/
@media (min-width: 480px) {
  .container {
    width: 100%;
  }
}

@media (min-width: 480px) {
  .col-ms-1, .col-ms-2, .col-ms-3, .col-ms-4, .col-ms-5, .col-ms-6, .col-ms-7, .col-ms-8, .col-ms-9, .col-ms-10, .col-ms-11, .col-ms-12 {
    float: left;
  }
  .col-ms-1 {
    width: 8.33333%;
  }
  .col-ms-2 {
    width: 16.66667%;
  }
  .col-ms-3 {
    width: 25%;
  }
  .col-ms-4 {
    width: 33.33333%;
  }
  .col-ms-5 {
    width: 41.66667%;
  }
  .col-ms-6 {
    width: 50%;
  }
  .col-ms-7 {
    width: 58.33333%;
  }
  .col-ms-8 {
    width: 66.66667%;
  }
  .col-ms-9 {
    width: 75%;
  }
  .col-ms-10 {
    width: 83.33333%;
  }
  .col-ms-11 {
    width: 91.66667%;
  }
  .col-ms-12 {
    width: 100%;
  }
  .col-ms-pull-0 {
    right: auto;
  }
  .col-ms-pull-1 {
    right: 8.33333%;
  }
  .col-ms-pull-2 {
    right: 16.66667%;
  }
  .col-ms-pull-3 {
    right: 25%;
  }
  .col-ms-pull-4 {
    right: 33.33333%;
  }
  .col-ms-pull-5 {
    right: 41.66667%;
  }
  .col-ms-pull-6 {
    right: 50%;
  }
  .col-ms-pull-7 {
    right: 58.33333%;
  }
  .col-ms-pull-8 {
    right: 66.66667%;
  }
  .col-ms-pull-9 {
    right: 75%;
  }
  .col-ms-pull-10 {
    right: 83.33333%;
  }
  .col-ms-pull-11 {
    right: 91.66667%;
  }
  .col-ms-pull-12 {
    right: 100%;
  }
  .col-ms-push-0 {
    left: auto;
  }
  .col-ms-push-1 {
    left: 8.33333%;
  }
  .col-ms-push-2 {
    left: 16.66667%;
  }
  .col-ms-push-3 {
    left: 25%;
  }
  .col-ms-push-4 {
    left: 33.33333%;
  }
  .col-ms-push-5 {
    left: 41.66667%;
  }
  .col-ms-push-6 {
    left: 50%;
  }
  .col-ms-push-7 {
    left: 58.33333%;
  }
  .col-ms-push-8 {
    left: 66.66667%;
  }
  .col-ms-push-9 {
    left: 75%;
  }
  .col-ms-push-10 {
    left: 83.33333%;
  }
  .col-ms-push-11 {
    left: 91.66667%;
  }
  .col-ms-push-12 {
    left: 100%;
  }
  .col-ms-offset-0 {
    margin-left: 0%;
  }
  .col-ms-offset-1 {
    margin-left: 8.33333%;
  }
  .col-ms-offset-2 {
    margin-left: 16.66667%;
  }
  .col-ms-offset-3 {
    margin-left: 25%;
  }
  .col-ms-offset-4 {
    margin-left: 33.33333%;
  }
  .col-ms-offset-5 {
    margin-left: 41.66667%;
  }
  .col-ms-offset-6 {
    margin-left: 50%;
  }
  .col-ms-offset-7 {
    margin-left: 58.33333%;
  }
  .col-ms-offset-8 {
    margin-left: 66.66667%;
  }
  .col-ms-offset-9 {
    margin-left: 75%;
  }
  .col-ms-offset-10 {
    margin-left: 83.33333%;
  }
  .col-ms-offset-11 {
    margin-left: 91.66667%;
  }
  .col-ms-offset-12 {
    margin-left: 100%;
  }
}

Thank you for reading the article. I hope this will help you :)

Have a great day :) Stay touch!

HTML5 reset css

HTML5 reset css by html5doctor :)

Minified Version

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

Normal Version

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

source from:

html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
Richard Clark (http://richclarkdesign.com)
http://cssreset.com