The past

or “how many pages is it?”

Don't discuss pages, discuss modules

Related subjects

but not for today

Web Components

Bower

JS Frameworks and patterns

The design process

Modularization starts from the design

Modular composition

Building the legos

Let's analyze the “nuts” guy

 

<div class='character-highlight'>
  <figure class='offer'>
    <a href='#flour'>
      <img src='flour.jpg' alt='Flour'>
      <figcaption>
        <h3>Almond Flour</h3>
        <p>Almond flour is low-carb</p>
        <span class='inline-cta'>
          <strong>$8.99 /lb</strong>
          <a href='#flour'>Order now</a>
        </span>
      </figcaption>
    </a>
  </figure>
</div>

 

.character-highlight {
}
.offer {
}
.offer > a {
}
.offer img {
}
.inline-cta {
}
.inline-cta strong {
}
.inline-cta a {
}

My single tip about SASS

tl;dr don't use nesting

#about {
}
#about {
  h1 {
    font-size: 5em;
  }
}
#about {
  h1 {
    font-size: 5em;
    > span {
      margin-top: .5em;
    }
  }
}
#about {
  h1 {
    font-size: 5em;
    > span {
      margin-top: .5em;
    }
  }
  form#contact {
    .form-group {
      border-top: 1px solid #ccc;
    }
  }
}
#about {
  h1 {
    font-size: 5em;
    > span {
      margin-top: .5em;
    }
  }
  form#contact {
    .form-group {
      border-top: 1px solid #ccc;
      input[type="text"] {
        font-family: sans-serif;
      }
    }
  }
}
#about,
#contact-us {
  h1 {
    font-size: 5em;
    > span {
      margin-top: .5em;
    }
  }
  form#contact {
    .form-group {
      border-top: 1px solid #ccc;
      input[type="text"] {
        font-family: sans-serif;
      }
    }
  }
}
#about h1,
#contact-us h1 {
  font-size: 5em;
}
#about h1 > span,
#contact-us h1 > span {
  margin-top: .5em;
}
#about form#contact .form-group,
#contact-us form#contact .form-group {
  border-top: 1px solid #ccc;
}
#about form#contact .form-group input[type="text"],
#contact-us form#contact .form-group input[type="text"] {
  font-family: sans-serif;
}

CSS organization

Order and simplification

CSS subject areas

One file for each or divided by comments on a single file

  • Color scheme & variables
  • Mixins, extends, helpers
  • Baseline
  • Webfonts
  • Persistent
  • Modular
  • Specific page (each)
  • Media queries
  • Print

Color scheme & variables

$honorable-black: #222;
$light-blue: #b5d5e1;
$light-blue-harsh: #73a8b6;
$blue-harsh: #4387a0;
$rust: #f5e6a2;
$rust-harsh: #e5bd32;
$mustard-harsh: #d19e18;
$blood-harsh: #d52b08;

Mixins, extends, helpers

.clearfix {
  &:before,
  &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

.unstyle-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

@mixin transition($length) {
  -webkit-transition: all $length ease-out;
     -moz-transition: all $length ease-out;
       -o-transition: all $length ease-out;
          transition: all $length ease-out;
}

Baseline

html {
  font-size: 1.4em;
  line-height: 1.4;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
  margin: 0;
}
a {
  color: darken($light-blue, 45);
  @include transition(200ms);
  &:hover {
    color: darken($light-blue, 35);
  }
}
h1 {
  font-size: 3em;
  margin: .3525em 0 .7em;
  text-transform: uppercase;
}
h2 {
  font-size: 2.2em;
  margin: 1.25em 0 .5em;
}
img {
  max-width: 100%;
}
small {
  font-size: .8em;
}
ul,
ol {
  padding: 0 0 0 1.25em;
  margin: 1em 0;
  list-style-position: outside;
}
nav ol,
nav ul {
  @extend .unstyle-list;
}

Webfonts

@font-face {
  font-family: 'Gotham';
  src: url('/fonts/gotham.eot');
  src: url('/fonts/gotham.eot?#iefix') format('embedded-opentype'),
       url('/fonts/gotham.woff') format('woff'),
       url('/fonts/gotham.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

Persistent

[role='banner'] {
  width: 14.375em;
  position: fixed;
  background-color: $light-blue;
  @extend .clearfix;
}
[role='navigation'] {
  margin: 1.2em 0;
}
.social {
  font-size: 2em;
  line-height: 1;
  text-align: center;
}
.social a {
  padding: 7% 14%;
  display: block;
}
[role='main'] {
  position: relative;
  padding: 1em 2.5em;
  background-color: $rust;
}

Modular

.button {
  display: inline-block;
  padding: .75em 1.25em;
  background-color: $blue-harsh;
  &:hover{
    background-color: darken($blue-harsh, 20);
  }
}
.button-group {
  @extend .clearfix;
  @extend .unstyle-list;
}
.button-group li {
  float: left;
  margin: 0 .5em;
  padding: .1em 0;
  vertical-align: top;

  &:first-child {
    margin-left: 0;
  }
  &:last-child {
    margin-right: 0;
  }
}
.button-group .button {
}

.brand a {
  display: block;
  background-color: transparent;

  &:hover {
    background-color: transparent;
    padding: 0;
  }
}
.brand img {
  display: block;
}
.brand .logo {
  margin: 0 0 .3em 0;
}
.brand .slogan {
}

.text-heavy {
  max-width: 57em;
  margin-bottom: 5em;
}
.keywords {
  @extend .clearfix;
  @extend .unstyle-list;
  margin-left: -.2em
}
.keywords li {
  float: left;
  padding: .1em .5em;
  margin: .2em;
  background-color: $rust-harsh;
  border-radius: 0.3em;
  text-shadow: .05em .05em 0 rgba($rust, .4);
}

.pagination {
  margin: 2em 0;
  @extend .unstyle-list;
  @extend .clearfix;
}
.pagination li {
}
.pagination li a {
}

Specific page (each)

#landing {
  font-size: 2.2em;
}
#landing [role='main'] {
  margin: 0;
  padding-top: .6em;
  text-align: center;
  @extend .gotham-font;
}
#landing header {
  padding: 1.25em 0 1.65em;
  background-color: $light-blue;
}
#landing .brand {
  width: 8.44em;
  margin: 0 auto;
}
#landing .button-group {
  font-size: .75em;
  margin: 2.5em 0 0;
}
#landing .button-group li {
  float: none;
  display: inline-block;
}

Media queries

@media (max-width: 1320px){
  html {
    font-size: 1.2em;
  }
}

@media (max-width: 1000px){
  [role='banner'] {
    width: auto;
    position: static;
    padding: .4em 1.5em;
  }
  [role='banner'] .brand {
    float: left;
    width: 7em;
  }
  [role='navigation'] {
    float: right;
    margin: 0 2.25em 0 0;
  }
  .social {
    position: absolute;
    top: .15em;
    right: .15em;
  }
  [role='main'] {
    margin: .2em 0 0 0;
    padding: 1em 1.5em;
  }
  h1 {
    margin-bottom: .7575em;
  }
}

Print

@media print {
  @page {
    margin: 1.2cm;
  }
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body {
    font-family: sans-serif;
    font-size: 10pt;
    line-height: 1.4;
  }
  a[href^="http"]:after {
    content: " \2014   " attr(href);
    font-size: 90%;
  }
  .vessel {
    padding: 0 .2em;
  }
  section {
    padding-bottom: 2.4em;
  }
  .print {
    display: block;
  }
}

Front–end Styleguides

In building documentation the patterns arise

Look for yourself!

But... doesn't this look like?

They started as styleguides!

Investigate

And find the way that works for you

Many professionals are converging to
the same conclusions

Share your knowledge

Everyone can build on the Internet!

Thank You!