Code samples and standards

User Interface Developer - Designer:

*Note, I have been doing this way too long.

Whatever standards are used they should be enforced before being pushed to production, preferably with every code checkin..

• CSS = scss
• HML = HTML5
• Media = responsive images & videos, webfonts, SVG
• Js = meteor, react, angular

Write pragmatic testable code 👍

HTML = Hipster Markup Language

Keep structure as simple as possible;

<!-- no comments needed -->
<menu>
  <a> Just use d for div and s for span. </a>
  <a> That is <s class="strong">all</s>. </a>
</menu>

Instead of;

<menu class="Menu">
  <ul>
      <li>
          <a class="link">
              Just use d for div and s for span.
          </a>
      </li>
      <li>
          <a class="link">
              That is <span class="strong">all</span>.
          </a>
      </li>
  </ul>
</menu>

CSS is a deceptively simple language, use but don't abuse the cascade

Use as few variables as possible but, use them. Use css classes for everything and nest as shallowly as possible.

$primary: #f00; $secondary: #f55; $tertuary: #f99;
$padding: 10px; $margin: 10px; $border: 1px solid #000;

menu {
  a {
    color: $primary;
      &:hover {
      color: lighten($primary, 10);
    }
  }
}

CSS naming conventions and libraries

• Use autoprefixer =>
• Use a normalize => normalize
• Use sensible naming conventions => semanticUI

Use some sort of CSS library like Bootstrap. At the least the grids, at the most everything. You get responsive out of the box and it is thoroughly tested

CSS optimization

Use @extend to compose css without bloat or deep cascade and multiple overrides

Other code standards to check out..

• HTML/CSS => twitter's guide

Other stuff to right click on..

• simpl => My css framework before there was bootstrap
• portfolio => My portfolio
• portfolio2 => My portfolio in black
• portfolio hidden => evil flash