Differences

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

--- webdesign:html5 [2015/11/07 15:14] – [css to 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/
-Install:
-  * http://sass-lang.com/install
-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**.
-Install sass with ruby:
-  - Step1: download and install Ruby from http://rubyinstaller.org/
-  - Step2: install sass with gem tool:<code bat>
-gem install sass
-gem install compass
-</code>
-Using sass:
-  * display options of sass command:<code bat>
-sass --help
-</code>
-  * compile sass to css:<code bat>
-sass input.scss output.css
-</code>
-  * compass help:<code bat>
-compass --help
-</code>output<code>
-Primary Commands:
-  * clean       - Remove generated files and the sass cache
-  * compile     - Compile Sass stylesheets to CSS
-  * create      - Create a new compass project
-  * init        - Add compass to an existing project
-  * watch       - Compile Sass stylesheets to CSS when they change
-</code>
-  * Using compass to compile sass to css(base on **config.rb** file):<code bat>
-compass compile
-</code>
-Install User-defined language scss to edit with **notepad++** :
-  - Step1: download user-defined language for scss from https://github.com/marvinlabs/notepad-plus-plus-scss-syntax-highlighting
-  - Step2: Go to **Language->Define Your Language** to import 2 xml files
-  - Step3: go to your Notepad++ folder then to **plugins/APIs/** and duplicate the **css.xml** and rename this file to **SCSS-Light.xml or SCSS-Dark.xml**
-==== 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
-==== intern ====
-refer: https://github.com/theintern/intern
-===== Bootstrap =====
-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
-==== 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, for example<code css>
-.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);
-  }
-}
-</code>
-=== Custom css with less file which don't change variables of bootstrap.less ===
-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>
-=== Custom css with less file and change variables of bootstrap.less ===
-refer: http://slicejack.com/bootstrap-with-less-workflow/
-  - Step1: create custom-variables.less:<code javascript>
-// Single primary color that all mixins use. Str8 ballin.
-@primary:        hsl(202, 100%, 50%);
-// Primary Variants -
-@primaryLight:   hsl(hue(@primary), 100%, 70%);
-@primaryDark:    hsl(hue(@primary), 60%, 40%);
-@primaryFaded:   hsl(hue(@primary), 60%, 65%);
-// 180degree Variants
-@variant:         spin((@primary), 180);
-@variantLight:    hsl(hue(@variant), 100%, 70%);
-@variantDark:     hsl(hue(@variant), 60%, 40%);
-@variantFaded:    hsl(hue(@variant), 60%, 65%);
-// 90degree Variants
-@corner:         spin((@primary), 70);
-@cornerLight:    hsl(hue(@corner), 100%, 70%);
-@cornerDark:     hsl(hue(@corner), 60%, 40%);
-@cornerFaded:    hsl(hue(@corner), 60%, 65%);
-</code>
-  - Step2: create **styles.less** which import **custom-variables.less** and other less files of bootstrap(We create this file by **editing  content of bootstrap.less**):<code javascript>
-// Core variables and mixins
-@import "boostrap/variables.less";
-@import "boostrap/custom-variables.less";
-@import "boostrap/mixins.less";
-// Reset and dependencies
-@import "boostrap/normalize.less";
-@import "boostrap/print.less";
-@import "boostrap/glyphicons.less";
-// Core CSS
-@import "boostrap/scaffolding.less";
-@import "boostrap/type.less";
-@import "boostrap/code.less";
-@import "boostrap/grid.less";
-@import "boostrap/tables.less";
-@import "boostrap/forms.less";
-@import "boostrap/buttons.less";
-// Components
-@import "boostrap/component-animations.less";
-@import "boostrap/dropdowns.less";
-@import "boostrap/button-groups.less";
-@import "boostrap/input-groups.less";
-@import "boostrap/navs.less";
-@import "boostrap/navbar.less";
-@import "boostrap/breadcrumbs.less";
-@import "boostrap/pagination.less";
-@import "boostrap/pager.less";
-@import "boostrap/labels.less";
-@import "boostrap/badges.less";
-@import "boostrap/jumbotron.less";
-@import "boostrap/thumbnails.less";
-@import "boostrap/alerts.less";
-@import "boostrap/progress-bars.less";
-@import "boostrap/media.less";
-@import "boostrap/list-group.less";
-@import "boostrap/panels.less";
-@import "boostrap/responsive-embed.less";
-@import "boostrap/wells.less";
-@import "boostrap/close.less";
-// Components w/ JavaScript
-@import "boostrap/modals.less";
-@import "boostrap/tooltip.less";
-@import "boostrap/popovers.less";
-@import "boostrap/carousel.less";
-// Utility classes
-@import "boostrap/utilities.less";
-@import "boostrap/responsive-utilities.less";
-</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