tddewey

<header class="header header--mobile">
  <nav class="header-nav">
    <a href="#">hello</a>
  </nav>
</header>

<header class="header-block -mobile">
  <nav class="nav">
    <a href="#">hi</a>
  </nav>

tddewey

// ----
// libsass (v3.2.5)
// ----

.header {
  // mobile modifier
  &--mobile {
    background: red;
  }

tddewey

<?php

/**
 * Handle the CPT and related things for the featured items CPT
 *
 * Example of how this UI looks:
 * https://cloudup.com/c3KSu4DhA-M
 * https://cloudup.com/cj1lZPzRLcq
 * 
 * Class GL_Featured_Items

tddewey

/**
 * Path to where the icomoon icon font is housed
 * Used to make the @font-face rule a bit easier to manipulate should the directory structure need to change
 * @access private
 * @group fonts
 */
$icomoon-root: 'fonts/icomoon/fonts/icomoon';

@font-face {
	font-family: 'icomoon';

tddewey

body {
    font-size: 2em;
    max-width: 400px;
}

a {
  color: 3e7ded;
  text-shadow:
    1px 1px 0 #fff,
    -1px 1px 0 #fff,

tddewey

<div></div>

tddewey

// optical-center
//
// Provide this mixin a padding value that you might normally apply equally to
// top and bottom padding on an element (e.g. so its contents are centered).
//
// It will, instead, give a bit more padding to the bottom and a bit less to the top so
// the element appears optically centered and takes up the same amount of room.
//
// The amount of padding that goes to the bottom vs the top is controlled by a second
// $ratio parameter that defaults to 1.3

tddewey

<header role="banner">
  <h1>This Headline
  <span>is optically centered</span></h1>
</header>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt velit massa, sit amet interdum dui tincidunt quis. Aenean at malesuada nibh. Nam sed lectus eros. Sed lacus magna, aliquam eu hendrerit in, rutrum vel quam. In congue iaculis velit et dignissim. Sed blandit laoreet justo vitae congue. Sed tellus velit, iaculis eget iaculis viverra, feugiat sit amet velit. In congue eros vel ipsum euismod dictum. Proin risus justo, facilisis vitae sodales vitae, volutpat at massa. Donec tincidunt purus in dapibus gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent nec libero hendrerit, cursus erat quis, facilisis sapien.
</p>

tddewey

<ul>
  <li class="max">Max</li>
  <li class="bus">Bus</li>
  <li class="streetcar">Streetcar</li>
  <li class="bicycle">Bicycle</li>
</ul>

tddewey

<header role="banner">
  <h1>This Headline
  <span>is optically centered</span></h1>
</header>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt velit massa, sit amet interdum dui tincidunt quis. Aenean at malesuada nibh. Nam sed lectus eros. Sed lacus magna, aliquam eu hendrerit in, rutrum vel quam. In congue iaculis velit et dignissim. Sed blandit laoreet justo vitae congue. Sed tellus velit, iaculis eget iaculis viverra, feugiat sit amet velit. In congue eros vel ipsum euismod dictum. Proin risus justo, facilisis vitae sodales vitae, volutpat at massa. Donec tincidunt purus in dapibus gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent nec libero hendrerit, cursus erat quis, facilisis sapien.
</p>