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