diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..8f98a03 --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "vendor" +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..68fa807 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,44 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + +[*] +# Indentation style +indent_style = space +indent_size = 4 + +# Settings +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.css] +# Indentation style +indent_style = space +indent_size = 4 + +[*.scss] +# Indentation style +indent_style = space +indent_size = 4 + +[*.js] +# Indentation style +indent_style = space +indent_size = 4 + +[*.md] +trim_trailing_whitespace = false + +[*.json] +# Indentation style +indent_style = space +indent_size = 2 + +[*.yml] +# Indentation style +indent_style = space +indent_size = 2 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1cdfe98 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +.sass-cache +.DS_Store +_site/ +css/ +vendor/ +bower_components/ +node_modules/ +npm-debug.log diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..26acbf0 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +0.12.2 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..d22243b --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,74 @@ +# Contributing + +You are free to contribute to Chopstick via GitHub Pull Requests. We have a couple of simple guidelines we try to follow, of which most are taken from the [CSS Tricks Sass Style Guide](http://css-tricks.com/sass-style-guide) + + +## Git branch model +[A successful git branching model](http://nvie.com/posts/a-successful-git-branching-model/) + + +## Releases +[Semantic versioning](http://semver.org/) + + +## How to pull request + +1. [Fork](https://github.com/getchopstick/chopstick-boilerplate/fork) this repo. +2. Create a branch `git checkout -b feature--name` +3. Commit your changes `git commit -am "New feature"` +4. Push to the branch `git push origin feature--name` +5. Open a [Pull Request](https://github.com/getchopstick/chopstick-boilerplate/pulls) + + +## Coding style + +We use [Editorconfig](http://editorconfig.org/) to maintain a consistent coding style. Please take care of proper spacing and indenting. + + +## Naming and namespaces +We use the [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) naming methodology: + +- `.block` for sole root of the component (eg: .c-widget) +- `.block__element` for a component part of the block (eg: .c-widget__title) +- `.block--modifier` for a variant or extension of the block (eg: .c-widget--full) + +Follow these rules for namespacing: +- `.o-` for object classes (eg: .o-media) +- `.c-` for component classes (eg: .c-widget) +- `.t-` for theming classes (eg: .t-header) +- `.u-` for utility classes (eg: .u-1-of-2) +- `.is-`/`.has-` for stateful classes (eg: .is-active) +- .js for javascript hooks +- `._` for temporary hacks/fixes + +## SCSS order + +1. Regular styles +2. @includes + +Example: + + .c-component { + background: #fff; + @include transition(all 0.3s ease); + } + + +## Extends + +Don't use @extends as they have a tendency to cause css bloat and long selectors. + + +## Nesting + +Try to avoid nesting. We follow a single-depth-class-based architecture. + + +## Global files + +Only `@include` in the global screen.scss file. Never write SCSS directly in screen.scss. Order of importing is always as described in `screen.scss`. + + +## Be generous with comments + +Comments get filtered out when compiling. If you do *anything* that can not be immediately understood: comment it. diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..b1fd089 --- /dev/null +++ b/Gemfile @@ -0,0 +1,11 @@ +# ~/Gemfile + +source "http://rubygems.org" + +group :development do + # CSS Preprocessing + gem 'sass' + + # Jekyll + gem 'jekyll' +end diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..d4e8d3d --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,71 @@ +GEM + remote: http://rubygems.org/ + specs: + blankslate (2.1.2.4) + celluloid (0.16.0) + timers (~> 4.0.0) + classifier-reborn (2.0.3) + fast-stemmer (~> 1.0) + coffee-script (2.4.1) + coffee-script-source + execjs + coffee-script-source (1.9.1.1) + colorator (0.1) + execjs (2.5.2) + fast-stemmer (1.0.2) + ffi (1.9.8) + hitimes (1.2.2) + jekyll (2.5.3) + classifier-reborn (~> 2.0) + colorator (~> 0.1) + jekyll-coffeescript (~> 1.0) + jekyll-gist (~> 1.0) + jekyll-paginate (~> 1.0) + jekyll-sass-converter (~> 1.0) + jekyll-watch (~> 1.1) + kramdown (~> 1.3) + liquid (~> 2.6.1) + mercenary (~> 0.3.3) + pygments.rb (~> 0.6.0) + redcarpet (~> 3.1) + safe_yaml (~> 1.0) + toml (~> 0.1.0) + jekyll-coffeescript (1.0.1) + coffee-script (~> 2.2) + jekyll-gist (1.2.1) + jekyll-paginate (1.1.0) + jekyll-sass-converter (1.3.0) + sass (~> 3.2) + jekyll-watch (1.2.1) + listen (~> 2.7) + kramdown (1.6.0) + liquid (2.6.2) + listen (2.10.0) + celluloid (~> 0.16.0) + rb-fsevent (>= 0.9.3) + rb-inotify (>= 0.9) + mercenary (0.3.5) + parslet (1.5.0) + blankslate (~> 2.0) + posix-spawn (0.3.11) + pygments.rb (0.6.3) + posix-spawn (~> 0.3.6) + yajl-ruby (~> 1.2.0) + rb-fsevent (0.9.4) + rb-inotify (0.9.5) + ffi (>= 0.5.0) + redcarpet (3.2.3) + safe_yaml (1.0.4) + sass (3.4.13) + timers (4.0.1) + hitimes + toml (0.1.2) + parslet (~> 1.5.0) + yajl-ruby (1.2.1) + +PLATFORMS + ruby + +DEPENDENCIES + jekyll + sass diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..d7f7d11 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,29 @@ +# Chopstick License + +Copyright (C) 2013–2015 [Wijs](https://wijs.be/en) + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +# Inuit CSS License + +Inuit is used for: + +- _base.box-sizing.scss + +Copyright 2014 Harry Roberts + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..2aa32bf --- /dev/null +++ b/_config.yml @@ -0,0 +1,2 @@ +title: Chopstick +exclude: ['_site','scss','*scss','Gem*','Guard*','*rb','.sass-cache','.git*','config.rb','*.md','*.json','docroot','node_modules','gulpfile.js'] diff --git a/_gulp/config.js b/_gulp/config.js new file mode 100644 index 0000000..758f672 --- /dev/null +++ b/_gulp/config.js @@ -0,0 +1,86 @@ +// --- +// CONFIG FILE +// Define your tasks & variables here +// --- + +module.exports = { + + scss: { + screen : 'scss/screen.scss', + src : 'scss/**/*.scss', + settings : { + bundleExec: true, + sourcemap: true, + style: 'compact' + }, + cssDest : 'css/', + jekyllCssDes : '_site/css/', + prefix : [ // Autoprefixer supported browsers + 'last 2 version', + '> 1%', + 'ie 8', + 'ie 9', + 'ios 6', + 'android 4' + ] + }, + + js : { + src : [ // source js file + 'js/theme.js', + 'js/_components/*.js', + 'js/loader.js' + + ], + concatFilename : 'theme.concat.js', // result filename + jekyllJsDest : '_site/js/', + jsDest : 'js/' + }, + + jekyll : { + buildMessage: 'Building jekyll' + }, + + browsersync : { + server: { + baseDir: './_site', + reloadDelay: 2000, + debounce: 200, + notify: true, + ghostMode: { + clicks: true, + location: true, + forms: true, + scroll: false + } + } + }, + + watch : { + jekyllSource : [ // Files that trigger a Jekyll rebuild + 'img/*.png', + 'img/*.jpg', + 'img/*.svg', + '_includes/**/*.html', + '_layouts/*.html', + '_posts/*.md', + '_data/*.yml', + '*.html' + ] + }, + + compressjs : { + src : 'js/*.js', + dest : '_site/js/' + }, + + svg2png : { + src: "./img/svg/*.svg", + settings : { + scaling : 2, // The scaling factor (optional; default=1.0) + verbose: false // Logs progress information (optional; default=false) + }, + dest : "./img/png" + } + +}; diff --git a/_gulp/tasks/browsersync.js b/_gulp/tasks/browsersync.js new file mode 100644 index 0000000..f6bbfbf --- /dev/null +++ b/_gulp/tasks/browsersync.js @@ -0,0 +1,20 @@ +// --- +// BROWSERSYNC +// --- + +// plugins +var gulp = require('gulp'), + browserSync = require('browser-sync'); + +// configfile +var config = require('../config').browsersync; + + +// tasks +gulp.task('browsersync', function() { + browserSync.init(config); +}); + +gulp.task('browsersyncReload', function() { + browserSync.reload(); +}); \ No newline at end of file diff --git a/_gulp/tasks/compressjs.js b/_gulp/tasks/compressjs.js new file mode 100644 index 0000000..a431955 --- /dev/null +++ b/_gulp/tasks/compressjs.js @@ -0,0 +1,17 @@ +// --- +// COMPRESSJS TASK +// (puts files together, minifies and saves as 'scripts.min.js') +// --- + +// plugins +var gulp = require('gulp'), + uglyfly = require('gulp-uglyfly'); + +var config = require('../config').compressjs; + +//task +gulp.task('compressjs', function() { + gulp.src(config.src) + .pipe(uglyfly()) + .pipe(gulp.dest(config.dest)) +}); \ No newline at end of file diff --git a/_gulp/tasks/default.js b/_gulp/tasks/default.js new file mode 100644 index 0000000..af02863 --- /dev/null +++ b/_gulp/tasks/default.js @@ -0,0 +1,13 @@ +// --- +// DEFAULT TASK (when calling gulp) +// --- + +// plugins +var gulp = require('gulp'); + +// task +gulp.task('default', [ + 'scss', + 'js', + 'jekyll--build' +]); \ No newline at end of file diff --git a/_gulp/tasks/javascript.js b/_gulp/tasks/javascript.js new file mode 100644 index 0000000..00144ed --- /dev/null +++ b/_gulp/tasks/javascript.js @@ -0,0 +1,23 @@ +// --- +// JS TASK &--reload +// --- + +// plugins +var gulp = require('gulp'), + plumber = require('gulp-plumber'), + concat = require('gulp-concat'); + + +// configfile +var config = require('../config').js; + +// tasks +gulp.task('js', function () { + return gulp.src(config.src) + .pipe(plumber()) + .pipe(concat(config.concatFilename)) + .pipe(gulp.dest(config.jekyllJsDest)) + .pipe(gulp.dest(config.jsDest)); +}); + +gulp.task('js--reload', ['js', 'browsersyncReload']); \ No newline at end of file diff --git a/_gulp/tasks/jekyll.js b/_gulp/tasks/jekyll.js new file mode 100644 index 0000000..638738e --- /dev/null +++ b/_gulp/tasks/jekyll.js @@ -0,0 +1,26 @@ +// --- +// ALL TASKS TO DO WITH JEKYLL +// --- + +// plugins +var gulp = require('gulp'); +var browserSync = require('browser-sync'); +var cp = require('child_process'); + + +// configfile +var config = require('../config').jekyll; + +// tasks +gulp.task('jekyll--build', function (done) { + browserSync.notify(config.buildMessage); + return cp + .spawn('bundle', ['exec', 'jekyll', 'build', '--config=_config.yml'], { + stdio: 'inherit' + }) + .on('close', done); +}); + +gulp.task('jekyll--rebuild', ['jekyll--build'], function () { + browserSync.reload(); +}); diff --git a/_gulp/tasks/scss.js b/_gulp/tasks/scss.js new file mode 100644 index 0000000..faafdf0 --- /dev/null +++ b/_gulp/tasks/scss.js @@ -0,0 +1,29 @@ +// --- +// SCSS TASK +// --- + +// plugins +var gulp = require('gulp'); + plumber = require('gulp-plumber'), + sass = require('gulp-ruby-sass'), + prefix = require('gulp-autoprefixer'), + filesize = require('gulp-filesize'), + browserSync = require('browser-sync'), + sourcemaps = require('gulp-sourcemaps'); + +// configfile +var config = require('../config').scss; + +// // task +gulp.task('scss', function () { + return sass(config.screen, config.settings) + .on('error', function (err) { + console.error('Error', err.message); + }) + .pipe(prefix(config.prefix)) + .pipe(filesize()) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest(config.jekyllCssDes)) + .pipe(browserSync.reload({stream:true})) + .pipe(gulp.dest(config.cssDest)) +}); diff --git a/_gulp/tasks/svg2png.js b/_gulp/tasks/svg2png.js new file mode 100644 index 0000000..3168820 --- /dev/null +++ b/_gulp/tasks/svg2png.js @@ -0,0 +1,17 @@ +// --- +// SVG2PNG +// --- + +// plugins +var gulp = require('gulp'), + svg2png = require('gulp-svg2png'); + +// configfile +var config = require('../config').svg2png; + +// task +gulp.task('svg2png', function () { + gulp.src(config.src) + .pipe(svg2png(config.settings)) + .pipe(gulp.dest(config.dest)); +}); \ No newline at end of file diff --git a/_gulp/tasks/watch.js b/_gulp/tasks/watch.js new file mode 100644 index 0000000..b769034 --- /dev/null +++ b/_gulp/tasks/watch.js @@ -0,0 +1,16 @@ +// --- +// WATCH TASK +// --- + +// plugins +var gulp = require('gulp'); + +// configs +var config = require('../config'); + +// task +gulp.task('watch', ['browsersync'], function () { + gulp.watch(config.scss.src, ['scss']); + gulp.watch(config.js.src, ['js--reload']); + gulp.watch(config.watch.jekyllSource, ['jekyll--rebuild']); +}); diff --git a/_includes/components.alerts.html b/_includes/components.alerts.html new file mode 100644 index 0000000..d0dfc31 --- /dev/null +++ b/_includes/components.alerts.html @@ -0,0 +1,19 @@ +
+

Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem.

+ × +
+ +
+

Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem.

+ × +
+ +
+

Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem.

+ × +
+ +
+

Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem.

+ × +
diff --git a/_includes/components.browser-alert.html b/_includes/components.browser-alert.html new file mode 100644 index 0000000..41aeb3c --- /dev/null +++ b/_includes/components.browser-alert.html @@ -0,0 +1,5 @@ + diff --git a/_includes/components.buttons.html b/_includes/components.buttons.html new file mode 100644 index 0000000..e19d2a2 --- /dev/null +++ b/_includes/components.buttons.html @@ -0,0 +1,38 @@ +

+ Different types +

+

+ Link + + + +

+

+ Button colors +

+

+ Alpha ui + Beta ui +

+

+ Button row +

+

+ Button 1 + Button 2 + Button 3 +

+

+ Button sizes +

+

+ Small button + Normal button + Big button +

+

+ Block button +

+

+ Block Button +

diff --git a/_includes/components.footer.html b/_includes/components.footer.html new file mode 100644 index 0000000..e081679 --- /dev/null +++ b/_includes/components.footer.html @@ -0,0 +1,17 @@ + diff --git a/_includes/components.forms.html b/_includes/components.forms.html new file mode 100644 index 0000000..c7a53eb --- /dev/null +++ b/_includes/components.forms.html @@ -0,0 +1,307 @@ + +
+

Example 1: Standard contact form

+ +
+

Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem.

+ × +
+ +
+

+ + +

+

+ + +

+

+ + + This field is required. +

+

+ + +

+

+ +

+
+
+ +
+ +
+

Example 2: Form built with grids

+ +
+

+

+
+ + +
+
+ + +
+
+

+ +

+

+
+ + +
+
+ + +
+
+

+ +

+

+
+ + +
+
+ + + This field is required. +
+
+

+ +

+

+
+ + +
+
+

+ +

+

+
+ + Vorige +
+
+

+
+
+ +
+ +
+

Example 3: Form with pre- en postfixes

+ +
+
+
+ +
+
+ +
+
+
+ +
+
+
+ + This field is required. +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+ +
+

Example 4: overview of all input elements

+ +
+

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + - + + - + +

+ +

+ + +

+ +

+ + +

+ +

+ +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + + + 0 + + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+ +

+ + +

+
+
diff --git a/_includes/components.header.html b/_includes/components.header.html new file mode 100644 index 0000000..9a275ee --- /dev/null +++ b/_includes/components.header.html @@ -0,0 +1,15 @@ +
+
+
+
+ {% include components.logo.html %} + +
+
+
+
diff --git a/_includes/components.header1.html b/_includes/components.header1.html new file mode 100644 index 0000000..09ab92e --- /dev/null +++ b/_includes/components.header1.html @@ -0,0 +1,27 @@ +
+
+
+
+

How designing in the browser should be

+ Download + + + + + + + + + + + + +
+
+
+
diff --git a/_includes/components.image-header2.html b/_includes/components.image-header2.html new file mode 100644 index 0000000..13a0b7d --- /dev/null +++ b/_includes/components.image-header2.html @@ -0,0 +1,165 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_includes/components.logo.html b/_includes/components.logo.html new file mode 100644 index 0000000..c8c65bb --- /dev/null +++ b/_includes/components.logo.html @@ -0,0 +1,15 @@ +{% if page.section != 'home' %} +

+{% endif %} + + {{ site.title }} + +{% if page.section != 'home' %} + +

+{% else %} +

+{% endif %} diff --git a/_includes/components.pagination.html b/_includes/components.pagination.html new file mode 100644 index 0000000..4c65432 --- /dev/null +++ b/_includes/components.pagination.html @@ -0,0 +1,27 @@ + + +
+ + diff --git a/_includes/elements.base.html b/_includes/elements.base.html new file mode 100644 index 0000000..6331fc3 --- /dev/null +++ b/_includes/elements.base.html @@ -0,0 +1,215 @@ +

Level 1 heading lorem ipsum dolor sit amet consectetur adipisicing elit

+

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

+

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

+ +

Level 02 Heading lorem ipsum dolor sit amet consectetur adipisicing elit

+

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

+ +

Level 03 Heading lorem ipsum dolor sit amet consectetur adipisicing elit mollitia expedita reprehenderit quas aspernatur

+

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

+ +

Level 04 Heading lorem ipsum dolor sit amet consectetur adipisicing elit mollitia expedita reprehenderit quas aspernatur

+

Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.

+ +
+

Paragraph inside Blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.

+
+ +

+ Small element Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur molestiae voluptates fuga, reprehenderit nostrum ratione. Itaque nostrum quidem, assumenda delectus, quo, illum nam voluptas commodi pariatur at molestias velit sequi! + + +

+ +
    +
  1. Ordered list 01
    2. +
  2. Ordered list 02
    3. +
  3. Ordered list 03 +
      +
    1. Ordered list inside list level 2
      2. +
    2. Ordered list inside list level 2 +
        +
      1. Ordered list inside list level 3
        2. +
      2. Ordered list inside list level 3
        3. +
      +
      3. +
    +
    4. +
+ +
Address: Example address 224, Sweden
+ +
+    Preformated:Testing one row
+    and another
+
+ +

+ I am the a tag example
+ I am the abbr tag example
+ I am the acronym tag example
+ I am the b tag example
+ I am the big tag example
+ I am the cite tag example
+ I am the code tag example
+ I am the del tag example
+ I am the dfn tag example
+ I am the em tag example
+ I am the font tag example
+ I am the i tag example
+ I am the ins tag example
+ I am the kbd tag example
+ I am the q tag inside a q tag example
+ I am the s tag example
+ I am the samp tag example
+ I am the small tag example
+ I am the span tag example
+ I am the strike tag example
+ I am the strong tag example
+ I am the sub tag example
+ I am the sup tag example
+ I am the tt tag example
+ I am the var tag example
+ I am the u tag example +

+ + + +
+
Description list title 01
+
Description list description 01
+
Description list title 02
+
Description list description 02
+
Description list description 03
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Dit is de titel
YearOpponentSeason Record (W-L)
1900Last00-00
1918Chicago Cubs75-51
1915Philadelphia Phillies101-50
1918Chicago Cubs75-51
1915Philadelphia Phillies101-50
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Overzicht telefoontarieven
VoorafbetaaldAbonnement
Overdag's AvondsOverdag's Avonds
België
Vaste nummers0,5 €0,25 €0,30 €0,15 €
Mobiele nummers0,10 €0,05 €0,08 €0,04 €
Andere operatoren0,20 €0,10 €0,15 €0,10 €
Buitenland
Vaste nummers1,00 €0,75 €0,80 €0,65 €
Mobiele nummers0,60 €0,55 €0,58 €0,54 €
Andere operatoren0,70 €0,60 €0,65 €0,55 €
diff --git a/_includes/generic.head.html b/_includes/generic.head.html new file mode 100644 index 0000000..cd327ad --- /dev/null +++ b/_includes/generic.head.html @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + {{ site.title }} + + + + + + + + + + + + + + + + diff --git a/_includes/generic.javascript.html b/_includes/generic.javascript.html new file mode 100644 index 0000000..5612864 --- /dev/null +++ b/_includes/generic.javascript.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/_includes/objects.media.html b/_includes/objects.media.html new file mode 100644 index 0000000..2b1a6f8 --- /dev/null +++ b/_includes/objects.media.html @@ -0,0 +1,17 @@ +
+
+ Placeholder +
+
+

The media object is an image to the left, with descriptive content to the right. The content area on the right can contain any other objects. In this case, it contains text, but we could put lists, grids, or even other media objects inside.

+
+
+ +
+
+ Placeholder +
+
+

The media object is an image to the left, with descriptive content to the right. The content area on the right can contain any other objects. In this case, it contains text, but we could put lists, grids, or even other media objects inside.

+
+
diff --git a/_includes/trumps.colors.html b/_includes/trumps.colors.html new file mode 100644 index 0000000..bdf2cdc --- /dev/null +++ b/_includes/trumps.colors.html @@ -0,0 +1,151 @@ + +
+
+

Text colors

+
+ +
+
+

$alpha-text-color

+
+
+
+

$alpha-text-color-light

+
+
+
+

$alpha-text-color-dark

+
+
+
+

$beta-text-color

+
+
+
+

$beta-text-color-light

+
+
+
+

$beta-text-color-dark

+
+
+ + + +
+
+

UI colors

+
+ +
+
+

$alpha-ui-color

+
+
+
+

$alpha-ui-color-light

+
+
+
+

$alpha-ui-color-dark

+
+
+
+

$beta-ui-color

+
+
+
+

$beta-ui-color-light

+
+
+
+

$beta-ui-color-dark

+
+
+
+

$gamma-ui-color

+
+
+
+

$gamma-ui-color-light

+
+
+
+

$gamma-ui-color-dark

+
+
+
+

$delta-ui-color

+
+
+
+

$delta-ui-color-light

+
+
+
+

$delta-ui-color-dark

+
+
+ + + +
+
+

Link colors

+
+ +
+
+

$alpha-link-color

+
+
+
+

$alpha-link-colorhover

+
+
+
+

$alpha-link-colorfocus

+
+
+
+

$alpha-link-coloractive

+
+
+
+

$alpha-link-colorvisited

+
+
+ + + +
+
+

Greyscale of alpha-ui-color

+
+ +
+
+

$grey-00

+
+
+
+

$grey-01

+
+
+
+

$grey-02

+
+
+
+

$grey-03

+
+
+
+

$grey-04

+
+
+
+

$grey-05

+
+
+ diff --git a/_includes/trumps.helpers.html b/_includes/trumps.helpers.html new file mode 100644 index 0000000..daf7115 --- /dev/null +++ b/_includes/trumps.helpers.html @@ -0,0 +1,11 @@ +

Responsive Media Embed

+ +
+ +
+ +

Warning for old browsers

+ +
+

You are using an outdated browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.

+
diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..cd5af97 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,29 @@ + + + + + +{% include generic.head.html %} + + + + + {% include components.browser-alert.html %} + + + + {% include components.header.html %} + + + {{ content }} + + + {% include components.footer.html %} + + + + {% include generic.javascript.html %} + + + + diff --git a/_layouts/styleguide.html b/_layouts/styleguide.html new file mode 100644 index 0000000..94303d1 --- /dev/null +++ b/_layouts/styleguide.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + {{ site.title }} + + + + + + + + + + + + + + + + + + + + + +
+ {{ content }} +
+ + {% include generic.javascript.html %} + + diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..bcf4c1b Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..a581855 --- /dev/null +++ b/bower.json @@ -0,0 +1,9 @@ +{ + "name": "chopstick-boilerplate", + "dependencies": { + "jquery": "~1.11.1", + "html5shiv": "~3.7.0", + "respond": "~1.4.1", + "modernizr": "~2.8.3" + } +} diff --git a/documentation.html b/documentation.html new file mode 100644 index 0000000..04f9f90 --- /dev/null +++ b/documentation.html @@ -0,0 +1,9 @@ +--- +layout: styleguide +title: Patterns +section: styletile +--- + +
+ +
diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..1f59549 Binary files /dev/null and b/favicon.ico differ diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..66a35cc Binary files /dev/null and b/favicon.png differ diff --git a/grid.html b/grid.html new file mode 100755 index 0000000..c7c4584 --- /dev/null +++ b/grid.html @@ -0,0 +1,161 @@ +--- +layout: default +title: Grid +section: grid +--- + +
+ +
+
+
+
+ u-1-of-2-bp3 +
+
+
+
+ u-1-of-2-bp3 +
+
+
+
+ + + +
+
+
+
+ u-1-of-3-bp3 +
+
+
+
+ u-1-of-3-bp3 +
+
+
+
+ u-1-of-3-bp3 +
+
+
+
+ + + +
+
+
+
+ u-1-of-3-bp3 +
+
+
+
+ u-2-of-3-bp3 +
+
+
+
+ + + +
+
+
+
+ u-1-of-5-bp4 +
+
+
+
+ u-1-of-5-bp4 +
+
+
+
+ u-1-of-5-bp4 +
+
+
+
+ u-1-of-5-bp4 +
+
+
+
+ u-1-of-5-bp3 +
+
+
+
+ + + +
+
+
+
+ u-2-of-5-bp2 +
+
+
+
+ u-3-of-5-bp2 +
+
+
+
+ + + +
+
+
+
+ u-3-of-5-bp3 + u-push-1-of-5-bp3 +
+
+
+
+ + + +
+
+
+
+ u-2-of-6-bp2 u-1-of-6-bp4 +
+
+
+
+ u-2-of-6-bp2 u-1-of-6-bp4 +
+
+
+
+ u-2-of-6-bp2 u-1-of-6-bp4 +
+
+
+
+ u-2-of-6-bp2 u-1-of-6-bp4 +
+
+
+
+ u-2-of-6-bp2 u-1-of-6-bp4 +
+
+
+
+ u-2-of-6-bp2 u-1-of-6-bp4 +
+
+
+
+ +
diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..10b395b --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,9 @@ +/* + gulpfile.js + =========== +*/ + +var requireDir = require('require-dir'); + +// Require all tasks in gulp/tasks, including subfolders +requireDir('./_gulp/tasks', { recurse: true }); diff --git a/img/_source/icons.sketch b/img/_source/icons.sketch new file mode 100644 index 0000000..02b58e5 Binary files /dev/null and b/img/_source/icons.sketch differ diff --git a/img/png/chopsticks.png b/img/png/chopsticks.png new file mode 100644 index 0000000..5f941b4 Binary files /dev/null and b/img/png/chopsticks.png differ diff --git a/img/png/cloud-left--large.png b/img/png/cloud-left--large.png new file mode 100644 index 0000000..5d5cf40 Binary files /dev/null and b/img/png/cloud-left--large.png differ diff --git a/img/png/header-bg-text.png b/img/png/header-bg-text.png new file mode 100644 index 0000000..1b2fc36 Binary files /dev/null and b/img/png/header-bg-text.png differ diff --git a/img/png/icon-bits.png b/img/png/icon-bits.png new file mode 100644 index 0000000..52b3713 Binary files /dev/null and b/img/png/icon-bits.png differ diff --git a/img/png/icon-fly--header--v2.png b/img/png/icon-fly--header--v2.png new file mode 100644 index 0000000..2f27464 Binary files /dev/null and b/img/png/icon-fly--header--v2.png differ diff --git a/img/png/icon-fly--header.png b/img/png/icon-fly--header.png new file mode 100644 index 0000000..a18f8df Binary files /dev/null and b/img/png/icon-fly--header.png differ diff --git a/img/png/icon-fly.png b/img/png/icon-fly.png new file mode 100644 index 0000000..0393d01 Binary files /dev/null and b/img/png/icon-fly.png differ diff --git a/img/png/icon-menu.png b/img/png/icon-menu.png new file mode 100644 index 0000000..0c25491 Binary files /dev/null and b/img/png/icon-menu.png differ diff --git a/img/png/icon-modular.png b/img/png/icon-modular.png new file mode 100644 index 0000000..6ff3f03 Binary files /dev/null and b/img/png/icon-modular.png differ diff --git a/img/png/icon-scalable.png b/img/png/icon-scalable.png new file mode 100644 index 0000000..6d50584 Binary files /dev/null and b/img/png/icon-scalable.png differ diff --git a/img/png/icon-singledept.png b/img/png/icon-singledept.png new file mode 100644 index 0000000..b4e4ef4 Binary files /dev/null and b/img/png/icon-singledept.png differ diff --git a/img/png/image-header2--small.png b/img/png/image-header2--small.png new file mode 100644 index 0000000..5682e14 Binary files /dev/null and b/img/png/image-header2--small.png differ diff --git a/img/png/image-header2.png b/img/png/image-header2.png new file mode 100644 index 0000000..5c080e5 Binary files /dev/null and b/img/png/image-header2.png differ diff --git a/img/png/installation--1.png b/img/png/installation--1.png new file mode 100644 index 0000000..7f8a6f1 Binary files /dev/null and b/img/png/installation--1.png differ diff --git a/img/png/installation--2.png b/img/png/installation--2.png new file mode 100644 index 0000000..dcabe0d Binary files /dev/null and b/img/png/installation--2.png differ diff --git a/img/png/line-1to2.png b/img/png/line-1to2.png new file mode 100644 index 0000000..df9e3e9 Binary files /dev/null and b/img/png/line-1to2.png differ diff --git a/img/png/line-2to3.png b/img/png/line-2to3.png new file mode 100644 index 0000000..b50ec05 Binary files /dev/null and b/img/png/line-2to3.png differ diff --git a/img/png/line-between-steps.png b/img/png/line-between-steps.png new file mode 100644 index 0000000..2650a2c Binary files /dev/null and b/img/png/line-between-steps.png differ diff --git a/img/png/logo--mobile.png b/img/png/logo--mobile.png new file mode 100644 index 0000000..df33b17 Binary files /dev/null and b/img/png/logo--mobile.png differ diff --git a/img/png/logo.png b/img/png/logo.png new file mode 100644 index 0000000..767b05d Binary files /dev/null and b/img/png/logo.png differ diff --git a/img/png/toggle--sprite.png b/img/png/toggle--sprite.png new file mode 100644 index 0000000..0c25491 Binary files /dev/null and b/img/png/toggle--sprite.png differ diff --git a/img/png/wijs-logo.png b/img/png/wijs-logo.png new file mode 100644 index 0000000..f1b31c3 Binary files /dev/null and b/img/png/wijs-logo.png differ diff --git a/img/svg/chopsticks.svg b/img/svg/chopsticks.svg new file mode 100644 index 0000000..e0e2d6c --- /dev/null +++ b/img/svg/chopsticks.svg @@ -0,0 +1,11 @@ + + + + + + + + + + diff --git a/img/svg/cloud-left--large.svg b/img/svg/cloud-left--large.svg new file mode 100644 index 0000000..28ce371 --- /dev/null +++ b/img/svg/cloud-left--large.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/img/svg/header-bg-text.svg b/img/svg/header-bg-text.svg new file mode 100644 index 0000000..078714b --- /dev/null +++ b/img/svg/header-bg-text.svg @@ -0,0 +1,10 @@ + + + + + + + + + diff --git a/img/svg/icon-bits.svg b/img/svg/icon-bits.svg new file mode 100644 index 0000000..923038e --- /dev/null +++ b/img/svg/icon-bits.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/svg/icon-fly--header--v2.svg b/img/svg/icon-fly--header--v2.svg new file mode 100644 index 0000000..acca27b --- /dev/null +++ b/img/svg/icon-fly--header--v2.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/img/svg/icon-fly--header.svg b/img/svg/icon-fly--header.svg new file mode 100644 index 0000000..af756c1 --- /dev/null +++ b/img/svg/icon-fly--header.svg @@ -0,0 +1,10 @@ + + + + + diff --git a/img/svg/icon-fly-footer.svg b/img/svg/icon-fly-footer.svg new file mode 100644 index 0000000..ebe03ac --- /dev/null +++ b/img/svg/icon-fly-footer.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/svg/icon-fly.svg b/img/svg/icon-fly.svg new file mode 100644 index 0000000..f00f51d --- /dev/null +++ b/img/svg/icon-fly.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/svg/icon-github.svg b/img/svg/icon-github.svg new file mode 100644 index 0000000..8758d72 --- /dev/null +++ b/img/svg/icon-github.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/img/svg/icon-menu.svg b/img/svg/icon-menu.svg new file mode 100644 index 0000000..9c64747 --- /dev/null +++ b/img/svg/icon-menu.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/img/svg/icon-modular.svg b/img/svg/icon-modular.svg new file mode 100644 index 0000000..cecbd26 --- /dev/null +++ b/img/svg/icon-modular.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/svg/icon-scalable.svg b/img/svg/icon-scalable.svg new file mode 100644 index 0000000..b82749b --- /dev/null +++ b/img/svg/icon-scalable.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/svg/icon-singledept.svg b/img/svg/icon-singledept.svg new file mode 100644 index 0000000..591a1f8 --- /dev/null +++ b/img/svg/icon-singledept.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/svg/image-header2--small.svg b/img/svg/image-header2--small.svg new file mode 100644 index 0000000..127bc34 --- /dev/null +++ b/img/svg/image-header2--small.svg @@ -0,0 +1,164 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/svg/image-header2.svg b/img/svg/image-header2.svg new file mode 100644 index 0000000..797be88 --- /dev/null +++ b/img/svg/image-header2.svg @@ -0,0 +1,160 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/svg/installation--1.svg b/img/svg/installation--1.svg new file mode 100644 index 0000000..b0d9fb8 --- /dev/null +++ b/img/svg/installation--1.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/img/svg/installation--2.svg b/img/svg/installation--2.svg new file mode 100644 index 0000000..61c8554 --- /dev/null +++ b/img/svg/installation--2.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/img/svg/installation--3.svg b/img/svg/installation--3.svg new file mode 100644 index 0000000..335dfd6 --- /dev/null +++ b/img/svg/installation--3.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/img/svg/installation-bg--mobile.svg b/img/svg/installation-bg--mobile.svg new file mode 100644 index 0000000..96c1aaf --- /dev/null +++ b/img/svg/installation-bg--mobile.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/img/svg/line-1to2.svg b/img/svg/line-1to2.svg new file mode 100644 index 0000000..8710d83 --- /dev/null +++ b/img/svg/line-1to2.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + diff --git a/img/svg/line-2to3.svg b/img/svg/line-2to3.svg new file mode 100644 index 0000000..1a6c689 --- /dev/null +++ b/img/svg/line-2to3.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/img/svg/line-3to4.svg b/img/svg/line-3to4.svg new file mode 100644 index 0000000..b44e2c0 --- /dev/null +++ b/img/svg/line-3to4.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/img/svg/line-between--large.svg b/img/svg/line-between--large.svg new file mode 100644 index 0000000..beae572 --- /dev/null +++ b/img/svg/line-between--large.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/img/svg/line-between-steps--end.svg b/img/svg/line-between-steps--end.svg new file mode 100644 index 0000000..22aa386 --- /dev/null +++ b/img/svg/line-between-steps--end.svg @@ -0,0 +1,10 @@ + + + + + + + + diff --git a/img/svg/line-between-steps.svg b/img/svg/line-between-steps.svg new file mode 100644 index 0000000..0e8d5a8 --- /dev/null +++ b/img/svg/line-between-steps.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/img/svg/logo--mobile.svg b/img/svg/logo--mobile.svg new file mode 100644 index 0000000..1f73d94 --- /dev/null +++ b/img/svg/logo--mobile.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + diff --git a/img/svg/logo.svg b/img/svg/logo.svg new file mode 100644 index 0000000..b2f4b37 --- /dev/null +++ b/img/svg/logo.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/svg/toggle--sprite.svg b/img/svg/toggle--sprite.svg new file mode 100644 index 0000000..0594f25 --- /dev/null +++ b/img/svg/toggle--sprite.svg @@ -0,0 +1,13 @@ + + + + toggle--sprite + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/img/svg/wijs-logo.svg b/img/svg/wijs-logo.svg new file mode 100644 index 0000000..135a6f0 --- /dev/null +++ b/img/svg/wijs-logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100755 index 0000000..9a74794 --- /dev/null +++ b/index.html @@ -0,0 +1,187 @@ +--- +layout: styleguide +title: Patterns +section: styletile +--- +{% include components.header.html %} + +{% include components.header1.html %} + +
+
+
+ +
+

What is chopstick?

+

A kick-ass front-end framework

+
+ +
+

BEM naming methodology

+

Do you wanna know why I use a knife? Guns are too quick. You can't savor all the ... little emotions. You see, in their last moments, people show you who they really are. So er a way, I knew your friends better than you ever did. Would you like to know which of them were cowards?

+
+ +
+

SASS

+

Do you wanna know why I use a knife? Guns are too quick. You can't savor all the ... little emotions. You see, in their last moments, people show you who they really are. So in a way, I knew your friends better than you ever did. Would you like to know which of them were cowards?

+
+ +
+

Jekyll

+

Do you wanna know why I use a knife? Guns are too quick. You can't savor all the ... little emotions. You see, in their last moments, people show you who they really are. So in a way, I knew your friends better than you ever did. Would you like to know which of them were cowards?

+
+ +
+
+
+ +
+
+
+

The key features

+

Why you should use Chopstick

+
+ +
+
+ scalable-icon +

scalable

+
+ +
+ modular-icon +

modular

+
+ +
+ singledept-icon +

single dept class based

+
+ +
+ bits-icon +

the bits that build the bits

+
+
+ +
+
+ +
+
+ +
+

Easy setup guide

+

Get it up and running quickly

+
+ +
+
+ +
+
+ 1 +
+ +
+

Install these first

+ +
+
+ +
+ +
+ +
+
+ 2 +
+ +
+

Get it on your system

+
    +
  • Click here to download chopstick
    • +
  • Extract the chopstick folder
    • +
+
+
+ +
+ +
+ +
+
+ 3 +
+ +
+

Setup chopstick

+
    +
  • Open the chopstick folder in the terminal
    • +
  • a. Install bundler +
      +
    • gem update --system
      • +
    • gem install bundler
      • +
    +
    • +
  • b. Install bower +
      +
    • npm install -g bower
      • +
    • bower install
      • +
    +
    • +
  • c. Install gulp +
      +
    • npm install -g gulp
      • +
    • npm install
      • +
    +
    • +
+
+
+ +
+ +
+ +
+
+ 4 +
+ +
+

Enjoy Chopstick

+
    +
  • Just run
    • +
  • gulp watch
    • +
+
+
+ +
+
+
+
+ +
+
+
+
+
+

Learn from us

+

Just follow along with these screencasts

+
+ +
01: Getting to know Chopstick
+ +
+
+
+
+ +{% include components.footer.html %} diff --git a/js/_components/_animation.js b/js/_components/_animation.js new file mode 100644 index 0000000..23bc028 --- /dev/null +++ b/js/_components/_animation.js @@ -0,0 +1,56 @@ +chopstick.animation = +{ + init: function() + { + chopstick.animation.flyAnimation(); + chopstick.animation.footerAnimation(); + }, + + flyAnimation: function() { + // construct timelines + var tl = new TimelineMax({yoyo: true, repeat: -1}), + tl2 = new TimelineMax({yoyo: true, repeat: -1}); + + var screenWidth = $( document ).innerWidth(); + + // set fly position in 100 different spots + for (var i = 0; i < 100; i++) { + + var randomX = Math.floor((Math.random() * screenWidth/8) + 1), + randomY = Math.floor((Math.random() * 200) + 1), + randomTiming = Math.floor((Math.random() * 1) + 1); + + tl.to(".js-animatedfly", randomTiming, { + scale: 1, + x: randomX + "px", + y: randomY + "px", + ease: Expo.easeInOut + }); + + tl2.to(".js-right-wing", 0.2, { + scale: 1, + rotation: "30_cw", + ease: Expo.easeIn, + transformOrigin:"left 80%" + },"flap1"); + + tl2.to(".js-left-wing", 0.2, { + scale: 1, + rotation: "330_ccw", + ease: Expo.easeIn, + transformOrigin: "right 80%" + },"flap1"); + }; + }, + + footerAnimation: function() { + var controller = new ScrollMagic.Controller(); + + // build scene + var scene = new ScrollMagic.Scene({triggerElement: ".js-footer-animation-trigger"}) + // trigger animation by adding a css class + .setClassToggle(".c-holder--footer", "js-animation-footer") + //.addIndicators({name: "1 - add a class"}) // add indicators (requires plugin) + .addTo(controller); + } +}; diff --git a/js/_components/_fittext.js b/js/_components/_fittext.js new file mode 100644 index 0000000..00d951a --- /dev/null +++ b/js/_components/_fittext.js @@ -0,0 +1,7 @@ +chopstick.fittext = +{ + init: function() { + //console.log('fittext loaded'); + // jQuery(".c-responsive-headline").fitText(1, { minFontSize: '41px', maxFontSize: '91px' }); + } +}; diff --git a/js/_components/_hide.js b/js/_components/_hide.js new file mode 100644 index 0000000..70e67c2 --- /dev/null +++ b/js/_components/_hide.js @@ -0,0 +1,22 @@ +chopstick.hide = +{ + settings: + { + hide: $('.js-hide') + }, + + init: function() + { + settings = this.settings; + chopstick.hide.hideContent(); + }, + + hideContent: function () + { + settings.hide.on('click', function(e) + { + e.preventDefault(); + $(this).closest(settings.hide).parent().addClass('is-hidden'); + }); + } +}; diff --git a/js/_components/_mobilenav.js b/js/_components/_mobilenav.js new file mode 100644 index 0000000..67e5f71 --- /dev/null +++ b/js/_components/_mobilenav.js @@ -0,0 +1,30 @@ +chopstick.mobileNav = +{ + settings: + { + navHolder: $('.js-nav-holder'), + trigger: $('.js-nav-trigger'), + }, + + init: function() + { + settings = this.settings; + + chopstick.mobileNav.enableMobileNav(); + chopstick.mobileNav.buildMobileNav(); + }, + + enableMobileNav: function() + { + $("html").addClass("c-mobile-nav"); + }, + + // build mobile nav + buildMobileNav: function() + { + settings.trigger.on('click', function() { + $('.js-nav').toggle(); + $(this).toggleClass("is-active"); + }); + } +}; diff --git a/js/_components/_snapsvg.js b/js/_components/_snapsvg.js new file mode 100644 index 0000000..e4c4f22 --- /dev/null +++ b/js/_components/_snapsvg.js @@ -0,0 +1,79 @@ +chopstick.snapsvg = +{ + init: function() + { + window.onload = function () { + console.log('test'); + + var flyicon = Snap.select("#headerfly"), + background = flyicon.select("#background"), + wingLeft = flyicon.select("#wing--left"), + wingRight = flyicon.select("#wing--right"), + upperstick = flyicon.select("#upperstick"), + lowerstick = flyicon.select("#lowerstick"), + timer; // om animatie mogelijk te maken + + + + function onHoverIn() { + clearTimeout(timer); + + upperstick.animate({ + transform: "t0,0r20" + // transform: "t-20,20r5" + }, 100, mina.easein); + + lowerstick.animate({ + transform: "t0,0r-20" + // transform: "t-20,20r5" + }, 100, mina.easein); + + // wingLeft.animate({ + // transform: "t0,0r-20" + // // transform: "t-20,20r5" + // }, 100, mina.easein); + + // wingRight.animate({ + // transform: "t0,0r20" + // // transform: "t-20,20r5" + // }, 100, mina.easein); + + } + + + + function onHoverOut() { + clearTimeout(timer); + + upperstick.animate({ + transform: "t0,0r0" + }, 1000, mina.elastic); + + lowerstick.animate({ + transform: "t0,0r0" + // transform: "t-20,20r5" + }, 1000, mina.elastic); + + wingLeft.animate({ + transform: "t0,0r0" + // transform: "t-20,20r5" + }, 100, mina.easein); + + + wingRight.animate({ + transform: "t0,0r0" + // transform: "t-20,20r5" + }, 100, mina.easein); + } + + timer = setTimeout(onHoverOut, 500); + + flyicon.hover(onHoverIn, + function () { + timer = setTimeout(onHoverOut, 100); + } + ); + + } + } +}; diff --git a/js/_components/_toggle.js b/js/_components/_toggle.js new file mode 100644 index 0000000..687823a --- /dev/null +++ b/js/_components/_toggle.js @@ -0,0 +1,31 @@ +chopstick.toggle = +{ + init: function() { + // The toggle is called with the '.js-toggle' class and one or more data-targets + // Use the 'is-hidden' class to hide your elements" + var toggle = $('.js-toggle'); + + // Toggle functionality + toggle.on('touchstart click', function(e){ + // Prevent the default action on links + e.preventDefault(); + + // Split the targets if multiple + var targets = $(this).data("target").replace(" ", "").split(","); + + // Loop trough targets and toggle the 'is-hidden' class + for (var i = targets.length - 1; i >= 0; i--) { + if(targets[i]){ + // Toggle the 'is-hidden' class + $(targets[i]).toggleClass('is-hidden'); + } + } + + // Add an 'is-toggled' class to the trigger. + // Use this class to style your icons, active states, etc. + $(this).toggleClass('is-toggled'); + + return false; + }); + } +}; diff --git a/js/loader.js b/js/loader.js new file mode 100644 index 0000000..5710596 --- /dev/null +++ b/js/loader.js @@ -0,0 +1 @@ +$(chopstick.init); diff --git a/js/theme.concat.js b/js/theme.concat.js new file mode 100755 index 0000000..556523f --- /dev/null +++ b/js/theme.concat.js @@ -0,0 +1,276 @@ +var chopstick = +{ + // init, something like a constructor + init: function() + { + // chopstick.loadObject(chopstick.mobileNav, 'chopstick.mobileNav'); + // chopstick.loadObject(chopstick.hide, 'chopstick.hide'); + // chopstick.loadObject(chopstick.toggle, 'chopstick.toggle'); + // chopstick.loadObject(chopstick.snapsvg, 'chopstick.snapsvg'); + // chopstick.loadObject(chopstick.fittext, 'chopstick.fittext'); + chopstick.loadObject(chopstick.animation, 'chopstick.animation'); + + console.log("javascript is locked and loaded!"); // for testing purposes. Check your console. Delete after you finished reading this. :-) + }, + + /** + * This function will load an object by a given name + * + * If the object doesn't exist no error will be thrown + * But if object exists but doesn't have an init method it will throw an error + * + * If everything is ok we'll initiate the given object + */ + loadObject: function(obj, name) + { + // create object based on a name + // var objName = window[objName]; + + // check if object exists + if(typeof obj != 'undefined') { + + // check if object has a method init + if (typeof obj.init == 'undefined') { + // we will throw an error so the designer / developer know there's a problem + throw new Error('ERROR: "' + name + '" does not have an init function'); + + } else { + // everything is fine so initiate + obj.init(); + } + } + } + }; + +chopstick.animation = +{ + init: function() + { + chopstick.animation.flyAnimation(); + chopstick.animation.footerAnimation(); + }, + + flyAnimation: function() { + // construct timelines + var tl = new TimelineMax({yoyo: true, repeat: -1}), + tl2 = new TimelineMax({yoyo: true, repeat: -1}); + + var screenWidth = $( document ).innerWidth(); + + // set fly position in 100 different spots + for (var i = 0; i < 100; i++) { + + var randomX = Math.floor((Math.random() * screenWidth/8) + 1), + randomY = Math.floor((Math.random() * 200) + 1), + randomTiming = Math.floor((Math.random() * 1) + 1); + + tl.to(".js-animatedfly", randomTiming, { + scale: 1, + x: randomX + "px", + y: randomY + "px", + ease: Expo.easeInOut + }); + + tl2.to(".js-right-wing", 0.2, { + scale: 1, + rotation: "30_cw", + ease: Expo.easeIn, + transformOrigin:"left 80%" + },"flap1"); + + tl2.to(".js-left-wing", 0.2, { + scale: 1, + rotation: "330_ccw", + ease: Expo.easeIn, + transformOrigin: "right 80%" + },"flap1"); + }; + }, + + footerAnimation: function() { + var controller = new ScrollMagic.Controller(); + + // build scene + var scene = new ScrollMagic.Scene({triggerElement: ".js-footer-animation-trigger"}) + // trigger animation by adding a css class + .setClassToggle(".c-holder--footer", "js-animation-footer") + //.addIndicators({name: "1 - add a class"}) // add indicators (requires plugin) + .addTo(controller); + } +}; + +chopstick.fittext = +{ + init: function() { + //console.log('fittext loaded'); + // jQuery(".c-responsive-headline").fitText(1, { minFontSize: '41px', maxFontSize: '91px' }); + } +}; + +chopstick.hide = +{ + settings: + { + hide: $('.js-hide') + }, + + init: function() + { + settings = this.settings; + chopstick.hide.hideContent(); + }, + + hideContent: function () + { + settings.hide.on('click', function(e) + { + e.preventDefault(); + $(this).closest(settings.hide).parent().addClass('is-hidden'); + }); + } +}; + +chopstick.mobileNav = +{ + settings: + { + navHolder: $('.js-nav-holder'), + trigger: $('.js-nav-trigger'), + }, + + init: function() + { + settings = this.settings; + + chopstick.mobileNav.enableMobileNav(); + chopstick.mobileNav.buildMobileNav(); + }, + + enableMobileNav: function() + { + $("html").addClass("c-mobile-nav"); + }, + + // build mobile nav + buildMobileNav: function() + { + settings.trigger.on('click', function() { + $('.js-nav').toggle(); + $(this).toggleClass("is-active"); + }); + } +}; + +chopstick.snapsvg = +{ + init: function() + { + window.onload = function () { + console.log('test'); + + var flyicon = Snap.select("#headerfly"), + background = flyicon.select("#background"), + wingLeft = flyicon.select("#wing--left"), + wingRight = flyicon.select("#wing--right"), + upperstick = flyicon.select("#upperstick"), + lowerstick = flyicon.select("#lowerstick"), + timer; // om animatie mogelijk te maken + + + + function onHoverIn() { + clearTimeout(timer); + + upperstick.animate({ + transform: "t0,0r20" + // transform: "t-20,20r5" + }, 100, mina.easein); + + lowerstick.animate({ + transform: "t0,0r-20" + // transform: "t-20,20r5" + }, 100, mina.easein); + + // wingLeft.animate({ + // transform: "t0,0r-20" + // // transform: "t-20,20r5" + // }, 100, mina.easein); + + // wingRight.animate({ + // transform: "t0,0r20" + // // transform: "t-20,20r5" + // }, 100, mina.easein); + + } + + + + function onHoverOut() { + clearTimeout(timer); + + upperstick.animate({ + transform: "t0,0r0" + }, 1000, mina.elastic); + + lowerstick.animate({ + transform: "t0,0r0" + // transform: "t-20,20r5" + }, 1000, mina.elastic); + + wingLeft.animate({ + transform: "t0,0r0" + // transform: "t-20,20r5" + }, 100, mina.easein); + + + wingRight.animate({ + transform: "t0,0r0" + // transform: "t-20,20r5" + }, 100, mina.easein); + } + + timer = setTimeout(onHoverOut, 500); + + flyicon.hover(onHoverIn, + function () { + timer = setTimeout(onHoverOut, 100); + } + ); + + } + } +}; + +chopstick.toggle = +{ + init: function() { + // The toggle is called with the '.js-toggle' class and one or more data-targets + // Use the 'is-hidden' class to hide your elements" + var toggle = $('.js-toggle'); + + // Toggle functionality + toggle.on('touchstart click', function(e){ + // Prevent the default action on links + e.preventDefault(); + + // Split the targets if multiple + var targets = $(this).data("target").replace(" ", "").split(","); + + // Loop trough targets and toggle the 'is-hidden' class + for (var i = targets.length - 1; i >= 0; i--) { + if(targets[i]){ + // Toggle the 'is-hidden' class + $(targets[i]).toggleClass('is-hidden'); + } + } + + // Add an 'is-toggled' class to the trigger. + // Use this class to style your icons, active states, etc. + $(this).toggleClass('is-toggled'); + + return false; + }); + } +}; + +$(chopstick.init); diff --git a/js/theme.js b/js/theme.js new file mode 100755 index 0000000..54160be --- /dev/null +++ b/js/theme.js @@ -0,0 +1,43 @@ +var chopstick = +{ + // init, something like a constructor + init: function() + { + // chopstick.loadObject(chopstick.mobileNav, 'chopstick.mobileNav'); + // chopstick.loadObject(chopstick.hide, 'chopstick.hide'); + // chopstick.loadObject(chopstick.toggle, 'chopstick.toggle'); + // chopstick.loadObject(chopstick.snapsvg, 'chopstick.snapsvg'); + // chopstick.loadObject(chopstick.fittext, 'chopstick.fittext'); + chopstick.loadObject(chopstick.animation, 'chopstick.animation'); + + console.log("javascript is locked and loaded!"); // for testing purposes. Check your console. Delete after you finished reading this. :-) + }, + + /** + * This function will load an object by a given name + * + * If the object doesn't exist no error will be thrown + * But if object exists but doesn't have an init method it will throw an error + * + * If everything is ok we'll initiate the given object + */ + loadObject: function(obj, name) + { + // create object based on a name + // var objName = window[objName]; + + // check if object exists + if(typeof obj != 'undefined') { + + // check if object has a method init + if (typeof obj.init == 'undefined') { + // we will throw an error so the designer / developer know there's a problem + throw new Error('ERROR: "' + name + '" does not have an init function'); + + } else { + // everything is fine so initiate + obj.init(); + } + } + } + }; diff --git a/package.json b/package.json new file mode 100644 index 0000000..44e242f --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "Chopstick-boilerplate", + "version": "0.3.3", + "repository": { + "type": "git", + "url": "git@github.com:getchopstick/chopstick-boilerplate.git" + }, + "description": "Chopstick is a mobile-first responsive Design Framework built with Sass", + "main": "gulpfile.js", + "devDependencies": { + "browser-sync": "2.6.4", + "gulp": "3.8.11", + "gulp-autoprefixer": "2.1.0", + "gulp-concat": "2.5.2", + "gulp-filesize": "0.0.6", + "gulp-filter": "2.0.2", + "gulp-minify-css": "1.0.0", + "gulp-plumber": "1.0.0", + "gulp-ruby-sass": "^1.0.1", + "gulp-sourcemaps": "1.5.2", + "gulp-svg2png": "0.3.0", + "gulp-uglyfly": "1.4.2", + "gulp-util": "3.0.4", + "require-dir": "0.3.0" + } +} diff --git a/scss/_components.alerts.scss b/scss/_components.alerts.scss new file mode 100644 index 0000000..6250fe4 --- /dev/null +++ b/scss/_components.alerts.scss @@ -0,0 +1,64 @@ +/* + Components: alerts + --- + Alert boxes +*/ + +.c-alert-box { + position: relative; + @include padding-tb(1,1); + @include px-padding-lr(1,1); + @include block-skin; + + // Only add margin top when 2 elements follow each other + // (http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) + * + & { + @include margin-top(1); + } + + & .c-alert-box__link { + @include text-color($gamma-ui-color); + } +} + +.c-alert-box--error { + @include block-skin($error-color); + + & .c-alert-box__link { + @include text-color($error-color); + } +} + +.c-alert-box--success { + @include block-skin($success-color); + + & .c-alert-box__link { + @include text-color($success-color); + } +} + +.c-alert-box--notice { + @include block-skin($notice-color); + + & .c-alert-box__link { + @include text-color($notice-color); + } +} + + .c-alert-box__link { + text-decoration: underline; + + &:hover, + &:focus { + text-decoration: none; + } + } + + .c-alert-box__close { + cursor: pointer; + position: absolute; + top: #{$alpha-line-height/6}em; + right: #{$alpha-line-height/3}em; + line-height: 1; + text-decoration: none; + } diff --git a/scss/_components.animatedfly.scss b/scss/_components.animatedfly.scss new file mode 100644 index 0000000..1c46f79 --- /dev/null +++ b/scss/_components.animatedfly.scss @@ -0,0 +1,12 @@ +.c-animatedfly { + width: 5%; + height: auto; + position: absolute; + top: 15%; + left: 40%; + z-index: 0; + + @include media-query("palm") { + width: 10%; + } +} diff --git a/scss/_components.brand.scss b/scss/_components.brand.scss new file mode 100644 index 0000000..6263d57 --- /dev/null +++ b/scss/_components.brand.scss @@ -0,0 +1,38 @@ +/* + Components: brand + --- + Logo, brand elements, etc. +*/ + +.c-logo { + float: left; + font-family: $alpha-font-family; + font-weight: $alpha-font-weight; + margin-bottom: 0; + @include text-dimensions(30,1,0,1,1); + + @include mq($bp3) { + @include padding-tb(1.25,1.25); + } + + @include media-query("palm") { + @include text-dimensions(15,1,0,1,1); + } +} + + .c-logo__link { + display: block; + text-decoration: none; + color: $brand-primary-color; + text-indent: -9999px; + @include svg-bg(logo, $position: center center, $repeat: no-repeat); + + &:hover, + &:focus { + color: $alpha-text-color; + } + + @include media-query("palm") { + @include svg-bg(logo--mobile, $position: left center, $repeat: no-repeat); + } + } diff --git a/scss/_components.buttons.scss b/scss/_components.buttons.scss new file mode 100644 index 0000000..0e0a4c9 --- /dev/null +++ b/scss/_components.buttons.scss @@ -0,0 +1,192 @@ +/* + Components: buttons + --- + Button sizes, styles, etc. +*/ + +.c-button { + display: inline-block; + margin: 0; + text-align: center; + text-transform: uppercase; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 3px solid transparent; + white-space: nowrap; + transition: all .1s ease-in-out; + transition-property: background, color, border; + outline: none; + line-height: normal; + font-weight: 600; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-font-smoothing: antialiased; + @include px-margin-right(2); + @include margin-tb(2,2); + + &:hover, + &:focus { + text-decoration: none; + } + + &:active { + outline: 0; + background-image: none; + } +} + +// Button display + +.c-button--block { + display: block; + width: 100%; +} + +.c-button--fll { + @include button-float(left); +} + +.c-button--flr { + @include button-float(right); +} + +// Button sizes + +.c-button--sm { + padding: em(5) em(10); +} + +.c-button--md { + padding: em(9) em(25); +} + +.c-button--lg { + padding: em(14.5) em(20); +} + +// Button colors + +.c-button--alpha { + background-color: $white; + border-color: $brand-primary-color; + color: $brand-primary-color; + + &, + &:visited { + color: $brand-primary-color; + } + + &:hover, + &:focus { + background-color: $brand-primary-color; + color: $white; + } + + &:active { + background-color: $brand-primary-color; + } + +} + +.c-button--beta { + background-color: lighten($brand-secondary-color,3); + border-color: $brand-primary-color; + + // &, + // &:visited { + // color: $brand-primary-color; + // } + + &:hover, + &:focus { + background-color: $white; + color: $brand-primary-color; + border-color: $white; + } + + &:active { + background-color: $brand-secondary-color; + } +} + +// Button to use on a $brand-secondary-color background +.c-button--gamma { + background-color: $brand-primary-color; + border-color: $brand-primary-color; + color: $white; + + &, + &:visited { + color: $white; + } + + &:hover, + &:focus { + background-color: $brand-secondary-color; + color: $brand-primary-color; + border-color: $brand-primary-color; + } + + &:active { + background-color: $brand-secondary-color; + } +} + +.c-button--delta { + + background-color: transparent; + border-color: $brand-primary-color; + color: $white; + font-size: $ms1 + px; + + &, + &:visited { + color: $brand-primary-color; + } + + &:hover, + &:focus { + background-color: $brand-primary-color; + color: white; + border-color: $brand-primary-color; + } + + &:active { + background-color: $brand-secondary-color; + } +} + +// Modifiers + +.c-button--postfix { + border-radius: 0 $radius $radius 0; + border-left: 0; +} + +// Button-group + +.c-button-group { + position: relative; + + .c-button--fll { + @include px-margin-right(1); + } + + .c-button--flr { + @include px-margin-right(1); + } + + @include clearfix; +} + +// firefox inner border fix + +button::-moz-focus-inner, +input[type="button"]::-moz-focus-inner, +input[type="submit"]::-moz-focus-inner { + border: 0; + padding: 0; +} diff --git a/scss/_components.code.scss b/scss/_components.code.scss new file mode 100644 index 0000000..0fff872 --- /dev/null +++ b/scss/_components.code.scss @@ -0,0 +1,16 @@ +.c-code { + font-family: $beta-font-family; +} + +.c-code--inline { + font-size: 16px; + background: black; + // background: #BAB397; + color: white; + padding: 3px 10px; +} + +.c-codeblock { + background: $brand-secondary-color; + padding: 30px; +} diff --git a/scss/_components.features.scss b/scss/_components.features.scss new file mode 100644 index 0000000..0bbd104 --- /dev/null +++ b/scss/_components.features.scss @@ -0,0 +1,23 @@ +/* + Components: features + --- + styles to display the features, etc. +*/ + +.c-feature { + @include padding-tb(1,0); +} + + .c-feature__icon { + margin: 0 auto; + width: 40%; + display: block; + } + + .c-feature__text { + text-transform: uppercase; + font-weight: 900; + color: white; + text-align: center; + @include margin-top(1.5); + } diff --git a/scss/_components.footer-links.scss b/scss/_components.footer-links.scss new file mode 100644 index 0000000..dc6912d --- /dev/null +++ b/scss/_components.footer-links.scss @@ -0,0 +1,23 @@ +.c-footer-links { + text-align: center; + padding-left: 1rem; + font-weight: 600; +} + + .c-footer-links__item { + + &:after { + content: "●"; + color: $brand-primary-color; + padding-left: 1rem; + padding-right: 1rem; + + + } + + &:last-child { + &:after { + content: ""; + } + } + } diff --git a/scss/_components.forms.scss b/scss/_components.forms.scss new file mode 100644 index 0000000..ea6ae6a --- /dev/null +++ b/scss/_components.forms.scss @@ -0,0 +1,98 @@ +/* + Component: forms + --- + Form styling, input sizes, etc. +*/ + +// Input elements + +.c-input-text { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + font-smoothing: antialiased; + background-color: $delta-ui-color; + border-radius: $radius; + border: $border-width $border-style $gamma-ui-color; + color: lighten($alpha-text-color, 30); + font-family: $alpha-font-family; + margin: 0; + width: 100%; + display: block; + outline: none; + line-height: normal; + border-radius: $radius; + @include input-md; + + &:focus { + color: $alpha-text-color; + border-color: $alpha-ui-color; + box-shadow: 0 0 2px rgba($alpha-ui-color,.5); + } + + &.has-error { + border: 1px solid $error-color; + + &:focus { + border-color: $error-color; + box-shadow: 0 0 2px rgba($error-color,.5); + } + } +} + +.c-input-option { + margin: 0; + display: inline-block; + vertical-align: middle; +} + +// Input sizes +.c-input-text--sm { + @include input-sm; +} + +.c-input-text--lg { + @include input-lg; +} + +// Input modifiers +.c-input-text--prefix { + border-radius: $radius 0 0 $radius; + border-right: 0; +} + +// Input states +.c-input-text.has-error { + border: 1px solid $error-color; + + &:focus { + border-color: $error-color; + box-shadow: 0 0 2px rgba($error-color,.5); + } +} + +// Labels +.c-label { + color: $beta-text-color; + @include text-dimensions($ms-1,1); + + &.has-error { + color: $error-color; + } +} + +.c-label--option { + margin: 0; + padding: 0; + width: auto; + display: inline-block; +} + +// Errors +.c-inline-error { + display: block; + color: $error-color; + text-align: right; + @include text-dimensions($ms-2,1); +} diff --git a/scss/_components.highlights.scss b/scss/_components.highlights.scss new file mode 100644 index 0000000..af60db7 --- /dev/null +++ b/scss/_components.highlights.scss @@ -0,0 +1,9 @@ +/* + Components: highlights + --- + styles for highlighting important things in text. +*/ + +.c-highlight { + background: $brand-secondary-color; +} diff --git a/scss/_components.holder.scss b/scss/_components.holder.scss new file mode 100644 index 0000000..f511717 --- /dev/null +++ b/scss/_components.holder.scss @@ -0,0 +1,80 @@ +/* + Component: holders + --- + Creates a horizontal row with padding +*/ + +.c-holder { + @include px-padding-lr(10,10); + + @include mq($bp1) { + @include px-padding-lr(2,2); + } +} + .c-holder--navigation { + @include padding-tb(2,2); + @include px-padding-lr(3,3); + background-color: $brand-secondary-color; + + @include mq($bp1) { + @include px-padding-lr(2,2); + } + } + + .c-holder--header { + background-color: $brand-secondary-color; + @include padding-tb(2,5); + + @include mq($bp1) { + @include padding-tb(0,4); + } + } + + .c-holder--install { + @include px-padding-lr(3,3); + background: url("../img/svg/cloud-left--large.svg"); + // @TODO: add png fallback + background-attachment: fixed; + background-size: cover; + + @include media-query("palm") { + @include svg-bg("installation-bg--mobile"); + } + } + + // secondary brand color background + .c-holder--alpha { + background-color: $brand-secondary-color; + @include padding-tb(4,4); + } + + // white background holder + .c-holder--beta { + background-color: $white; + color: $brand-main-text-color; + @include padding-tb(4,4); + } + + // primary brand color background + .c-holder--accent { + color: $brand-primary-color; + background-color: $brand-primary-color; + @include padding-tb(4,4); + + h2, .c-feature-text { + color: white; + } + + h3 { + color: $brand-accent-color; + } + + } + + .c-holder--footer { + @include padding-tb(3,1); + background: $brand-secondary-color; + + @include svg-bg("header-bg-text", $position: center center); + background-size: cover; + } diff --git a/scss/_components.icons.scss b/scss/_components.icons.scss new file mode 100644 index 0000000..4a70ded --- /dev/null +++ b/scss/_components.icons.scss @@ -0,0 +1,37 @@ +/* + Component: icons + --- + Icons +*/ + +.c-icon { + display: inline-block; + width: 16px; + height: 16px; + position: relative; + top: 1px; + background-repeat: no-repeat; + background-position: center top; + + @include hide-text; +} + + .c-icon--toggle { + background-image: url('../img/png/toggle--sprite.png'); + + .svg & { + background-image: url('../img/svg/toggle--sprite.svg'); + } + + .is-toggled & { + background-position: center -16px; + } + } + + .c-icon--wijs-logo { + width: 55px; + height: 45px; + margin: 0 5px; + } + + diff --git a/scss/_components.installation.scss b/scss/_components.installation.scss new file mode 100644 index 0000000..05598d3 --- /dev/null +++ b/scss/_components.installation.scss @@ -0,0 +1,209 @@ +.c-list-item { + // it's recommended to just use the single-colon for best browser support. + &:after { + content: ""; + position: relative; + + @include mq($bp4) { + width: 500px; + height: 300px; + } + } +} + + + +// .c-list-item--alpha { +// height: 200px; + +// &:after { +// background: url(../img/svg/line-between-steps.svg); +// background-repeat: no-repeat; +// height: 150px; +// width: 20px; +// //@TODO: fix dirty fix +// left: 10px; +// top: -160px; +// } + +// @include mq($bp2) { +// &:after { +// //@TODO: fix dirty fix +// top: -127px; +// } +// } + +// @include mq($bp4) { +// &:after { +// background: url(../img/svg/line-1to2.svg); +// background-repeat: no-repeat; +// width: 500px; +// height: 300px; + +// //@TODO: fix dirty fix +// left: 90%; +// top: -200px; +// } +// } +// } + +.c-list-item--beta { + //@TODO: andere mogelijkheid? + height: 200px; + + &:after { + background: url(../img/svg/line-between-steps.svg); + background-repeat: no-repeat; + height: 150px; + width: 20px; + + //@TODO: fix dirty fix + left: 10px; + top: -160px; + } + + @include mq($bp2) { + &:after { + //@TODO: fix dirty fix + top: -127px; + } + } + + @include mq($bp4) { + height: 250px; + + &:after { + background: url(../img/svg/line-2to3.svg); + background-repeat: no-repeat; + width: 500px; + height: 300px; + //@TODO: fix dirty fix + // left: -125%; + // top: -200px; + + position: relative; + top: -170px; + left: 0; + margin-left: 530px; + } + } +} + +.c-list-item--gamma { + //@TODO: andere mogelijkheid? + height: 200px; + + @include mq($bp4) { + height: 250px; + } + + +} + +.c-list-item--delta { + + height: 200px; + position: relative; + + &:before { + content: " "; + position: absolute; + background: url(../img/svg/line-between-steps.svg) no-repeat; + height: 80%; + width: 100%; + top: -162px; + left: 10px; + + @include mq($bp4) { + background: url(../img/svg/line-1to2.svg) no-repeat; + height: 100%; + width: 100%; + top: -100%; + left: -100%; + } + } + + &:after { + content: " "; + position: absolute; + background: url(../img/svg/line-between-steps.svg) no-repeat; + height: 80%; + width: 100%; + top: 38px; + left: 10px; + + @include mq($bp4) { + background: url(../img/svg/line-2to3.svg) no-repeat; + height: 100%; + width: 100%; + top: 0; + left: -100%; + } + } + +} + +.c-list-item--alpha { + height: 200px; + position: relative; + // temp fix + // overflow: hidden; + + &:before { + content: " "; + position: absolute; + background: url(../img/svg/line-between-steps--large.svg) no-repeat; + height: 80%; + width: 100%; + top: -162px; + left: 10px; + + @include mq($bp4) { + background: url(../img/svg/line-1to2.svg) no-repeat; + height: 100%; + width: 60%; + top: -75%; + left: -57%; + } + + + } + +} + + .c-list-item__number { + width: 5px; + height: 5px; + padding: 5px 12px; + border-radius: 50%; + border: 4px solid $brand-primary-color; + + text-align: center; + font-weight: 900; + color: $brand-primary-color; + background: $brand-secondary-color--light; + } + + .c-list-item__title { + @include mq($bp1) { + @include padding-top(1); + } + + @include mq($bp4) { + @include padding-top(0); + } + } + + .c-list-item__list { + padding-left: 0; + list-style-type: none; + } + + .c-list-item__list__item { + color: $brand-primary-color; + margin: 0; + } + + .c-list-item__list__item--subtitle { + @include margin-top(1); + } diff --git a/scss/_components.links.scss b/scss/_components.links.scss new file mode 100644 index 0000000..e8aefa7 --- /dev/null +++ b/scss/_components.links.scss @@ -0,0 +1,3 @@ +.c-link--underlined { + border-bottom: 1px $brand-primary-color dotted; +} diff --git a/scss/_components.navigation.scss b/scss/_components.navigation.scss new file mode 100644 index 0000000..cbfac21 --- /dev/null +++ b/scss/_components.navigation.scss @@ -0,0 +1,95 @@ +/* + Component: navigation + --- + Site navigation, breadcrumbs, etc. +*/ + +.c-main-nav { + width: 100%; + + @include mq($bp3) { + display: block !important; + width: auto; + float: right; + + li { + @include px-margin-lr(2,0); + } + } + + @include media-query("palm") { + width: auto; + } +} + + .c-main-nav__list { + font-family: $alpha-font-family; + //border-top: 3px solid $brand-primary-color; + @include list-nav; + @include margin-bottom(.75); + @include padding-top(.75); + + @include mq($bp3) { + border-top: none; + padding-top: 0; + margin-bottom: 0; + @include horizontal-nav(); + } + + @include clearfix; + } + + .c-main-nav__list-item { + + } + + .c-main-nav__link { + display: block; + text-decoration: none; + text-transform: uppercase; + font-weight: 600; + float: left; + @include text-dimensions(16,1,0,.25,.25); + + @include mq($bp3) { + @include padding-tb(1.25,1.25); + } + + &:hover, + .is-selected & { + // color: darken($alpha-link-color,50); + // text-decoration: underline; + border-bottom: 3px solid $brand-primary-color + } + + @include media-query("palm") { + @include text-dimensions(18,1,0,.25,.25); + @include px-margin-lr(2,2); + } + } + +.c-main-nav-trigger { + display: block; + height: 2em; + width: 2em; + margin-top: 0.75em; + float: right; + text-indent: -9999px; + background-color: $brand-primary-color; + background-repeat: no-repeat; + background-position: 50%; + @include text-dimensions($alpha-font-size,1,0); + + .svg & { + background-image: url('../img/svg/icon-menu.svg'); + } + + @include mq($bp3) { + display: none; + } + + &.is-active { + background-color: $alpha-link-color; + color: blue; + } +} diff --git a/scss/_components.pagination.scss b/scss/_components.pagination.scss new file mode 100644 index 0000000..8a06ab3 --- /dev/null +++ b/scss/_components.pagination.scss @@ -0,0 +1,25 @@ +/* + Component: pagination + --- + Pagination +*/ + +.c-pagination { + border: 1px solid $gamma-ui-color; +} + +.c-pagination--centered { + text-align: center; +} + + .c-pagination__item { + & + & { + border-left: 1px dotted $gamma-ui-color; + } + } + + .c-pagination__link { + display: block; + @include px-padding-lr(.3,.3); + @include padding-tb(.3,.3); + } diff --git a/scss/_components.section-header.scss b/scss/_components.section-header.scss new file mode 100644 index 0000000..9f1bea5 --- /dev/null +++ b/scss/_components.section-header.scss @@ -0,0 +1,25 @@ +/* + Component: section-header + --- + style header of each section +*/ + +// @TODO: maxwidth geven aan titel zonder dat alles toeklapt + +// .c-section-header { +// max-width: 33%; +// width: +// } + + .c-section-header__subtitle { + @include text-dimensions(22,1.2); + font-style: italic; + color: $brand-main-text-color; + @include margin-tb(0.25,2); + } + +.c-section-header__subtitle--light { + color: white; +} + + diff --git a/scss/_components.styleguide-syntax.scss b/scss/_components.styleguide-syntax.scss new file mode 100644 index 0000000..f94847d --- /dev/null +++ b/scss/_components.styleguide-syntax.scss @@ -0,0 +1,109 @@ +/* + Component: styleguide syntax + --- + Solarized Dark + For use with Jekyll and Pygments + http://ethanschoonover.com/solarized +*/ + +// SOLARIZED HEX ROLE +// --------- -------- ------------------------------------------ +// base01 #586e75 comments / secondary content +// base1 #93a1a1 body text / default code / primary content +// orange #cb4b16 constants +// red #dc322f regex, special keywords +// blue #268bd2 reserved keywords +// cyan #2aa198 strings, numbers +// green #859900 operators, other keywords + +.highlighttable { + @include padding-tb(0,0); + @include margin-tb(.5,.5); + display: block; + overflow: auto; + font-size: 90%; + width: 100%; + color: $alpha-text-color; + border: $border-width $border-style $gamma-ui-color; + border-radius: $radius; +} + + .linenos { + @include px-padding-lr(.5,.5); + color: $beta-text-color; + background-color: lighten($gamma-ui-color,10); + border-right: 1px solid $gamma-ui-color; + } + + .code { + @include px-padding-lr(1,0); + } + +.highlight .c { color: #586e75 } /* Comment */ +.highlight .err { color: #93a1a1 } /* Error */ +.highlight .g { color: #93a1a1 } /* Generic */ +.highlight .k { color: #859900 } /* Keyword */ +.highlight .l { color: #93a1a1 } /* Literal */ +.highlight .n { color: #93a1a1 } /* Name */ +.highlight .o { color: #859900 } /* Operator */ +.highlight .x { color: #cb4b16 } /* Other */ +.highlight .p { color: #93a1a1 } /* Punctuation */ +.highlight .cm { color: #586e75 } /* Comment.Multiline */ +.highlight .cp { color: #859900 } /* Comment.Preproc */ +.highlight .c1 { color: #586e75 } /* Comment.Single */ +.highlight .cs { color: #859900 } /* Comment.Special */ +.highlight .gd { color: #2aa198 } /* Generic.Deleted */ +.highlight .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #dc322f } /* Generic.Error */ +.highlight .gh { color: #cb4b16 } /* Generic.Heading */ +.highlight .gi { color: #859900 } /* Generic.Inserted */ +.highlight .go { color: #93a1a1 } /* Generic.Output */ +.highlight .gp { color: #93a1a1 } /* Generic.Prompt */ +.highlight .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #cb4b16 } /* Generic.Subheading */ +.highlight .gt { color: #93a1a1 } /* Generic.Traceback */ +.highlight .kc { color: #cb4b16 } /* Keyword.Constant */ +.highlight .kd { color: #268bd2 } /* Keyword.Declaration */ +.highlight .kn { color: #859900 } /* Keyword.Namespace */ +.highlight .kp { color: #859900 } /* Keyword.Pseudo */ +.highlight .kr { color: #268bd2 } /* Keyword.Reserved */ +.highlight .kt { color: #dc322f } /* Keyword.Type */ +.highlight .ld { color: #93a1a1 } /* Literal.Date */ +.highlight .m { color: #2aa198 } /* Literal.Number */ +.highlight .s { color: #2aa198 } /* Literal.String */ +.highlight .na { color: #93a1a1 } /* Name.Attribute */ +.highlight .nb { color: #B58900 } /* Name.Builtin */ +.highlight .nc { color: #268bd2 } /* Name.Class */ +.highlight .no { color: #cb4b16 } /* Name.Constant */ +.highlight .nd { color: #268bd2 } /* Name.Decorator */ +.highlight .ni { color: #cb4b16 } /* Name.Entity */ +.highlight .ne { color: #cb4b16 } /* Name.Exception */ +.highlight .nf { color: #268bd2 } /* Name.Function */ +.highlight .nl { color: #93a1a1 } /* Name.Label */ +.highlight .nn { color: #93a1a1 } /* Name.Namespace */ +.highlight .nx { color: #93a1a1 } /* Name.Other */ +.highlight .py { color: #93a1a1 } /* Name.Property */ +.highlight .nt { color: #268bd2 } /* Name.Tag */ +.highlight .nv { color: #268bd2 } /* Name.Variable */ +.highlight .ow { color: #859900 } /* Operator.Word */ +.highlight .w { color: #93a1a1 } /* Text.Whitespace */ +.highlight .mf { color: #2aa198 } /* Literal.Number.Float */ +.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */ +.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */ +.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */ +.highlight .sb { color: #586e75 } /* Literal.String.Backtick */ +.highlight .sc { color: #2aa198 } /* Literal.String.Char */ +.highlight .sd { color: #93a1a1 } /* Literal.String.Doc */ +.highlight .s2 { color: #2aa198 } /* Literal.String.Double */ +.highlight .se { color: #cb4b16 } /* Literal.String.Escape */ +.highlight .sh { color: #93a1a1 } /* Literal.String.Heredoc */ +.highlight .si { color: #2aa198 } /* Literal.String.Interpol */ +.highlight .sx { color: #2aa198 } /* Literal.String.Other */ +.highlight .sr { color: #dc322f } /* Literal.String.Regex */ +.highlight .s1 { color: #2aa198 } /* Literal.String.Single */ +.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */ +.highlight .bp { color: #268bd2 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #268bd2 } /* Name.Variable.Class */ +.highlight .vg { color: #268bd2 } /* Name.Variable.Global */ +.highlight .vi { color: #268bd2 } /* Name.Variable.Instance */ +.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */ diff --git a/scss/_components.styleguide.scss b/scss/_components.styleguide.scss new file mode 100644 index 0000000..80d97c5 --- /dev/null +++ b/scss/_components.styleguide.scss @@ -0,0 +1,39 @@ +/* + Component: styleguide + --- + Styleguide specific scaffolding and demo styles +*/ + +.c-scss { + display: block; + color: $alpha-text-color; + background-color: lighten($gamma-ui-color,10); + border: $border-width $border-style $gamma-ui-color; + border-radius: $radius; + @include margin-tb(0, 1); + @include padding-tb(.5, .5); + @include px-padding-lr(1,1); +} + +.c-swatch { + width: 100%; + height: 60px; + box-shadow: 0 0 1px 3px $white, 0 0 5px 2px rgba($black,.33); +} + +.c-swatch-caption { + color: $beta-text-color; + min-height: 55px; + @include text-dimensions(14,.8,0,.5,.3); +} + +.c-grid-test { + +} + + .c-grid-test__item { + background-color: $grey-05; + text-align: center; + @include padding-tb(.5,.5); + @include margin-tb(1,1); + } diff --git a/scss/_components.taglines.scss b/scss/_components.taglines.scss new file mode 100644 index 0000000..d63b207 --- /dev/null +++ b/scss/_components.taglines.scss @@ -0,0 +1,33 @@ +/* + Components: taglines + --- + styles for taglines/catchphrases, etc. +*/ + +.c-tagline { + color: $brand-main-text-color; + @include padding-bottom(1); +} + +// Modifires +.c-tagline--header { + font-weight: 900; + text-transform: uppercase; + text-align: center; + color: $brand-primary-color; + @include margin-top(0.5); +} + +.c-tagline--tiles { + font-weight: 900; + @include padding-top(2); +} + +.c-tagline--code-example { + font-style: italic; +} + +.c-tagline--install { + font-weight: 600; + font-size: 35px; +} diff --git a/scss/_components.tiles.scss b/scss/_components.tiles.scss new file mode 100644 index 0000000..43eef36 --- /dev/null +++ b/scss/_components.tiles.scss @@ -0,0 +1,26 @@ +/* + Components: tiles + --- + styles to display colored tiles in styletile. +*/ + +.c-tile { + float: left; + display: block; + width: 100%; + height: 100px; +} + +.c-tile--primary-color { + background: $brand-primary-color; +} + +.c-tile--secondary-color { + background: $brand-secondary-color; +} + +.c-tile--main-text-color { + background: $brand-main-text-color; +} + + diff --git a/scss/_elements.forms.scss b/scss/_elements.forms.scss new file mode 100644 index 0000000..f86f697 --- /dev/null +++ b/scss/_elements.forms.scss @@ -0,0 +1,50 @@ +/* + Elements: forms + --- + Default markup for the form elements +*/ + +fieldset { + // Only add margin top when 2 elements follow each other + // (http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) + * + & { + @include margin-top(1); + } +} + +legend, +label { + display: block; + width: 100%; + cursor: pointer; + @include text-dimensions($alpha-font-size,1,0,0,.25); +} + +textarea { + height: auto; + resize: none; +} + +// Select, depends on the project. Use a custom select plugin to properly style these. + +select, +select[multiple] { + +} + +// Placeholders + +::-webkit-input-placeholder { + font-family: $beta-font-family; + font-style: italic; +} + +::-moz-placeholder { + font-family: $beta-font-family; + font-style: italic; +} + +:-ms-input-placeholder { + font-family: $beta-font-family; + font-style: italic; +} diff --git a/scss/_elements.images.scss b/scss/_elements.images.scss new file mode 100644 index 0000000..e14de59 --- /dev/null +++ b/scss/_elements.images.scss @@ -0,0 +1,13 @@ +/* + Elements: forms + --- + Default markup for images +*/ + +// Fix a > img problem + +img { + max-width: 100%; + vertical-align: top; + border: 0; +} diff --git a/scss/_elements.page.scss b/scss/_elements.page.scss new file mode 100644 index 0000000..c967cde --- /dev/null +++ b/scss/_elements.page.scss @@ -0,0 +1,37 @@ +/* + Elements: forms + --- + Default markup for page level elements +*/ + +html { + font: $alpha-font-weight $alpha-font-size/16*100%/#{$alpha-line-height} $alpha-font-family ; + -webkit-overflow-scrolling: touch; + background-color: white; + @include mq($bp5) { + font-size: $alpha-font-size/16*112.5%; + } + + // @include mq($bp4) { + // font-size: $alpha-font-size/16*105.5%; + // } +} + +body { + -webkit-font-smoothing: antialiased; + text-rendering: optimizelegibility; + color: $alpha-text-color; + background-color: white; +} + +::-moz-selection { + background-color: $brand-primary-color; + color: $brand-secondary-color; + text-shadow: none; +} + +::selection { + background-color: $brand-primary-color; + color: $brand-secondary-color; + text-shadow: none; +} diff --git a/scss/_elements.tables.scss b/scss/_elements.tables.scss new file mode 100644 index 0000000..2035e08 --- /dev/null +++ b/scss/_elements.tables.scss @@ -0,0 +1,56 @@ +/* + Elements: tables + --- + Default markup for tables +*/ + +table { + text-align: left; + width: 100%; + font-family: $alpha-font-family; + border-spacing: 0; + border-collapse: collapse; + @include text-dimensions(14,1,2); +} + +tr { + border-bottom: 1px solid lighten($gamma-ui-color, 5); +} + +th, thead { + display: none; +} + +td { + display: block; + padding: .25em 1em .25em 0; + + &:before { + content: attr(headers)": "; + font-weight: bold; + + // options + width: 50%; // faux th width + display: inline-block; + // end options + } +} + +@include mq($bp2) { + thead { + display: table-header-group; + } + + th { + display: table-cell; + padding: .25em 1em .25em 0; + } + + td { + display: table-cell; + + &:before { + display: none; + } + } +} diff --git a/scss/_elements.typography.scss b/scss/_elements.typography.scss new file mode 100644 index 0000000..08433e6 --- /dev/null +++ b/scss/_elements.typography.scss @@ -0,0 +1,156 @@ +/* + Elements: forms + --- + Default markup for typographic elements +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: $alpha-font-family; + font-weight: $alpha-font-weight; + text-rendering: optimizelegibility; + color: $brand-primary-color; + + // Only add margin top when 2 elements follow each other + // (http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) + * + & { + @include margin-top($alpha-line-height); + } +} + +h1 { + @include text-dimensions(55,3); + line-height: 1.148; + font-weight: 900; + text-transform: uppercase; + max-width: 70%; + @include margin-tb(0,3); + + @include mq($bp3) { + @include text-dimensions(70,3); + max-width: 56%; + } +} + +h2 { + @include text-dimensions($ms3,1.5); + line-height: 1.148; + font-weight: 900; + text-transform: uppercase; +} + +h3 { + @include text-dimensions(30,1.2); + @include margin-bottom(1); + font-weight: 900; + color: $brand-primary-color; +} + +h4 { + @include text-dimensions(24,1.2); + font-weight: 900; + color: $brand-main-text-color; +} + +h5 { + @include text-dimensions(35,1.5); + color: $brand-primary-color; +} +h6 { + @include text-dimensions($ms1,1); + font-weight: $beta-font-weight; + color: $brand-main-text-color; +} + +p, +ol, +ul, +dl, +table, +address { + @include text-dimensions($alpha-font-size,1.25); +} + +pre { + tab-size: 2; +} + +ul, +blockquote { + padding-left: 2em; + @include margin-bottom(2); +} + +ol, +li { + + @include margin-top(1); + // Only add margin top when 2 elements follow each other + // (http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) + * + & { + @include padding-bottom(0); + } + + nav & { + @include margin-top(0); + } + +} + +blockquote { + font-style: italic; +} + +caption { + font-family: $alpha-font-family; + text-align: left; + border-bottom: 1px solid lighten($alpha-text-color,50); + font-weight: $beta-font-weight; + text-align: center; + @include padding-bottom(.5); + @include margin-bottom(.5); +} + +small { + @include text-dimensions($ms-1,1,$alpha-line-height); +} + +strong { + font-weight: 700; +} + +hr { + border: 1px solid $brand-primary-color; + border-width: 1px 0 0; + clear: both; + margin-top: 0; + @include margin-tb(1,1); +} + +// Links + +a { + text-decoration: none; + color: darken($brand-primary-color,5); + transition: color .22s ease-in-out; + + &:hover { + // text-decoration: underline; + color: $alpha-link-colorhover; + } + + &:focus { + outline: thin dotted; + color: $alpha-link-colorfocus; + } + + &:hover, + &:active { + outline: 0; + } + +} diff --git a/scss/_generic.box-sizing.scss b/scss/_generic.box-sizing.scss new file mode 100644 index 0000000..49a703c --- /dev/null +++ b/scss/_generic.box-sizing.scss @@ -0,0 +1,26 @@ +/* + Generic: box sizing + --- + Taken from [Inuit CSS](https://github.com/inuitcss/generic.box-sizing) + --- + Set the global `box-sizing` state to `border-box`. + css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice + paulirish.com/2012/box-sizing-border-box-ftw +*/ + +html { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +* { + &, + &:before, + &:after { + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + box-sizing: inherit; + } +} + diff --git a/scss/_generic.normalize.scss b/scss/_generic.normalize.scss new file mode 100644 index 0000000..9cd00d7 --- /dev/null +++ b/scss/_generic.normalize.scss @@ -0,0 +1,431 @@ +/* + Generic: normalize + --- + License: normalize.css v3.0.2 | MIT License | git.io/normalize +*/ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/scss/_generic.reset.scss b/scss/_generic.reset.scss new file mode 100644 index 0000000..cca1093 --- /dev/null +++ b/scss/_generic.reset.scss @@ -0,0 +1,19 @@ +/* + Generic: reset + --- + Reset all HTML elements +*/ + +html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +article, aside, figure, footer, header, hgroup, nav, section, main { + display: block; +} diff --git a/scss/_objects.grid.scss b/scss/_objects.grid.scss new file mode 100644 index 0000000..15c9f57 --- /dev/null +++ b/scss/_objects.grid.scss @@ -0,0 +1,33 @@ +/* + Object: grid + --- + Grid system objects, works together with utility width classes +*/ + +.o-container { + margin: 0 auto; + max-width: $bp5; +} + +// No gutters + +.o-grid { + @include clearfix; +} + +// Default gutter + +.o-grid--gutter { + @include px-margin-lr(-($columns-gutter),-($columns-gutter)); +} + + // Grid item, takes the full width by default + + .o-grid__item { + float: left; + width: 100%; + + .o-grid--gutter > & { + @include px-padding-lr($columns-gutter,$columns-gutter); + } + } diff --git a/scss/_objects.inline-list.scss b/scss/_objects.inline-list.scss new file mode 100644 index 0000000..631f5ae --- /dev/null +++ b/scss/_objects.inline-list.scss @@ -0,0 +1,14 @@ +/* + Object: Inline list + --- + Inline list with no bullets +*/ + +.o-list-inline { + list-style: none; + padding-left: 0; +} + + .o-list-inline__item { + display: inline-block; + } diff --git a/scss/_objects.media-embed.scss b/scss/_objects.media-embed.scss new file mode 100644 index 0000000..cb771c5 --- /dev/null +++ b/scss/_objects.media-embed.scss @@ -0,0 +1,22 @@ +/* + Object: Media embed + --- + Responsive media embedding object, for use with iframes +*/ + +.o-media-embed { + width: 100%; + height: 0; + padding-bottom: 62.5%; + position: relative; + overflow: hidden; + @include margin-bottom(1.5); + + & > iframe { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + } +} diff --git a/scss/_objects.media.scss b/scss/_objects.media.scss new file mode 100644 index 0000000..1ba4116 --- /dev/null +++ b/scss/_objects.media.scss @@ -0,0 +1,41 @@ +/* + Object: media + --- + http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ + --- + The media object is an image to the left, with descriptive content to the right. + Use a grid class to determine the size of the image. The content will take the remaining space. + --- + Example usage: +
+
+ placekitten +
+
+ The media object is an image to the left, with descriptive content to the right. +
+
+*/ + +.o-media { + @include clearfix; +} + + .o-media__img { + float: left; + @include px-padding-lr(0,1); + @include margin-bottom(1); + + img { + display: block; + } + } + + .o-media__img--reverse { + float: right; + @include px-padding-lr(1,0); + } + + .o-media__body { + overflow: hidden; + } diff --git a/scss/_settings.breakpoints.scss b/scss/_settings.breakpoints.scss new file mode 100644 index 0000000..aca9f7e --- /dev/null +++ b/scss/_settings.breakpoints.scss @@ -0,0 +1,21 @@ +// +// Settings: breakpoints +// --- +// Set your breakpoints +// + +$bp1: 320/16*1em; +$bp2: 480/16*1em; +$bp3: 680/16*1em; +$bp4: 960/16*1em; +$bp5: 1140/16*1em; +$bp6: 1380/16*1em; + +$breakpoints: ( + "palm" "screen and (max-width: 44.9375em)", + "lap" "screen and (min-width: 45em) and (max-width: 63.9375em)", + "lap-and-up" "screen and (min-width: 45em)", + "portable" "screen and (max-width: 63.9375em)", + "desk" "screen and (min-width: 64em)", + "retina" "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)" +) !default; diff --git a/scss/_settings.colors.scss b/scss/_settings.colors.scss new file mode 100644 index 0000000..548ae23 --- /dev/null +++ b/scss/_settings.colors.scss @@ -0,0 +1,117 @@ +// +// Settings: colors +// --- +// Set your colors +// +// Defaults by https://github.com/mrmrs/colors +// - Cool +// - Warm +// - Gray Scale +// - Semantic +// + +// Chopstick theme colors + +// THEME #1 + +$brand-primary-color : #DA2327; +$brand-secondary-color : #FEF5CC; +$brand-secondary-color--light: #FFFBE9; +$brand-main-text-color : #182223; +$brand-accent-color : #2B0709; + + +// THEME #2 + +// $brand-primary-color : #5A5E50; +// $brand-secondary-color : #CBFFE4; +// $brand-main-text-color : #182223; + + +// THEME #3 + +// $brand-primary-color : #DA2327; +// $brand-secondary-color : #182223; +// $brand-main-text-color : #182223; + +// ___________________________________ + +// Cool + +$aqua : #7FDBFF; +$blue : #0074D9; +$navy : #001F3F; +$teal : #39CCCC; +$green : #2ECC40; +$olive : #3D9970; +$lime : #01FF70; + +// Warm + +$yellow : #FFDC00; +$orange : #FF851B; +$red : #FF4136; +$fuchsia : #F012BE; +$purple : #B10DC9; +$maroon : #85144B; + +// Gray Scale + +$white : #fff; +$silver : #ddd; +$gray : #aaa; +$black : #111; + +// Semantic classes + +$alpha-neutral : $white; +$beta-neutral : $black; + +$alpha-text-color : $brand-main-text-color; +$alpha-text-color-light : mix($alpha-text-color, $alpha-neutral, 50%); +$alpha-text-color-dark : mix($alpha-text-color, $beta-neutral, 50%); + +$beta-text-color : $brand-main-text-color; +$beta-text-color-light : $brand-main-text-color; +$beta-text-color-dark : mix($beta-text-color, $beta-neutral, 50%); + +// Primary elements +$alpha-ui-color : $blue; +$alpha-ui-color-light : mix($alpha-ui-color, $alpha-neutral, 50%); +$alpha-ui-color-dark : mix($alpha-ui-color, $beta-neutral, 50%); + +// Secondary elements +$beta-ui-color : $gray; +$beta-ui-color-light : mix($beta-ui-color, $alpha-neutral, 50%); +$beta-ui-color-dark : mix($beta-ui-color, $beta-neutral, 50%); + +// Used for borders +$gamma-ui-color : $silver; +$gamma-ui-color-light : mix($gamma-ui-color, $alpha-neutral, 50%); +$gamma-ui-color-dark : mix($gamma-ui-color, $beta-neutral, 50%); + +// Used for backgrounds +$delta-ui-color : $white; +$delta-ui-color-light : mix($delta-ui-color, $alpha-neutral, 50%); +$delta-ui-color-dark : mix($delta-ui-color, $beta-neutral, 50%); + +$error-color : $red; +$success-color : $green; +$notice-color : $yellow; + +// Greyscale of alpha-ui-color + +$grey-00 : hsl(hue($alpha-ui-color),10,45); +$grey-01 : hsl(hue($alpha-ui-color),10,55); +$grey-02 : hsl(hue($alpha-ui-color),15,65); +$grey-03 : hsl(hue($alpha-ui-color),15,75); +$grey-04 : hsl(hue($alpha-ui-color),15,85); +$grey-05 : hsl(hue($alpha-ui-color),25,95); + +// Links + +$alpha-link-color : $brand-primary-color; +$alpha-link-colorhover : darken($alpha-link-color, 10); +$alpha-link-colorfocus : darken($alpha-link-color, 10); +$alpha-link-coloractive : lighten($alpha-link-color, 10); +$alpha-link-colorvisited : lighten($alpha-link-color, 5); diff --git a/scss/_settings.global.scss b/scss/_settings.global.scss new file mode 100644 index 0000000..d28169c --- /dev/null +++ b/scss/_settings.global.scss @@ -0,0 +1,8 @@ +// +// Settings: global +// --- +// Turn global settings on/off +// + + +$debug-mode: false; // toggles the debug mode diff --git a/scss/_settings.grid.scss b/scss/_settings.grid.scss new file mode 100644 index 0000000..5f8bad9 --- /dev/null +++ b/scss/_settings.grid.scss @@ -0,0 +1,15 @@ +// +// Settings: Grid system +// --- +// Set your amount of columns and gutter width +// + +$columns-gutter: 1 !default; // This number is based on the baseline + +$columns: ( + 2, + 3, + 4, + 5, + 6 +) !default; diff --git a/scss/_settings.ms.scss b/scss/_settings.ms.scss new file mode 100644 index 0000000..c947314 --- /dev/null +++ b/scss/_settings.ms.scss @@ -0,0 +1,30 @@ +// +// Settings: Modular scale +// --- +// Set your modular scale setting and define a fixed modular scale +// + +$ratio : 1.414; +$importantnumber : 44; +$leading : 1; +$base-size : $alpha-font-size/16*1em; + +// manual modular scale font sizes +// based on http://modularscale.com/scale/?px1=16&px2=18&ra1=1.333&ra2=0 + +$ms-3 : 11; +$ms-2 : 12; +$ms-1 : 14; +$ms1 : 18; +$ms2 : 27; +$ms3 : 41; +$ms4 : 61; +$ms5 : 91; +$ms6 : 137; +// $ms7 : 42; +// $ms8 : 50; +// $ms10 : 56; +// $ms11 : 67; +// $ms12 : 75; +// $ms13 : 89; +// $ms14 : 100; diff --git a/scss/_settings.typography.scss b/scss/_settings.typography.scss new file mode 100644 index 0000000..f7f641d --- /dev/null +++ b/scss/_settings.typography.scss @@ -0,0 +1,19 @@ +// +// Settings: Typography +// --- +// Set your baseline, font family, font size, etc. +// + +$show-baseline-grid : false; // toggle the visibility of the baseline (true/false) +$baseline-holder : c-holder; // set the classname of the element which will show the baseline +$grid-color : rgba(#000,.1); // set the baseline grid color and opacity + +$alpha-font-family : "Source Sans Pro", sans-serif; +$alpha-font-size : 18; // pixel-value +$alpha-font-weight : 400; +$alpha-line-height : 1.5; +$alpha-baseline-grid : 7; // pixel-value +$alpha-leading : 1.666; // multiplier + +$beta-font-family : "Source Code Pro", sans-serif; +$beta-font-weight : 900; diff --git a/scss/_settings.ui.scss b/scss/_settings.ui.scss new file mode 100644 index 0000000..330d55e --- /dev/null +++ b/scss/_settings.ui.scss @@ -0,0 +1,13 @@ +// +// Settings: UI +// --- +// Set your basic UI preferences like border-radius, border-width, etc. +// + +$radius : 5px; +$border-width : 1px; +$border-style : solid; +$depth : 0%; // Range: 0-100% +$contrast : 91%; // Range: 0-100% +$shadow : 21%; // Range: 0-100% +$highlight : 0%; // Range: 0-100% diff --git a/scss/_tools.buttons.scss b/scss/_tools.buttons.scss new file mode 100644 index 0000000..d7d4283 --- /dev/null +++ b/scss/_tools.buttons.scss @@ -0,0 +1,60 @@ +// +// Tools: Buttons +// --- +// Button specific mixins +// + +// Button display + +@mixin button-inlineblock { + display: inline-block; + width: auto; +} + +@mixin button-float($float:left) { + display: block; + float: $float; +} + +// Button color +// use: @mixin button-color(color1[,color2]); + +@mixin button-color($c1: $alpha-ui-color, $c2: lighten($c1, $depth)) { + + border: $border-width $border-style $c1; + + background-color: $c1; + @if $depth > 0 { + background-image: linear-gradient($c1, $c2); + } + + @if $highlight { + box-shadow: inset 0 1px 0 rgba(#FFF, $highlight/100%); + } + + @include text-color($c1); + + &:hover, + &:focus { + border: $border-width $border-style lighten($c1, 100-$contrast); + background-color: lighten($c1, 100-$contrast); + @if $depth > 0 { + background-image: linear-gradient(lighten($c1, 100-$contrast), lighten($c2, 100-$contrast)); + } + @include text-color(lighten($c1, 100-$contrast)); + } + + &:active { + background-color: lighten($c1, 100-$contrast); + @if $depth > 0 { + background-image: linear-gradient(lighten($c2, 100-$contrast), lighten($c1, 100-$contrast)); + } + + box-shadow: none; + @include text-color(lighten($c1, 100-$contrast)); + } + + &:visited { + @include text-color($c1); + } +} diff --git a/scss/_tools.functions.scss b/scss/_tools.functions.scss new file mode 100644 index 0000000..3ae8718 --- /dev/null +++ b/scss/_tools.functions.scss @@ -0,0 +1,47 @@ +// +// Tools: Functions +// --- +// Global functions +// + +// Em calculator: convert pixel values to ems +// eg. for a relational value of 12px write em(12) when the parent is the $alpha-font-size +// if the parent is another value say 24px write em(12, 24) + +@function em($pxval, $base: $alpha-font-size) { + @return ($pxval / $base) * 1em; +} + +// Strip units +@function su($value) { + @return $value / ($value * 0 + 1); +} + +// Modular scale +// use ms($value, $increment, $ratio) +// Example: +// div { +// // Increment Up GR with positive value +// font-size: ms(14px, 1, 1.618); // returns: 22.652px +// +// // Increment Down GR with negative value +// font-size: ms(14px, -1, 1.618); // returns: 8.653px +// } +// + +@function ms($increment, $value: $alpha-font-size, $ratio: $ratio) { + @if $increment > 0 { + @for $i from 1 through $increment { + $value: ($value * $ratio); + } + } + + @if $increment < 0 { + $increment: abs($increment); + @for $i from 1 through $increment { + $value: ($value / $ratio); + } + } + + @return $value; +} diff --git a/scss/_tools.grid.scss b/scss/_tools.grid.scss new file mode 100644 index 0000000..7c5c1b6 --- /dev/null +++ b/scss/_tools.grid.scss @@ -0,0 +1,51 @@ +// +// Tools: Grid +// --- +// Mixins to build a grid system +// + +// A mixin to spit out our width classes. Pass in the columns we want the widths +// to have, and an optional suffix for responsive widths. E.g. to create thirds +// and quarters for a small breakpoint: + +// @include widths(3 4, -$bp); + +@mixin widths($columns, $breakpoint: null) { + + // Loop through the number of columns for each denominator of our fractions. + @each $denominator in $columns { + + // Begin creating a numberator for our fraction up until we hit the + // denominator. + @for $numerator from 1 through $denominator { + + // Build a class in the format `.u-3/4` + .u-#{$numerator}-of-#{$denominator}#{$breakpoint} { + width: ($numerator / $denominator) * 100% !important; + } + } + } +} + +// A mixin to spit out our push classes. Pass in the columns we want the push +// to have, and an optional suffix for responsive push. E.g. to create thirds +// and quarters for a small breakpoint: + +// @include push(3 4, -$bp); + +@mixin push($columns, $breakpoint: null) { + + // Loop through the number of columns for each denominator of our fractions. + @each $denominator in $columns { + + // Begin creating a numberator for our fraction up until we hit the + // denominator. + @for $numerator from 1 through $denominator { + + // Build a class in the format `.u-3/4` + .u-push-#{$numerator}-of-#{$denominator}#{$breakpoint} { + margin-left: ($numerator / $denominator) * 100% !important; + } + } + } +} diff --git a/scss/_tools.inputs.scss b/scss/_tools.inputs.scss new file mode 100644 index 0000000..a3f4fc5 --- /dev/null +++ b/scss/_tools.inputs.scss @@ -0,0 +1,40 @@ +// +// Tools: Inputs +// --- +// Input specific mixins +// + +@mixin baseline-dimensions-form($msi: 0, $pt: 0, $pb: 0, $l: $alpha-leading) { + + @include baseline-dimensions($msi, $pt, $pb, $l); + + @if $msi == 0 { + $line-height: ((ceil($alpha-font-size/$alpha-baseline-grid)*$alpha-baseline-grid)+($alpha-baseline-grid*$l))/$alpha-font-size; + $padding-top: $alpha-baseline-grid/$alpha-font-size*$pt*1em; + $padding-bottom: $alpha-baseline-grid/$alpha-font-size*$pb*1em; + height: $line-height + $padding-top + $padding-bottom; + } + + @if $msi != 0 { + $line-height: ((ceil(ms($msi)/$alpha-baseline-grid)*$alpha-baseline-grid)+($alpha-baseline-grid*$l))/(ms($msi)); + $padding-top: $alpha-baseline-grid*$pt/ms($msi)*1em; + $padding-bottom: $alpha-baseline-grid*$pb/ms($msi)*1em; + height: $line-height + $padding-top + $padding-bottom; + } + +} + +@mixin input-lg { + @include px-padding-lr(1,1); + @include input-dimensions($ms-1,1,0,1,1); +} + +@mixin input-md { + @include px-padding-lr(.75,.75); + @include input-dimensions($ms-1,1,0,.75,.75); +} + +@mixin input-sm { + @include px-padding-lr(.5,.5); + @include input-dimensions($ms-2,1,0,.5,.5); +} diff --git a/scss/_tools.mixins.scss b/scss/_tools.mixins.scss new file mode 100644 index 0000000..0265fa5 --- /dev/null +++ b/scss/_tools.mixins.scss @@ -0,0 +1,166 @@ +// +// Tools: Mixins +// --- +// Global mixins +// + +// Horizontal responsive navigation. +// @include list-nav on