From 9af18143aa27db7a5ae5861ae9ff6705eaf71849 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Sun, 24 Jan 2016 15:32:31 -0600 Subject: [PATCH 01/12] moved styleguide to from public into the core directory --- .gitignore | 2 + Gruntfile.js | 62 +- config.json | 1 + {public => core}/styleguide/css/static.css | 0 {public => core}/styleguide/css/static.scss | 0 .../styleguide/css/styleguide-specific.css | 0 .../styleguide/css/styleguide-specific.scss | 0 .../styleguide/css/styleguide.css | 0 .../styleguide/css/styleguide.scss | 0 .../styleguide/css/vendor/prism.css | 0 .../styleguide/css/vendor/typeahead.css | 0 {public => core}/styleguide/fonts/icomoon.eot | Bin {public => core}/styleguide/fonts/icomoon.svg | 0 {public => core}/styleguide/fonts/icomoon.ttf | Bin .../styleguide/fonts/icomoon.woff | Bin {public => core}/styleguide/html/README | 0 core/styleguide/html/styleguide.html | 2656 +++++++++++++++++ .../styleguide/images/spinner.gif | Bin .../styleguide/js/annotations-pattern.js | 0 .../styleguide/js/annotations-viewer.js | 0 .../styleguide/js/code-pattern.js | 0 {public => core}/styleguide/js/code-viewer.js | 0 {public => core}/styleguide/js/data-saver.js | 0 .../styleguide/js/pattern-finder.js | 0 {public => core}/styleguide/js/postmessage.js | 0 {public => core}/styleguide/js/styleguide.js | 0 {public => core}/styleguide/js/url-handler.js | 0 .../js/vendor/classlist-polyfill.js | 0 .../styleguide/js/vendor/jquery.js | 0 .../styleguide/js/vendor/jwerty.js | 0 .../styleguide/js/vendor/prism.js | 0 .../js/vendor/typeahead.bundle.min.js | 0 gulpfile.js | 12 +- 33 files changed, 2702 insertions(+), 31 deletions(-) rename {public => core}/styleguide/css/static.css (100%) rename {public => core}/styleguide/css/static.scss (100%) rename {public => core}/styleguide/css/styleguide-specific.css (100%) rename {public => core}/styleguide/css/styleguide-specific.scss (100%) rename {public => core}/styleguide/css/styleguide.css (100%) rename {public => core}/styleguide/css/styleguide.scss (100%) rename {public => core}/styleguide/css/vendor/prism.css (100%) rename {public => core}/styleguide/css/vendor/typeahead.css (100%) rename {public => core}/styleguide/fonts/icomoon.eot (100%) rename {public => core}/styleguide/fonts/icomoon.svg (100%) rename {public => core}/styleguide/fonts/icomoon.ttf (100%) rename {public => core}/styleguide/fonts/icomoon.woff (100%) rename {public => core}/styleguide/html/README (100%) create mode 100644 core/styleguide/html/styleguide.html rename {public => core}/styleguide/images/spinner.gif (100%) rename {public => core}/styleguide/js/annotations-pattern.js (100%) rename {public => core}/styleguide/js/annotations-viewer.js (100%) rename {public => core}/styleguide/js/code-pattern.js (100%) rename {public => core}/styleguide/js/code-viewer.js (100%) rename {public => core}/styleguide/js/data-saver.js (100%) rename {public => core}/styleguide/js/pattern-finder.js (100%) rename {public => core}/styleguide/js/postmessage.js (100%) rename {public => core}/styleguide/js/styleguide.js (100%) rename {public => core}/styleguide/js/url-handler.js (100%) rename {public => core}/styleguide/js/vendor/classlist-polyfill.js (100%) rename {public => core}/styleguide/js/vendor/jquery.js (100%) rename {public => core}/styleguide/js/vendor/jwerty.js (100%) rename {public => core}/styleguide/js/vendor/prism.js (100%) rename {public => core}/styleguide/js/vendor/typeahead.bundle.min.js (100%) diff --git a/.gitignore b/.gitignore index 08b9a2f83..f9d11769c 100644 --- a/.gitignore +++ b/.gitignore @@ -18,3 +18,5 @@ public/styleguide/css/static.css.map public/styleguide/css/styleguide-specific.css.map public/styleguide/css/styleguide.css.map source/css/style.css.map +.idea/ +public/styleguide/ diff --git a/Gruntfile.js b/Gruntfile.js index 3d9485121..e3e29064f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,7 @@ module.exports = function(grunt) { + var path = require('path'); + // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), @@ -60,40 +62,46 @@ module.exports = function(grunt) { copy: { main: { files: [ - { expand: true, cwd: './source/js/', src: '*', dest: './public/js/'}, - { expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' }, - { expand: true, cwd: './source/images/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/' }, - { expand: true, cwd: './source/images/sample/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/sample/'}, - { expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'}, - { expand: true, cwd: './source/_data/', src: 'annotations.js', dest: './public/data/' } + { expand: true, cwd: paths().source.js, src: '*', dest: paths().public.js}, + { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css }, + { expand: true, cwd: paths().source.images, src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: paths().public.images }, + { expand: true, cwd: paths().source.fonts, src: '*', dest: paths().public.fonts}, + { expand: true, cwd: paths().source.data, src: 'annotations.js', dest: paths().public.data} ] }, css: { files: [ - { expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' } + { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css } + ] + }, + styleguide: { + files: [ + { + expand: true, cwd: paths().source.styleguide, src: ['*.*', '**/*.*'], dest: paths().public.styleguide + } ] } }, watch: { all: { files: [ - 'source/css/**/*.css', - 'public/styleguide/css/*.css', - 'source/_patterns/**/*.mustache', - 'source/_patterns/**/*.json', - 'source/_data/*.json' + paths().source.css + '**/*.css', + paths().source.styleguide + 'css/*.css', + paths().source.patterns + '**/*.mustache', + paths().source.patterns + '**/*.json', + paths().source.data + '*.json' ], tasks: ['default'] }, // scss: { - // files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'], + // files: [paths().source.css + '**/*.scss', paths().source.styleguide + 'css/*.scss'], // tasks: ['sass', 'copy:css','bsReload:css'] // }, patterns: { files: [ - 'source/_patterns/**/*.mustache', - 'source/_patterns/**/*.json', - 'source/_data/*.json' + paths().source.patterns + '*.mustache', + paths().source.patterns + '*.json', + paths().source.data + '*.json' ], tasks: ['default'] } @@ -105,10 +113,10 @@ module.exports = function(grunt) { // precision: 8 // }, // files: { - // './source/css/style.css': './source/css/style.scss', - // './public/styleguide/css/static.css': './public/styleguide/css/static.scss', - // './public/styleguide/css/styleguide.css': './public/styleguide/css/styleguide.scss', - // './public/styleguide/css/styleguide-specific.css': './public/styleguide/css/styleguide-specific.scss' + // paths().source.css + 'style.css': paths().source.css + 'style.scss', + // paths().source.styleguide + 'css/static.css': paths().source.styleguide + 'css/static.scss', + // paths().source.styleguide + 'css/styleguide.css': paths().source.styleguide + 'css/styleguide.scss', + // paths().source.styleguide + 'css/styleguide-specific.css': paths().source.styleguide + 'css/styleguide-specific.scss' // } // } // }, @@ -118,13 +126,13 @@ module.exports = function(grunt) { browserSync: { dev: { options: { - server: './public', + server: paths().public.root, watchTask: true, plugins: [ { module: 'bs-html-injector', options: { - files: './public/index.html' + files: paths().public + 'index.html' } } ] @@ -132,10 +140,14 @@ module.exports = function(grunt) { } }, bsReload: { - css: './public/**/*.css' + css: paths().public + '**/*.css' } }); + function paths () { + return require('./config.json').paths; + } + // load all grunt tasks require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); @@ -149,8 +161,8 @@ module.exports = function(grunt) { grunt.registerTask('travis', ['nodeunit', 'patternlab']); //TODO: this line is more efficient, but you cannot run concurrent watch tasks without another dependency. - //grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:patterns', 'watch:scss']); - grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:all']); + //grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'copy:styleguide', 'browserSync', 'watch:patterns', 'watch:scss']); + grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']); grunt.registerTask('build', ['nodeunit', 'concat']); diff --git a/config.json b/config.json index dfca6c756..0ca6ef1f0 100644 --- a/config.json +++ b/config.json @@ -4,6 +4,7 @@ "root": "./source/", "patterns" : "./source/_patterns/", "data" : "./source/_data/", + "styleguide" : "./core/styleguide/", "patternlabFiles" : "./source/_patternlab-files/", "js" : "./source/js", "images" : "./source/images", diff --git a/public/styleguide/css/static.css b/core/styleguide/css/static.css similarity index 100% rename from public/styleguide/css/static.css rename to core/styleguide/css/static.css diff --git a/public/styleguide/css/static.scss b/core/styleguide/css/static.scss similarity index 100% rename from public/styleguide/css/static.scss rename to core/styleguide/css/static.scss diff --git a/public/styleguide/css/styleguide-specific.css b/core/styleguide/css/styleguide-specific.css similarity index 100% rename from public/styleguide/css/styleguide-specific.css rename to core/styleguide/css/styleguide-specific.css diff --git a/public/styleguide/css/styleguide-specific.scss b/core/styleguide/css/styleguide-specific.scss similarity index 100% rename from public/styleguide/css/styleguide-specific.scss rename to core/styleguide/css/styleguide-specific.scss diff --git a/public/styleguide/css/styleguide.css b/core/styleguide/css/styleguide.css similarity index 100% rename from public/styleguide/css/styleguide.css rename to core/styleguide/css/styleguide.css diff --git a/public/styleguide/css/styleguide.scss b/core/styleguide/css/styleguide.scss similarity index 100% rename from public/styleguide/css/styleguide.scss rename to core/styleguide/css/styleguide.scss diff --git a/public/styleguide/css/vendor/prism.css b/core/styleguide/css/vendor/prism.css similarity index 100% rename from public/styleguide/css/vendor/prism.css rename to core/styleguide/css/vendor/prism.css diff --git a/public/styleguide/css/vendor/typeahead.css b/core/styleguide/css/vendor/typeahead.css similarity index 100% rename from public/styleguide/css/vendor/typeahead.css rename to core/styleguide/css/vendor/typeahead.css diff --git a/public/styleguide/fonts/icomoon.eot b/core/styleguide/fonts/icomoon.eot similarity index 100% rename from public/styleguide/fonts/icomoon.eot rename to core/styleguide/fonts/icomoon.eot diff --git a/public/styleguide/fonts/icomoon.svg b/core/styleguide/fonts/icomoon.svg similarity index 100% rename from public/styleguide/fonts/icomoon.svg rename to core/styleguide/fonts/icomoon.svg diff --git a/public/styleguide/fonts/icomoon.ttf b/core/styleguide/fonts/icomoon.ttf similarity index 100% rename from public/styleguide/fonts/icomoon.ttf rename to core/styleguide/fonts/icomoon.ttf diff --git a/public/styleguide/fonts/icomoon.woff b/core/styleguide/fonts/icomoon.woff similarity index 100% rename from public/styleguide/fonts/icomoon.woff rename to core/styleguide/fonts/icomoon.woff diff --git a/public/styleguide/html/README b/core/styleguide/html/README similarity index 100% rename from public/styleguide/html/README rename to core/styleguide/html/README diff --git a/core/styleguide/html/styleguide.html b/core/styleguide/html/styleguide.html new file mode 100644 index 000000000..ca65a71ac --- /dev/null +++ b/core/styleguide/html/styleguide.html @@ -0,0 +1,2656 @@ + + + + Pattern Lab Style Guide + + + + + + + + + +
+ + +
+
+

Colors

+
+
    +
  • + + #ff0000 +
    • +
  • + + #00ff00 +
    • +
  • + + #0000ff +
    • +
  • + + #ffff00 +
    • +
  • + + #00ffff +
    • +
  • + + #ff00ff +
    • +
  • + + #ffffff +
    • +
  • + + #808080 +
    • +
  • + + #000000 +
    • +
+ +
+
+
+

Fonts

+
+

Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

+

Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

+

Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

+

Secondary font: Georgia, Times, "Times New Roman", serif;

+

Secondary font italic: Georgia, Times, "Times New Roman", serif;

+

Secondary font bold: Georgia, Times, "Times New Roman", serif;

+ +
+
+
+

Animations

+
+
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
+ +
Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)
+ +
+
+
+

Visibility

+
+

This text is hidden on smaller screens

+ +

This text is only visible on smaller screens

+ +

This text is hidden on medium screens only

+ +

This text is only visible on medium screens

+ +

This text is hidden on large screens

+ +

This text is only visible on large screens

+ +
+
+
+

Headings

+
+

Heading Level 1

+

Heading Level 2

+

Heading Level 3

+

Heading Level 4

+
Heading Level 5
+
Heading Level 6
+ +
+
+
+

Subheadings

+
+

Subheading Level 1

+

Subheading Level 2

+

Subheading Level 3

+

Subheading Level 4

+
Subheading Level 5
+
Subheading Level 6
+ +
+
+
+

Headings With Links

+
+

Heading 1 with link

+

Heading 2 with link

+

Heading 3 with link

+

Heading 4 with link

+
Heading 5 with link
+
Heading 6 with link
+ +
+
+
+

Paragraph

+
+

So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

+ +
+
+
+

Blockquote

+
+
+

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

+
+ +
+
+
+

Inline Elements

+
+
+

This is a text link

+ +

Strong is used to indicate strong importance

+ +

This text has added emphasis

+ +

The b element is stylistically different text from normal text, without any special importance

+ +

The i element is text that is set off from the normal text

+ +

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

+ +

This text is deleted and This text is inserted

+ +

This text has a strikethrough

+ +

Superscript®

+ +

Subscript for things like H2O

+ +

This small text is small for for fine print, etc.

+ +

Abbreviation: HTML

+ +

Keybord input: Cmd

+ +

This text is a short inline quotation

+ +

This is a citation

+ +

The dfn element indicates a definition.

+ +

The mark element indicates a highlight

+ +

This is what inline code looks like.

+ +

This is sample output from a computer program

+ +

The variable element, such as x = y

+
+ + +
+
+
+

Time

+
+ + +
+
+
+

Preformatted Text

+
+ 
  	
+P R E F O R M A T T E D T E X T
+! " # $ % & ' ( ) * + , - . /
+0 1 2 3 4 5 6 7 8 9 : ; < = > ?
+@ A B C D E F G H I J K L M N O
+P Q R S T U V W X Y Z [ \ ] ^ _
+` a b c d e f g h i j k l m n o
+p q r s t u v w x y z { | } ~ 
+
+ +
+
+
+

Emphasis Colors

+
+

This is what error text looks like

+

This is what valid text looks like

+

This is what warning text looks like

+

This is what information text looks like.

+ +
+
+
+

Hr

+
+
+ +
+
+
+

Caption

+
+

A caption can be applied to an image, quote, form field, etc.

+ +
+
+
+

Unordered

+
+
+
    +
  • This is a list item in an unordered list
    • +
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
    • +
  • + Lists can be nested inside of each other +
      +
    • This is a nested list item
      • +
    • This is another nested list item in an unordered list
      • +
    +
    • +
  • This is the last list item
    • +
+
+ +
+
+
+

Ordered

+
+
+
    +
  1. This is a list item in an ordered list
    2. +
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
    3. +
  3. + Lists can be nested inside of each other +
      +
    1. This is a nested list item
      2. +
    2. This is another nested list item in an ordered list
      3. +
    +
    4. +
  4. This is the last list item
    5. +
+
+ +
+
+
+

Definition

+
+
+
Definition List
+
A number of connected items or names written or printed consecutively, typically one below the other.
+
This is a term.
+
This is the definition of that term, which both live in a dl.
+
Here is another term.
+
And it gets a definition too, which is this line.
+
Here is term that shares a definition with the term below.
+
And it gets a definition too, which is this line.
+
+ +
+
+
+

Logo

+
+ + +
+
+
+

Landscape 4x3

+
+ 4x3 Image + +
+
+
+

Landscape 16x9

+
+ 16x9 Image + +
+
+
+

Square

+
+ Square Thumbnail + +
+
+
+

Avatar

+
+ Avatar + +
+
+
+

Icons

+
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+ +
+
+
+

Loading Icon

+
+ Loading + +
+
+
+

Favicon

+
+ + + +
+
+
+

Text Fields

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

Select Menu

+
+
+
+ + +
+
+ +
+
+
+

Checkbox

+
+
+
+ Checkbox * +
    +
    • +
    • +
    • +
+
+
+ +
+
+
+

Radio Buttons

+
+
+
+ Radio +
    +
    • +
    • +
    • +
+
+
+ +
+
+
+

Html5 Inputs

+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

Buttons

+
+

Button

+

Alternate Button

+

Disabled Button

+

Text Button

+ +
+
+
+

Table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table Heading 1Table Heading 2Table Heading 3Table Heading 3Table Heading 4
Table Footer 1Table Footer 2Table Footer 3Table Footer 3Table Footer 4
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
+ +
+
+
+

Video

+
+ + +
+
+
+

Audio

+
+ + +
+
+
+

Byline Author Only

+
+
by Author Name
+ +
+
+
+

Byline Author Time

+
+
by Author Name on
+ +
+
+
+

Address

+
+
+
Company Name
+
+
1234 Main St.
+ Anywhere, + 101010, + CA +
U.S.A
+
+
+1.888.123.4567
+
+ +
+
+
+

Heading Group

+
+
+

This is the heading group's main heading

+

This is the heading group's subheading

+
+ +
+
+
+

Blockquote With Citation

+
+
+

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

+ Quote Source +
+ +
+
+
+

Intro Text

+
+

The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

+ +
+
+
+

Pullquote

+
+
+

A pull quote is a quotation or excerpt from an article

+
+ +
+
+
+

One Up

+
+
+ +
+
1/1
+
+ +
+ +
+
+
+

Two Up

+
+
+ +
+
1/2
+
1/2
+
+
+ +
+
+
+

Three Up

+
+
+ +
+
1/3
+
1/3
+
1/3
+
+
+ +
+
+
+

Four Up

+
+
+ +
+
1/4
+
1/4
+
1/4
+
1/4
+
+
+ +
+
+
+

Media Block

+
+
+ +
+ Square Thumbnail +
+
+

Lorem ipsum dolor sit (37 characters)

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+ +
+ +
+
+
+

Headline Byline

+
+
+ +

Headline: Lorem Ipsum Dolor Amet Sit

+ + +
+ +
+
+
+

Block Hero

+
+
+ +
+ 16x9 Image +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

+
+ +
+ +
+
+
+

Block Thumb Headline

+
+
+ +
+ Square Thumbnail +
+
+

Pattern Lab

+
+ +
+ +
+
+
+

Headline Only

+
+
+ +

Headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit

+ +
+ +
+
+
+

Inset Block

+
+
+ +
+ 4x3 Image +
+
+

Lorem ipsum dolor sit (37 characters)

+
+ +
+ +
+
+
+

Figure With Caption

+
+
+ 4x3 Image +
This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.
+
+ +
+
+
+

Search

+
+
+
+ Search + + + +
+
+ +
+
+
+

Comment Form

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+

Newsletter

+
+ + +
+
+
+

Primary Nav

+
+ + + +
+
+
+

Footer Nav

+
+ + +
+
+
+

Breadcrumbs

+
+ + +
+
+
+

Pagination

+
+
    +
  1. 1
    2. +
  2. 2
    3. +
  3. 3
    4. +
  4. 4
    5. +
  5. 5
    6. +
  6. 6
    7. +
  7. 7
    8. +
+ +
+
+
+

Tabs

+
+
+ +
+ +
+
+
+

Social Share

+
+ + +
+
+
+

Accordion

+
+
+ +
+ +
+
+
+

Single Comment

+
+
  • +
    + Avatar +

    Lacy Way

    +
    +
    +

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

    +
    +
    • + +
    +
    +
    +

    Alert

    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam +
    + +
    +
    +
    +

    Header

    +
    + + + + + +
    +
    +
    +

    Footer

    +
    + +
    +
    +

    © 2015 Company Name. All rights reserved.

    +
    +
    + + + +
    +
    +
    +

    Article Body

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

    + +

    Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

    + +16x9 Image + +

    Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui. +

    + +
    +

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    +
    + +

    Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim. +

    + +
    +
      +
    • This is a list item in an unordered list
      • +
    • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
      • +
    • + Lists can be nested inside of each other +
        +
      • This is a nested list item
        • +
      • This is another nested list item in an unordered list
        • +
      +
      • +
    • This is the last list item
      • +
    +
    + +
    +
      +
    1. This is a list item in an ordered list
      2. +
    2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
      3. +
    3. + Lists can be nested inside of each other +
        +
      1. This is a nested list item
        2. +
      2. This is another nested list item in an ordered list
        3. +
      +
      4. +
    4. This is the last list item
      5. +
    +
    + +

    Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus. +

    + +
    +

    A pull quote is a quotation or excerpt from an article

    +
    + +

    Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus. +

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

    + +
    +
    +
    +

    Comment Thread

    +
    +
    +
    +

    59 Comments

    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
      +
    • +
      + Avatar +

      Freyr Hines

      +
      +
      +

      Wufoo diigo grockit sifteo divvyshot, unigo zooomr revver. Edmodo appjet joyent skype bubbli jajah zoodles joukuu xobni hojoki edmodo appjet, mozy mzinga akismet yuntaa joost yuntaa geni tivo insala yoono chumby, grockit sococo loopt zanga etsy cloudera koofers empressr jiglu blippy. Omgpop lanyrd joukuu sococo zimbra airbnb movity jibjab, foodzie.

      +
      +
    • +
      + Avatar +

      Aquila Achterkamp

      +
      +
      +

      Queso caerphilly cheesecake. Parmesan chalk and cheese port-salut port-salut babybel cottage cheese cheesy grin pepper jack. Croque monsieur paneer st. agur blue cheese emmental airedale monterey jack bavarian bergkase cheese triangles. Halloumi parmesan.

      +
      +
    • +
      + Avatar +

      Siguror Hanigan

      +
      +
      +

      Mung bean squash sorrel taro coriander collard greens gumbo bitterleaf tomato. Taro water chestnut celtuce turnip yarrow celery endive scallion black-eyed pea onion. Aubergine dulse turnip greens mustard salsify garlic soybean parsley bitterleaf desert raisin courgette.

      +
      +
    • +
      + Avatar +

      Plinius Sloane

      +
      +
      +

      The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!

      +
      +
    • +
      + Avatar +

      Junius Koolen

      +
      +
      +

      Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.

      +
      +
      • +
    +
    +
      +
    1. 1
      2. +
    2. 2
      3. +
    3. 3
      4. +
    4. 4
      5. +
    5. 5
      6. +
    6. 6
      7. +
    7. 7
      8. +
    +
    + +
    +
    +
    +

    Sticky Comment

    +
    +
    +
    +

    Selected Comments

    +
      +
    • +
      +

      Lacy Way

      +
      +
      +

      We are all in the gutter, but some of us are looking at the stars.

      +
      +
      • +
    • +
      +

      Lacy Way

      +
      +
      +

      A life is like a garden. Perfect moments can be had, but not preserved, except in memory.

      +
      +
      • +
    +
    +
    + + +
    +
    +
    +

    Carousel

    +
    +
    +
    +
    + +
    + 4x3 Image +
    +
    +

    Lorem ipsum dolor sit (37 characters)

    +
    +     +
    +
    +
    + ← +
    1/5
    + → +
    +
    + +
    +
    +
    +

    Latest Posts

    +
    +
    +

    Latest Posts

    + + View more posts +
    + +
    +
    +
    +

    Recent Tweets

    +
    +
    +

    Recent Tweets

    + + Follow us on Twitter +
    + +
    +
    +
    +

    Related Posts

    +
    +
    +

    Related Posts

    + +
    + +
    +
    +
    + +
    + + + + + + + + + + + diff --git a/public/styleguide/images/spinner.gif b/core/styleguide/images/spinner.gif similarity index 100% rename from public/styleguide/images/spinner.gif rename to core/styleguide/images/spinner.gif diff --git a/public/styleguide/js/annotations-pattern.js b/core/styleguide/js/annotations-pattern.js similarity index 100% rename from public/styleguide/js/annotations-pattern.js rename to core/styleguide/js/annotations-pattern.js diff --git a/public/styleguide/js/annotations-viewer.js b/core/styleguide/js/annotations-viewer.js similarity index 100% rename from public/styleguide/js/annotations-viewer.js rename to core/styleguide/js/annotations-viewer.js diff --git a/public/styleguide/js/code-pattern.js b/core/styleguide/js/code-pattern.js similarity index 100% rename from public/styleguide/js/code-pattern.js rename to core/styleguide/js/code-pattern.js diff --git a/public/styleguide/js/code-viewer.js b/core/styleguide/js/code-viewer.js similarity index 100% rename from public/styleguide/js/code-viewer.js rename to core/styleguide/js/code-viewer.js diff --git a/public/styleguide/js/data-saver.js b/core/styleguide/js/data-saver.js similarity index 100% rename from public/styleguide/js/data-saver.js rename to core/styleguide/js/data-saver.js diff --git a/public/styleguide/js/pattern-finder.js b/core/styleguide/js/pattern-finder.js similarity index 100% rename from public/styleguide/js/pattern-finder.js rename to core/styleguide/js/pattern-finder.js diff --git a/public/styleguide/js/postmessage.js b/core/styleguide/js/postmessage.js similarity index 100% rename from public/styleguide/js/postmessage.js rename to core/styleguide/js/postmessage.js diff --git a/public/styleguide/js/styleguide.js b/core/styleguide/js/styleguide.js similarity index 100% rename from public/styleguide/js/styleguide.js rename to core/styleguide/js/styleguide.js diff --git a/public/styleguide/js/url-handler.js b/core/styleguide/js/url-handler.js similarity index 100% rename from public/styleguide/js/url-handler.js rename to core/styleguide/js/url-handler.js diff --git a/public/styleguide/js/vendor/classlist-polyfill.js b/core/styleguide/js/vendor/classlist-polyfill.js similarity index 100% rename from public/styleguide/js/vendor/classlist-polyfill.js rename to core/styleguide/js/vendor/classlist-polyfill.js diff --git a/public/styleguide/js/vendor/jquery.js b/core/styleguide/js/vendor/jquery.js similarity index 100% rename from public/styleguide/js/vendor/jquery.js rename to core/styleguide/js/vendor/jquery.js diff --git a/public/styleguide/js/vendor/jwerty.js b/core/styleguide/js/vendor/jwerty.js similarity index 100% rename from public/styleguide/js/vendor/jwerty.js rename to core/styleguide/js/vendor/jwerty.js diff --git a/public/styleguide/js/vendor/prism.js b/core/styleguide/js/vendor/prism.js similarity index 100% rename from public/styleguide/js/vendor/prism.js rename to core/styleguide/js/vendor/prism.js diff --git a/public/styleguide/js/vendor/typeahead.bundle.min.js b/core/styleguide/js/vendor/typeahead.bundle.min.js similarity index 100% rename from public/styleguide/js/vendor/typeahead.bundle.min.js rename to core/styleguide/js/vendor/typeahead.bundle.min.js diff --git a/gulpfile.js b/gulpfile.js index 8968af50d..531af50a7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -104,8 +104,8 @@ gulp.task('connect', ['lab'], function(){ gulp.watch(path.resolve(paths().source.css, '**/*.css'), ['cp:css']); //suggested watches if you use scss - // gulp.watch('./source/css/**/*.scss', ['sass:style']); - // gulp.watch('./public/styleguide/*.scss', ['sass:styleguide']); + // gulp.watch(paths().source.css + '**/*.scss', ['sass:style']); + // gulp.watch(paths().public.styleguide + '*.scss', ['sass:styleguide']); gulp.watch( [ @@ -127,21 +127,21 @@ gulp.task('nodeunit', function(){ //sass tasks, turn on if you want to use // gulp.task('sass:style', function(){ -// return gulp.src('./source/css/*.scss') +// return gulp.src(paths().source.css + '*.scss') // .pipe(sass({ // outputStyle: 'expanded', // precision: 8 // })) -// .pipe(gulp.dest('./public/css')) +// .pipe(gulp.dest(paths().public.css)) // .pipe(browserSync.stream()); // }) // gulp.task('sass:styleguide', function(){ -// return gulp.src('./public/styleguide/css/*.scss') +// return gulp.src(gulp.dest(paths().public.styleguide + 'css/*.scss') // .pipe(sass({ // outputStyle: 'expanded', // precision: 8 // })) -// .pipe(gulp.dest('./public/styleguide/css')) +// .pipe(gulp.dest(paths().public.styleguide + 'css')) // .pipe(browserSync.stream()); // }) From 8ed60e0180db214bf0ff5f9099cc5e9087c8abb6 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 11:35:53 -0600 Subject: [PATCH 02/12] remove scss files from styleguide project --- core/styleguide/css/static.scss | 404 -------- core/styleguide/css/styleguide-specific.scss | 141 --- core/styleguide/css/styleguide.scss | 953 ------------------- source/css/scss/base/_animation.scss | 13 - source/css/scss/base/_forms.scss | 138 --- source/css/scss/base/_global-classes.scss | 102 -- source/css/scss/base/_headings.scss | 31 - source/css/scss/base/_links.scss | 10 - source/css/scss/base/_lists.scss | 19 - source/css/scss/base/_main.scss | 6 - source/css/scss/base/_media.scss | 23 - source/css/scss/base/_tables.scss | 18 - source/css/scss/base/_text.scss | 26 - source/css/scss/generic/_mixins.scss | 23 - source/css/scss/generic/_reset.scss | 17 - source/css/scss/generic/_variables.scss | 74 -- source/css/scss/objects/_accordion.scss | 33 - source/css/scss/objects/_ads.scss | 0 source/css/scss/objects/_article.scss | 52 - source/css/scss/objects/_blocks.scss | 138 --- source/css/scss/objects/_buttons.scss | 39 - source/css/scss/objects/_carousels.scss | 38 - source/css/scss/objects/_comments.scss | 29 - source/css/scss/objects/_footer.scss | 46 - source/css/scss/objects/_header.scss | 40 - source/css/scss/objects/_icons.scss | 125 --- source/css/scss/objects/_layout.scss | 288 ------ source/css/scss/objects/_lists.scss | 63 -- source/css/scss/objects/_main.scss | 9 - source/css/scss/objects/_messaging.scss | 18 - source/css/scss/objects/_nav.scss | 52 - source/css/scss/objects/_sections.scss | 7 - source/css/scss/objects/_tabs.scss | 33 - source/css/scss/objects/_text.scss | 77 -- source/css/scss/objects/_tooltip.scss | 42 - source/css/style.scss | 114 --- 36 files changed, 3241 deletions(-) delete mode 100644 core/styleguide/css/static.scss delete mode 100644 core/styleguide/css/styleguide-specific.scss delete mode 100644 core/styleguide/css/styleguide.scss delete mode 100644 source/css/scss/base/_animation.scss delete mode 100644 source/css/scss/base/_forms.scss delete mode 100644 source/css/scss/base/_global-classes.scss delete mode 100644 source/css/scss/base/_headings.scss delete mode 100644 source/css/scss/base/_links.scss delete mode 100644 source/css/scss/base/_lists.scss delete mode 100644 source/css/scss/base/_main.scss delete mode 100644 source/css/scss/base/_media.scss delete mode 100644 source/css/scss/base/_tables.scss delete mode 100644 source/css/scss/base/_text.scss delete mode 100644 source/css/scss/generic/_mixins.scss delete mode 100644 source/css/scss/generic/_reset.scss delete mode 100644 source/css/scss/generic/_variables.scss delete mode 100644 source/css/scss/objects/_accordion.scss delete mode 100644 source/css/scss/objects/_ads.scss delete mode 100644 source/css/scss/objects/_article.scss delete mode 100644 source/css/scss/objects/_blocks.scss delete mode 100644 source/css/scss/objects/_buttons.scss delete mode 100644 source/css/scss/objects/_carousels.scss delete mode 100644 source/css/scss/objects/_comments.scss delete mode 100644 source/css/scss/objects/_footer.scss delete mode 100644 source/css/scss/objects/_header.scss delete mode 100644 source/css/scss/objects/_icons.scss delete mode 100644 source/css/scss/objects/_layout.scss delete mode 100644 source/css/scss/objects/_lists.scss delete mode 100644 source/css/scss/objects/_main.scss delete mode 100644 source/css/scss/objects/_messaging.scss delete mode 100644 source/css/scss/objects/_nav.scss delete mode 100644 source/css/scss/objects/_sections.scss delete mode 100644 source/css/scss/objects/_tabs.scss delete mode 100644 source/css/scss/objects/_text.scss delete mode 100644 source/css/scss/objects/_tooltip.scss delete mode 100644 source/css/style.scss diff --git a/core/styleguide/css/static.scss b/core/styleguide/css/static.scss deleted file mode 100644 index a22d5d744..000000000 --- a/core/styleguide/css/static.scss +++ /dev/null @@ -1,404 +0,0 @@ -/* -colors -red: $orange; rgb(229,24,55) -gray: #808080; -*/ - -$orange : #bededf; - -$max-width: 60em; - -/************Reset**************/ -* { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -html, body, div, object, iframe, fieldset { - margin: 0; - padding: 0; - border: 0; -} -ol, ul { - list-style: none; - margin: 0; - padding: 0; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -header, footer, nav, section, article, hgroup, figure { - display: block; -} -legend { - display: none; -} -/************End Reset**************/ - -/************Global**************/ -body { - background: #fff; - color: #000; - font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif; - padding: 0; - -webkit-text-size-adjust: 100%; - border-top: 20px solid #000; - border-bottom: 20px solid #000; -} -a { - color: #808080; - text-decoration: none; -} -a:hover, a:focus { - color: $orange; -} -p { - margin: 0 0 1em; -} -img, object, video { - max-width: 100%; - border: 0; -} -a img { - border: 0; - outline: 0; -} -h1 { - font-size: 3em; - line-height: 1; - letter-spacing: -0.02em; - margin-bottom: 0.2em; -} -h2 { - font-size: 2em; - line-height: 1.1; - margin-bottom: 0.2em; -} -h3 { - font-weight: normal; - line-height: 1.1; - padding-bottom: 0.4em; - border-bottom: 1px solid #ccc; -} -h1 a, h2 a, h3 a { - display: block; - color: #000; -} -h1 a:hover, h2 a:hover, h3 a:hover { - color: $orange; -} -blockquote { - border-left: 0.5em solid #ddd; - padding-left: 1em; - margin-left: 1em; -} -small { - color: $orange; -} -input[type=search] { - -webkit-appearance: none; - border-radius: 0; -} -::-webkit-input-placeholder { - color: #808080; -} -:-moz-placeholder { - color: #808080; -} -/************End Global**************/ - -/************Classes**************/ -.inactive { - color: #ddd; -} -/************End Classes**************/ - -/************Structure**************/ -.container { - max-width: $max-width; - margin: 0 auto; - padding: 0 1em; - overflow: hidden; -} - -[role=main] { - padding-bottom: 1em; -} - -/*Footer*/ -[role=contentinfo] { - color: #fff; - background: #000; - margin: 0 -1em; - position: relative; - z-index: 2; - - > div { - max-width: $max-width; - padding: 0 1em; - margin: 0 auto; - overflow: hidden; - } -} -/*End Footer*/ - -/*Grid*/ -.grid { - margin: 0 -1em; - overflow: hidden; -} -.grid:target { - -webkit-animation: fadeout 5s 1 ease-out; - -moz-animation: fadeout 5s 1 ease-out; - -o-animation: fadeout 5s 1 ease-out; - animation: fadeout 5s 1 ease-out; -} -.grid > h2 { - margin-left: 0.45em; -} -.grid > section { - padding: 1em 1em 0.5em; -} -.grid > section:target { - -webkit-animation: fadeout 5s 1 ease-out; - -moz-animation: fadeout 5s 1 ease-out; - -o-animation: fadeout 5s 1 ease-out; - animation: fadeout 5s 1 ease-out; -} -.grid ul { - overflow: hidden; -} -.grid ul li { - margin-bottom: 0.3em; -} -.featured:after { - content: "*"; - color: $orange; -} - -/*Fluid*/ -.fluid { - display: block; - margin: 0 auto; - max-width: 40em; -} - -/*Homepage*/ -.home h1 { - margin-bottom: 0.2em; -} -.intro { - font-size: 1.8em; - line-height: 1.2; - margin: 0 auto; -} -.intro a:hover ,.intro a:focus { - color: #000; - border-bottom-color: #000; -} - -.ani { - position: relative; - height: 15em; - margin: 1em 0 0; - width: 100%; - z-index: 0; -} -.ani div { - width: 100%; -} -.ani div b { - display: block; - position: absolute; - top: 5%; - right: 5%; - bottom: 5%; - left: 5%; - background: rgba(229,24,55,0.22); -} - - -/*Patterns*/ -.mod { - padding: 1em; -} -.pattern { - background: #f7f7f7; - border-bottom: 1px solid #808080; - margin-bottom: 1em; - overflow: hidden; -} -.pattern-description h1 { - font-size: 3.4em; - margin-bottom: 0.5em; -} -.pattern-description { - max-width: 40em; - margin: 0 auto; -} -.pattern-description ul, .pattern-description ol { - margin-bottom: 2em; -} -.pattern-description li { - margin-bottom: 1em; -} - - -/*Blog*/ -/*Blog Header*/ -.blog .container { - max-width: 62em; -} -.blog header[role=banner] { - overflow: hidden; - margin-bottom: 2em; - padding: 2em 0 1em; - border-bottom: 1px solid #000; -} -.blog-logo { - font-weight: normal; - font-size: 1.2em; - margin: 0 0 1em; -} -.blog-logo img { - width: 3.3em; -} -.blog-logo a { - color: #000; -} -.search-form { - width: 100%; - margin-bottom: 1em; -} -.search-field { - width: 100%; - padding: 0.5em 0; - border: 0; - border-bottom: 1px solid #808080; - outline: none; -} -.search-field:focus { - background: $orange; - color: #fff; -} -.search-field:focus::-webkit-input-placeholder { - color: #fff; -} - -.search-field:focus :-moz-placeholder { - color: #fff; -} - -.blog .nav { - clear: both; -} -.blog .nav a { - display: block; - font-weight: bold; - color: #000; -} -.blog .nav a:hover { - color: $orange; -} - -/*Posts*/ -.posts ol > li { - padding-bottom: 1em; - border-bottom: 1px solid #ccc; - margin-bottom: 1em; - overflow: hidden; -} -.posts h2 { - font-size: 1.4em; - margin: 0.28em 0 0.1em; - font-weight: normal; -} -.posts h2 a { - color: #000; -} -.posts h2 a:hover, .posts h2 a:focus { - color: $orange; -} -.permalink { - display: block; - font-size: 0.8em; - margin-bottom: 1.2em; -} -.post-body a { - border-bottom: 1px solid #ccc; -} -.posts blockquote { - margin: 0 0 1em; - color: #666; - border-left: 0.25em solid #ccc; - padding-left: 1em; -} -.tags { - float: left; -} -.tags li { - display: inline-block; - font-size: 0.8em; - margin-right: 0.5em; -} - -.posts ol > li .tags a, .permalink { - color: #ccc; - -webkit-transition: color 0.3s ease-out; - -moz-transition: color 0.3s ease-out; - -ms-transition: color 0.3s ease-out; - -o-transition: color 0.3s ease-out; - transition: color 0.3s ease-out; -} -.posts ol > li:hover .tags a, .posts ol > li:hover .permalink { - color: #808080; -} -.blog-nav { - text-align: center; - overflow: hidden; - padding: 1em 0; -} -.posts .blog-nav a { - border: 0; -} -.nav-next { - float: right; -} -.nav-prev { - float: left; -} - -/* Sidebar */ -.sidebar { - font-size: 0.8em; - padding-bottom: 1.4em; -} -.sidebar div { - margin-bottom: 2em; -} -.sidebar h3 { - font-weight: bold; - font-size: 0.9em; - line-height: 1; - border-bottom: 1px solid #000; -} -.sidebar a { - color: #808080; -} -.sidebar a:hover, .sidebar a:focus { - color: $orange; -} - - - - -.top { - clear: both; - display: block; - padding: 1em 0; -} -.top:before { - content: '▲'; -} - diff --git a/core/styleguide/css/styleguide-specific.scss b/core/styleguide/css/styleguide-specific.scss deleted file mode 100644 index f55a99390..000000000 --- a/core/styleguide/css/styleguide-specific.scss +++ /dev/null @@ -1,141 +0,0 @@ -/*------------------------------------*\ - $PATTERN LAB-SPECIFIC STYLES -\*------------------------------------*/ -/** - * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab. - * This is helpful for displaying demo styles for grids, animations, color swatches, etc - * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements - * These styles will not be your production CSS. - */ - - -/* Style Guide Interface Colors */ -$sg-primary : #222; -$sg-secondary : #808080; -$sg-tertiary : #ddd; -$sg-quaternary : #fff; -$sg-quinary : #999; -$sg-tint : rgba(255,255,255,0.05); -$sg-tint-2 : rgba(255,255,255,0.25); -$sg-tone : rgba(0,0,0,0.1); -$sg-tone-2 : rgba(0,0,0,0.3); - -/* Typography */ -$sg-font-size-norm : 100%; -$sg-font-size-sm : 70%; -$sg-font-size-large : 120%; - -/* Defaults */ -$sg-space : 1em; -$sg-doublespace : $sg-space*2; -$sg-pad : 1em; -$sg-pad-half : $sg-pad/2; - -/* Dimensions */ -$offset-top: 2em; - -/* Breakpoints */ -$sg-bp-small : 24em; -$sg-bp-small-2 : 30em; -$sg-bp-med : 48em; -$sg-bp-large : 72em; -$sg-bp-xl : 80em; - -$animate-quick: 0.2s; - - -// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles -.demo { - overflow: hidden; - margin-bottom: 1rem; -} - -.demo .gi, .demo .demo-block { - background: $sg-tertiary; - color: $sg-secondary; - text-align: center; - margin-bottom: $sg-pad-half; - padding: 1em !important; - - &:nth-of-type(2n) { - color: $sg-tertiary; - background: $sg-secondary; - } - - .gi { - background: $sg-tone; - color: $sg-tertiary; - - &:nth-of-type(2n) { - background: $sg-tone-2; - } - } -} - -//Demo box for animation -.demo-animate { - background: #ddd; - padding: $sg-pad; - margin-bottom: $sg-space; - text-align: center; -} - -//Animate Demo to show -.animate-move { - position: relative; - - .demo-shape { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 20px; - background: $sg-secondary; - } - - &:hover { - > .demo-shape { - left: 100%; - margin-left: -20px; - } - } -} - -// Style Guide color swatches -.sg-colors { - overflow: hidden; - - li { - overflow: hidden; - border: 1px solid $sg-tertiary; - padding: 0.3em; - margin: 0 0.2em 0.2em 0; - - @media all and (min-width: $sg-bp-small-2) { - float: left; - width: 5em; - } - } -} - -.sg-swatch { - display: block; - height: 1.5em; - width: 50%; - - @media all and (max-width: $sg-bp-small-2) { - float: left; - margin-right: 0.3em; - } - - @media all and (min-width: $sg-bp-small-2) { - width: 100%; - height: 4em; - margin-bottom: 0.2em; - } - -} - -.sg-label { - line-height: 1; -} \ No newline at end of file diff --git a/core/styleguide/css/styleguide.scss b/core/styleguide/css/styleguide.scss deleted file mode 100644 index b0b38c0f7..000000000 --- a/core/styleguide/css/styleguide.scss +++ /dev/null @@ -1,953 +0,0 @@ -/*------------------------------------*\ - $PATTERN LAB STYLES -\*------------------------------------*/ -/** - * NOTE: These styles are specific to Pattern Lab and should not be modified. - * Edit all project styles in /source/css/ - * - * Second note: Any important declarations are to prevent brand styles from overriding style guide - */ - - -/*------------------------------------*\ - $CONTENTS -\*------------------------------------*/ -/** - * STYLE GUIDE VARIABLES------------------Declarations of Sass variables - * -----Font - * -----Colors - * -----Typography - * -----Defaults - * -----Breakpoints - * MIXINS---------------------------------Sass mixins - * GLOBAL ELEMENTS------------------------Establish global styles - * -----Main - * -----Headings - * -----Text-related elements (p, blockquote, lists) - * -----Defaults - * -----Breakpoints - * STYLE GUIDE INTERFACE------------------CSS for the Pattern Lab Container. - * -----Header - * -----Navigation - * -----Controls - * -----Main Container - * -----Viewport - * -----Section Headers - * -----Code View - * -----Icon Fonts - */ - - - - - -/*------------------------------------*\ - $PATTERN LAB VARIABLES -\*------------------------------------*/ -/*Fonts*/ -$sg-font : "HelveticaNeue", "Helvetica", "Arial", sans-serif; - -/* Style Guide Interface Colors */ -$sg-primary : #222; -$sg-secondary : #808080; -$sg-tertiary : #ddd; -$sg-quaternary : #fff; -$sg-quinary : #999; -$sg-tint : rgba(255,255,255,0.05); -$sg-tint-2 : rgba(255,255,255,0.25); -$sg-tone : rgba(0,0,0,0.1); -$sg-tone-2 : rgba(0,0,0,0.3); - -/* Typography */ -$sg-font-size-norm : 100%; -$sg-font-size-sm : 70%; -$sg-font-size-large : 120%; - -/* Defaults */ -$sg-space : 1em; -$sg-doublespace : $sg-space*2; -$sg-pad : 1em; -$sg-pad-half : $sg-pad/2; - -/* Dimensions */ -$offset-top: 2em; - -/* Breakpoints */ -$sg-bp-small : 24em; -$sg-bp-small-2 : 30em; -$sg-bp-med : 48em; -$sg-bp-large : 72em; -$sg-bp-xl : 80em; - -$animate-quick: 0.2s; - - - - - -/*------------------------------------*\ - $PATTERN LAB MIXINS -\*------------------------------------*/ -@mixin sg-transition($transition-property, $transition-time, $method) { - -webkit-transition: $transition-property $transition-time $method; - -moz-transition: $transition-property $transition-time $method; - -ms-transition: $transition-property $transition-time $method; - -o-transition: $transition-property $transition-time $method; - transition: $transition-property $transition-time $method; -} - - - - - - -/*------------------------------------*\ - $PATTERN LAB INTERFACE -\*------------------------------------*/ - -#patternlab-html, #patternlab-body { - margin: 0; - padding: 0; - background: $sg-tertiary; - -webkit-text-size-adjust: 100%; -} - -.sg-nav-wrapper { - overflow: hidden; - background: $sg-tertiary; -} - -.is-vishidden { - position: absolute !important; - overflow: hidden; - width: 1px; - height: 1px; - padding: 0; - border: 0; - clip: rect(1px, 1px, 1px, 1px); -} - - -//Clearfix -.sg-cf { - /**zoom: 1;*/ - - &:before, &:after { - content: " "; - display: table; - } - - &:after { - clear: both; - } -} - - - -/*------------------------------------*\ - $PATTERN LAB HEADER -\*------------------------------------*/ -/* Header */ -.sg-header { - background: $sg-primary; - color: $sg-quaternary; - font-family: $sg-font; - text-transform: uppercase; - position: fixed; - top: 0; - left: 0; - z-index: 2; - width: 100%; - - * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - } - - ul, ol { - padding: 0; - margin: 0; - } - - li { - list-style: none; - border-bottom: 1px solid $sg-tint; - } - - a { - font-size: $sg-font-size-sm; - color: $sg-secondary; - text-decoration: none; - display: block; - line-height: 1; - padding: $sg-pad; - @include sg-transition(background,0.15s,ease-out); - @include sg-transition(color,0.15s,ease-out); - - &:hover, &:focus, &.active { - color: $sg-quaternary; - background: $sg-tint; - } - } - - ol ol ol a { //3rd level nav item - padding-left: 2em; - text-transform: none; - } -} - - - -/* Navigation */ -.sg-header .sg-nav-toggle { - display: inline-block; - padding: 0.9em $sg-pad; - border-bottom: 1px solid rgba(0,0,0,0); - position: relative; - text-transform: uppercase; - z-index: 2; - - span { - display: inline-block; - padding-right: 0.2em; - } - - @media all and (min-width: $sg-bp-med) { - display: none; - } -} - -.sg-nav-container { - @media all and (max-width: $sg-bp-med) { - overflow: hidden; - max-height: 0; - @include sg-transition(max-height,0.1s,ease-out); - - &.active { - max-height: 50em; - } - } -} - -.sg-nav { - z-index: 1; - margin: 0; - padding: 0; - list-style: none; - - > li { - cursor: pointer; - - @media all and (min-width: $sg-bp-med) { - border-bottom: 0; - border-right: 1px solid $sg-tint; - float: left; - position: relative; - - > ol { - position: absolute; - top: $offset-top; - left: 0; - } - - } - } -} - -/* Accordion */ -.sg-acc-handle { - &:after { - content: ' +'; - float: right; - font-size: $sg-font-size-sm; - - @media all and (min-width: $sg-bp-med) { - float: none; - } - } - - &.active { - color: $sg-quaternary; - background: $sg-tint; - &:after { - content: ' -'; - } - } - - &.sg-icon:after { - content: ""; - } -} - -.sg-header .sg-icon { - width: auto; - font-size: 1rem; - padding: 0.5rem 1rem; -} - -.sg-acc-panel { - overflow: hidden; - max-height: 0; - min-width: 10em; - @include sg-transition(max-height,0.1s,ease-out); - - li { - background: $sg-primary; - } - - &.active { - max-height: 120em; - overflow: auto; - } - - &.sg-right { - position: absolute; - left: auto; - right: 0; - } - - &.sg-left { - position: absolute; - left: auto; - } - - [class^="sg-icon-"] { - &:before { - display: inline-block; - margin-right: 0.4em; - } - } -} - -/* Controls (sizing, view mode) */ -.sg-controls { - border: 0; - position: absolute; - top: 0; - right: 0; - z-index: 2; -} - -.sg-control-trigger { - border-bottom: 1px solid $sg-tint; - - @media all and (min-width: $sg-bp-med) { - border: 0; - } - - @media all and (min-width: $sg-bp-large) { - float: left; - width: 6em; - } -} - -.sg-control { - > li { - float: left; - - @media all and (min-width: $sg-bp-med) { - border-bottom: 0; - border-left: 1px solid $sg-tint; - } - } - - .sg-input { - padding: 0.1em; - -webkit-transition: all $animate-quick ease-out; - -moz-transition: all $animate-quick ease-out; - -ms-transition: all $animate-quick ease-out; - -o-transition: all $animate-quick ease-out; - transition: all $animate-quick ease-out; - - &:active, &:focus { - outline: 0; - background: $sg-quinary; - color: #000; - } - } -} - -.sg-current-size { - font-size: 70%; - color: $sg-secondary; - padding: 0.85em 0.7em; - - &:hover { - .sg-input { - background: $sg-quinary; - color: #000; - } - } - - @media all and (min-width: $sg-bp-large) { - float: left; - } -} - -.sg-size { - width: 135px; - - @media all and (min-width: $sg-bp-med) { - width: auto; - } -} - -.sg-size-options { - - @media all and (min-width: $sg-bp-large) { - float: left; - position: static; - max-height: none; - max-width: none; - - > li { - float: left; - border: 0; - border-left: 1px solid $sg-tint; - } - } -} - -//Media Queries Dropdown -#sg-size-mq { - display: none; - - @media all and (min-width: $sg-bp-large) { - display: block; - } -} - -#sg-form { - margin: 0; - border: 0; - padding: 0; -} - -.sg-input { - margin: -2px 0 0 0; - padding: 0; - border: 0; - background-color: #222; - color: gray; - width: 25px; - text-align: right; - - @media all and (min-width: $sg-bp-med) { - width: 35px; - } -} - -.sg-input-active { - background-color: #fff; - color: #000; -} - -.sg-view { - position: relative; - - > ul { - position: absolute; - top: $offset-top; - left: 0; - } -} - -//Checklist dropdown lists -.sg-checkbox { - @extend .sg-icon-radio-unchecked; - - &:before { - display: inline-block; - margin-right: 0.4em; - } - - &.active { - @extend .sg-icon-radio-checked; - } -} - -//Pattern States (active, inprogress, complete, etc) - -/* basic styling */ -.sg-pattern-state:before { - margin-right: 4px; - content: "\2022"; - display: inline-block; - margin-bottom: -4px; - font-size: 18px; - vertical-align: bottom; -} - -/* nav styling */ -.sg-nav .sg-pattern-state:before { - margin-top: -4px; - margin-bottom: 0; - margin-left: -4px; - height: 20px; - display: block; - float: left; -} - -.sg-sub-nav .sg-pattern-state:before { - margin-left: -11px; - margin-right: 4px; -} - -/* call out for pattern's pattern state */ -span.sg-pattern-state { - color: #999; -} - -span.sg-pattern-state:before { - margin-bottom: -3px; - margin-left: 4px; -} - -/* pattern states */ -.inprogress:before { - color: #FF4136 !important; -} - -.inreview:before { - color: #FFCC00 !important; -} - -.complete:before { - color: #2ECC40 !important; -} - - - -/*------------------------------------*\ - $PATTERN LAB VIEWPORT -\*------------------------------------*/ - -/* Viewport */ -#sg-vp-wrap { - text-align: center; - width: 100%; - position: fixed; - top: $offset-top; - bottom: 0; - left: 0; - right: 0; - z-index: 0; - - &.wrap-animate { - -webkit-transition: left 0.3s ease-out; - -moz-transition: left 0.3s ease-out; - -ms-transition: left 0.3s ease-out; - -o-transition: left 0.3s ease-out; - transition: left 0.3s ease-out; - } - -} - -#sg-viewport { - position: absolute; - height: 100%; - width: 100%; - border: 0; - padding: 0; - margin: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: white; - - &.hay-mode { - -webkit-transition: all 40s linear; - -moz-transition: all 40s linear; - -ms-transition: all 40s linear; - -o-transition: all 40s linear; - transition: all 40s linear; - } -} - -.no-resize { - #sg-cover, #sg-rightpull-container { - display: none; - } - - #sg-viewport { - overflow: hidden !important; - } - -} - -#sg-cover { - width: 100%; - height: 100%; - display: none; - position: absolute; - z-index: 20; - cursor: col-resize; -} - -#sg-gen-container { - height: 100%; - position: relative; - text-align: center; - margin: 0 auto; - -webkit-overflow-scrolling: touch; - overflow-y: auto; - overflow-x: hidden; - - &.hay-mode { - -webkit-transition: all 40s linear; - -moz-transition: all 40s linear; - -ms-transition: all 40s linear; - -o-transition: all 40s linear; - transition: all 40s linear; - } -} - -#sg-rightpull-container { - width: 14px; - float: right; - margin: 0; - height: 100%; - cursor: col-resize; -} - -#sg-rightpull { - margin: 0; - width: 100%; - height: 100%; - background: #999; - -webkit-transition: background $animate-quick ease-out; - -moz-transition: background $animate-quick ease-out; - -ms-transition: background $animate-quick ease-out; - -o-transition: background $animate-quick ease-out; - transition: background $animate-quick ease-out; - - &:hover { - background: #666; - } - - &:active { - cursor: col-resize; - background: #444; - } -} - -.vp-animate { - -webkit-transition: width 0.8s ease-out; - -moz-transition: width 0.8s ease-out; - -ms-transition: width 0.8s ease-out; - -o-transition: width 0.8s ease-out; - transition: width 0.8s ease-out; -} - - - - - -/*------------------------------------*\ - $PATTERN LAB CONTENT -\*------------------------------------*/ - -/* Section Pattern */ -.sg-pattern { - margin-bottom: $sg-doublespace; - position: relative; //Prevents absolutely-positioned elements from floating to the top - @extend .sg-cf; -} - -/* Section Head */ -.sg-pattern-head { - margin: $sg-doublespace 0; - font-family: $sg-font; - font-size: $sg-font-size-sm; - font-weight: normal; - padding: $sg-pad 0; - border-bottom: 1px solid $sg-secondary; - - a { - display: block; - color: $sg-secondary; - text-decoration: none; - cursor: pointer; - - &:hover { - color: $sg-primary; - } - } -} - -//Annotations and code view container -.sg-view-container { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - font-family: $sg-font; - line-height: 1.4; - font-size: 90%; - background: $sg-primary; - color: $sg-secondary; - position: fixed; - top: auto; - padding: $sg-pad; - bottom: 0; - left: 0; - z-index: 2; - width: 100%; - height: 50%; - overflow-y: auto; - overflow-x: hidden; - - a { - color: $sg-quinary; - } - - pre { - padding: 0 1em; - } - - &.anim-ready { - -webkit-transition: bottom 0.3s ease-out; - -moz-transition: bottom 0.3s ease-out; - -webkit-transition: bottom 0.3s ease-out; - -ms-transition: bottom 0.3s ease-out; - -o-transition: bottom 0.3s ease-out; - transition: bottom 0.3s ease-out; - } -} - -//Annotation and code view close button -.sg-view-close { - width: 100%; - margin-bottom: -10px; -} - -.sg-view-close-btn { - color: #fff; - text-transform: uppercase; - text-decoration: none; - text-align: right; - display: block; -} - -//Annotated elements Styles -.has-annotation { - cursor: help !important; - box-shadow: 0 0 10px $sg-secondary; - - a, input { - cursor: help !important; - } - - &:hover { - box-shadow: 0 0 10px $sg-primary; - } - - &.active { - box-shadow: inset 0 0 20px $sg-secondary; - } - -} - -.annotation-tip { - display: block; - position: absolute; - margin-top: -10px !important; - margin-left: -10px !important; - width: 25px !important; - height: 25px !important; - border-radius: 13px !important; - text-align: center !important; - background: #444 !important; - color: #fff !important; - font-weight: bold !important; - font-size: 16px !important; - z-index: 100; -} - -#sg-comments-container { - max-width: 60em; - margin: 0 auto; -} - -.sg-comment-container { - padding-bottom: 2em; - margin-bottom: $sg-space; - border-bottom: 1px solid $sg-tint-2; - - p:last-child { - margin-bottom: 0; - } - - h2 { - margin-bottom: 0.25em; - } -} - -.sg-code, .sg-annotations { - clear: both; - background: $sg-tertiary; - color: $sg-primary; - padding: $sg-pad $sg-pad-half; - margin: $sg-space 0; - - a { - text-decoration: underline; - } -} - -.sg-code { - pre { - white-space: -moz-pre-line; - white-space: -pre-line; - white-space: -o-pre-line; - word-wrap: break-word; - white-space: pre-line; - border: 1px solid $sg-tone; - padding: $sg-pad-half; - } -} - -.sg-code-contains { - margin-bottom: 1rem; - font-size: 85%; - color: $sg-secondary; - - code { - padding: 0.2em; - background: $sg-tone-2; - color: $sg-quinary; - position: relative; - top: -2px; - } -} - -.sg-code-head { - color: $sg-secondary; - font-size: 1em; -} - -#sg-code-markup { - padding-top: 10px; -} - -#sg-code-tabs { - list-style: none; - margin: 0; - padding: 0; -} - -#sg-code-tabs li { - float: left; - background-color: #333; - font-size: 1.3em; - font-weight: bold; - padding: 5px 15px; - border-top: 2px solid #666; - margin-right: 2px; - cursor: pointer; -} - -.sg-code-title-active { - color: #bbb; - background-color: #272822 !important; -} - -div.clear { - clear: both; -} - -.sg-code-patternname { - color: #aaa; -} - -#sg-code-loader { - display: none; - position: absolute; - left: 45%; - top: 20%; - width: 150px; - padding: 10px; - text-align: center; - border-radius: 10px; - background-color: #000; - z-index: 100; -} - -.spinner { - height: 30px; - width: 30px; - margin-left: auto; margin-right: auto; - background-position: center center; - background-repeat: no-repeat; - background: url('../images/spinner.gif'); - border-radius: 50%; - opacity: .7; -} - -/* Pattern Lab icon fonts */ -@font-face { - font-family: 'icomoon'; - src:url('../fonts/icomoon.eot?srsv7g'); - src:url('../fonts/icomoon.eot?#iefixsrsv7g') format('embedded-opentype'), - url('../fonts/icomoon.woff?srsv7g') format('woff'), - url('../fonts/icomoon.ttf?srsv7g') format('truetype'), - url('../fonts/icomoon.svg?srsv7g#icomoon') format('svg'); - font-weight: normal; - font-style: normal; -} - -.sg-icon-search, .sg-icon-cog, .sg-icon-minus, .sg-icon-plus, .sg-icon-menu, .sg-icon-radio-checked, .sg-icon-radio-unchecked, .sg-icon-file, .sg-icon-link, .sg-icon-keyboard, .sg-icon-qrcode, .sg-icon-eye, .sg-checkbox { - font-family: 'icomoon'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.sg-icon-search:before { - content: "\e600"; - font-size: 85%; -} -.sg-icon-cog:before { - content: "\e601"; -} -.sg-icon-minus:before { - content: "\e602"; -} -.sg-icon-plus:before { - content: "\e603"; -} -.sg-icon-menu:before { - content: "\e604"; -} -.sg-icon-radio-checked:before, .sg-checkbox.active:before { - content: "\e605"; -} -.sg-icon-radio-unchecked:before, .sg-checkbox:before { - content: "\e606"; -} -.sg-icon-file:before { - content: "\e607"; -} -.sg-icon-link:before { - content: "\e608"; -} -.sg-icon-keyboard:before { - content: "\e609"; -} -.sg-icon-qrcode:before { - content: "\e60a"; -} -.sg-icon-eye:before { - content: "\e60b"; -} - -/******************************************************************/ -/* End Pattern Lab Interface code */ \ No newline at end of file diff --git a/source/css/scss/base/_animation.scss b/source/css/scss/base/_animation.scss deleted file mode 100644 index d28bc9136..000000000 --- a/source/css/scss/base/_animation.scss +++ /dev/null @@ -1,13 +0,0 @@ -.animate-fade { - @include transition(opacity, 0.3s, ease-out); - - &:hover { - opacity: 0; - } -} - -.animate-move { - > .demo-shape { - @include transition(all, 0.8s, ease-in-out); - } -} \ No newline at end of file diff --git a/source/css/scss/base/_forms.scss b/source/css/scss/base/_forms.scss deleted file mode 100644 index 75e4ad6c8..000000000 --- a/source/css/scss/base/_forms.scss +++ /dev/null @@ -1,138 +0,0 @@ -/*------------------------------------*\ - $FORMS -\*------------------------------------*/ - -form > div { - margin-bottom: $space; -} - -form ol, form ul { - list-style: none; - margin-left: 0; -} - -fieldset { - border: 0; - padding: 0; - margin: 0; -} - -label { - display: block; - padding-bottom: $space-quarter; -} - -button, input, select, textarea { - font-family: inherit; - font-size: 100%; - margin: 0; -} - -input, textarea { - width: 100%; - border: 1px solid $gray; - padding: $pad-half 0.65rem; -} - -input[type=text], input[type=search], input[type=url], input[type=number], textarea { - -webkit-appearance: none; -} - -button, input[type="submit"] { - padding: $pad-half; - background: $gray-dark; - border: 1px solid $gray; - cursor: pointer; -} - -input[type="checkbox"], -input[type="radio"] { - width: auto; - margin-right: 0.3em; -} - -input[type="search"] { - -webkit-appearance: none; - border-radius: 0; -} - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -//Form Field Container -.field-container { - margin-bottom: $space; -} - -.inline-form { - - fieldset, .inline-container { - position: relative; - } - - input[type=submit], button, .btn { - font-size: $font-size-slightly-smaller; - padding: 0.65rem 1.3rem; - background: $gray-dark; - position: absolute; - top: 0; - right: 0; - z-index: 1; - width: auto; - - &:hover, &:focus { - background: $gray; - color: $white; - } - } -} - -// PK to clean this up -.inline-search-results-form { - width: 100%; - @media all and (min-width: $bp-med) { - width: 82%; - - } - - fieldset, .inline-container { - position: relative; - } - - input[type=submit], button { - position: absolute; - top: 0; - right: 0; - z-index: 1; - width: auto; - } -} - -/* Validation */ -.is-error { - border-color: $error; -} -.is-valid { - border-color: $valid; -} - - - - -/*------------------------------------*\ - $SPECIFIC FORMS -\*------------------------------------*/ - -/* Search Form */ -.search-field { - padding-right: 3em; -} -.inline-form .search-submit { - background: none; - padding: 0.78em 1em; - border: 0; - border-left: 1px solid $gray; - color: $gray; -} diff --git a/source/css/scss/base/_global-classes.scss b/source/css/scss/base/_global-classes.scss deleted file mode 100644 index 9e80691ff..000000000 --- a/source/css/scss/base/_global-classes.scss +++ /dev/null @@ -1,102 +0,0 @@ -/*------------------------------------*\ - $GLOBAL CLASSES -\*------------------------------------*/ - -/* Clearfix */ -.cf { - *zoom: 1; -} -.cf:before, .cf:after { - content: " "; /* 1 */ - display: table; /* 2 */ -} - -.cf:after { - clear: both; -} - -/* Completely remove from the flow and screen readers. */ -.is-hidden { - display: none !important; - visibility: hidden !important; -} - -/* Completely remove from the flow but leave available to screen readers. */ -.is-vishidden { - position: absolute !important; - overflow: hidden; - width: 1px; - height: 1px; - padding: 0; - border: 0; - clip: rect(1px, 1px, 1px, 1px); -} - -/* Floats */ -.right { - float: right; - padding: 0 0 $pad $pad; -} - -.right-search { - float: right; - padding: 0 0 $pad 0; -} - -.left { - float: left; - padding: 0 $pad $pad 0; -} - -/* Text-Align */ -.align-right { - text-align: right; -} - -.align-center { - text-align: center; -} - -.align-left { - text-align: left; -} - -/* Display Classes */ -.hide-small { - @media all and (max-width: $bp-med) { - display: none; - } -} - -.hide-med { - @media all and (min-width: $bp-med) and (max-width: $bp-large) { - display: none; - } -} - -.hide-large { - @media all and (min-width: $bp-large) { - display: none; - } -} - -.hide-large-2 { - @media all and (min-width:$bp-large-2) { - display: none; - } -} - -// -.valid { - color: $valid; -} - -.error { - color: $error; -} - -.info { - -} - - diff --git a/source/css/scss/base/_headings.scss b/source/css/scss/base/_headings.scss deleted file mode 100644 index 5f2433645..000000000 --- a/source/css/scss/base/_headings.scss +++ /dev/null @@ -1,31 +0,0 @@ -/* Headings */ -/*Further Reading: http:/csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/ */ -h1, .alpha { - line-height: 1.2; -} - -h2, .beta { - line-height: 1.2; -} - -h3, .gamma { - line-height: 1.2; -} - -h4, .delta { - -} - -h5, .epsilon { - -} - -h6, .zeta { - -} - -/* Subheadings */ -.subheading { - font-family: $font-secondary; - font-weight: normal; -} diff --git a/source/css/scss/base/_links.scss b/source/css/scss/base/_links.scss deleted file mode 100644 index d70545d76..000000000 --- a/source/css/scss/base/_links.scss +++ /dev/null @@ -1,10 +0,0 @@ -/* Links */ -a { - color: $gray-dark; - text-decoration: none; - outline: 0; - - &:hover, &:focus { - color: $gray; - } -} \ No newline at end of file diff --git a/source/css/scss/base/_lists.scss b/source/css/scss/base/_lists.scss deleted file mode 100644 index 4ceb7cf5c..000000000 --- a/source/css/scss/base/_lists.scss +++ /dev/null @@ -1,19 +0,0 @@ -ol, ul { - margin: 0; - padding: 0; - list-style: none; -} - -/* Definition Lists */ -dl { - overflow: hidden; - margin: 0 0 $space; -} - -dt { - font-weight: bold; -} - -dd { - margin-left: 0; -} \ No newline at end of file diff --git a/source/css/scss/base/_main.scss b/source/css/scss/base/_main.scss deleted file mode 100644 index f92fd1b34..000000000 --- a/source/css/scss/base/_main.scss +++ /dev/null @@ -1,6 +0,0 @@ -body { - background: $white; - font: 100%/1.5 $font; - -webkit-text-size-adjust: 100%; - color: $gray-dark; -} \ No newline at end of file diff --git a/source/css/scss/base/_media.scss b/source/css/scss/base/_media.scss deleted file mode 100644 index db9023b12..000000000 --- a/source/css/scss/base/_media.scss +++ /dev/null @@ -1,23 +0,0 @@ -/*------------------------------------*\ - $MEDIA ELEMENTS -\*------------------------------------*/ - -/* Flexible Media */ -img, video, object { - max-width: 100%; - height: auto; -} - -iframe { - margin-bottom: $space; -} - -figure { - margin-bottom: $space; - img { - margin-bottom: $space-quarter; - } -} -figcaption { - font-style: italic; -} \ No newline at end of file diff --git a/source/css/scss/base/_tables.scss b/source/css/scss/base/_tables.scss deleted file mode 100644 index 1b2a2b2c4..000000000 --- a/source/css/scss/base/_tables.scss +++ /dev/null @@ -1,18 +0,0 @@ -/*------------------------------------*\ - $Table -\*------------------------------------*/ -table { - border-collapse: collapse; - border-spacing: 0; - border: 1px solid $gray; - width: 100%; -} -th { - text-align: left; - border: 1px solid $gray; - padding: 0.2em; -} -td { - border: 1px solid $gray; - padding: 0.2em; -} \ No newline at end of file diff --git a/source/css/scss/base/_text.scss b/source/css/scss/base/_text.scss deleted file mode 100644 index de17e3ec6..000000000 --- a/source/css/scss/base/_text.scss +++ /dev/null @@ -1,26 +0,0 @@ -/* Text-Related Elements */ -p { - margin-bottom: $space; -} - -/* Blockquote */ -blockquote { - font-style:italic; - border-left: 1px solid $gray; - color: $gray; - padding-left: $pad; - margin-bottom: $space; -} - -/* Horizontal Rule */ -hr { - border: 0; - height: 2px; - background: $gray-light-2; - margin: $space-double 0; -} - -abbr { - border-bottom: 1px dotted $gray; - cursor: help; -} \ No newline at end of file diff --git a/source/css/scss/generic/_mixins.scss b/source/css/scss/generic/_mixins.scss deleted file mode 100644 index 14d8a2a3d..000000000 --- a/source/css/scss/generic/_mixins.scss +++ /dev/null @@ -1,23 +0,0 @@ -/*------------------------------------*\ - $MIXINS -\*------------------------------------*/ - -/* CSS Transition - Usage: @include transition(width,0.3s,ease-out); - */ -@mixin transition($transition-property, $transition-time, $method) { - -webkit-transition: $transition-property $transition-time $method; - -moz-transition: $transition-property $transition-time $method; - -ms-transition: $transition-property $transition-time $method; - -o-transition: $transition-property $transition-time $method; - transition: $transition-property $transition-time $method; -} - -/* Rem Unit font sizes with relative fallback http:/seesparkbox.com/foundry/scss_rem_mixin_now_with_a_better_fallback - Usage: @include font-size(1, large); -*/ -@mixin font-size( $decimal-size, $keyword: null ) { - @if $keyword{ font-size: $keyword; } - @else { font-size: $decimal-size * $base-font-multiplier * 16px;} - font-size: $decimal-size * 1rem; -} \ No newline at end of file diff --git a/source/css/scss/generic/_reset.scss b/source/css/scss/generic/_reset.scss deleted file mode 100644 index e7807ec72..000000000 --- a/source/css/scss/generic/_reset.scss +++ /dev/null @@ -1,17 +0,0 @@ -/*------------------------------------*\ - $RESET -\*------------------------------------*/ - -/* Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ */ -* { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure { - margin: 0; - padding: 0; -} -header, footer, nav, section, article, hgroup, figure { - display: block; -} \ No newline at end of file diff --git a/source/css/scss/generic/_variables.scss b/source/css/scss/generic/_variables.scss deleted file mode 100644 index a183647fd..000000000 --- a/source/css/scss/generic/_variables.scss +++ /dev/null @@ -1,74 +0,0 @@ -/*------------------------------------*\ - $VARIABLES -\*------------------------------------*/ - -//Colors -$gray : #808080; -$gray-light : #f9f9f9; -$gray-light-2 : #eee; -$gray-light-3 : #ddd; -$gray-light-4 : #bbb; -$gray-med : #666; -$gray-dark : #333; -$gray-dark-2 : #131313; -$white : #fff; -$black : #000; - -$dim : rgba(0,0,0,0.5); -$dimmer : rgba(0,0,0,0.8); - -$error : #f00; -$valid : #089e00; - -$brand-facebook: #03539e; -$brand-twitter: #35ccff; -$brand-linkedin: #217bc1; - -//Typography -$font : "HelveticaNeue", "Helvetica", "Arial", sans-serif; -$font-secondary : Georgia, Times, "Times New Roman", serif; - -$font-size-norm : 1em; -$font-size-slightly-larger : 1.0625em; -$font-size-slightly-smaller : 0.875em; -$font-size-sm : 0.75em; -$font-size-large : 1.4375em; - -//Layout -$max-width: 72rem; -$offset-left-1: 4.5rem; - -$l-sidebar-width: 19.75rem; - -//Defaults -$space : 1rem; -$space-and-half : $space*1.5; -$space-double : $space*2; -$space-triple : $space*3; -$space-quad : $space*4; -$space-half : $space/2; -$space-quarter : $space/4; -$pad : 1rem; -$pad-and-half : $pad*1.5; -$pad-double : $pad*2; -$pad-half : $pad/2; -$pad-quarter :$pad/4; - -//Borders -$border-med: 3px; -$border-thick: 7px; - - -//Breakpoints -$bp-small : 24em; -$bp-small-2 : 29.75em; -$bp-small-3 : 39.8em; -$bp-med : 46.8em; -$bp-med-2 : 48em; -$bp-large : 50em; -$bp-large-2 : 66em; -$bp-xl : 73em; -$bp-xxl : 89em; -$bp-xxxl : 93em; - -// \ No newline at end of file diff --git a/source/css/scss/objects/_accordion.scss b/source/css/scss/objects/_accordion.scss deleted file mode 100644 index 3423544c9..000000000 --- a/source/css/scss/objects/_accordion.scss +++ /dev/null @@ -1,33 +0,0 @@ -.accordion { - margin-bottom: $space; -} - -.acc-handle { - background: $gray-dark-2; - color: $white; - font-family: $font-secondary; - font-weight: bold; - display: block; - position: relative; - padding: $pad-half; - border-bottom: 1px solid $gray-light-3; - - &:after { - content:"+"; - float: right; - } - - &:hover { - color: $white; - background: $gray-dark; - - } - - &.active { - background: $gray-dark; - - &:after { - content:"-"; - } - } -} \ No newline at end of file diff --git a/source/css/scss/objects/_ads.scss b/source/css/scss/objects/_ads.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/source/css/scss/objects/_article.scss b/source/css/scss/objects/_article.scss deleted file mode 100644 index 3324811bb..000000000 --- a/source/css/scss/objects/_article.scss +++ /dev/null @@ -1,52 +0,0 @@ -//Article -.article-header { - h1 { - font-size: 2.5em; - } -} - -.byline { - font-size: $font-size-slightly-smaller; - font-style: italic; - margin-bottom: $space-half; -} - -/* Wordpress Caption */ -.wp-caption-text { - font-style: italic; -} - -// Review Summary -.review-summary { - .grade { - width: 4.5em; - float: left; - margin: 0 $space-half 0 0; - } - - .summary-text { - margin-left: 5em; - } -} - -//Social Share -.social-share { - overflow: hidden; - margin-bottom: $space; - - li { - float: left; - margin-right: $space-quarter; - } - - a { - background: $gray-dark; - color: $white; - display: block; - padding: $pad-half; - - &:hover { - background: $gray; - } - } -} \ No newline at end of file diff --git a/source/css/scss/objects/_blocks.scss b/source/css/scss/objects/_blocks.scss deleted file mode 100644 index 160963bd6..000000000 --- a/source/css/scss/objects/_blocks.scss +++ /dev/null @@ -1,138 +0,0 @@ -/* Generic Placeholder Brick: REMOVE FOR PRODUCTION */ -.brick { - background: #dcdddc; - padding: $pad-double; - text-align: center; - font-weight: bold; - border-bottom: 1px solid $gray-light-2; -} - -/* Block */ -.block { - overflow: hidden; - - p:last-child { - margin-bottom: 0; - } -} - -.headline { - line-height: 1.2; -} - -/* Hero Block */ -.block-hero { - margin-bottom: $space-half; - - .b-thumb { - img { - display: block; - } - } - - @media all and (min-width: $bp-large) { - position: relative; - - .b-text { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - background: $dim; - color: $white; - padding: $pad-and-half; - } - } -} - -/* Block Thumbnail with Headline */ -.block-thumb { - display: table; - width: 100%; - border-collapse: collapse; - - .b-inner { - display: table-row; - vertical-align: top; - overflow: hidden; - } - - .b-thumb { - @media all and (min-width: $bp-small-2) { - display: table-cell; - vertical-align: top; - width: 30%; - max-width: 10em; - - img { - display: block; - width: 100%; - height: auto; - } - } - } - - .b-text { - @media all and (min-width: $bp-small-2) { - display: table-cell; - width: 70%; - padding: 0 $pad; - } - } -} - - -/* Block Headline Summary */ -.block-headline-summary { - a { - display: block; - padding: $pad-half; - } -} - -/* Block Inset */ -.block-inset { - position: relative; - - .b-thumb { - position: relative; - z-index: 0; - - img { - display: block; - } - } -} - -/* Hero Block */ -.block-inset { - margin-bottom: $space-half; - position: relative; - - .headline { - font-size: 1.1em; - } - - .b-text { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - background: $dim; - color: $white; - padding: $pad-half; - } -} - -/* Block Thumb with Summary */ -.block-thumb-summary { - .b-thumb { - float: left; - width: 50%; - } - - .b-text { - margin-left: 50%; - padding: $pad-half; - } -} \ No newline at end of file diff --git a/source/css/scss/objects/_buttons.scss b/source/css/scss/objects/_buttons.scss deleted file mode 100644 index 46fb60d5c..000000000 --- a/source/css/scss/objects/_buttons.scss +++ /dev/null @@ -1,39 +0,0 @@ -/*------------------------------------*\ - $BUTTONS -\*------------------------------------*/ -.btn { - display: inline-block; - background: $gray-dark; - color: $white; - line-height: 1; - font-weight: bold; - padding: $pad; - border: 0; - text-align: center; - - &:hover, &:focus { - color: $white; - } - - &.disabled { - background: $gray-light-2; - color: $gray-light-4; - } -} - -.btn-small { - padding: $pad-half; -} - -.btn-large { - padding: $pad-half; - text-transform: uppercase; - background: $gray; - font-size: 1.4rem; - font-weight: normal; -} - - -.text-btn { - font-style: italic; -} \ No newline at end of file diff --git a/source/css/scss/objects/_carousels.scss b/source/css/scss/objects/_carousels.scss deleted file mode 100644 index 77e3f197b..000000000 --- a/source/css/scss/objects/_carousels.scss +++ /dev/null @@ -1,38 +0,0 @@ -/* Horizontal Carousel */ -.carousel-horizontal { - margin-bottom: $space; - overflow: hidden; - position: relative; -} - -.carousel-island-container { - overflow: hidden; -} - -.carousel-container { - position: relative; -} - -.carousel-list { - -} - -.carousel-controls { - display: table; - width: 100%; - margin: (-$space-half) 0 $space; - - a, div { - display: table-cell; - padding: $pad-half; - } - - .carousel-pagination { - text-align: center; - } - - .carousel-next { - text-align: right; - } - -} \ No newline at end of file diff --git a/source/css/scss/objects/_comments.scss b/source/css/scss/objects/_comments.scss deleted file mode 100644 index c42fe91e8..000000000 --- a/source/css/scss/objects/_comments.scss +++ /dev/null @@ -1,29 +0,0 @@ -.comments { - li { - margin-bottom: $space; - } -} - -.comment-container { - overflow: hidden; - margin-bottom: $space; -} - -.comment-meta { - float: left; - width: 6.5em; - - img { - display: block; - border: 1px solid $gray-light-2; - margin-bottom: $space-half; - } -} - -.comment-name { - font-size: $font-size-sm; -} - -.comment-text { - margin-left: 9em; -} \ No newline at end of file diff --git a/source/css/scss/objects/_footer.scss b/source/css/scss/objects/_footer.scss deleted file mode 100644 index 884d584a3..000000000 --- a/source/css/scss/objects/_footer.scss +++ /dev/null @@ -1,46 +0,0 @@ -/*------------------------------------*\ - $FOOTER -\*------------------------------------*/ -.footer { - clear: both; - overflow: hidden; - background: $gray-dark-2; - color: $white; - line-height: 1.2; - - .lc { - padding: $pad $pad 0; - } - - - a { - color: $gray-light; - } - - -} - -//Footer Nav -.nav-footer { - margin: (-$pad) (-$pad) $space; - - li { - border-bottom: 1px solid $gray-dark; - - @media all and (min-width: $bp-med) { - border: 0; - float: left; - } - } - - a { - display: block; - padding: $pad; - } -} - -.copyright { - @media all and (min-width: $bp-med) { - float: right; - } -} \ No newline at end of file diff --git a/source/css/scss/objects/_header.scss b/source/css/scss/objects/_header.scss deleted file mode 100644 index 50a25a397..000000000 --- a/source/css/scss/objects/_header.scss +++ /dev/null @@ -1,40 +0,0 @@ -.header { - background: $white; - padding: 0; - border-bottom: 1px solid #dbdbdb; - @extend .lc; -} - -.logo { - float: left; - max-width: 8rem; - margin: 0.4rem; - - @media all and (min-width: $bp-med) { - max-width: 9rem; - } -} - -.nav-toggle { - float: right; - display: block; - padding: 0.9rem 1rem 0.7rem; - font-size: 1.3rem; - line-height: 1; - border-left: 1px solid #dbdbdb; - - @media all and (min-width: $bp-med) { - display: none; - } -} - -.search-form { - overflow: hidden; - max-height: 0; - - @media all and (min-width: $bp-med) { - float: right; - max-height: none; - margin: 0.65em 0.5em 0 0; - } -} \ No newline at end of file diff --git a/source/css/scss/objects/_icons.scss b/source/css/scss/objects/_icons.scss deleted file mode 100644 index cacbf1fbd..000000000 --- a/source/css/scss/objects/_icons.scss +++ /dev/null @@ -1,125 +0,0 @@ - -/* Icon Font */ -@font-face { - font-family: 'icons'; - src:url('../fonts/icons.eot'); - src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'), - url('../fonts/icons.woff') format('woff'), - url('../fonts/icons.ttf') format('truetype'), - url('../fonts/icons.svg#icons') format('svg'); - font-weight: normal; - font-style: normal; -} - -/* Use the following CSS code if you want to use data attributes for inserting your icons */ -[data-icon]:before { - font-family: 'icons'; - content: attr(data-icon); - speak: none; - font-weight: normal; - line-height: 1; - -webkit-font-smoothing: antialiased; -} - -.icon-twitter:before, .icon-stumbleupon:before, .icon-pinterest:before, .icon-linkedin:before, .icon-google-plus:before, .icon-search:before, .icon-play:before, .icon-menu:before, .icon-arrow-left:before, .icon-arrow-right:before, .icon-bubble:before, .icon-facebook:before, .icon-feed:before, .icon-youtube:before, .icon-tag:before, .icon-tumblr:before, .icon-instagram, .icon-podcast, .icon-apple,.icon-android, .icon-arrow:after, .icon-envelope:before { - font-family: 'icons'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; -} -.icon-twitter:before { - content: "\74"; -} -.icon-stumbleupon:before { - content: "\75"; -} -.icon-pinterest:before { - content: "\70"; -} -.icon-linkedin:before { - content: "\69"; -} -.icon-google-plus:before { - content: "\67"; -} -.icon-search:before { - content: "\73"; -} -.icon-play:before { - content: "\61"; -} -.icon-menu:before { - content: "\21"; -} -.icon-arrow-left:before { - content: "\23"; -} -.icon-arrow-right:before { - content: "\24"; -} -.icon-bubble:before { - content: "\25"; -} -.icon-facebook:before { - content: "\66"; -} -.icon-feed:before { - content: "\27"; -} -.icon-youtube:before { - content: "\79"; -} -.icon-tag:before { - content: "\28"; -} -.icon-tumblr:before { - content: "\6d"; -} -.icon-instagram:before { - content: "\22"; -} -.icon-podcast:before { - content: "\26"; -} -.icon-android:before { - content: "\29"; -} -.icon-apple:before { - content: "\2a"; -} -.icon-envelope:before { - content: "\2b"; -} - - -.icon-arrow:after { - content: "\61"; - display: inline-block; - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - -o-transform: rotate(90deg); - transform: rotate(90deg); -} - -.icon-play:before { - font-size: 0.7rem; - padding-left: 0.2em; -} - -.icon-play-box { - display: block; - margin-left: $pad-double; -} - -.icon-play-box:before { - padding: $pad-quarter; - background: $gray; - color: $white; - margin-left: -1.7rem; - margin-right: $pad-half; -} diff --git a/source/css/scss/objects/_layout.scss b/source/css/scss/objects/_layout.scss deleted file mode 100644 index 4929d28e3..000000000 --- a/source/css/scss/objects/_layout.scss +++ /dev/null @@ -1,288 +0,0 @@ -/*------------------------------------*\ - $LAYOUT -\*------------------------------------*/ - -/* Layout Container */ -.lc { - max-width: $max-width; - margin: 0 auto; - padding: $pad-half; -} - -/*------------------------------------*\ - $TEMPLATES -\*------------------------------------*/ - -/* Two Column Layout */ -.l-two-col { - @extend .cf; - - .l-main { - @media all and (min-width: $bp-large) { - float: left; - width: 70%; - padding-right: $pad; - } - } - - .l-sidebar { - @media all and (max-width: $bp-large) { - clear: both; - } - - @media all and (min-width: $bp-large) { - float: left; - width: 30%; - padding: 0 0 0 $pad; - } - } -} - - -/*------------------------------------*\ - $GRIDS -\*------------------------------------*/ - -/* Grid Container */ -.g { - overflow: hidden; - margin: 0 (-$pad-half); -} - -/* Grid Item */ -.gi { - padding: $pad-half; - - img { - display: block; - } - - @media all and (min-width: $bp-med) { - float: left; - } -} - -/* Grid 1up */ -.g-1up { - .gi { - width: 100%; - } -} - -/* Grid 2up */ -.g-2up { - @media all and (min-width: $bp-med) { - > .gi { - float: left; - width: 50%; - - &:nth-of-type(odd) { - clear: left; - } - } - } -} - -/* Grid Half (Always displayed side by side) */ -.g-half { - > .gi { - float: left; - width: 50%; - - &:nth-of-type(odd) { - clear: left; - } - } -} - -/* Grid 3up */ -.g-3up { - @media all and (min-width: $bp-med) { - > .gi { - float: left; - width: 50%; - - &:nth-of-type(2n+1) { - clear: left; - } - } - } - - @media all and (min-width: $bp-large) { - > .gi { - width: 33.3333333%; - - &:nth-of-type(2n+1) { - clear: none; - } - - &:nth-of-type(3n+1) { - clear: left; - } - } - } -} - -/* Grid 4up */ -.g-4up { - @media all and (min-width: $bp-med) { - >.gi { - float: left; - width: 50%; - - &:nth-of-type(2n+1) { - clear: both; - } - } - } - - @media all and (min-width: $bp-large) { - >.gi { - width: 25%; - - &:nth-of-type(2n+1) { - clear: none; - } - - &:nth-of-type(4n+1) { - clear: left; - } - } - } -} - -/* Grid Quarter (Always displayed side by side) */ -.g-quarter { - > .gi { - float: left; - width: 24%; - - &:nth-of-type(4n+1) { - clear: left; - } - } -} - -.g-max4 { - - @media all and (min-width: $bp-small-2) { - >.gi { - float: left; - width: 50%; - - &:nth-of-type(2n+1) { - clear: both; - } - } - } - - @media all and (min-width: $bp-small-3) { - >.gi { - width: 33.3333333%; - - &:nth-of-type(2n+1) { - clear: none; - } - - &:nth-of-type(3n+1) { - clear: left; - } - } - } - - @media all and (min-width: $bp-large) { - >.gi { - width: 25%; - - &:nth-of-type(3n+1) { - clear: none; - } - - &:nth-of-type(4n+1) { - clear: left; - } - } - } -} - -/* Grid 5up */ -.g-max5 { - - >.gi { - float: left; - width: 50%; - - &:nth-of-type(2n+1) { - clear: both; - } - } - - @media all and (min-width: $bp-small-3) { - >.gi { - width: 33.3333333%; - - &:nth-of-type(2n+1) { - clear: none; - } - - &:nth-of-type(3n+1) { - clear: left; - } - } - } - - @media all and (min-width: $bp-med) { - >.gi { - width: 25%; - - &:nth-of-type(3n+1) { - clear: none; - } - - &:nth-of-type(4n+1) { - clear: left; - } - } - } - - @media all and (min-width: $bp-med-2) { - >.gi { - width: 20%; - - &:nth-of-type(4n+1) { - clear: none; - } - - &:nth-of-type(5n+1) { - clear: left; - } - } - } -} - -/* Grid 2/3 */ -.gi-2-3 { - @media all and (min-width: $bp-med) { - float: left; - width: 66.666666%; - } -} - -.gi-1-3 { - @media all and (min-width: $bp-med) { - float: left; - width: 33.333333%; - } -} - -/* Grid 4up block */ -.g-opposites { - .gi { - float: left; - - &:last-child { - float: right; - text-align: right; - } - } -} \ No newline at end of file diff --git a/source/css/scss/objects/_lists.scss b/source/css/scss/objects/_lists.scss deleted file mode 100644 index 0c4e8beaa..000000000 --- a/source/css/scss/objects/_lists.scss +++ /dev/null @@ -1,63 +0,0 @@ -.inline-list { - li { - display: inline-block; - } -} - -/* Social List */ -.social-list { - li { - margin: 0 0.4rem $space 0; - } - - a { - font-size: 1.6em; - } -} - - -/* Headline List */ -.headline-list { - margin-bottom: $space; - - &.flush { - margin: 0; - } - - h4 { - font-weight: normal; - } - - li { - padding: $pad-quarter 0; - border-top: 1px solid $gray-light-3; - } -} - -/* Post List */ -.post-list { - li { - margin-bottom: $space; - } -} - -/* Bullet List */ -.bullet-list { - list-style: square; - margin: 0 0 1em 1.2em; - line-height: 1.3; - - li { - margin-bottom: $space; - } -} - -/* Text List */ -.text-list { - margin: 0 0 1em; - line-height: 1.3; - - li { - margin-bottom: $space; - } -} \ No newline at end of file diff --git a/source/css/scss/objects/_main.scss b/source/css/scss/objects/_main.scss deleted file mode 100644 index 592c01dea..000000000 --- a/source/css/scss/objects/_main.scss +++ /dev/null @@ -1,9 +0,0 @@ -/*------------------------------------*\ - $MAIN CONTENT AREA -\*------------------------------------*/ -[role=main] { - padding: $pad-half $pad-half $pad-double; - overflow: hidden; - @extend .lc; - @extend .cf; -} \ No newline at end of file diff --git a/source/css/scss/objects/_messaging.scss b/source/css/scss/objects/_messaging.scss deleted file mode 100644 index 713ec0249..000000000 --- a/source/css/scss/objects/_messaging.scss +++ /dev/null @@ -1,18 +0,0 @@ -/*------------------------------------*\ - $MESSAGING -\*------------------------------------*/ - -// Alerts -.alert { - text-align: center; - padding: $pad; - margin-bottom: $space-half; - border: 1px solid $gray; - background: $gray-light; -} - -.alert-error { - color: $error; - border-color: $error; - background: #ffbebe; -} diff --git a/source/css/scss/objects/_nav.scss b/source/css/scss/objects/_nav.scss deleted file mode 100644 index b98e3300e..000000000 --- a/source/css/scss/objects/_nav.scss +++ /dev/null @@ -1,52 +0,0 @@ -/*------------------------------------*\ - $NAVIGATION -\*------------------------------------*/ - -.nav { - clear: both; - overflow: hidden; - max-height: 0; - - a { - display: block; - padding: $pad; - border-top: 1px solid $gray-light-2; - } - - &.active { - max-height: 40em; - } - - @media all and (min-width: $bp-med) { - max-height: none; - float: right; - clear: none; - - li { - float: left; - } - - a { - border: 0; - } - - } -} - -//Pagination -.pagination { - overflow: hidden; - - li { - float: left; - border-right: 1px solid $gray-light-2; - - &:last-child { - border: 0; - } - } - - a { - padding: $pad; - } -} \ No newline at end of file diff --git a/source/css/scss/objects/_sections.scss b/source/css/scss/objects/_sections.scss deleted file mode 100644 index 7235af263..000000000 --- a/source/css/scss/objects/_sections.scss +++ /dev/null @@ -1,7 +0,0 @@ -.section { - margin: 0 0 $space; -} - -.section-title { - margin-bottom: $space-half; -} \ No newline at end of file diff --git a/source/css/scss/objects/_tabs.scss b/source/css/scss/objects/_tabs.scss deleted file mode 100644 index b22ca7438..000000000 --- a/source/css/scss/objects/_tabs.scss +++ /dev/null @@ -1,33 +0,0 @@ -.tabs { - overflow: hidden; - - ul { - display: table; - width: 100%; - } - - li { - display: table-cell; - text-align: center; - border-right: 1px solid $gray-light-3; - - &:last-child { - border-right: 0; - } - } - - a { - display: block; - padding: $pad-half; - background: $gray; - - &:hover, &:focus { - background: $gray-light-3; - } - - &.active { - background: $gray-dark; - color: $white; - } - } -} \ No newline at end of file diff --git a/source/css/scss/objects/_text.scss b/source/css/scss/objects/_text.scss deleted file mode 100644 index 42f1b4705..000000000 --- a/source/css/scss/objects/_text.scss +++ /dev/null @@ -1,77 +0,0 @@ -/* Global Font Classes */ -.font-secondary { - font-family: $font-secondary; -} - -//Intro text -.intro { - font-size: $font-size-slightly-larger; - font-weight: bold; -} - -//Pullquote -.pullquote { - font-family: $font-secondary; - font-size: $font-size-large; -} - -//Text Passages -.text { - a { - text-decoration: underline; - } - - ul { - list-style: disc; - margin: 0 0 $space 1.2em; - - ul { - margin-bottom: 0; - } - } - - ol { - list-style: decimal; - margin: 0 0 $space 1.2em; - - ol { - margin-bottom: 0; - } - } -} - -/* Review Grade Tile */ -.grade { - display: block; - font-weight: bold; - background: $gray; - color: $white; - min-height: 4.5rem; - padding-top: 1.5rem; - text-align: center; -} - -/* Eyebrow */ -.eyebrow { - background: $gray-dark; - color: $white; - padding: 0.2em; - display: inline-block; - margin-bottom: $space-half; -} - -.eyebrow-image { - position: relative; - - img { - position: relative; - z-index: 0; - } - - .eyebrow { - position: absolute; - top: 0; - left: 0; - z-index: 1; - } -} \ No newline at end of file diff --git a/source/css/scss/objects/_tooltip.scss b/source/css/scss/objects/_tooltip.scss deleted file mode 100644 index e0fdd95da..000000000 --- a/source/css/scss/objects/_tooltip.scss +++ /dev/null @@ -1,42 +0,0 @@ -.tooltip-container { - display: inline-block; - position: relative; - - &:hover { - .tooltip { - display: block; - } - } -} - -.tooltip-link { - background: $gray-light; -} - -.tooltip { - display: none; - position: absolute; - top: 1.5em; - left: 0; - width: 18em; - padding: $pad; - background: $white; - border: 1px solid $gray; - box-shadow: 0.3em 0.3em 1em 0 rgba(0,0,0,0.2); - - h2 { - margin-top: 0; - } - - @media all and (min-width: $bp-small) { - width: 22em; - } - - @media all and (min-width: $bp-small-2) { - width: 27em; - } - - @media all and (min-width: $bp-small-3) { - width: 30em; - } -} \ No newline at end of file diff --git a/source/css/style.scss b/source/css/style.scss deleted file mode 100644 index 761b1d3d3..000000000 --- a/source/css/style.scss +++ /dev/null @@ -1,114 +0,0 @@ -/* - ,, ,, ,, - .M"""bgd mm db `7MM mm mm `7MM OO OO OO -,MI "Y MM MM MM MM MM 88 88 88 -`MMb. mmMMmm ,pW"Wq.`7MMpdMAo. `7Mb,od8 `7MM .P"Ybmmm MMpMMMb.mmMMmm mmMMmm MMpMMMb. .gP"Ya `7Mb,od8 .gP"Ya || || || - `YMMNq. MM 6W' `Wb MM `Wb MM' "' MM :MI I8 MM MM MM MM MM MM ,M' Yb MM' "',M' Yb || || || -. `MM MM 8M M8 MM M8 MM MM WmmmP" MM MM MM MM MM MM 8M"""""" MM 8M"""""" `' `' `' -Mb dM MM YA. ,A9 MM ,AP MM MM 8M MM MM MM MM MM MM YM. , MM YM. , ,, ,, ,, -P"Ybmmd" `Mbmo`Ybmd9' MMbmmd' .JMML. .JMML.YMMMMMb .JMML JMML.`Mbmo `Mbmo.JMML JMML.`Mbmmd'.JMML. `Mbmmd' db db db - MM 6' dP - .JMML. Ybmmmd' -Pattern Lab doesn't have any CSS requirements, which means you can write your styles however you want. Hooray! -You can use Sass, Less, vanilla CSS, or some other crazy thing I haven't heard of yet. -So please don't use these styles. They're just here to put together the demo, and nothing more. -They're intentionally gray, boring, and crappy because you're supposed to do this stuff yourself. -Atomic design is philosophically complimentary with these CSS approaches: -* SMACSS by Jonathan Snook http://smacss.com/ -* OOCSS by Nicole Sullivan http://oocss.org/ -* BEM CSS Methology : http://bem.info/method/ -* CSS Guidelines by Harry Roberts : https://github.com/csswizardry/CSS-Guidelines -So feel free to use any of these approaches. Or don't. It's totally up to you. -*/ - - -/*------------------------------------*\ - $TABLE OF CONTENTS -\*------------------------------------*/ -/** - * VARIABLES..............................Declarations of Sass variables - * .....Colors - * .....Typography - * .....Layout - * .....Defaults - * .....Breakpoints - * MIXINS.................................Sass mixins - * RESET..................................Set reset defaults - * GLOBAL CLASSES.........................Set reset defaults - * GLOBAL ELEMENTS........................Establish global styles - * .....Main - * .....Headings - * .....Text-related elements (p, blockquote, lists) - * .....Defaults - * .....Breakpoints - * TYPOGRAPHY------------------------------ - * MEDIA------------------------------ - * LAYOUT------------------------------ - * NAVIGATION------------------------------ - * TOC To Be Continued - */ - - - -@import "scss/generic/variables"; -@import "scss/generic/mixins"; -@import "scss/generic/reset"; - - - - - -/*------------------------------------*\ - $GLOBAL ELEMENTS -\*------------------------------------*/ -@import "scss/base/global-classes"; -@import "scss/base/main"; -@import "scss/base/links"; -@import "scss/base/headings"; -@import "scss/base/text"; -@import "scss/base/lists"; -@import "scss/base/media"; -@import "scss/base/forms"; -@import "scss/base/tables"; -@import "scss/base/animation"; - - - - - -/*------------------------------------*\ - $LAYOUT -\*------------------------------------*/ -@import "scss/objects/layout"; - - -/*------------------------------------*\ - $PAGE STRUCTURE -\*------------------------------------*/ -@import "scss/objects/header"; -@import "scss/objects/nav"; -@import "scss/objects/main"; -@import "scss/objects/footer"; - - - -/*------------------------------------*\ - $TEXT Styles -\*------------------------------------*/ -@import "scss/objects/text"; - - -/*------------------------------------*\ - $COMPONENTS -\*------------------------------------*/ -@import "scss/objects/icons"; -@import "scss/objects/buttons"; -@import "scss/objects/blocks"; -@import "scss/objects/lists"; -@import "scss/objects/tooltip"; -@import "scss/objects/accordion"; -@import "scss/objects/tabs"; -@import "scss/objects/sections"; -@import "scss/objects/article"; -@import "scss/objects/comments"; -@import "scss/objects/messaging"; From b74988a6d53ccde0c172ff5bd80acc4d24bcd943 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 11:38:44 -0600 Subject: [PATCH 03/12] add the compiled css --- core/styleguide/css/static.css | 459 +++++++++++++ core/styleguide/css/styleguide-specific.css | 109 ++-- core/styleguide/css/styleguide.css | 674 ++++++++++++-------- 3 files changed, 931 insertions(+), 311 deletions(-) diff --git a/core/styleguide/css/static.css b/core/styleguide/css/static.css index e69de29bb..e23eaf41e 100644 --- a/core/styleguide/css/static.css +++ b/core/styleguide/css/static.css @@ -0,0 +1,459 @@ +@charset "UTF-8"; +/* +colors +red: $orange; rgb(229,24,55) +gray: #808080; +*/ +/************Reset**************/ +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html, body, div, object, iframe, fieldset { + margin: 0; + padding: 0; + border: 0; +} + +ol, ul { + list-style: none; + margin: 0; + padding: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +header, footer, nav, section, article, hgroup, figure { + display: block; +} + +legend { + display: none; +} + +/************End Reset**************/ +/************Global**************/ +body { + background: #fff; + color: #000; + font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif; + padding: 0; + -webkit-text-size-adjust: 100%; + border-top: 20px solid #000; + border-bottom: 20px solid #000; +} + +a { + color: #808080; + text-decoration: none; +} + +a:hover, a:focus { + color: #bededf; +} + +p { + margin: 0 0 1em; +} + +img, object, video { + max-width: 100%; + border: 0; +} + +a img { + border: 0; + outline: 0; +} + +h1 { + font-size: 3em; + line-height: 1; + letter-spacing: -0.02em; + margin-bottom: 0.2em; +} + +h2 { + font-size: 2em; + line-height: 1.1; + margin-bottom: 0.2em; +} + +h3 { + font-weight: normal; + line-height: 1.1; + padding-bottom: 0.4em; + border-bottom: 1px solid #ccc; +} + +h1 a, h2 a, h3 a { + display: block; + color: #000; +} + +h1 a:hover, h2 a:hover, h3 a:hover { + color: #bededf; +} + +blockquote { + border-left: 0.5em solid #ddd; + padding-left: 1em; + margin-left: 1em; +} + +small { + color: #bededf; +} + +input[type=search] { + -webkit-appearance: none; + border-radius: 0; +} + +::-webkit-input-placeholder { + color: #808080; +} + +:-moz-placeholder { + color: #808080; +} + +/************End Global**************/ +/************Classes**************/ +.inactive { + color: #ddd; +} + +/************End Classes**************/ +/************Structure**************/ +.container { + max-width: 60em; + margin: 0 auto; + padding: 0 1em; + overflow: hidden; +} + +[role=main] { + padding-bottom: 1em; +} + +/*Footer*/ +[role=contentinfo] { + color: #fff; + background: #000; + margin: 0 -1em; + position: relative; + z-index: 2; +} +[role=contentinfo] > div { + max-width: 60em; + padding: 0 1em; + margin: 0 auto; + overflow: hidden; +} + +/*End Footer*/ +/*Grid*/ +.grid { + margin: 0 -1em; + overflow: hidden; +} + +.grid:target { + -webkit-animation: fadeout 5s 1 ease-out; + -moz-animation: fadeout 5s 1 ease-out; + -o-animation: fadeout 5s 1 ease-out; + animation: fadeout 5s 1 ease-out; +} + +.grid > h2 { + margin-left: 0.45em; +} + +.grid > section { + padding: 1em 1em 0.5em; +} + +.grid > section:target { + -webkit-animation: fadeout 5s 1 ease-out; + -moz-animation: fadeout 5s 1 ease-out; + -o-animation: fadeout 5s 1 ease-out; + animation: fadeout 5s 1 ease-out; +} + +.grid ul { + overflow: hidden; +} + +.grid ul li { + margin-bottom: 0.3em; +} + +.featured:after { + content: "*"; + color: #bededf; +} + +/*Fluid*/ +.fluid { + display: block; + margin: 0 auto; + max-width: 40em; +} + +/*Homepage*/ +.home h1 { + margin-bottom: 0.2em; +} + +.intro { + font-size: 1.8em; + line-height: 1.2; + margin: 0 auto; +} + +.intro a:hover, .intro a:focus { + color: #000; + border-bottom-color: #000; +} + +.ani { + position: relative; + height: 15em; + margin: 1em 0 0; + width: 100%; + z-index: 0; +} + +.ani div { + width: 100%; +} + +.ani div b { + display: block; + position: absolute; + top: 5%; + right: 5%; + bottom: 5%; + left: 5%; + background: rgba(229, 24, 55, 0.22); +} + +/*Patterns*/ +.mod { + padding: 1em; +} + +.pattern { + background: #f7f7f7; + border-bottom: 1px solid #808080; + margin-bottom: 1em; + overflow: hidden; +} + +.pattern-description h1 { + font-size: 3.4em; + margin-bottom: 0.5em; +} + +.pattern-description { + max-width: 40em; + margin: 0 auto; +} + +.pattern-description ul, .pattern-description ol { + margin-bottom: 2em; +} + +.pattern-description li { + margin-bottom: 1em; +} + +/*Blog*/ +/*Blog Header*/ +.blog .container { + max-width: 62em; +} + +.blog header[role=banner] { + overflow: hidden; + margin-bottom: 2em; + padding: 2em 0 1em; + border-bottom: 1px solid #000; +} + +.blog-logo { + font-weight: normal; + font-size: 1.2em; + margin: 0 0 1em; +} + +.blog-logo img { + width: 3.3em; +} + +.blog-logo a { + color: #000; +} + +.search-form { + width: 100%; + margin-bottom: 1em; +} + +.search-field { + width: 100%; + padding: 0.5em 0; + border: 0; + border-bottom: 1px solid #808080; + outline: none; +} + +.search-field:focus { + background: #bededf; + color: #fff; +} + +.search-field:focus::-webkit-input-placeholder { + color: #fff; +} + +.search-field:focus :-moz-placeholder { + color: #fff; +} + +.blog .nav { + clear: both; +} + +.blog .nav a { + display: block; + font-weight: bold; + color: #000; +} + +.blog .nav a:hover { + color: #bededf; +} + +/*Posts*/ +.posts ol > li { + padding-bottom: 1em; + border-bottom: 1px solid #ccc; + margin-bottom: 1em; + overflow: hidden; +} + +.posts h2 { + font-size: 1.4em; + margin: 0.28em 0 0.1em; + font-weight: normal; +} + +.posts h2 a { + color: #000; +} + +.posts h2 a:hover, .posts h2 a:focus { + color: #bededf; +} + +.permalink { + display: block; + font-size: 0.8em; + margin-bottom: 1.2em; +} + +.post-body a { + border-bottom: 1px solid #ccc; +} + +.posts blockquote { + margin: 0 0 1em; + color: #666; + border-left: 0.25em solid #ccc; + padding-left: 1em; +} + +.tags { + float: left; +} + +.tags li { + display: inline-block; + font-size: 0.8em; + margin-right: 0.5em; +} + +.posts ol > li .tags a, .permalink { + color: #ccc; + -webkit-transition: color 0.3s ease-out; + -moz-transition: color 0.3s ease-out; + -ms-transition: color 0.3s ease-out; + -o-transition: color 0.3s ease-out; + transition: color 0.3s ease-out; +} + +.posts ol > li:hover .tags a, .posts ol > li:hover .permalink { + color: #808080; +} + +.blog-nav { + text-align: center; + overflow: hidden; + padding: 1em 0; +} + +.posts .blog-nav a { + border: 0; +} + +.nav-next { + float: right; +} + +.nav-prev { + float: left; +} + +/* Sidebar */ +.sidebar { + font-size: 0.8em; + padding-bottom: 1.4em; +} + +.sidebar div { + margin-bottom: 2em; +} + +.sidebar h3 { + font-weight: bold; + font-size: 0.9em; + line-height: 1; + border-bottom: 1px solid #000; +} + +.sidebar a { + color: #808080; +} + +.sidebar a:hover, .sidebar a:focus { + color: #bededf; +} + +.top { + clear: both; + display: block; + padding: 1em 0; +} + +.top:before { + content: 'Γû▓'; +} + +/*# sourceMappingURL=static.css.map */ diff --git a/core/styleguide/css/styleguide-specific.css b/core/styleguide/css/styleguide-specific.css index 5aaf94c33..3be158e1a 100644 --- a/core/styleguide/css/styleguide-specific.css +++ b/core/styleguide/css/styleguide-specific.css @@ -14,67 +14,88 @@ /* Breakpoints */ .demo { overflow: hidden; - margin-bottom: 1rem; } + margin-bottom: 1rem; +} .demo .gi, .demo .demo-block { - background: #dddddd; - color: gray; + background: #ddd; + color: #808080; text-align: center; margin-bottom: 0.5em; - padding: 1em !important; } - .demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) { - color: #dddddd; - background: gray; } - .demo .gi .gi, .demo .demo-block .gi { - background: rgba(0, 0, 0, 0.1); - color: #dddddd; } - .demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) { - background: rgba(0, 0, 0, 0.3); } + padding: 1em !important; +} +.demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) { + color: #ddd; + background: #808080; +} +.demo .gi .gi, .demo .demo-block .gi { + background: rgba(0, 0, 0, 0.1); + color: #ddd; +} +.demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) { + background: rgba(0, 0, 0, 0.3); +} .demo-animate { background: #ddd; padding: 1em; margin-bottom: 1em; - text-align: center; } + text-align: center; +} .animate-move { - position: relative; } - .animate-move .demo-shape { - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 20px; - background: gray; } - .animate-move:hover > .demo-shape { - left: 100%; - margin-left: -20px; } + position: relative; +} +.animate-move .demo-shape { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 20px; + background: #808080; +} +.animate-move:hover > .demo-shape { + left: 100%; + margin-left: -20px; +} .sg-colors { - overflow: hidden; } + overflow: hidden; +} +.sg-colors li { + overflow: hidden; + border: 1px solid #ddd; + padding: 0.3em; + margin: 0 0.2em 0.2em 0; +} +@media all and (min-width: 30em) { .sg-colors li { - overflow: hidden; - border: 1px solid #dddddd; - padding: 0.3em; - margin: 0 0.2em 0.2em 0; } - @media all and (min-width: 30em) { - .sg-colors li { - float: left; - width: 5em; } } + float: left; + width: 5em; + } +} .sg-swatch { display: block; height: 1.5em; - width: 50%; } - @media all and (max-width: 30em) { - .sg-swatch { - float: left; - margin-right: 0.3em; } } - @media all and (min-width: 30em) { - .sg-swatch { - width: 100%; - height: 4em; - margin-bottom: 0.2em; } } + width: 50%; +} +@media all and (max-width: 30em) { + .sg-swatch { + float: left; + margin-right: 0.3em; + } +} +@media all and (min-width: 30em) { + .sg-swatch { + width: 100%; + height: 4em; + margin-bottom: 0.2em; + } +} .sg-label { - line-height: 1; } + line-height: 1; +} + +/*# sourceMappingURL=styleguide-specific.css.map */ diff --git a/core/styleguide/css/styleguide.css b/core/styleguide/css/styleguide.css index 459a602d7..c7c2b48ae 100644 --- a/core/styleguide/css/styleguide.css +++ b/core/styleguide/css/styleguide.css @@ -52,12 +52,14 @@ #patternlab-html, #patternlab-body { margin: 0; padding: 0; - background: #dddddd; - -webkit-text-size-adjust: 100%; } + background: #ddd; + -webkit-text-size-adjust: 100%; +} .sg-nav-wrapper { overflow: hidden; - background: #dddddd; } + background: #ddd; +} .is-vishidden { position: absolute !important; @@ -66,78 +68,93 @@ height: 1px; padding: 0; border: 0; - clip: rect(1px, 1px, 1px, 1px); } + clip: rect(1px, 1px, 1px, 1px); +} .sg-cf, .sg-pattern { - /**zoom: 1;*/ } - .sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after { - content: " "; - display: table; } - .sg-cf:after, .sg-pattern:after { - clear: both; } + /**zoom: 1;*/ +} +.sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after { + content: " "; + display: table; +} +.sg-cf:after, .sg-pattern:after { + clear: both; +} /*------------------------------------*\ $PATTERN LAB HEADER \*------------------------------------*/ /* Header */ .sg-header { - background: #222222; - color: white; + background: #222; + color: #fff; font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif; text-transform: uppercase; position: fixed; top: 0; left: 0; z-index: 2; - width: 100%; } - .sg-header * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } - .sg-header ul, .sg-header ol { - padding: 0; - margin: 0; } - .sg-header li { - list-style: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); } - .sg-header a { - font-size: 70%; - color: gray; - text-decoration: none; - display: block; - line-height: 1; - padding: 1em; - -webkit-transition: background 0.15s ease-out; - -moz-transition: background 0.15s ease-out; - -ms-transition: background 0.15s ease-out; - -o-transition: background 0.15s ease-out; - transition: background 0.15s ease-out; - -webkit-transition: color 0.15s ease-out; - -moz-transition: color 0.15s ease-out; - -ms-transition: color 0.15s ease-out; - -o-transition: color 0.15s ease-out; - transition: color 0.15s ease-out; } - .sg-header a:hover, .sg-header a:focus, .sg-header a.active { - color: white; - background: rgba(255, 255, 255, 0.05); } - .sg-header ol ol ol a { - padding-left: 2em; - text-transform: none; } + width: 100%; +} +.sg-header * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.sg-header ul, .sg-header ol { + padding: 0; + margin: 0; +} +.sg-header li { + list-style: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} +.sg-header a { + font-size: 70%; + color: #808080; + text-decoration: none; + display: block; + line-height: 1; + padding: 1em; + -webkit-transition: background 0.15s ease-out; + -moz-transition: background 0.15s ease-out; + -ms-transition: background 0.15s ease-out; + -o-transition: background 0.15s ease-out; + transition: background 0.15s ease-out; + -webkit-transition: color 0.15s ease-out; + -moz-transition: color 0.15s ease-out; + -ms-transition: color 0.15s ease-out; + -o-transition: color 0.15s ease-out; + transition: color 0.15s ease-out; +} +.sg-header a:hover, .sg-header a:focus, .sg-header a.active { + color: #fff; + background: rgba(255, 255, 255, 0.05); +} +.sg-header ol ol ol a { + padding-left: 2em; + text-transform: none; +} /* Navigation */ .sg-header .sg-nav-toggle { display: inline-block; padding: 0.9em 1em; - border-bottom: 1px solid rgba(0, 0, 0, 0); + border-bottom: 1px solid transparent; position: relative; text-transform: uppercase; - z-index: 2; } - .sg-header .sg-nav-toggle span { - display: inline-block; - padding-right: 0.2em; } - @media all and (min-width: 48em) { - .sg-header .sg-nav-toggle { - display: none; } } + z-index: 2; +} +.sg-header .sg-nav-toggle span { + display: inline-block; + padding-right: 0.2em; +} +@media all and (min-width: 48em) { + .sg-header .sg-nav-toggle { + display: none; + } +} @media all and (max-width: 48em) { .sg-nav-container { @@ -147,48 +164,63 @@ -moz-transition: max-height 0.1s ease-out; -ms-transition: max-height 0.1s ease-out; -o-transition: max-height 0.1s ease-out; - transition: max-height 0.1s ease-out; } - .sg-nav-container.active { - max-height: 50em; } } + transition: max-height 0.1s ease-out; + } + .sg-nav-container.active { + max-height: 50em; + } +} .sg-nav { z-index: 1; margin: 0; padding: 0; - list-style: none; } + list-style: none; +} +.sg-nav > li { + cursor: pointer; +} +@media all and (min-width: 48em) { .sg-nav > li { - cursor: pointer; } - @media all and (min-width: 48em) { - .sg-nav > li { - border-bottom: 0; - border-right: 1px solid rgba(255, 255, 255, 0.05); - float: left; - position: relative; } - .sg-nav > li > ol { - position: absolute; - top: 2em; - left: 0; } } + border-bottom: 0; + border-right: 1px solid rgba(255, 255, 255, 0.05); + float: left; + position: relative; + } + .sg-nav > li > ol { + position: absolute; + top: 2em; + left: 0; + } +} /* Accordion */ .sg-acc-handle:after { content: ' +'; float: right; - font-size: 70%; } - @media all and (min-width: 48em) { - .sg-acc-handle:after { - float: none; } } + font-size: 70%; +} +@media all and (min-width: 48em) { + .sg-acc-handle:after { + float: none; + } +} .sg-acc-handle.active { - color: white; - background: rgba(255, 255, 255, 0.05); } - .sg-acc-handle.active:after { - content: ' -'; } + color: #fff; + background: rgba(255, 255, 255, 0.05); +} +.sg-acc-handle.active:after { + content: ' -'; +} .sg-acc-handle.sg-icon:after { - content: ""; } + content: ""; +} .sg-header .sg-icon { width: auto; font-size: 1rem; - padding: 0.5rem 1rem; } + padding: 0.5rem 1rem; +} .sg-acc-panel { overflow: hidden; @@ -198,22 +230,28 @@ -moz-transition: max-height 0.1s ease-out; -ms-transition: max-height 0.1s ease-out; -o-transition: max-height 0.1s ease-out; - transition: max-height 0.1s ease-out; } - .sg-acc-panel li { - background: #222222; } - .sg-acc-panel.active { - max-height: 120em; - overflow: auto; } - .sg-acc-panel.sg-right { - position: absolute; - left: auto; - right: 0; } - .sg-acc-panel.sg-left { - position: absolute; - left: auto; } - .sg-acc-panel [class^="sg-icon-"]:before { - display: inline-block; - margin-right: 0.4em; } + transition: max-height 0.1s ease-out; +} +.sg-acc-panel li { + background: #222; +} +.sg-acc-panel.active { + max-height: 120em; + overflow: auto; +} +.sg-acc-panel.sg-right { + position: absolute; + left: auto; + right: 0; +} +.sg-acc-panel.sg-left { + position: absolute; + left: auto; +} +.sg-acc-panel [class^="sg-icon-"]:before { + display: inline-block; + margin-right: 0.4em; +} /* Controls (sizing, view mode) */ .sg-controls { @@ -221,74 +259,99 @@ position: absolute; top: 0; right: 0; - z-index: 2; } + z-index: 2; +} .sg-control-trigger { - border-bottom: 1px solid rgba(255, 255, 255, 0.05); } - @media all and (min-width: 48em) { - .sg-control-trigger { - border: 0; } } - @media all and (min-width: 72em) { - .sg-control-trigger { - float: left; - width: 6em; } } + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} +@media all and (min-width: 48em) { + .sg-control-trigger { + border: 0; + } +} +@media all and (min-width: 72em) { + .sg-control-trigger { + float: left; + width: 6em; + } +} .sg-control > li { - float: left; } - @media all and (min-width: 48em) { - .sg-control > li { - border-bottom: 0; - border-left: 1px solid rgba(255, 255, 255, 0.05); } } + float: left; +} +@media all and (min-width: 48em) { + .sg-control > li { + border-bottom: 0; + border-left: 1px solid rgba(255, 255, 255, 0.05); + } +} .sg-control .sg-input { padding: 0.1em; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; } - .sg-control .sg-input:active, .sg-control .sg-input:focus { - outline: 0; - background: #999999; - color: #000; } + transition: all 0.2s ease-out; +} +.sg-control .sg-input:active, .sg-control .sg-input:focus { + outline: 0; + background: #999; + color: #000; +} .sg-current-size { font-size: 70%; - color: gray; - padding: 0.85em 0.7em; } - .sg-current-size:hover .sg-input { - background: #999999; - color: #000; } - @media all and (min-width: 72em) { - .sg-current-size { - float: left; } } + color: #808080; + padding: 0.85em 0.7em; +} +.sg-current-size:hover .sg-input { + background: #999; + color: #000; +} +@media all and (min-width: 72em) { + .sg-current-size { + float: left; + } +} .sg-size { - width: 135px; } - @media all and (min-width: 48em) { - .sg-size { - width: auto; } } + width: 135px; +} +@media all and (min-width: 48em) { + .sg-size { + width: auto; + } +} @media all and (min-width: 72em) { .sg-size-options { float: left; position: static; max-height: none; - max-width: none; } - .sg-size-options > li { - float: left; - border: 0; - border-left: 1px solid rgba(255, 255, 255, 0.05); } } + max-width: none; + } + .sg-size-options > li { + float: left; + border: 0; + border-left: 1px solid rgba(255, 255, 255, 0.05); + } +} #sg-size-mq { - display: none; } - @media all and (min-width: 72em) { - #sg-size-mq { - display: block; } } + display: none; +} +@media all and (min-width: 72em) { + #sg-size-mq { + display: block; + } +} #sg-form { margin: 0; border: 0; - padding: 0; } + padding: 0; +} .sg-input { margin: -2px 0 0 0; @@ -297,25 +360,32 @@ background-color: #222; color: gray; width: 25px; - text-align: right; } - @media all and (min-width: 48em) { - .sg-input { - width: 35px; } } + text-align: right; +} +@media all and (min-width: 48em) { + .sg-input { + width: 35px; + } +} .sg-input-active { background-color: #fff; - color: #000; } + color: #000; +} .sg-view { - position: relative; } - .sg-view > ul { - position: absolute; - top: 2em; - left: 0; } + position: relative; +} +.sg-view > ul { + position: absolute; + top: 2em; + left: 0; +} .sg-checkbox:before { display: inline-block; - margin-right: 0.4em; } + margin-right: 0.4em; +} /* basic styling */ .sg-pattern-state:before { @@ -324,7 +394,8 @@ display: inline-block; margin-bottom: -4px; font-size: 18px; - vertical-align: bottom; } + vertical-align: bottom; +} /* nav styling */ .sg-nav .sg-pattern-state:before { @@ -333,29 +404,36 @@ margin-left: -4px; height: 20px; display: block; - float: left; } + float: left; +} .sg-sub-nav .sg-pattern-state:before { margin-left: -11px; - margin-right: 4px; } + margin-right: 4px; +} /* call out for pattern's pattern state */ span.sg-pattern-state { - color: #999; } + color: #999; +} span.sg-pattern-state:before { margin-bottom: -3px; - margin-left: 4px; } + margin-left: 4px; +} /* pattern states */ .inprogress:before { - color: #FF4136 !important; } + color: #FF4136 !important; +} .inreview:before { - color: #FFCC00 !important; } + color: #FFCC00 !important; +} .complete:before { - color: #2ECC40 !important; } + color: #2ECC40 !important; +} /*------------------------------------*\ $PATTERN LAB VIEWPORT @@ -369,13 +447,15 @@ span.sg-pattern-state:before { bottom: 0; left: 0; right: 0; - z-index: 0; } - #sg-vp-wrap.wrap-animate { - -webkit-transition: left 0.3s ease-out; - -moz-transition: left 0.3s ease-out; - -ms-transition: left 0.3s ease-out; - -o-transition: left 0.3s ease-out; - transition: left 0.3s ease-out; } + z-index: 0; +} +#sg-vp-wrap.wrap-animate { + -webkit-transition: left 0.3s ease-out; + -moz-transition: left 0.3s ease-out; + -ms-transition: left 0.3s ease-out; + -o-transition: left 0.3s ease-out; + transition: left 0.3s ease-out; +} #sg-viewport { position: absolute; @@ -388,18 +468,22 @@ span.sg-pattern-state:before { bottom: 0; left: 0; right: 0; - background-color: white; } - #sg-viewport.hay-mode { - -webkit-transition: all 40s linear; - -moz-transition: all 40s linear; - -ms-transition: all 40s linear; - -o-transition: all 40s linear; - transition: all 40s linear; } + background-color: white; +} +#sg-viewport.hay-mode { + -webkit-transition: all 40s linear; + -moz-transition: all 40s linear; + -ms-transition: all 40s linear; + -o-transition: all 40s linear; + transition: all 40s linear; +} .no-resize #sg-cover, .no-resize #sg-rightpull-container { - display: none; } + display: none; +} .no-resize #sg-viewport { - overflow: hidden !important; } + overflow: hidden !important; +} #sg-cover { width: 100%; @@ -407,7 +491,8 @@ span.sg-pattern-state:before { display: none; position: absolute; z-index: 20; - cursor: col-resize; } + cursor: col-resize; +} #sg-gen-container { height: 100%; @@ -416,20 +501,23 @@ span.sg-pattern-state:before { margin: 0 auto; -webkit-overflow-scrolling: touch; overflow-y: auto; - overflow-x: hidden; } - #sg-gen-container.hay-mode { - -webkit-transition: all 40s linear; - -moz-transition: all 40s linear; - -ms-transition: all 40s linear; - -o-transition: all 40s linear; - transition: all 40s linear; } + overflow-x: hidden; +} +#sg-gen-container.hay-mode { + -webkit-transition: all 40s linear; + -moz-transition: all 40s linear; + -ms-transition: all 40s linear; + -o-transition: all 40s linear; + transition: all 40s linear; +} #sg-rightpull-container { width: 14px; float: right; margin: 0; height: 100%; - cursor: col-resize; } + cursor: col-resize; +} #sg-rightpull { margin: 0; @@ -440,19 +528,23 @@ span.sg-pattern-state:before { -moz-transition: background 0.2s ease-out; -ms-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; - transition: background 0.2s ease-out; } - #sg-rightpull:hover { - background: #666; } - #sg-rightpull:active { - cursor: col-resize; - background: #444; } + transition: background 0.2s ease-out; +} +#sg-rightpull:hover { + background: #666; +} +#sg-rightpull:active { + cursor: col-resize; + background: #444; +} .vp-animate { -webkit-transition: width 0.8s ease-out; -moz-transition: width 0.8s ease-out; -ms-transition: width 0.8s ease-out; -o-transition: width 0.8s ease-out; - transition: width 0.8s ease-out; } + transition: width 0.8s ease-out; +} /*------------------------------------*\ $PATTERN LAB CONTENT @@ -460,7 +552,8 @@ span.sg-pattern-state:before { /* Section Pattern */ .sg-pattern { margin-bottom: 2em; - position: relative; } + position: relative; +} /* Section Head */ .sg-pattern-head { @@ -469,14 +562,17 @@ span.sg-pattern-state:before { font-size: 70%; font-weight: normal; padding: 1em 0; - border-bottom: 1px solid gray; } - .sg-pattern-head a { - display: block; - color: gray; - text-decoration: none; - cursor: pointer; } - .sg-pattern-head a:hover { - color: #222222; } + border-bottom: 1px solid #808080; +} +.sg-pattern-head a { + display: block; + color: #808080; + text-decoration: none; + cursor: pointer; +} +.sg-pattern-head a:hover { + color: #222; +} .sg-view-container { -moz-box-sizing: border-box; @@ -485,8 +581,8 @@ span.sg-pattern-state:before { font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif; line-height: 1.4; font-size: 90%; - background: #222222; - color: gray; + background: #222; + color: #808080; position: fixed; top: auto; padding: 1em; @@ -496,39 +592,49 @@ span.sg-pattern-state:before { width: 100%; height: 50%; overflow-y: auto; - overflow-x: hidden; } - .sg-view-container a { - color: #999999; } - .sg-view-container pre { - padding: 0 1em; } - .sg-view-container.anim-ready { - -webkit-transition: bottom 0.3s ease-out; - -moz-transition: bottom 0.3s ease-out; - -webkit-transition: bottom 0.3s ease-out; - -ms-transition: bottom 0.3s ease-out; - -o-transition: bottom 0.3s ease-out; - transition: bottom 0.3s ease-out; } + overflow-x: hidden; +} +.sg-view-container a { + color: #999; +} +.sg-view-container pre { + padding: 0 1em; +} +.sg-view-container.anim-ready { + -webkit-transition: bottom 0.3s ease-out; + -moz-transition: bottom 0.3s ease-out; + -webkit-transition: bottom 0.3s ease-out; + -ms-transition: bottom 0.3s ease-out; + -o-transition: bottom 0.3s ease-out; + transition: bottom 0.3s ease-out; +} .sg-view-close { width: 100%; - margin-bottom: -10px; } + margin-bottom: -10px; +} .sg-view-close-btn { color: #fff; text-transform: uppercase; text-decoration: none; text-align: right; - display: block; } + display: block; +} .has-annotation { cursor: help !important; - box-shadow: 0 0 10px gray; } - .has-annotation a, .has-annotation input { - cursor: help !important; } - .has-annotation:hover { - box-shadow: 0 0 10px #222222; } - .has-annotation.active { - box-shadow: inset 0 0 20px gray; } + box-shadow: 0 0 10px #808080; +} +.has-annotation a, .has-annotation input { + cursor: help !important; +} +.has-annotation:hover { + box-shadow: 0 0 10px #222; +} +.has-annotation.active { + box-shadow: inset 0 0 20px #808080; +} .annotation-tip { display: block; @@ -543,29 +649,36 @@ span.sg-pattern-state:before { color: #fff !important; font-weight: bold !important; font-size: 16px !important; - z-index: 100; } + z-index: 100; +} #sg-comments-container { max-width: 60em; - margin: 0 auto; } + margin: 0 auto; +} .sg-comment-container { padding-bottom: 2em; margin-bottom: 1em; - border-bottom: 1px solid rgba(255, 255, 255, 0.25); } - .sg-comment-container p:last-child { - margin-bottom: 0; } - .sg-comment-container h2 { - margin-bottom: 0.25em; } + border-bottom: 1px solid rgba(255, 255, 255, 0.25); +} +.sg-comment-container p:last-child { + margin-bottom: 0; +} +.sg-comment-container h2 { + margin-bottom: 0.25em; +} .sg-code, .sg-annotations { clear: both; - background: #dddddd; - color: #222222; + background: #ddd; + color: #222; padding: 1em 0.5em; - margin: 1em 0; } - .sg-code a, .sg-annotations a { - text-decoration: underline; } + margin: 1em 0; +} +.sg-code a, .sg-annotations a { + text-decoration: underline; +} .sg-code pre { white-space: -moz-pre-line; @@ -574,30 +687,36 @@ span.sg-pattern-state:before { word-wrap: break-word; white-space: pre-line; border: 1px solid rgba(0, 0, 0, 0.1); - padding: 0.5em; } + padding: 0.5em; +} .sg-code-contains { margin-bottom: 1rem; font-size: 85%; - color: gray; } - .sg-code-contains code { - padding: 0.2em; - background: rgba(0, 0, 0, 0.3); - color: #999999; - position: relative; - top: -2px; } + color: #808080; +} +.sg-code-contains code { + padding: 0.2em; + background: rgba(0, 0, 0, 0.3); + color: #999; + position: relative; + top: -2px; +} .sg-code-head { - color: gray; - font-size: 1em; } + color: #808080; + font-size: 1em; +} #sg-code-markup { - padding-top: 10px; } + padding-top: 10px; +} #sg-code-tabs { list-style: none; margin: 0; - padding: 0; } + padding: 0; +} #sg-code-tabs li { float: left; @@ -607,17 +726,21 @@ span.sg-pattern-state:before { padding: 5px 15px; border-top: 2px solid #666; margin-right: 2px; - cursor: pointer; } + cursor: pointer; +} .sg-code-title-active { color: #bbb; - background-color: #272822 !important; } + background-color: #272822 !important; +} div.clear { - clear: both; } + clear: both; +} .sg-code-patternname { - color: #aaa; } + color: #aaa; +} #sg-code-loader { display: none; @@ -629,7 +752,8 @@ div.clear { text-align: center; border-radius: 10px; background-color: #000; - z-index: 100; } + z-index: 100; +} .spinner { height: 30px; @@ -640,16 +764,17 @@ div.clear { background-repeat: no-repeat; background: url("../images/spinner.gif"); border-radius: 50%; - opacity: .7; } + opacity: .7; +} /* Pattern Lab icon fonts */ @font-face { font-family: 'icomoon'; - src: url("../fonts/icomoon.eot"); - src: url("../fonts/icomoon.eot") format("embedded-opentype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.svg") format("svg"); + src: url("../fonts/icomoon.eot?srsv7g"); + src: url("../fonts/icomoon.eot?#iefixsrsv7g") format("embedded-opentype"), url("../fonts/icomoon.woff?srsv7g") format("woff"), url("../fonts/icomoon.ttf?srsv7g") format("truetype"), url("../fonts/icomoon.svg?srsv7g#icomoon") format("svg"); font-weight: normal; - font-style: normal; } - + font-style: normal; +} .sg-icon-search, .sg-icon-cog, .sg-icon-minus, .sg-icon-plus, .sg-icon-menu, .sg-icon-radio-checked, .sg-checkbox.active, .sg-icon-radio-unchecked, .sg-checkbox, .sg-icon-file, .sg-icon-link, .sg-icon-keyboard, .sg-icon-qrcode, .sg-icon-eye, .sg-checkbox { font-family: 'icomoon'; speak: none; @@ -660,44 +785,59 @@ div.clear { line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } + -moz-osx-font-smoothing: grayscale; +} .sg-icon-search:before { content: "\e600"; - font-size: 85%; } + font-size: 85%; +} .sg-icon-cog:before { - content: "\e601"; } + content: "\e601"; +} .sg-icon-minus:before { - content: "\e602"; } + content: "\e602"; +} .sg-icon-plus:before { - content: "\e603"; } + content: "\e603"; +} .sg-icon-menu:before { - content: "\e604"; } + content: "\e604"; +} .sg-icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before { - content: "\e605"; } + content: "\e605"; +} .sg-icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before { - content: "\e606"; } + content: "\e606"; +} .sg-icon-file:before { - content: "\e607"; } + content: "\e607"; +} .sg-icon-link:before { - content: "\e608"; } + content: "\e608"; +} .sg-icon-keyboard:before { - content: "\e609"; } + content: "\e609"; +} .sg-icon-qrcode:before { - content: "\e60a"; } + content: "\e60a"; +} .sg-icon-eye:before { - content: "\e60b"; } + content: "\e60b"; +} /******************************************************************/ -/* End Pattern Lab Interface code */ \ No newline at end of file +/* End Pattern Lab Interface code */ + +/*# sourceMappingURL=styleguide.css.map */ From c340e3c7422b51e66f8a7384bc3890e375f5f6cd Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 11:48:48 -0600 Subject: [PATCH 04/12] removing experimental package --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index f339e058d..475721595 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "devDependencies": { "bs-html-injector": "^3.0.0", "grunt": "~0.4.5", - "grunt-browser-sync": "^2.2.0", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-copy": "^0.8.2", "grunt-contrib-nodeunit": "^0.4.1", From 4a56ffa56e29dbb95225a35897a6b9297bed3cda Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 11:55:13 -0600 Subject: [PATCH 05/12] whoops! --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 475721595..9823c6d23 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "bs-html-injector": "^3.0.0", "grunt": "~0.4.5", "grunt-contrib-concat": "^0.5.1", + "grunt-browser-sync": "^2.2.0", "grunt-contrib-copy": "^0.8.2", "grunt-contrib-nodeunit": "^0.4.1", "grunt-contrib-watch": "^0.6.1" From 96f6432691e4da73598dece07c1e8c1642d852c9 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 13:38:54 -0600 Subject: [PATCH 06/12] switch output to source path of the styleguide so the copy command can move everything at once remove sass config from patternlab for now --- Gruntfile.js | 62 +++++++++++-------------------------------- builder/patternlab.js | 2 +- 2 files changed, 16 insertions(+), 48 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index e3e29064f..70ceabc21 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -62,23 +62,16 @@ module.exports = function(grunt) { copy: { main: { files: [ - { expand: true, cwd: paths().source.js, src: '*', dest: paths().public.js}, - { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css }, - { expand: true, cwd: paths().source.images, src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: paths().public.images }, - { expand: true, cwd: paths().source.fonts, src: '*', dest: paths().public.fonts}, - { expand: true, cwd: paths().source.data, src: 'annotations.js', dest: paths().public.data} - ] - }, - css: { - files: [ - { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css } + { expand: true, cwd: paths().source.js, src: '*.js', dest: paths().public.js}, + { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css }, + { expand: true, cwd: paths().source.images, src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: paths().public.images }, + { expand: true, cwd: paths().source.fonts, src: '*', dest: paths().public.fonts}, + { expand: true, cwd: paths().source.data, src: 'annotations.js', dest: paths().public.data} ] }, styleguide: { files: [ - { - expand: true, cwd: paths().source.styleguide, src: ['*.*', '**/*.*'], dest: paths().public.styleguide - } + { expand: true, cwd: paths().source.styleguide, src: ['*.*', '**/*.*'], dest: paths().public.styleguide } ] } }, @@ -91,35 +84,9 @@ module.exports = function(grunt) { paths().source.patterns + '**/*.json', paths().source.data + '*.json' ], - tasks: ['default'] - }, - // scss: { - // files: [paths().source.css + '**/*.scss', paths().source.styleguide + 'css/*.scss'], - // tasks: ['sass', 'copy:css','bsReload:css'] - // }, - patterns: { - files: [ - paths().source.patterns + '*.mustache', - paths().source.patterns + '*.json', - paths().source.data + '*.json' - ], - tasks: ['default'] + tasks: ['default', 'bsReload:css'] } }, - // sass: { - // build: { - // options: { - // style: 'expanded', - // precision: 8 - // }, - // files: { - // paths().source.css + 'style.css': paths().source.css + 'style.scss', - // paths().source.styleguide + 'css/static.css': paths().source.styleguide + 'css/static.scss', - // paths().source.styleguide + 'css/styleguide.css': paths().source.styleguide + 'css/styleguide.scss', - // paths().source.styleguide + 'css/styleguide-specific.css': paths().source.styleguide + 'css/styleguide-specific.scss' - // } - // } - // }, nodeunit: { all: ['test/*_tests.js'] }, @@ -128,11 +95,15 @@ module.exports = function(grunt) { options: { server: paths().public.root, watchTask: true, + watchOptions: { + ignoreInitial: true, + ignored: '*.html' + }, plugins: [ { module: 'bs-html-injector', options: { - files: paths().public + 'index.html' + files: [paths().public.root + '/index.html', paths().public.styleguide + '/styleguide.html'] } } ] @@ -140,7 +111,7 @@ module.exports = function(grunt) { } }, bsReload: { - css: paths().public + '**/*.css' + css: paths().public.root + '**/*.css' } }); @@ -154,15 +125,12 @@ module.exports = function(grunt) { //load the patternlab task grunt.task.loadTasks('./builder/'); - //if you choose to use scss, or any preprocessor, you can add it here - grunt.registerTask('default', ['patternlab', /*'sass',*/ 'copy:main']); + grunt.registerTask('default', ['patternlab', 'copy:main', 'copy:styleguide']); //travis CI task grunt.registerTask('travis', ['nodeunit', 'patternlab']); - //TODO: this line is more efficient, but you cannot run concurrent watch tasks without another dependency. - //grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'copy:styleguide', 'browserSync', 'watch:patterns', 'watch:scss']); - grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']); + grunt.registerTask('serve', ['patternlab', 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']); grunt.registerTask('build', ['nodeunit', 'concat']); diff --git a/builder/patternlab.js b/builder/patternlab.js index a36c55f4d..04ee0ccc5 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -191,7 +191,7 @@ var patternlab_engine = function (config) { //build the styleguide var styleguideTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'styleguide.mustache'), 'utf8'), styleguideHtml = pattern_assembler.renderPattern(styleguideTemplate, {partials: styleguidePatterns}); - fs.outputFileSync(path.resolve(paths.public.styleguide, 'html/styleguide.html'), styleguideHtml); + fs.outputFileSync(path.resolve(paths.source.styleguide, 'html/styleguide.html'), styleguideHtml); //build the viewall pages var prevSubdir = '', From e4d71d1238b83942927a20ba91bdb089a1e58687 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 23:40:01 -0600 Subject: [PATCH 07/12] gulp file basic support for styleguide copy and watch --- gulpfile.js | 37 ++++++++++++------------------------- 1 file changed, 12 insertions(+), 25 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 531af50a7..b6c75cf25 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -8,7 +8,6 @@ var pkg = require('./package.json'), strip_banner = require('gulp-strip-banner'), header = require('gulp-header'), nodeunit = require('gulp-nodeunit'), - //sass = require('gulp-sass'), browserSync = require('browser-sync').create(); require('gulp-load')(gulp); @@ -94,6 +93,15 @@ gulp.task('cp:css', function(){ .pipe(browserSync.stream()); }); +// Styleguide Copy +gulp.task('cp:styleguide', function(){ + return gulp.src( + [ '**/*'], + {cwd:paths().source.styleguide} ) + .pipe(gulp.dest(paths().public.styleguide)) + .pipe(browserSync.stream());; +}); + //server and watch tasks gulp.task('connect', ['lab'], function(){ browserSync.init({ @@ -103,15 +111,13 @@ gulp.task('connect', ['lab'], function(){ }); gulp.watch(path.resolve(paths().source.css, '**/*.css'), ['cp:css']); - //suggested watches if you use scss - // gulp.watch(paths().source.css + '**/*.scss', ['sass:style']); - // gulp.watch(paths().public.styleguide + '*.scss', ['sass:styleguide']); + gulp.watch(path.resolve(paths().source.styleguide, '**/*.*'), ['cp:styleguide']); gulp.watch( [ path.resolve(paths().source.patterns, '**/*.mustache'), path.resolve(paths().source.patterns, '**/*.json'), - path.resolve(paths().source.data, '*.json') + path.resolve(paths().source.data, '*.json'), ], ['lab-pipe'], function () { browserSync.reload(); } @@ -125,25 +131,6 @@ gulp.task('nodeunit', function(){ .pipe(nodeunit()); }); -//sass tasks, turn on if you want to use -// gulp.task('sass:style', function(){ -// return gulp.src(paths().source.css + '*.scss') -// .pipe(sass({ -// outputStyle: 'expanded', -// precision: 8 -// })) -// .pipe(gulp.dest(paths().public.css)) -// .pipe(browserSync.stream()); -// }) -// gulp.task('sass:styleguide', function(){ -// return gulp.src(gulp.dest(paths().public.styleguide + 'css/*.scss') -// .pipe(sass({ -// outputStyle: 'expanded', -// precision: 8 -// })) -// .pipe(gulp.dest(paths().public.styleguide + 'css')) -// .pipe(browserSync.stream()); -// }) gulp.task('lab-pipe', ['lab'], function(cb){ cb(); @@ -152,7 +139,7 @@ gulp.task('lab-pipe', ['lab'], function(cb){ gulp.task('default', ['lab']); -gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', 'cp:css' /*'sass:style', 'sass:styleguide'*/]); +gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', 'cp:css', 'cp:styleguide' ]); gulp.task('prelab', ['clean', 'assets']); gulp.task('lab', ['prelab', 'patternlab'], function(cb){cb();}); gulp.task('patterns', ['patternlab:only_patterns']); From e7b8d75fb2c4689ae48d6dd9218ee372d80a1efd Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 23:40:53 -0600 Subject: [PATCH 08/12] update gulp file dependencies --- package.gulp.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.gulp.json b/package.gulp.json index 750ad5bd1..dc76220a2 100644 --- a/package.gulp.json +++ b/package.gulp.json @@ -4,17 +4,17 @@ "version": "1.0.1", "main": "./builder/patternlab.js", "dependencies": { - "del": "^2.0.2", + "del": "^2.2.0", "diveSync": "^0.3.0", - "fs-extra": "^0.26.2", - "glob": "^6.0.1", + "fs-extra": "^0.26.5", + "glob": "^6.0.4", "html-entities": "^1.2.0", - "mustache": "^2.2.0" + "mustache": "^2.2.1" }, "devDependencies": { - "browser-sync": "^2.10.0", + "browser-sync": "^2.11.1", "gulp": "^3.9.0", - "gulp-connect": "^2.2.0", + "gulp-connect": "^2.3.1", "gulp-copy": "0.0.2", "gulp-header": "^1.7.1", "gulp-load": "^0.1.1", From 2b1164065733833eea89d0cb251932ffef36c6f3 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 28 Jan 2016 00:04:38 -0600 Subject: [PATCH 09/12] updated changelog to reflect configurable paths and styleguide move --- CHANGELOG | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG b/CHANGELOG index 43c23b2ac..5ca8a00d1 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -11,10 +11,13 @@ PL-node-v1.1.0 - THX: Thanks @robinsonaaron for the issue and pull request! - FIX: Prefer exact pattern key match over fuzzy matches inside getpatternbykey() - THX: Thanks @EvanLovely for the suggestion +- ADD: Make all paths configurable - FIX: Fix issue where absolute paths in the config path object would not resolve - THX: Thanks to @geoffp and @EvanLovely for reporting, fixing and testing the issue in the dev branch. - FIX: Typo in gulp instructions in README. - THX: Thanks @simonknittel for the watchful eyes +- CHG: Changed locations of ./public/styleguide to ./core/styleguide to make ./public/ a cleaner distribution directory +- CHG: Removed scss files and config from project. This is in preparation for including the default asset repo in the future PL-node-v1.0.0 - FIX: Resolve issue with not hiding underscored patterns. From cb4fe8e6d5ea6e41e1c9d9fc1fcf055ab8b4adb3 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 28 Jan 2016 00:12:05 -0600 Subject: [PATCH 10/12] add README entry for configurable paths closes #229 closes #220 --- README.md | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index dc691d662..97b7fed55 100644 --- a/README.md +++ b/README.md @@ -80,10 +80,36 @@ Get more information about patternlab-node, pattern lab in general, and where to ##### Watching Changes To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt|gulp watch` or `grunt|gulp serve`. The `Gruntfile|Gulpfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy. -##### Preprocessor Support -The patternlab-node release package ships with some `.scss` files utilized in the creation of the style guide and sample templates, but these are not required. The compilation tasks are commented out in the `Gruntfiles|Gulpfiles` but can be uncommented or changed to meet your needs. Sass modules are not included in `package.json` files - the prevailing thought being if you are familiar enough with preprocessors, you can use the instructions for [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass) / [gulp-sass](https://github.com/dlmanning/gulp-sass) / _preprocessor of choice_ to install them. Uncomment the preprocessor configuration to fully utilize the example templates, css and style guide. +##### Configurable Paths +Pattern Lab Node ships with a particular source and public workflow intended to separate the code you work on with the code generated for consumption elsewhere. If you wish to change any paths, you may do so within `config.json`. The contents are here: -**NOTE:** You may run into issues installing gulp-sass if you don't have the latest Visual Studio on Windows. See [here](https://github.com/sass/node-sass/issues/469) for more information and [this query](https://github.com/sass/node-sass/issues?utf8=%E2%9C%93&q=is%3Aissue+install) for a slew of installation problems related to gulp-sass. +``` +"paths" : { + "source" : { + "root": "./source/", + "patterns" : "./source/_patterns/", + "data" : "./source/_data/", + "styleguide" : "./core/styleguide/", + "patternlabFiles" : "./source/_patternlab-files/", + "js" : "./source/js", + "images" : "./source/images", + "fonts" : "./source/fonts", + "css" : "./source/css/" + }, + "public" : { + "root" : "./public/", + "patterns" : "./public/patterns/", + "data" : "./public/data/", + "styleguide" : "./public/styleguide/", + "js" : "./public/js", + "images" : "./public/images", + "fonts" : "./public/fonts", + "css" : "./public/css" + } +} +``` + +Note the intentional repitition of the nested structure, made this way for maximum flexibility. Relative paths are default but absolute paths should work too. You may also use these paths within Grunt or Gulp files by referring to the paths() object. ##### Nav Bar Controls If you don't have a need for some of the nav-bar tools in the Pattern Lab frontend, you can turn them off in `config.json`. From 3094e60f9b1e784a4ebad604412f15ec879576d9 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 28 Jan 2016 00:40:46 -0600 Subject: [PATCH 11/12] delete core/styleguide/html/styleguide.html from the shipped project to avoid overwrites --- builder/patternlab.js | 2 +- core/styleguide/html/styleguide.html | 2656 -------------------------- 2 files changed, 1 insertion(+), 2657 deletions(-) delete mode 100644 core/styleguide/html/styleguide.html diff --git a/builder/patternlab.js b/builder/patternlab.js index 04ee0ccc5..a36c55f4d 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -191,7 +191,7 @@ var patternlab_engine = function (config) { //build the styleguide var styleguideTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'styleguide.mustache'), 'utf8'), styleguideHtml = pattern_assembler.renderPattern(styleguideTemplate, {partials: styleguidePatterns}); - fs.outputFileSync(path.resolve(paths.source.styleguide, 'html/styleguide.html'), styleguideHtml); + fs.outputFileSync(path.resolve(paths.public.styleguide, 'html/styleguide.html'), styleguideHtml); //build the viewall pages var prevSubdir = '', diff --git a/core/styleguide/html/styleguide.html b/core/styleguide/html/styleguide.html deleted file mode 100644 index ca65a71ac..000000000 --- a/core/styleguide/html/styleguide.html +++ /dev/null @@ -1,2656 +0,0 @@ - - - - Pattern Lab Style Guide - - - - - - - - - -
    - - -
    -
    -

    Colors

    -
    -
      -
    • - - #ff0000 -
      • -
    • - - #00ff00 -
      • -
    • - - #0000ff -
      • -
    • - - #ffff00 -
      • -
    • - - #00ffff -
      • -
    • - - #ff00ff -
      • -
    • - - #ffffff -
      • -
    • - - #808080 -
      • -
    • - - #000000 -
      • -
    - -
    -
    -
    -

    Fonts

    -
    -

    Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

    -

    Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

    -

    Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

    -

    Secondary font: Georgia, Times, "Times New Roman", serif;

    -

    Secondary font italic: Georgia, Times, "Times New Roman", serif;

    -

    Secondary font bold: Georgia, Times, "Times New Roman", serif;

    - -
    -
    -
    -

    Animations

    -
    -
    Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
    - -
    Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)
    - -
    -
    -
    -

    Visibility

    -
    -

    This text is hidden on smaller screens

    - -

    This text is only visible on smaller screens

    - -

    This text is hidden on medium screens only

    - -

    This text is only visible on medium screens

    - -

    This text is hidden on large screens

    - -

    This text is only visible on large screens

    - -
    -
    -
    -

    Headings

    -
    -

    Heading Level 1

    -

    Heading Level 2

    -

    Heading Level 3

    -

    Heading Level 4

    -
    Heading Level 5
    -
    Heading Level 6
    - -
    -
    -
    -

    Subheadings

    -
    -

    Subheading Level 1

    -

    Subheading Level 2

    -

    Subheading Level 3

    -

    Subheading Level 4

    -
    Subheading Level 5
    -
    Subheading Level 6
    - -
    -
    -
    -

    Headings With Links

    -
    -

    Heading 1 with link

    -

    Heading 2 with link

    -

    Heading 3 with link

    -

    Heading 4 with link

    -
    Heading 5 with link
    -
    Heading 6 with link
    - -
    -
    -
    -

    Paragraph

    -
    -

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

    - -
    -
    -
    -

    Blockquote

    -
    -
    -

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    -
    - -
    -
    -
    -

    Inline Elements

    -
    -
    -

    This is a text link

    - -

    Strong is used to indicate strong importance

    - -

    This text has added emphasis

    - -

    The b element is stylistically different text from normal text, without any special importance

    - -

    The i element is text that is set off from the normal text

    - -

    The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

    - -

    This text is deleted and This text is inserted

    - -

    This text has a strikethrough

    - -

    Superscript®

    - -

    Subscript for things like H2O

    - -

    This small text is small for for fine print, etc.

    - -

    Abbreviation: HTML

    - -

    Keybord input: Cmd

    - -

    This text is a short inline quotation

    - -

    This is a citation

    - -

    The dfn element indicates a definition.

    - -

    The mark element indicates a highlight

    - -

    This is what inline code looks like.

    - -

    This is sample output from a computer program

    - -

    The variable element, such as x = y

    -
    - - -
    -
    -
    -

    Time

    -
    - - -
    -
    -
    -

    Preformatted Text

    -
    - 
      	
-P R E F O R M A T T E D T E X T
-! " # $ % & ' ( ) * + , - . /
-0 1 2 3 4 5 6 7 8 9 : ; < = > ?
-@ A B C D E F G H I J K L M N O
-P Q R S T U V W X Y Z [ \ ] ^ _
-` a b c d e f g h i j k l m n o
-p q r s t u v w x y z { | } ~ 
-
    - -
    -
    -
    -

    Emphasis Colors

    -
    -

    This is what error text looks like

    -

    This is what valid text looks like

    -

    This is what warning text looks like

    -

    This is what information text looks like.

    - -
    -
    -
    -

    Hr

    -
    -
    - -
    -
    -
    -

    Caption

    -
    -

    A caption can be applied to an image, quote, form field, etc.

    - -
    -
    -
    -

    Unordered

    -
    -
    -
      -
    • This is a list item in an unordered list
      • -
    • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
      • -
    • - Lists can be nested inside of each other -
        -
      • This is a nested list item
        • -
      • This is another nested list item in an unordered list
        • -
      -
      • -
    • This is the last list item
      • -
    -
    - -
    -
    -
    -

    Ordered

    -
    -
    -
      -
    1. This is a list item in an ordered list
      2. -
    2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
      3. -
    3. - Lists can be nested inside of each other -
        -
      1. This is a nested list item
        2. -
      2. This is another nested list item in an ordered list
        3. -
      -
      4. -
    4. This is the last list item
      5. -
    -
    - -
    -
    -
    -

    Definition

    -
    -
    -
    Definition List
    -
    A number of connected items or names written or printed consecutively, typically one below the other.
    -
    This is a term.
    -
    This is the definition of that term, which both live in a dl.
    -
    Here is another term.
    -
    And it gets a definition too, which is this line.
    -
    Here is term that shares a definition with the term below.
    -
    And it gets a definition too, which is this line.
    -
    - -
    -
    -
    -

    Logo

    -
    - - -
    -
    -
    -

    Landscape 4x3

    -
    - 4x3 Image - -
    -
    -
    -

    Landscape 16x9

    -
    - 16x9 Image - -
    -
    -
    -

    Square

    -
    - Square Thumbnail - -
    -
    -
    -

    Avatar

    -
    - Avatar - -
    -
    -
    -

    Icons

    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    - -
    -
    -
    -

    Loading Icon

    -
    - Loading - -
    -
    -
    -

    Favicon

    -
    - - - -
    -
    -
    -

    Text Fields

    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - -
    -
    -
    -

    Select Menu

    -
    -
    -
    - - -
    -
    - -
    -
    -
    -

    Checkbox

    -
    -
    -
    - Checkbox * -
      -
      • -
      • -
      • -
    -
    -
    - -
    -
    -
    -

    Radio Buttons

    -
    -
    -
    - Radio -
      -
      • -
      • -
      • -
    -
    -
    - -
    -
    -
    -

    Html5 Inputs

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -

    Buttons

    -
    -

    Button

    -

    Alternate Button

    -

    Disabled Button

    -

    Text Button

    - -
    -
    -
    -

    Table

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Table Heading 1Table Heading 2Table Heading 3Table Heading 3Table Heading 4
    Table Footer 1Table Footer 2Table Footer 3Table Footer 3Table Footer 4
    Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
    Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
    Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
    Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
    - -
    -
    -
    -

    Video

    -
    - - -
    -
    -
    -

    Audio

    -
    - - -
    -
    -
    -

    Byline Author Only

    -
    -
    by Author Name
    - -
    -
    -
    -

    Byline Author Time

    -
    -
    by Author Name on
    - -
    -
    -
    -

    Address

    -
    -
    -
    Company Name
    -
    -
    1234 Main St.
    - Anywhere, - 101010, - CA -
    U.S.A
    -
    -
    +1.888.123.4567
    -
    - -
    -
    -
    -

    Heading Group

    -
    -
    -

    This is the heading group's main heading

    -

    This is the heading group's subheading

    -
    - -
    -
    -
    -

    Blockquote With Citation

    -
    -
    -

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    - Quote Source -
    - -
    -
    -
    -

    Intro Text

    -
    -

    The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

    - -
    -
    -
    -

    Pullquote

    -
    -
    -

    A pull quote is a quotation or excerpt from an article

    -
    - -
    -
    -
    -

    One Up

    -
    -
    - -
    -
    1/1
    -
    - -
    - -
    -
    -
    -

    Two Up

    -
    -
    - -
    -
    1/2
    -
    1/2
    -
    -
    - -
    -
    -
    -

    Three Up

    -
    -
    - -
    -
    1/3
    -
    1/3
    -
    1/3
    -
    -
    - -
    -
    -
    -

    Four Up

    -
    -
    - -
    -
    1/4
    -
    1/4
    -
    1/4
    -
    1/4
    -
    -
    - -
    -
    -
    -

    Media Block

    -
    -
    - -
    - Square Thumbnail -
    -
    -

    Lorem ipsum dolor sit (37 characters)

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    -
    -     -
    - -
    -
    -
    -

    Headline Byline

    -
    -
    - -

    Headline: Lorem Ipsum Dolor Amet Sit

    - -     -
    - -
    -
    -
    -

    Block Hero

    -
    -
    - -
    - 16x9 Image -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

    -
    -     -
    - -
    -
    -
    -

    Block Thumb Headline

    -
    -
    - -
    - Square Thumbnail -
    -
    -

    Pattern Lab

    -
    -     -
    - -
    -
    -
    -

    Headline Only

    -
    -
    - -

    Headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit

    -     -
    - -
    -
    -
    -

    Inset Block

    -
    -
    - -
    - 4x3 Image -
    -
    -

    Lorem ipsum dolor sit (37 characters)

    -
    -     -
    - -
    -
    -
    -

    Figure With Caption

    -
    -
    - 4x3 Image -
    This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.
    -
    - -
    -
    -
    -

    Search

    -
    -
    -
    - Search - - - -
    -
    - -
    -
    -
    -

    Comment Form

    -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    -
    -
    -

    Newsletter

    -
    - - -
    -
    -
    -

    Primary Nav

    -
    - - - -
    -
    -
    -

    Footer Nav

    -
    - - -
    -
    -
    -

    Breadcrumbs

    -
    - - -
    -
    -
    -

    Pagination

    -
    -
      -
    1. 1
      2. -
    2. 2
      3. -
    3. 3
      4. -
    4. 4
      5. -
    5. 5
      6. -
    6. 6
      7. -
    7. 7
      8. -
    - -
    -
    -
    -

    Tabs

    -
    -
    - -
    - -
    -
    -
    -

    Social Share

    -
    - - -
    -
    -
    -

    Accordion

    -
    -
    - -
    - -
    -
    -
    -

    Single Comment

    -
    -
  • -
    - Avatar -

    Lacy Way

    -
    -
    -

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

    -
    -
    • - -
    -
    -
    -

    Alert

    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam -
    - -
    -
    -
    -

    Header

    -
    - - - - - -
    -
    -
    -

    Footer

    -
    - -
    -
    -

    © 2015 Company Name. All rights reserved.

    -
    -
    - - - -
    -
    -
    -

    Article Body

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

    - -

    Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

    - -16x9 Image - -

    Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui. -

    - -
    -

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    -
    - -

    Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim. -

    - -
    -
      -
    • This is a list item in an unordered list
      • -
    • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
      • -
    • - Lists can be nested inside of each other -
        -
      • This is a nested list item
        • -
      • This is another nested list item in an unordered list
        • -
      -
      • -
    • This is the last list item
      • -
    -
    - -
    -
      -
    1. This is a list item in an ordered list
      2. -
    2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
      3. -
    3. - Lists can be nested inside of each other -
        -
      1. This is a nested list item
        2. -
      2. This is another nested list item in an ordered list
        3. -
      -
      4. -
    4. This is the last list item
      5. -
    -
    - -

    Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus. -

    - -
    -

    A pull quote is a quotation or excerpt from an article

    -
    - -

    Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus. -

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

    - -
    -
    -
    -

    Comment Thread

    -
    -
    -
    -

    59 Comments

    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
      -
    • -
      - Avatar -

      Freyr Hines

      -
      -
      -

      Wufoo diigo grockit sifteo divvyshot, unigo zooomr revver. Edmodo appjet joyent skype bubbli jajah zoodles joukuu xobni hojoki edmodo appjet, mozy mzinga akismet yuntaa joost yuntaa geni tivo insala yoono chumby, grockit sococo loopt zanga etsy cloudera koofers empressr jiglu blippy. Omgpop lanyrd joukuu sococo zimbra airbnb movity jibjab, foodzie.

      -
      -
    • -
      - Avatar -

      Aquila Achterkamp

      -
      -
      -

      Queso caerphilly cheesecake. Parmesan chalk and cheese port-salut port-salut babybel cottage cheese cheesy grin pepper jack. Croque monsieur paneer st. agur blue cheese emmental airedale monterey jack bavarian bergkase cheese triangles. Halloumi parmesan.

      -
      -
    • -
      - Avatar -

      Siguror Hanigan

      -
      -
      -

      Mung bean squash sorrel taro coriander collard greens gumbo bitterleaf tomato. Taro water chestnut celtuce turnip yarrow celery endive scallion black-eyed pea onion. Aubergine dulse turnip greens mustard salsify garlic soybean parsley bitterleaf desert raisin courgette.

      -
      -
    • -
      - Avatar -

      Plinius Sloane

      -
      -
      -

      The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!

      -
      -
    • -
      - Avatar -

      Junius Koolen

      -
      -
      -

      Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.

      -
      -
      • -
    -
    -
      -
    1. 1
      2. -
    2. 2
      3. -
    3. 3
      4. -
    4. 4
      5. -
    5. 5
      6. -
    6. 6
      7. -
    7. 7
      8. -
    -
    - -
    -
    -
    -

    Sticky Comment

    -
    -
    -
    -

    Selected Comments

    -
      -
    • -
      -

      Lacy Way

      -
      -
      -

      We are all in the gutter, but some of us are looking at the stars.

      -
      -
      • -
    • -
      -

      Lacy Way

      -
      -
      -

      A life is like a garden. Perfect moments can be had, but not preserved, except in memory.

      -
      -
      • -
    -
    -
    - - -
    -
    -
    -

    Carousel

    -
    -
    -
    -
    - -
    - 4x3 Image -
    -
    -

    Lorem ipsum dolor sit (37 characters)

    -
    -     -
    -
    -
    - ← -
    1/5
    - → -
    -
    - -
    -
    -
    -

    Latest Posts

    -
    -
    -

    Latest Posts

    - - View more posts -
    - -
    -
    -
    -

    Recent Tweets

    -
    -
    -

    Recent Tweets

    - - Follow us on Twitter -
    - -
    -
    -
    -

    Related Posts

    -
    -
    -

    Related Posts

    - -
    - -
    -
    -
    - -
    - - - - - - - - - - - From 1e21f59e0535f009c401c8a59ba1954bc4b659d5 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 28 Jan 2016 00:41:05 -0600 Subject: [PATCH 12/12] add thank you to Geoff and Evan --- CHANGELOG | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG b/CHANGELOG index 5ca8a00d1..a7056154c 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -12,6 +12,7 @@ PL-node-v1.1.0 - FIX: Prefer exact pattern key match over fuzzy matches inside getpatternbykey() - THX: Thanks @EvanLovely for the suggestion - ADD: Make all paths configurable +- THX: HUGE Thanks to @geoffp and @EvanLovely for their thoughts, time, and talent to make this a reality! - FIX: Fix issue where absolute paths in the config path object would not resolve - THX: Thanks to @geoffp and @EvanLovely for reporting, fixing and testing the issue in the dev branch. - FIX: Typo in gulp instructions in README.