The Super Awesome Great (and stuff) Styleguide

The Grid

Overview

This is a flexbox based grid using containers that contain blocks. If there is to be a max-width applied, then it should be applied to containers. This system also uses wrappers to properly display backgrounds that are not restricted by a maximum width and so are effectively full width.

Media Query Prefixes

All of the modifier classes that can be applied with the wrapper, container, and block have a media query prefix.

  • sm for small screens and up.
  • md for medium screens and up.
  • lg for large screens and up.
  • xl for extra-large screens and up.

Code Example

<div class="container sm-nowrap md-wrap">
  <div class="block">

    Content...

  </div>
</div>

Fixed Block Widths

This grid can give blocks a fixed width based on 12 units per row. The classes used are based on the media query you want affected, and how many units you want the block to occupy. For instance, the sm-12 class will give the block a 100% width for small screens and up.

Code Example

<div class="wrapper">
  <div class="container">
    <div class="block sm-12 md-6 lg-4">

      Content...

    </div>
    <div class="block sm-12 md-6 lg-4">

      Content...

    </div>
    <div class="block sm-12 lg-4">

      Content...

    </div>
  </div>
</div>   

12 Columns Per Row Fixed Width Blocks

12
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1

Mixed Examples

4
4
4
3
6
3
2
7
3
1
4
3
1
3

Nested Examples

8
6
6
4
6
4
4
4
4
8
4
2
9
8
5
7
4
3

Modifier Classes

There are many modifier classes for both containers and blocks. These maostly have to do with flexbox's arrangement and positioning, but also has to do with grid specific properties like the use of gutters.

NOTE: All classes are prefixed with the breakpoint they apply to.

Container classes

Layout

  • row-reverse - Reverses the order of the blocks in the container
  • wrap - Allows for content to wrap to the next row.
  • nowrap - Prevents wrapping of content to the next row.
  • wrap-reverse - Reverses the wrapping direction of blocks.

Alignment

All alignment is based on the flex-direction of the container. If a modifier is used to reverse any direction of the flow of blocks, then these alignment classes will work to the opposite direction. Excluding the middle and center classes.

  • align-top - Align blocks to the top of the container.
  • align-middle - Align blocks to the vertical middle of the container.
  • align-bottom - Align blocks to the bottom of the container.
  • align-left - Align blocks to the left of the container.
  • align-center - Align blocks to the horizonal center of the container.
  • align-right - Align blocks to the right of the container.

Spacing

  • space-between - puts space between blocks.
  • space-around - puts space around blocks, even if no block is ajacent.
  • stretch - stretches blocks to fill the width of the container.

Gutters

  • no-gutters - removes gutters from blocks.

Block Classes

This list excludes fixed width classes.

Order

Order classes can be added by simply a breakpoint prefix, order-, and a number. This grid only supports order-1 up to order-12.

Example

Setting the order of a block for medium screens and up

<div class="container">
  <div class="block sm-12 md-6 md-order-2">
    I am now to the right of the next block on medium screens and up.
  </div>
  <div class="block sm-12 md-6">
    I am below the first block on small screens, but to the left on medium screens and up.
  </div>
</div>

I am now to the right of the next block on medium screens and up.

I am below the second block on small screens, but to the left on medium screens and up.

Alignment

blocks can independently align themselves based on flex-flow.

  • align-top
  • align-middle
  • align-bottom

Colors

Below is the full pallet of base colors used in this site. All of these can be changed via the _settings.scss file. Base color variables are located in section 1.2.

The Rainbow

FF664E
FF924E
FFC74E
92FF4E
4EE7FF
4E86FF
C84EFF
FF4EE2

The Greyscale

222222
333333
5E5E5E
343434
E5E5E5
EEEEEE
FDFDFD

Typography

Headings

H1 Heading

Quae vero auctorem tractata ab fiducia dicuntur. Mercedem aut nummos unde unde extricat, amaras. Ab illo tempore, ab est sed immemorabili. Inmensae subtilitatis, obscuris et malesuada fames.

H2 Heading

Quae vero auctorem tractata ab fiducia dicuntur. Mercedem aut nummos unde unde extricat, amaras. Ab illo tempore, ab est sed immemorabili. Inmensae subtilitatis, obscuris et malesuada fames.

H3 Heading

Quae vero auctorem tractata ab fiducia dicuntur. Mercedem aut nummos unde unde extricat, amaras. Ab illo tempore, ab est sed immemorabili. Inmensae subtilitatis, obscuris et malesuada fames.

H4 Heading

Quae vero auctorem tractata ab fiducia dicuntur. Mercedem aut nummos unde unde extricat, amaras. Ab illo tempore, ab est sed immemorabili. Inmensae subtilitatis, obscuris et malesuada fames.

H5 Heading

Quae vero auctorem tractata ab fiducia dicuntur. Mercedem aut nummos unde unde extricat, amaras. Ab illo tempore, ab est sed immemorabili. Inmensae subtilitatis, obscuris et malesuada fames.

H6 Heading

Quae vero auctorem tractata ab fiducia dicuntur. Mercedem aut nummos unde unde extricat, amaras. Ab illo tempore, ab est sed immemorabili. Inmensae subtilitatis, obscuris et malesuada fames.

Blockquotes

Single Line Blockquote:

I like to say memorable things!

Multi-line Blockquote with Cite Reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

Tables

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

Unordered Lists (Nested)

  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2

Ordered List (Nested)

  1. Item 1
    1. Item 1.1
    2. Item 1.2
  2. Item 2
  3. Item 3

Code

Inline

Here is an example of using inline code. Using npm init will initialize a Node.js project and create a package.json file.

HTML

<article class="post">
  <header class="post-header">
    <div class="content post-header-inner">
      <h1>Fixed backgrounds on a mobile browser without using JavaScript!</h1>

      <time class="post-date">October 6th 2016</time>

      <div class="post-meta">

        <span class="author">by <span class="author-name">Joey Hayes</span></span>

      </div>
    </div>
  </header>

  <div class="post-content">
    <div class="content">

      <p>
        Quid securi etiam tamquam eu fugiat nulla pariatur. Cum ceteris in veneratione
        tui montes, nascetur mus. Quisque placerat facilisis egestas cillum dolore.
        Ambitioni dedisse scripsisse iudicaretur. Quisque ut dolor gravida, placerat
        libero vel, euismod.
      </p>

    </div>
  </div>
</article>

Pug

extends ../layouts/default.pug

block panes
  +pane('pen', 'above', 'pen-pane', {api: 'api'})
    .carousel-panes(data-carousel-panes='')
      //- Center
      .pane.carousel-center
        .container
          .block.sm-12(data-inject-bind='demo')
      //- Left
      .pane.carousel-left
        .container
          .block.sm-12(data-inject-bind='details')
      //- Right
      .pane.carousel-right
        .container
          .block.sm-12(data-inject-bind='code.markup')
        .container
          .block.sm-12(data-inject-bind='code.styles')
        .container
          .block.sm-12(data-inject-bind='code.scripts')
    .fixed-bottom-bar
      .nav-bar
        button.icon-button(data-panes-nav='left')
          +icon('info')
        button.icon-button(data-panes-nav='center')
          +icon('menu')
        button.icon-button(data-panes-nav='right')
          +icon('code')
      .pane-carousel-title-bar.container.sm-row.sm-nowrap
        .block.sm-12
          h4 Details
        .block.sm-12
          h4 Demo
        .block.sm-12
          h4 Code

CSS

.post::before {
  content: ' ';
  display: block;
  background-image: url("/assets/imgs/image.png");
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "rucksack", sans-serif;
  font-weight: 300;
  color: #FF664E;
}

SCSS

mixin generate-close-icon-colors {
  $_palette: map-keys($color-palette);

  @each $_color in $_palette {
    $_color-value: map-get($color-palette, $_color);
    &.#{$_color} {
      .icon-button {
        svg {
          fill: $_color-value;
        }
      }
    }
  }
}

@mixin generate-animation-border-color-classes {
  $_palette: map-keys($color-palette);

  @each $_color in $_palette {
    $_color-value: map-get($color-palette, $_color);
    &.#{$_color} {
      .animation_border-left {
        background: $_color-value;
      }
    }
  }
}

////
/// Base Styles
///

.titled-callout {
  @include generate-animation-border-color-classes;
  @include generate-close-icon-colors;

  .expandable-content {
    overflow: hidden;
  }
  &[data-expand="inactive"] {
    .expandable-content {
      overflow: inherit;
    }
  }
}



.titled-callout[data-responsive-state="active"] {
  will-change: transform;
  transform: none;
  ////
  /// Base Styles
  ///
  &[data-expand] {
    // Content
    // ======================= //
    .expandable-content {
      will-change: transform;
    }
    // Border
    // ======================= //
    .animation_border-left {
      position: absolute;
      width: $titled-callout_border-left-size;
      will-change: height;
    }
    // Icon
    // ======================= //
    .icon-button {
      svg {
        rect:nth-child(3) {
          will-change: transform;
        }
        rect:nth-child(2) {
          will-change: transform;
        }
      }
    }
  }
}

JavaScript

!function() {
class EventListener {
  constructor(element, listener) {
    this.element = element;
    this.listener = listener;
    this.callbacks = [];
    this.registered = false;
  }
  _handler() {
    if (this.callbacks.length > 0) {
      for (let i = 0; i < this.callbacks.length; i++) {
        this.callbacks[i]();
      }
    }
  }
  _registerEventListener() {
    this.element.addEventListener(this.listener, () => this._handler());
  }
  registerCallback(callback) {
    if (typeof callback === 'function') {
      this.callbacks.push(callback);
    } else {
      throw new TypeError(`callback must be a function, not a ${typeof callback}`);
    }
    if (this.callbacks.length > 0 && !this.registered) {
      this._registerEventListener();
      this.registered = true;
    }
  }
}

const registerGlobalEventListener = function(name, element, listener) {
  listener = name || listener;
  if (Gingabulous.events[name] === undefined) {
    Gingabulous.events[name] = new Gingabulous.EventListener(element, listener);
  }
};

Gingabulous.events = {};
Gingabulous.registerGlobalEventListener = registerGlobalEventListener;
Gingabulous.EventListener = EventListener;
}();

php

<?php
/**
 * Takes in values that correspond to config settings array and returns a sting with
 * the correct html class.
 *
 * @since  0.1.0
 *
 * @param  string $section the key value for the proper array within the `$classes` array.
 * @param  string $element the element that is the name of the key in the section array.
 * @return string          The HTML classes as pulled from the config.
 */
function genfound_markup_config( $section, $element ) {

	// Include correct file path for currently supported grid
	include_once( get_stylesheet_directory() . '/inc/foundation/config/' . genfound_get_grid() );

	$classes = genfound_grid_config_settings();

	$output = $classes[$section][$element];

	return ' ' . $output;
}

Titled Callout

Default Style

Code Example

<div class="titled-callout">

  <div class="titled-callout-heading">
    <h2>Title</h2>
  </div>

  <div class="titled-callout-content-wrapper">
    <div class="titled-callout-content">
      
      Content...
      
    </div>
  </div>

</div>

Demo

Content Block Thingy!

Here's an H3

Here's an H4

Curabitur blandit tempus ardua ridiculus sed magna. Fictum, deserunt mollit anim laborum astutumque!

Another h4

Etiam habebis sem dicantur magna mollis euismod. Nec dubitamus multa iter quae et nos invenerat. Praeterea iter est quasdam res quas ex communi. Nihilne te nocturnum praesidium Palati.

More More More H4

Excepteur sint obcaecat cupiditat non proident culpa. Quid securi etiam tamquam eu fugiat nulla pariatur. Cras mattis iudicium purus sit amet fermentum. Contra legem facit qui id facit quod lex prohibet.

Different Colors

By adding any color from the site's color palette as a class to the .titled-callout div, the section can take on different color stylings.

Available Classes

  • .red
  • .orange
  • .yellow
  • .green
  • .cyan
  • .blue
  • .purple
  • .pink

Demos

Red!

Heading 3

Heading 4

Etiam habebis sem dicantur magna mollis euismod. Nec dubitamus multa iter quae et nos invenerat. Praeterea iter est quasdam res quas ex communi. Nihilne te nocturnum praesidium Palati.

Orange!

Heading 3

Heading 4

Etiam habebis sem dicantur magna mollis euismod. Nec dubitamus multa iter quae et nos invenerat. Praeterea iter est quasdam res quas ex communi. Nihilne te nocturnum praesidium Palati.

Yellow!

Heading 3

Heading 4

Etiam habebis sem dicantur magna mollis euismod. Nec dubitamus multa iter quae et nos invenerat. Praeterea iter est quasdam res quas ex communi. Nihilne te nocturnum praesidium Palati.

Green!

Heading 3

Heading 4

Etiam habebis sem dicantur magna mollis euismod. Nec dubitamus multa iter quae et nos invenerat. Praeterea iter est quasdam res quas ex communi. Nihilne te nocturnum praesidium Palati.

Cyan!

Heading 3

Heading 4

Etiam habebis sem dicantur magna mollis euismod. Nec dubitamus multa iter quae et nos invenerat. Praeterea iter est quasdam res quas ex communi. Nihilne te nocturnum praesidium Palati.

Blue!

Heading 3

Heading 4

Etiam habebis sem dicantur magna mollis euismod. Nec dubitamus multa iter quae et nos invenerat. Praeterea iter est quasdam res quas ex communi. Nihilne te nocturnum praesidium Palati.

Purple!

Heading 3

Heading 4

Etiam habebis sem dicantur magna mollis euismod. Nec dubitamus multa iter quae et nos invenerat. Praeterea iter est quasdam res quas ex communi. Nihilne te nocturnum praesidium Palati.

Pink!

Heading 3

Heading 4

Etiam habebis sem dicantur magna mollis euismod. Nec dubitamus multa iter quae et nos invenerat. Praeterea iter est quasdam res quas ex communi. Nihilne te nocturnum praesidium Palati.

Cards

More Coming Soon.

Cards have drastically changed, and currently are only usable with JavaScript. See the documentation on the pug mixin for more.

PLEASE NOTE: The documentation may currently be out of date with both the mixin, and the pug mixin as cards now use the Expand Javascript module and not the old Card module.

Icons

Overview

Icons on this site are all inline SVGs. The use of SVG linking caused too many issues for how little of a spped difference there was. Because of this it is best to use the pug mixin for icons.

Close

close
+icon('close')

Code

code
+icon('code')

Info

info
+icon('info')

Menu

menu
+icon('menu')

Arrow-left

arrow-left
+icon('arrow-left')

Arrow-right

arrow-right
+icon('arrow-right')

Codepen

codepen
+icon('codepen')

Facebook

facebook
+icon('facebook')

Github

github
+icon('github')

Instagram

instagram
+icon('instagram')

Linkedin

linkedin
+icon('linkedin')

Pinterest

pinterest
+icon('pinterest')

Stackoverflow

stackoverflow
+icon('stackoverflow')

Twitter

twitter
+icon('twitter')

Youtube

youtube
+icon('youtube')