CSS fundamentals

css.md

CSS Formatting

• 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

CSS Animation

• High Performance Animations
• transform vs transition vs translate
  • transform and transition are CSS properties, translate is a property's value of transform
  • transform can also be a value of transition
  • transform changes an element (make it bigger, rotate it, move it around)
  • transition gives transform some nice animation effect
  • transform doesn't work on inline elements

  .box { 
    transform: translate(10px, 10px);
    transition: transform 1s;
  }

Links

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

Utilities

Custom grid gutter

Set a custom gutter for our grids adding .u-grid-gutter-lg to .row.

  <div class="row u-grid-gutter--lg">