Bootstrap 3.x review

We are based on Bootstrap!!!!! Semantics, reusable, customizable

We are using HTML5 for semantics tags!!!

<article>    Defines an article
<aside>    Defines content aside from the page content
<details>    Defines additional details that the user can view or hide
<figcaption>    Defines a caption for a <figure> element
<figure>    Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>    Defines a footer for a document or section
<header>    Specifies a header for a document or section
<main>    Specifies the main content of a document
<mark>    Defines marked/highlighted text
<nav>    Defines navigation links
<section>    Defines a section in a document
<summary>    Defines a visible heading for a <details> element
<time>    Defines a date/time

Variables:
    colors (grayscale and semantic),
    Scaffolding (bg-color, text-color),
    Links (link-color, link-hover-color)
    Typography (font-family, font-size, line-height, headings)
    Icons (icon-font-path, icon-font-name)
    Components (padding vertical/horizontal, line-height, border-radius, active-color, active-bg, caret-width-base)
    transitions
    animations
    opacity
    placeholder

Mixin: Use mixins, like size(), sizable(), opacity()

color/background color
border
spacing (padding/margin)
font weight (400, 500, 600)
font size (xs, sm, default, md, lg, xl, )
h1-h6
text
floating (pull-left, pull-right)
pull/push
variables (font-size-base, line-height-base)
alignment (text-left, center, right, justify, nowrap) - we need a mx-text-wrap
list (either ul/li, or div/div, list-inline, list-unstyled)
block (p, pre, pre-scrollable)
table
contextual (active, success, info, warning, danger)
forms (form-group, form-control, inline-form, input-group, input-group-addon, form-horizontal, .form-control-static)
input: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color
textarea
checkbox/radio
select
validation states (.has-warning, .has-error, or .has-success)
button: Use the button classes on an <a>, <button>, or <input> element.
button-style:default, primary, success, info,warning, info, danger, link (.btn-block to span the full width of a parent)
accessibility: additional text hidden with the .sr-only class (screen-reader)
utility class: states: active, disabled,
images (img-responsive, center-block, img-rounded, img-circle, img-thumbnail)

Contextual colors
Contextual backgrounds
close
Carets
pull-left/pull-right/navbar-left/navbar-right
center-block
clearfix
show/hidden/invisible (block element, sr-only)
Print classes

Inline text elements (mark, del, s, ins, u, small, strong, em, )

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Sass Basic

Variables
Sass uses the $ symbol to make something a variable

Nesting
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Partials (_partials.scss)
A partial is simply a Sass file named with a leading underscore. This is a great way to modularize your CSS and help keep things easier to maintain.

Import
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. Sass partials are used with the @import directive.

Mixins
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. A good use of a mixin is for vendor prefixes. To create a mixin you use the @mixin directive and give it a name. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Extend/Inheritance
Using @extend lets you share a set of CSS properties from one selector to another.

Operators
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %.

CSS BEM

BEM (Block, Element, Modifier) is a naming convention methodology in CSS. It uess __ (two undercores) for element, and -- (double dashes) for modifier.

/* block component - button */
.btn {}
/* element that depends on the block */
.btn__price {}
/* modifier that changes the state/style of block */
.btn--big {}

In BEM, everything is a class and nothing is nested. That makes CSS specificity very flat and low.

The idea is undoubtedly useful to maintain codes. But personally I don't like -- and __ in class name, probably we can look for some alternatives like using -e- (element) and -m- (modifier). I believe the  consistent naming convention helps understand and maintain css codes.

/* this is a block */
.btn {}
/* price is an element of btn block */
.btn-e-price {}
/* big is a modifier of btn block */
.btn-m-big {}

CSS colors

http://sixrevisions.com/css/css-colors/  is an awesome post to explain the basics of CSS colors.

There are six ways to declare CSS colors:

• Hexadecimal notation
• RGB
• RGBA
• HSL (Hue, Saturation and Lightness)
• HSLA
• Color keywords

transparent Color Keyword
The transparent color keyword is simply a way to say that the color has 0% opacity.

currentColor Color Keyword
The currentColor color keyword is a convenience keyword that just means the color being declared is equal to the CSS color property value.

As we write SASS for CSS, I think it is best practice to use variable and hex color definition.

CSS Preprocessors (Sass, LESS, Stylus)

Background of this post
On May 31st, @verekia gave a talk at SFHTML5 meetup about Deep dive into CSS Preprocessors. I heard of Sass and LESS for quite some time, but could not check them out to understand their syntax, features and flows.Our current project also plans to use LESS in v2.0 for CSS coding. So what is CSS preprocessor, why need CSS preprocessor and what are the main difference among these three great tools?

Fortunately after quick google, I found this great article answering all my questions.
http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

What is CSS Preprocessor?
Preprocessors produce CSS that works in all browsers. They don't enhance CSS, but improve your CSS development workflow. They are tools for better CSS development and maintenance. Sass, LESS, and Stylus are the most popular Preprocessors. They are all great.

Why need CSS Preprocessor?
There are many reasons (use cases) for using CSS preprocessors. For large scale web site development, for modular CSS code structure, for efficient CSS coding,  vendor prefixes, 3D Text, Columns (math + variables for div widths) and so on.

Definitions (copied from official website)
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 extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

Stylus, Expressive, dynamic, robust CSS

What are the differences among Sass, LESS & Stylus?
Language
Sass is written in Ruby
Less and Stylus are written in JS


Syntax
Sass and LESS both use the standard CSS syntax.
The syntax for Stylus is much more verbose, accepts other variations

Variables
$mainColor: #0982c1; - Sass
@mainColor: #0982c1; - LESS
mainColor = #0982c1 - Stylus

Nesting
All three preprocessors have the same syntax for nesting selectors
Don't nest too much (4 levels max)

Mixin
Mixins allow the reuse of properties throughout stylesheet.
@mixin mixinA(), @include mixinA() - Sass
.mixinA() - LESS (there is a dot in the front of mixinA)
mixinA() - Stylus

Function
Functions are a similar construct, only they are typically meant to perform an operation and return a value. All three preprocessors have function and built-in color functions. (see below for more info)
Functions like lighten() return a value
Mixins don't return anything but output CSS

Inheritance
Sass & Style @extend .block
LESS Use mixin, no real inheritance as of today

Importing
@import "file.{type}"; - Sass, LESS & Stylus

Color Functions
lighten(color, 10%); /* returns a color 10% lighter than 'color' */
darken(color, 10%);  /* returns a color 10% darker than 'color' */
saturate(color, 10%);   /* returns a color 10% more saturated than 'color' */
desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */
and more functions

Operations
Doing math in CSS is quite useful, and now fully possible from all three preprocessors
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
}

Comments
When compiling with a CSS preprocessor, any double-slash comment gets removed (e.g. //comment) and any slash-asterisk comment stays (e.g. /* comment */). So after compiling, we need minify CSS.

What tools are for CSS Preprocessors?

There are a bunch of tools and editors to support CSS preprocessors. Different platforms (Windows, Mac OS, Linux) may have different availability. Here are some options, better to check out their website. Codekit, LiveReload, Less.app, Compass.app, Scout, Crunchapp, SimpLess. From google search result, Codekit, Campass seems to be more popular.

Sass: Sass + Compass + FireSass
LESS: there is no similar Compass for LESS, but twitter bootstrap uses LESS
Stylus: Nib + Stylus


Side notes
OOCSS is heavy for DOM but efficient in terms of CSS file size
LESS client is for development purpose only, never use it in production
Recommended blog for Sass: The Sass Way