Monday, January 4, 2016

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).

No comments:

Post a Comment