refer:

• http://www.w3schools.com/html/html5_browsers.asp

HTML5 browser support:

• HTML5 is supported in all modern browsers.
• In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements. Because of this, you can “teach” old browsers to handle “unknown” HTML elements.→for example: You can even teach stone age IE6 (Windows XP 2001) how to handle unknown HTML elements.

refer: https://www.npmjs.com/

refer: http://bower.io/ Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

• Install bower

  npm install -g bower

• Using bower to search all libraries which contain the word “jquery”:

  bower search jquery

  output

  ...............................
  jquery-autogrow-textarea git://github.com/bensampaio/jquery.autogrow.git
  jquery-formchecker git://github.com/eborio/jquery-formchecker.git
  inview-jquery-plugin git://github.com/vasanthk/InView-jQuery-Plugin.git
  good-form git://github.com/foundation-mts/jquery.form.js.git
  jquery-fivehundredpx git://github.com/denkfabrik-neueMedien/jquery-fivehundredpx.git
  ...............................

• Create bower.json from bower_components in project

  bower init

• Install all packages which were configured in bower.json to bower_components

  bower install

• Install single package to your project(You must install git before run bower install):

  bower install <package>

  For example:

  bower install good-form

refer: http://gruntjs.com/

refer: https://nodejs.org/ Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

refer: http://akdubya.github.io/dustjs/

refer:

• http://sass-lang.com/guide
• http://sass-lang.com/

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

refer:

• http://lesscss.org/
• less editor: http://crunchapp.net/

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Less(less.js) runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.

Install less:

npm install -g less

Compile less file to css:

lessc styles.less > styles.css

Basic about less language:

• Variables: less content

  @nice-blue: #5B83AD;
  @light-blue: @nice-blue + #111;
   
  #header {
    color: @light-blue;
  }

  output:

  #header {
    color: #6c94be;
  }

• Mixins:Mixins are a way of including (“mixing in”) a bunch of properties from one rule-set into another rule-set. So say we have the following class:

  .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
  }And we want to **use these properties inside other rule-sets**. Well, we just have to drop in the name of the class where we want the properties, like so:<code css>
  #menu a {
    color: #111;
    .bordered;
  }
   
  .post a {
    color: red;
    .bordered;
  }

  The properties of the .bordered class will now appear in both #menu a and .post a. (Note that you can also use #ids as mixins.)

• Nested rules: Less gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:

  #header {
    color: black;
  }
  #header .navigation {
    font-size: 12px;
  }
  #header .logo {
    width: 300px;
  }

  In Less, we can also write it this way:

  #header {
    color: black;
    .navigation {
      font-size: 12px;
    }
    .logo {
      width: 300px;
    }
  }

  The resulting code is more concise, and mimics the structure of your HTML. You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (& represents the current selector parent):

  .clearfix {
    display: block;
    zoom: 1;
   
    &:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }

refer: http://compass-style.org/

refer:

• http://css2less.cc/
• https://github.com/jonschlinkert/grunt-refactor
• https://github.com/thomaspierson/libcss2less
• https://github.com/sickill/css2less

refer:

• http://getbootstrap.com/
• http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
• http://slicejack.com/bootstrap-with-less-workflow/
• http://www.helloerik.com/bootstrap-3-grid-introduction
• http://www.lavishbootstrap.com/

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web

1. Step1: Install npm tool by install nodejs to d:\tools\nodejs
2. Step2: Install grunt(Package Manager for Javascript):

   npm install -g grunt-cli

1. Step1: Navigate to the root /bootstrap/ directory, then run below command:

   npm install

   ⇒ npm will look at the package.json file and automatically install the necessary local dependencies listed there

2. Step2: Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files

   grunt dist

You can create a custom navbar class(navbar-custom), and then reference it to change the navbar without impacting other Bootstrap navbars..

<nav class="navbar navbar-custom">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...
    </button>
    <a class="navbar-brand" href="#">Title</a>
  </div>
   ...
</nav>

CSS

.navbar-custom {
    background-color:#229922;
    color:#ffffff;
    border-radius:0;
}
 
.navbar-custom .navbar-nav > li > a {
    color:#fff;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color:transparent;
}
.navbar-custom .navbar-brand {
    color:#eeeeee;
}

Using Less, especially with Bootstrap 3, gives you a few advantages that really make it a awesome choice

Advantages of less language:

• Changing variables in one place can have wide-reaching effects, for super easy global customization
• Augment, shift, and change existing styles and variables, or roll your own
• Componentization. You can break your Less up into smaller files for very easy editing and separation, great for applications where you’re using version control like GitHub

Advantages of importing bootstrap.less:

• Have a clean, customized singular CSS file
• You can easily comment out any part of Bootstrap you don’t need or want, right down to the single line
• Easily override Bootstrap variables/mixins/classes with your own
• We can easily reused the variables and mixins of bootstrap in new styles, for example

  .main-content {
    .make-row();
    .sidebar {
      padding: 20px;
      @media(min-width: @screen-desktop) {
        padding: 30px;
      }
      h2 {
        font-size: 20px;
        @media(min-width: @screen-desktop) {
          font-size: 30px
        }
      }
      .make-sm-column(2);
      .make-md-column(3);
    }
    .content-area {
      line-height: 1.2em;
      @media(min-width: @screen-desktop) {
        line-height: 1.6em;
      }
      h1 {
        font-size: 30px;
        @media(min-width: @screen-desktop) {
          font-size: 40px;
        }
      }
      .make-sm-column(10);
      .make-md-column(9);
    }
  }

We create the new less file and using less tool to rebuild new less file

1. Step1: Create style.less which import bootstrap and other changes in nav.less, header.less, footer.less

   @import "bootstrap/bootstrap.less";
   @import "font-awesome/font-awesome.less";
    
   @import "variables.less";
   @import "mixins.less";
   @import "nav.less";
   @import "header.less";
   @import "footer.less";

2. Step2: create files variables.less, mixins.less, nav.less, header.less, footer.less which contain your changes
3. Step3: Using less tool to compile style.css

   lessc style.less > style.css

refer: http://slicejack.com/bootstrap-with-less-workflow/

refer:

• http://bootswatch.com/: https://github.com/thomaspark/bootswatch
• http://www.bootstrapzero.com/: https://github.com/iatek/bootstrap-zero
• http://wrapbootstrap.com/
• https://github.com/no-dice/django-bootstrap-themes
• http://builtwithbootstrap.com/
• http://startbootstrap.com/
• http://bootsnipp.com/

Create below script to build all less file in bootswatch(Base on https://github.com/no-dice/django-bootstrap-themes):

#!/bin/sh
 
set -e
 
cd bootstrap_themes/static/bootstrap/themes
for theme in *; do
  if [ -d "$theme" ]; then
    mkdir -p "$theme/css"
    lessc "$theme/less/bootstrap.less" > "$theme/css/bootstrap.css"
    recess --compress "$theme/css/bootstrap.css" > "$theme/css/bootstrap.min.css"
  fi
done

Respond.js: https://github.com/scottjehl/Respond

Modernizr – http://modernizr.com/

refer:

• http://designmodo.github.io/Flat-UI/docs/getting-started.html
• https://github.com/designmodo/Flat-UI

refer:

• http://bootflat.github.io/
• https://github.com/bootflat/bootflat.github.io