2 #scaffolding Scaffolding

internal files (the order here matters, be safe!)

2.1 #scaffolding.base Base Styles

This is where all the very basic styles will live, this file should be very small and modular.

2.1.1 #scaffolding.base.blockquote Blockquote

default blockquote

Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.
Example Code:
<blockquote>
  Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.
</blockquote>

2.1.2 #scaffolding.base.headings Heading Styles

Styles for headings, 1 through 6

Example Heading Text
Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.
Example Heading Text
Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.

Example Heading Text

Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.

Example Heading Text

Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.

Example Heading Text

Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.

Example Heading Text

Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.
Example Code:
<h6 class="heading-dark">Example Heading Text</h6>
<div>
  Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.
</div>
<hr/>
<h5 class="heading-light">Example Heading Text</h5>
<div>
  Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.
</div>
<hr/>
<h4 class="heading-orange">Example Heading Text</h4>
<div>
  Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.
</div>
<hr/>
<h3 class="heading-light">Example Heading Text</h3>
<div>
  Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.
</div>
<hr/>
<h2>Example Heading Text</h2>
<div>
  Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.
</div>
<hr/>
<h1 class="heading-dark">Example Heading Text</h1>
<div>
  Grenade BASE jump artisanal footage concrete assassin katana sub-orbital sentient advert euro-pop hacker. Face forwards disposable Tokyo dissident free-market urban girl nodality vehicle motion. Carbon plastic-space pen office uplink narrative man digital dolphin.
</div>
<hr/>

2.1.3 #scaffolding.base.hr Horizontal Rulage

default horizontal rule

Example Code:
<hr/>

2.1.4 #scaffolding.base.links Anchor/Link Styles

Example Link
Example Code:
<a href="#">Example Link</a>

2.1.5 #scaffolding.base.monospace Monospace Examples

pre, code, kbd, samp styles

Pre Element

   Lights neon franchise courier wonton soup Legba spook. Vinyl monofilament media Legba futurity faded carbon smart-garage paranoid neural. Urban footage drugs smart-table nodality youtube. Cardboard claymore mine geodesic drone apophenia refrigerator face forwards tattoo long-chain hydrocarbons A.I. advert industrial grade math-office shrine man. Augmented reality nano-A.I. construct chrome rain Kowloon neon smart-man. Grenade cyber-meta-footage-ware stimulate lights boat dolphin. Tower realism BASE jump sub-orbital tube disposable crypto-marketing fetishism sprawl sign military-grade. Render-farm tattoo long-chain hydrocarbons savant towards convenience store 3D-printed Tokyo military-grade engine weathered chrome pre-neon.

Code Element

Dead gang neural fetishism cyber-urban savant carbon motion media marketing denim Chiba kanji. Render-farm digital otaku denim geodesic drugs RAF stimulate numinous. Soul-delay sunglasses pistol San Francisco kanji camera wonton soup Chiba. Car tower knife jeans denim shanty town cartel wonton soup alcohol tiger-team San Francisco faded corrupted realism kanji pre-tube. Shrine grenade knife towards motion tower sentient office numinous sunglasses dead bomb drugs fluidity urban decay silent.-ware convenience store bridge kanji otaku plastic Shibuya stimulate.
Example Code:
<h3>Pre Element</h3>
<pre>
   Lights neon franchise courier wonton soup Legba spook. Vinyl monofilament media Legba futurity faded carbon smart-garage paranoid neural. Urban footage drugs smart-table nodality youtube. Cardboard claymore mine geodesic drone apophenia refrigerator face forwards tattoo long-chain hydrocarbons A.I. advert industrial grade math-office shrine man. Augmented reality nano-A.I. construct chrome rain Kowloon neon smart-man. Grenade cyber-meta-footage-ware stimulate lights boat dolphin. Tower realism BASE jump sub-orbital tube disposable crypto-marketing fetishism sprawl sign military-grade. Render-farm tattoo long-chain hydrocarbons savant towards convenience store 3D-printed Tokyo military-grade engine weathered chrome pre-neon.
</pre>
<h3>Code Element</h3>
<code>
   Dead gang neural fetishism cyber-urban savant carbon motion media marketing denim Chiba kanji. Render-farm digital otaku denim geodesic drugs RAF stimulate numinous. Soul-delay sunglasses pistol San Francisco kanji camera wonton soup Chiba. Car tower knife jeans denim shanty town cartel wonton soup alcohol tiger-team San Francisco faded corrupted realism kanji pre-tube. Shrine grenade knife towards motion tower sentient office numinous sunglasses dead bomb drugs fluidity urban decay silent.-ware convenience store bridge kanji otaku plastic Shibuya stimulate.
</code>

2.2 #scaffolding.constants Constants

Shared use variables, keep things tidy maybe extend off of this file, or replace it outright when templating.

2.2.1 #scaffolding.constants.colors Color Constants

Default color constants for the styleguide

@color-primary
@color-success
@color-warning
@color-notice
@color-info
@color-inverted

2.2.2 #scaffolding.constants.elements Element Constants

constants for line-height, border-radius, padding, etc

Title Description
@elem-line-height-base @typo-font-size-base * 1.05
@elem-border-radius-base 4px
@elem-border-radius-label 15px
@elem-default-padding 10px

2.2.3 #scaffolding.constants.prefix CSS Prefix

I dont really want to do this, but I also dont want to make any opionions that should really be enforced inside of a minimalist css framework. You may also be looking at this wondering where this value is being set now.. it's been moved inside of our ./config.js to keep this as dynamic as possible.

@css-prefix

2.3 #scaffolding.helpers Helpers

Common use helper classes

  • .cf, .clearfix typical clearfix you would expect
  • .pr, .pl, .pull-right, .pull-left floats an element to either direction
  • .text-right, .text-left, .text-center aligns text to direction
  • .center-block centers a block element

2.4 #scaffolding.mixins Mixins

Common use mixins for internal development use

Title Description
.clearfix() clearfix mixin, works exactly as you'd expect
.box-sizing() browser prefix safe box-sizing
.border-radius() sets border radius //.border-radius(3px, 3px, 0, 0);
.center-block() sets and centers block elems
.reset-spacing() helpful for things with default margin/padding
.reset-list() helpful for lists, because they have so many opinions
.disable-selection() disallow user to highlight/select an elements nodes
.grid-row() makes a container a "row" in our grid
.grid-column() accepts a number 1-12 of column width
.grid-column-offset() accepts a number to offset the column width
.card-generator() underlying mixing behind these components ♥