Skip to content

Instantly share code, notes, and snippets.

@chhuang chhuang/
Last active Sep 16, 2016

What would you like to do?
CSS fundamentals

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

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;


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


Custom grid gutter

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

  <div class="row u-grid-gutter--lg">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.