- Use soft tabs (2 spaces) for indentation
- Do not use ID selectors
- Use a mix of Single-Line and Multi-Line for CSS properties
/* If there is only 1 property, use one-liner */
.footer { background: #fff; }
/* If there are more than 1 property, use multi-line */
.footer {
background: #fff;
color: #000;
}
- When using multiple selectors in a rule declaration, give each selector its own line, unless ALL seletors' names have less than 3 characters
.header,
.footer,
.side-bar { background: #fff; }
.h1, .h2, .h3, .h4, .h5, .h6 { font-size: 2rem; }
- Put a space before the opening brace { in rule declarations
- In properties, put a space after, but not before, the
:
character - Put blank lines between rule declarations
- High Performance Animations
transform
vstransition
vstranslate
transform
andtransition
are CSS properties,translate
is a property's value oftransform
transform
can also be a value oftransition
transform
changes an element (make it bigger, rotate it, move it around)transition
givestransform
some nice animation effecttransform
doesn't work on inline elements
.box {
transform: translate(10px, 10px);
transition: transform 1s;
}
Alwasy use $link-color
and $link-hover-color
. Don't use $brand-info
.
Default links:
color: $link-color
hover: $link-hover-color
Grey link:
color: $brand-grey-light
hover: $link-color
Set a custom gutter for our grids adding .u-grid-gutter-lg
to .row
.
<div class="row u-grid-gutter--lg">