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/CHANGELOG b/CHANGELOG index 43c23b2ac..a7056154c 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -11,10 +11,14 @@ 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 +- 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. - 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. diff --git a/Gruntfile.js b/Gruntfile.js index 3d9485121..70ceabc21 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,71 +62,48 @@ 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: '*.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} ] }, - css: { + styleguide: { files: [ - { expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' } + { 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'], - // tasks: ['sass', 'copy:css','bsReload:css'] - // }, - patterns: { - files: [ - 'source/_patterns/**/*.mustache', - 'source/_patterns/**/*.json', - 'source/_data/*.json' - ], - tasks: ['default'] + tasks: ['default', 'bsReload:css'] } }, - // sass: { - // build: { - // options: { - // style: 'expanded', - // 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' - // } - // } - // }, nodeunit: { all: ['test/*_tests.js'] }, browserSync: { dev: { options: { - server: './public', + server: paths().public.root, watchTask: true, + watchOptions: { + ignoreInitial: true, + ignored: '*.html' + }, plugins: [ { module: 'bs-html-injector', options: { - files: './public/index.html' + files: [paths().public.root + '/index.html', paths().public.styleguide + '/styleguide.html'] } } ] @@ -132,25 +111,26 @@ module.exports = function(grunt) { } }, bsReload: { - css: './public/**/*.css' + css: paths().public.root + '**/*.css' } }); + function paths () { + return require('./config.json').paths; + } + // load all grunt tasks require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); //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', 'browserSync', 'watch:patterns', 'watch:scss']); - grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:all']); + grunt.registerTask('serve', ['patternlab', 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']); grunt.registerTask('build', ['nodeunit', 'concat']); 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`. 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/core/styleguide/css/static.css b/core/styleguide/css/static.css new file mode 100644 index 000000000..e23eaf41e --- /dev/null +++ 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 new file mode 100644 index 000000000..3be158e1a --- /dev/null +++ b/core/styleguide/css/styleguide-specific.css @@ -0,0 +1,101 @@ +/*------------------------------------*\ + $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 */ +/* Typography */ +/* Defaults */ +/* Dimensions */ +/* Breakpoints */ +.demo { + overflow: hidden; + margin-bottom: 1rem; +} + +.demo .gi, .demo .demo-block { + 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: #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; +} + +.animate-move { + 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; +} +.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 { + 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; + } +} + +.sg-label { + line-height: 1; +} + +/*# sourceMappingURL=styleguide-specific.css.map */ diff --git a/public/styleguide/css/styleguide.css b/core/styleguide/css/styleguide.css similarity index 54% rename from public/styleguide/css/styleguide.css rename to core/styleguide/css/styleguide.css index 459a602d7..c7c2b48ae 100644 --- a/public/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 */ 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/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..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('./source/css/**/*.scss', ['sass:style']); - // gulp.watch('./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('./source/css/*.scss') -// .pipe(sass({ -// outputStyle: 'expanded', -// precision: 8 -// })) -// .pipe(gulp.dest('./public/css')) -// .pipe(browserSync.stream()); -// }) -// gulp.task('sass:styleguide', function(){ -// return gulp.src('./public/styleguide/css/*.scss') -// .pipe(sass({ -// outputStyle: 'expanded', -// precision: 8 -// })) -// .pipe(gulp.dest('./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']); 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", diff --git a/package.json b/package.json index f339e058d..9823c6d23 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "devDependencies": { "bs-html-injector": "^3.0.0", "grunt": "~0.4.5", - "grunt-browser-sync": "^2.2.0", "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" diff --git a/public/styleguide/css/static.css b/public/styleguide/css/static.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/public/styleguide/css/static.scss b/public/styleguide/css/static.scss deleted file mode 100644 index a22d5d744..000000000 --- a/public/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/public/styleguide/css/styleguide-specific.css b/public/styleguide/css/styleguide-specific.css deleted file mode 100644 index 5aaf94c33..000000000 --- a/public/styleguide/css/styleguide-specific.css +++ /dev/null @@ -1,80 +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 */ -/* Typography */ -/* Defaults */ -/* Dimensions */ -/* Breakpoints */ -.demo { - overflow: hidden; - margin-bottom: 1rem; } - -.demo .gi, .demo .demo-block { - background: #dddddd; - color: gray; - 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); } - -.demo-animate { - background: #ddd; - padding: 1em; - margin-bottom: 1em; - 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; } - -.sg-colors { - overflow: hidden; } - .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; } } - -.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; } } - -.sg-label { - line-height: 1; } diff --git a/public/styleguide/css/styleguide-specific.scss b/public/styleguide/css/styleguide-specific.scss deleted file mode 100644 index f55a99390..000000000 --- a/public/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/public/styleguide/css/styleguide.scss b/public/styleguide/css/styleguide.scss deleted file mode 100644 index b0b38c0f7..000000000 --- a/public/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";