hub-front-end-notes

hub-front-end-notes.md

Just a couple notes to keep us on the same page:

• Follow BEM approach to class names (as much as is reasonable without creating extra work for nothing). The benefit of this is making sure that all components are as modular as possible. This means avoiding nested style declarations whenever possible. This doesn’t always make sense, so I’ll give examples of each.

UNNESTED EXAMPLE

Avoid nesting whenever a component could exist anywhere else on the page. Icons are a perfect example, but the general rule should be to lean away from nesting unless it's a completely self contained item with nothing that could be re-used elsewhere.

<div class="hub__navigation">
  <ul>
    <li class="hub__navigation—-item"><a href="#"><i class="hub__icon--home"></i> Home</a></li>
    <li class="hub__navigation—-item"><a href="#"><i class="hub__icon--about"></i> About</a></li>
    <li class="hub__navigation—-item"><a href="#"><i class="hub__icon--contact"></i> Contact</a></li>
  </ul>
</div>

.hub__navigation {
  background-color: $white;
}

.hub__icon--home { ... }
.hub__icon--about { ... }
.hub__icon--contact { ... }

NESTED EXAMPLE

There's no need to create a new class for something unique to this one block...or as simple as a strong tag which we wanted to be blue as well as bold.

<p class="hub__description">This is an <strong>example</strong></p>

.hub__description {
  font-family: Flama-Basic;

  strong {
    font-family: Flama-Bold;
    color: $blue;
  }
}

--------
* **Plan ahead for mobile by coding mobile first or avoiding using defined widths.**

Responsive Example

My approach to mobile has always been to code from the smallest device size and then work your way up. This means that the most general styles will appear first, followed by the overrides that are necessary on larger devices.

$medium: 800px;
$large: 1024px;

.container {
  background-color: $white;
  padding: 0 20px;
  
  @media screen and (min-width: $medium) {
    padding: 0 10%;
  }
  
  @media screen and (min-width: $large) {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
  }
}

--------

• Use sass variables whenever possible...I like to use them for colors, fonts, media queries.

--------
* **Sprites are essential to keeping our load times small, requests count low, and keeping images organized. I'm in love with the sketch plug-in [Sketch CSS Sprite Mixin](https://github.com/littlebusters/Sketch-CSS-Sprite-Mixin)**

Usage example

See the README in the repo for details, but I've found it useful to separate the $icon-spritePath variables at the top of the page since they don't match when you copy the code to your pasteboard. I then delete the new ones after pasting into the sprite.scss file.

List icons in a single sprite

We should definitely separate the marketing site from the dashboard sprite, but otherwise everything can go into a single file. I just discovered that I don't have to create each individual icon and wanted to note this approach for the future. Ask me if it's confusing as I'm not giving much context here.

/* Make a list of icon/image/logo types and loop through them 
to automatically generate the css for each and 
avoid messy code elsewhere. */

$icon-spriteList: $sprite-var-name class-name-appendage, $list-icon list, $logo logo;
@each $icon in $icon-spriteList {
    $icon-spriteName: nth( $icon, 2 );
    $icon-spriteClass: nth( $icon, 1 );
    .h__icon--#{$icon-spriteName} {
      display: inline-block;
        @include cssSprite( $icon-spriteClass );
    }
}