Differences

This shows you the differences between two versions of the page.

--- webdesign:html5 [2015/05/17 00:43] – [Create custom style for bootstrap with less] admin
+++ webdesign:html5 [2016/01/14 04:29] (current) – removed admin
@@ Line 1: / Line 1: @@
-====== HTML5 ======
-===== Understand about HTML5 =====
-==== HTML5 Browser Support ====
-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.
-===== Javascript tools =====
-==== npm(package manager for javascript...) ====
-refer: https://www.npmjs.com/
-==== bower(package manager for the web) ====
-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<code bat>
-npm install -g bower
-</code>
-  * Using bower to search all libraries which contain the word **"jquery"**:<code bat>
-bower search jquery
-</code>output<code>
-...............................
-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
-...............................
-</code>
-  * Create bower.json from **bower_components** in project<code bat>
-bower init
-</code>
-  * Install all packages which were configured in bower.json to **bower_components**<code bat>
-bower install
-</code>
-  * Install single package to your project(You must **install git** before run **bower install**):<code bat>
-bower install <package>
-</code>For example:<code bat>
-bower install good-form
-</code>
-==== Grunt(Javascript Task Runner) ====
-refer: http://gruntjs.com/
-==== Node.js ====
-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.
-==== Dust ====
-refer: http://akdubya.github.io/dustjs/
-===== CSS tools =====
-==== Sass(CSS pre-processor which wroten with Ruby Language) ====
-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**.
-==== Less(CSS pre-processor which wroten with Javascript Language) ====
-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:<code bat>
-npm install -g less
-</code>
-Compile less file to css:<code bat>
-lessc styles.less > styles.css
-</code>
-Basic about less language:
-  * Variables: less content<code javascript>
-@nice-blue: #5B83AD;
-@light-blue: @nice-blue + #111;
-#header {
-  color: @light-blue;
-}
-</code>output:<code css>
-#header {
-  color: #6c94be;
-}
-</code>
-  * 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:<code css>
-.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;
-}
-</code>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**:<code css>
-#header {
-  color: black;
-}
-#header .navigation {
-  font-size: 12px;
-}
-#header .logo {
-  width: 300px;
-}
-</code>In **Less**, we can also write it this way:<code css>
-#header {
-  color: black;
-  .navigation {
-    font-size: 12px;
-  }
-  .logo {
-    width: 300px;
-  }
-}
-</code> 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):<code css>
-.clearfix {
-  display: block;
-  zoom: 1;
-  &:after {
-    content: " ";
-    display: block;
-    font-size: 0;
-    height: 0;
-    clear: both;
-    visibility: hidden;
-  }
-}
-</code>
-==== Compat Framework ====
-refer: http://compass-style.org/
-==== css to less ====
-refer:
-  * http://css2less.cc/
-  * https://github.com/jonschlinkert/grunt-refactor
-  * https://github.com/thomaspierson/libcss2less
-  * https://github.com/sickill/css2less
-===== Bootstrap =====
-refer:
-  * http://getbootstrap.com/
-  * http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
-  * http://slicejack.com/bootstrap-with-less-workflow/
-  * http://www.lavishbootstrap.com/
-Bootstrap is the most popular **HTML, CSS, and JS framework** for developing responsive, mobile first projects on the web
-==== Build bootstrap from source with gruntjs ====
-=== Install some basic tool before build ===
-  - Step1: Install **npm** tool by **install nodejs** to d:\tools\nodejs
-  - Step2: Install **grunt**(Package Manager for Javascript):<code bat>
-npm install -g grunt-cli
-</code>
-=== Build Bootstrap ===
-  - Step1: Navigate to the **root /bootstrap/ directory**, then run below command:<code bat>
-npm install
-</code> => npm will look at the **package.json** file and **automatically install the necessary local dependencies listed there**
-  - Step2: Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files<code bat>
-grunt dist
-</code>
-==== Create custom style ====
-You can create a **custom navbar class**(navbar-custom), and then reference it to **change the navbar without impacting other Bootstrap navbars**..
-<code html>
-<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>
-</code>
-CSS
-<code 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;
-}
-</code>
-==== Create custom style for bootstrap with less ====
-=== Advantages of this method ===
-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
-=== Steps by steps ===
-We **create the new less file** and using **less tool** to rebuild new less file
-  - Step1: Create **style.less** which import **bootstrap** and other changes in **nav.less, header.less, footer.less**<code javascript>
-@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";
-</code>
-  - Step2: create files **variables.less, mixins.less, nav.less, header.less, footer.less** which contain your changes
-  - Step3: Using less tool to compile style.css<code bat>
-lessc style.less > style.css
-</code>
-==== Themes for bootstrap ====
-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/
-==== Build less file in bootswatch ====
-Create below script to build all less file in bootswatch(Base on https://github.com/no-dice/django-bootstrap-themes):<code bash>
-#!/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
-</code>
-===== Javascript Resources which support for designer =====
-==== Respond.js ====
-Respond.js: https://github.com/scottjehl/Respond
-==== Modernizr ====
-Modernizr – http://modernizr.com/
-===== UI Kits =====
-==== Flat UI ====
-refer:
-  * http://designmodo.github.io/Flat-UI/docs/getting-started.html
-  * https://github.com/designmodo/Flat-UI
-==== Boot Flat ====
-refer:
-  * http://bootflat.github.io/
-  * https://github.com/bootflat/bootflat.github.io