From 9f166eef694ff410676762645578e15363d1138e Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 10 Jul 2013 14:52:14 -0400 Subject: [PATCH 001/195] Update version number --- CHANGELOG.md | 5 +++++ README.md | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2025d40..cea39b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 1.4.0 +**July 10, 2013** + +- Add new **Helpers - Extends** file + ## 1.3.1 **July 4, 2013** diff --git a/README.md b/README.md index 2af647c..768fafb 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # MVCSS Library -**Version 1.3.1** +**Version 1.4.0** ## Modules/Helpers From 65de994e189638f06196d0660f5671082337ee06 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 16 Jul 2013 06:12:18 -0400 Subject: [PATCH 002/195] Reorganize bucket module --- modules/_bucket.sass | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/modules/_bucket.sass b/modules/_bucket.sass index 60077c8..6002ba3 100644 --- a/modules/_bucket.sass +++ b/modules/_bucket.sass @@ -23,12 +23,6 @@ $bucket-media-margin: 15px !default // Modifiers // ------------------------------------- -// ----- Shared ----- // - -.bucket--bottom, -.bucket--middle - display: table - // ----- Bottom ----- // .bucket--bottom .bucket-content @@ -39,18 +33,24 @@ $bucket-media-margin: 15px !default .bucket--middle .bucket-content vertical-align: middle +// ----- Shared ----- // + +.bucket--bottom, +.bucket--middle + display: table + // ------------------------------------- // Submodules // ------------------------------------- -// ----- Media ----- // - -.bucket-media - float: left - margin-right: $bucket-media-margin - // ----- Content ----- // .bucket-content display: table-cell max-width: 10000px + +// ----- Media ----- // + +.bucket-media + float: left + margin-right: $bucket-media-margin From 92a69ad1e63379ee741403c0963188e01c6531d2 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 16 Jul 2013 06:16:13 -0400 Subject: [PATCH 003/195] Add minified JS version of Hash URLs component --- components/hash_urls.min.js | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 components/hash_urls.min.js diff --git a/components/hash_urls.min.js b/components/hash_urls.min.js new file mode 100644 index 0000000..bea17ba --- /dev/null +++ b/components/hash_urls.min.js @@ -0,0 +1,2 @@ +// Generated by CoffeeScript 1.6.3 +(function(){this.HashURLs=function(){function e(e){this.options=e;this.setup(this.options)}e.prototype.setup=function(e){var t=this;this.options=e;this.getOrSetHash();this.showContent();return this.options.list.on("click",function(e){var n,r;e.preventDefault();n=$(e.currentTarget);r=n.attr("href");window.location.hash=r;t.options.list.removeClass("is-active");t.options.content.removeClass("is-active");n.addClass("is-active");return $(r).addClass("is-active")})};e.prototype.getOrSetHash=function(){return window.location.hash?this.hash=window.location.hash:this.hash=this.options.list.first().attr("href")};e.prototype.showContent=function(){this.options.content.not(this.hash).removeClass("is-active");return $("[data-hash="+this.hash+"], "+this.hash).addClass("is-active")};return e}()}).call(this); \ No newline at end of file From 038e602304e54840f2f162f91b2a78a32e66ac8d Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 16 Jul 2013 06:18:07 -0400 Subject: [PATCH 004/195] Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 768fafb..0f6a999 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Choose the Sass extends, functions, mixins, and general helpers from `/helpers` ## Components -Choose the JS components you want from `/components` to include in your [MVCSS](http://mvcss.github.io/) project. +Choose the JS components you want from `/components` to include in your [MVCSS](http://mvcss.github.io/) project. There are CoffeeScript files (`.coffee`) and minified JS files for each component. ## Documentation From bc316efb2646eac85372b3f736baf00b0895dd7e Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 17 Jul 2013 08:13:37 -0400 Subject: [PATCH 005/195] Change bucket content 'max-width' to 'width' --- modules/_bucket.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/_bucket.sass b/modules/_bucket.sass index 6002ba3..89abd32 100644 --- a/modules/_bucket.sass +++ b/modules/_bucket.sass @@ -47,7 +47,7 @@ $bucket-media-margin: 15px !default .bucket-content display: table-cell - max-width: 10000px + width: 10000px // ----- Media ----- // From 6a216203a02596156c96f98079104373d790d5cf Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 30 Jul 2013 12:21:26 -0400 Subject: [PATCH 006/195] Fix security vulnerability in the hash URLs component Sanitizes the window.location.hash before use --- components/hash_urls.coffee | 6 +++++- components/hash_urls.min.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/components/hash_urls.coffee b/components/hash_urls.coffee index a5eff62..9939ba8 100644 --- a/components/hash_urls.coffee +++ b/components/hash_urls.coffee @@ -20,10 +20,14 @@ class @HashURLs getOrSetHash: -> if window.location.hash - @hash = window.location.hash + @hash = @sanitizeHash(window.location.hash) else @hash = @options.list.first().attr('href') + sanitizeHash: (str) -> + str.replace(/(<([^>]+)>)/ig,"") + showContent: -> @options.content.not(@hash).removeClass('is-active') $("[data-hash=#{@hash}], #{@hash}").addClass('is-active') + diff --git a/components/hash_urls.min.js b/components/hash_urls.min.js index bea17ba..038d4ea 100644 --- a/components/hash_urls.min.js +++ b/components/hash_urls.min.js @@ -1,2 +1,2 @@ // Generated by CoffeeScript 1.6.3 -(function(){this.HashURLs=function(){function e(e){this.options=e;this.setup(this.options)}e.prototype.setup=function(e){var t=this;this.options=e;this.getOrSetHash();this.showContent();return this.options.list.on("click",function(e){var n,r;e.preventDefault();n=$(e.currentTarget);r=n.attr("href");window.location.hash=r;t.options.list.removeClass("is-active");t.options.content.removeClass("is-active");n.addClass("is-active");return $(r).addClass("is-active")})};e.prototype.getOrSetHash=function(){return window.location.hash?this.hash=window.location.hash:this.hash=this.options.list.first().attr("href")};e.prototype.showContent=function(){this.options.content.not(this.hash).removeClass("is-active");return $("[data-hash="+this.hash+"], "+this.hash).addClass("is-active")};return e}()}).call(this); \ No newline at end of file +(function(){this.HashURLs=function(){function e(e){this.options=e;this.setup(this.options)}e.prototype.setup=function(e){var t=this;this.options=e;this.getOrSetHash();this.showContent();return this.options.list.on("click",function(e){var n,r;e.preventDefault();n=$(e.currentTarget);r=n.attr("href");window.location.hash=r;t.options.list.removeClass("is-active");t.options.content.removeClass("is-active");n.addClass("is-active");return $(r).addClass("is-active")})};e.prototype.getOrSetHash=function(){return window.location.hash?this.hash=this.sanitizeHash(window.location.hash):this.hash=this.options.list.first().attr("href")};e.prototype.sanitizeHash=function(e){return e.replace(/(<([^>]+)>)/ig,"")};e.prototype.showContent=function(){this.options.content.not(this.hash).removeClass("is-active");return $("[data-hash="+this.hash+"], "+this.hash).addClass("is-active")};return e}()}).call(this); \ No newline at end of file From 3445d3d05f15bee8ec81078423a51ed248c0c00e Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 30 Jul 2013 12:23:39 -0400 Subject: [PATCH 007/195] Update changelog and readme --- CHANGELOG.md | 5 +++++ README.md | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cea39b9..cfa91f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 1.4.1 +**July 30, 2013** + +- Fix security vulnerability in hash URLs component by sanitizing `window.location.hash` + ## 1.4.0 **July 10, 2013** diff --git a/README.md b/README.md index 0f6a999..064ed19 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # MVCSS Library -**Version 1.4.0** +**Version 1.4.1** ## Modules/Helpers From a18d9e0c75c3f3920ca8b2af4a772b088fe6f566 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Nov 2013 06:57:53 -0500 Subject: [PATCH 008/195] New setup - Removes JS components - Removes "modules" now included in MVCSS - Renames Modules to Structures --- README.md | 10 +- components/hash_urls.coffee | 33 ----- components/hash_urls.min.js | 2 - docs/hash_urls.md | 41 ------ modules/_bucket.sass | 56 -------- modules/_flag.sass | 72 ----------- modules/_grid.sass | 187 --------------------------- {modules => structures}/_button.sass | 0 {modules => structures}/_form.sass | 0 {modules => structures}/_list.sass | 0 {modules => structures}/_tab.sass | 0 {modules => structures}/_table.sass | 0 12 files changed, 3 insertions(+), 398 deletions(-) delete mode 100644 components/hash_urls.coffee delete mode 100644 components/hash_urls.min.js delete mode 100644 docs/hash_urls.md delete mode 100644 modules/_bucket.sass delete mode 100644 modules/_flag.sass delete mode 100644 modules/_grid.sass rename {modules => structures}/_button.sass (100%) rename {modules => structures}/_form.sass (100%) rename {modules => structures}/_list.sass (100%) rename {modules => structures}/_tab.sass (100%) rename {modules => structures}/_table.sass (100%) diff --git a/README.md b/README.md index 064ed19..9374972 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,13 @@ # MVCSS Library -**Version 1.4.1** +**Version 2.0.0** -## Modules/Helpers +## Structures/Helpers -Choose the Sass modules you want from `/modules` to include in your [MVCSS](http://mvcss.github.io/) project. +Choose the Sass modules you want from `/structures` to include in your [MVCSS](http://mvcss.github.io/) project. Choose the Sass extends, functions, mixins, and general helpers from `/helpers` to include in your [MVCSS](http://mvcss.github.io/) project. -## Components - -Choose the JS components you want from `/components` to include in your [MVCSS](http://mvcss.github.io/) project. There are CoffeeScript files (`.coffee`) and minified JS files for each component. - ## Documentation The documentation, for anything that requires more full documentation than the source file, is included in `/docs`. diff --git a/components/hash_urls.coffee b/components/hash_urls.coffee deleted file mode 100644 index 9939ba8..0000000 --- a/components/hash_urls.coffee +++ /dev/null @@ -1,33 +0,0 @@ -class @HashURLs - constructor: (@options) -> - @setup(@options) - - setup: (@options) -> - @getOrSetHash() - @showContent() - - @options.list.on 'click', (e) => - e.preventDefault() - elem = $(e.currentTarget) - hash = elem.attr('href') - window.location.hash = hash - - @options.list.removeClass('is-active') - @options.content.removeClass('is-active') - - elem.addClass('is-active') - $(hash).addClass('is-active') - - getOrSetHash: -> - if window.location.hash - @hash = @sanitizeHash(window.location.hash) - else - @hash = @options.list.first().attr('href') - - sanitizeHash: (str) -> - str.replace(/(<([^>]+)>)/ig,"") - - showContent: -> - @options.content.not(@hash).removeClass('is-active') - $("[data-hash=#{@hash}], #{@hash}").addClass('is-active') - diff --git a/components/hash_urls.min.js b/components/hash_urls.min.js deleted file mode 100644 index 038d4ea..0000000 --- a/components/hash_urls.min.js +++ /dev/null @@ -1,2 +0,0 @@ -// Generated by CoffeeScript 1.6.3 -(function(){this.HashURLs=function(){function e(e){this.options=e;this.setup(this.options)}e.prototype.setup=function(e){var t=this;this.options=e;this.getOrSetHash();this.showContent();return this.options.list.on("click",function(e){var n,r;e.preventDefault();n=$(e.currentTarget);r=n.attr("href");window.location.hash=r;t.options.list.removeClass("is-active");t.options.content.removeClass("is-active");n.addClass("is-active");return $(r).addClass("is-active")})};e.prototype.getOrSetHash=function(){return window.location.hash?this.hash=this.sanitizeHash(window.location.hash):this.hash=this.options.list.first().attr("href")};e.prototype.sanitizeHash=function(e){return e.replace(/(<([^>]+)>)/ig,"")};e.prototype.showContent=function(){this.options.content.not(this.hash).removeClass("is-active");return $("[data-hash="+this.hash+"], "+this.hash).addClass("is-active")};return e}()}).call(this); \ No newline at end of file diff --git a/docs/hash_urls.md b/docs/hash_urls.md deleted file mode 100644 index 5cb1189..0000000 --- a/docs/hash_urls.md +++ /dev/null @@ -1,41 +0,0 @@ -# Component - Hash URLs - -## Markup - -**Haml** - -```haml -%ul.sectionList - %li - %a(href="#example-01" data-hash="#example-01") Example 1 - %li - %a(href="#example-02" data-hash="#example-02") Example 2 - -.contentSection#example-01 - %h2 Example 01 -.contentSection#example-02 - %h2 Example 02 -``` - -## Styles - -**Sass** - -```sass -.contentSection - display: none - &.is-active - display: block -``` - -## How to call - -```javascript -$(function() { - options = { - list: $('.sectionList a'), - content: $('.contentSection') - }; - new HashURLs(options); -}); -``` diff --git a/modules/_bucket.sass b/modules/_bucket.sass deleted file mode 100644 index 89abd32..0000000 --- a/modules/_bucket.sass +++ /dev/null @@ -1,56 +0,0 @@ -// ************************************* -// -// Bucket -// -> Based on: -// * http://jsfiddle.net/necolas/rZvEF/ -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$bucket-media-margin: 15px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.bucket - @extend %group // Uses MVCSS clearfix - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -// ----- Bottom ----- // - -.bucket--bottom .bucket-content - vertical-align: bottom - -// ----- Middle ----- // - -.bucket--middle .bucket-content - vertical-align: middle - -// ----- Shared ----- // - -.bucket--bottom, -.bucket--middle - display: table - -// ------------------------------------- -// Submodules -// ------------------------------------- - -// ----- Content ----- // - -.bucket-content - display: table-cell - width: 10000px - -// ----- Media ----- // - -.bucket-media - float: left - margin-right: $bucket-media-margin diff --git a/modules/_flag.sass b/modules/_flag.sass deleted file mode 100644 index 997420a..0000000 --- a/modules/_flag.sass +++ /dev/null @@ -1,72 +0,0 @@ -// ************************************* -// -// Flag -// -> Based on the following: -// * http://csswizardry.com/2013/05/the-flag-object/ -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$flag-img-padding: 20px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.flag - display: table - width: 100% - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -// ----- Shared ----- // - -.flag--top - .flag-media, - .flag-body - vertical-align: top - -// ----- Bottom ----- // - -.flag--bottom - .flag-media, - .flag-body - vertical-align: bottom - -// ----- Reverse ----- // - -.flag--rev - .flag-media - padding-left: $flag-img-padding - padding-right: 0 - -// ------------------------------------- -// Submodules -// ------------------------------------- - -// ----- Shared ----- // - -.flag-media, -.flag-body - display: table-cell - vertical-align: middle - -// ----- Body ----- // - -.flag-body - width: 100% - -// ----- Media ----- // - -.flag-media - padding-right: $flag-img-padding - -// Object - -.flag-media-obj - display: block diff --git a/modules/_grid.sass b/modules/_grid.sass deleted file mode 100644 index 541bf67..0000000 --- a/modules/_grid.sass +++ /dev/null @@ -1,187 +0,0 @@ -// ************************************* -// -// Grid -// -> Based on the following: -// * https://github.com/necolas/suit-grid -// * https://github.com/csswizardry/csswizardry-grids -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$grid-columns: 12 !default -$grid-defaults: "lap" 480px, "desk" 800px !default -$grid-gutter: 20px !default -$grid-silent: false !default - -// ------------------------------------- -// Selector Type -// ------------------------------------- - -$grid-selector: if($grid-silent, unquote("%"), unquote(".")) - -// ------------------------------------- -// Base -// ------------------------------------- - -#{$grid-selector}grid - @extend %group // Uses MVCSS clearfix - display: block - margin-left: -$grid-gutter / 2 - margin-right: -$grid-gutter / 2 - -#{$grid-selector}grid-box - -moz-box-sizing: border-box - box-sizing: border-box - float: left - margin: 0 - padding-left: $grid-gutter / 2 - padding-right: $grid-gutter / 2 - width: 100% - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -#{$grid-selector}grid-box--center - display: block - float: none - margin: 0 auto - -// ------------------------------------- -// Setup -// ------------------------------------- - -=device-type($namespace: '') - - // ----- One Part ----- // - - #{$grid-selector}grid-box--#{$namespace}1of1 - width: 100% - - // ----- Two Parts ----- // - - #{$grid-selector}grid-box--#{$namespace}1of2 - width: 50% - - // ----- Three Parts ----- // - - @if $grid-columns >= 3 - #{$grid-selector}grid-box--#{$namespace}1of3 - width: 33.333% - #{$grid-selector}grid-box--#{$namespace}2of3 - width: 66.666% - - // ----- Four Parts ----- // - - @if $grid-columns >= 4 - #{$grid-selector}grid-box--#{$namespace}1of4 - width: 25% - #{$grid-selector}grid-box--#{$namespace}2of4 - @extend #{$grid-selector}grid-box--#{$namespace}1of2 - #{$grid-selector}grid-box--#{$namespace}3of4 - width: 75% - - // ----- Five Parts ----- // - - @if $grid-columns >= 5 - #{$grid-selector}grid-box--#{$namespace}1of5 - width: 20% - #{$grid-selector}grid-box--#{$namespace}2of5 - width: 40% - #{$grid-selector}grid-box--#{$namespace}3of5 - width: 60% - #{$grid-selector}grid-box--#{$namespace}4of5 - width: 80% - - // ----- Six Parts ----- // - - @if $grid-columns >= 6 - #{$grid-selector}grid-box--#{$namespace}1of6 - width: 16.666% - #{$grid-selector}grid-box--#{$namespace}2of6 - @extend #{$grid-selector}grid-box--#{$namespace}1of3 - #{$grid-selector}grid-box--#{$namespace}3of6 - @extend #{$grid-selector}grid-box--#{$namespace}1of2 - #{$grid-selector}grid-box--#{$namespace}4of6 - @extend #{$grid-selector}grid-box--#{$namespace}2of3 - #{$grid-selector}grid-box--#{$namespace}5of6 - width: 83.333% - - // ----- Eight Parts ----- // - - @if $grid-columns >= 8 - #{$grid-selector}grid-box--#{$namespace}1of8 - width: 12.5% - #{$grid-selector}grid-box--#{$namespace}2of8 - @extend #{$grid-selector}grid-box--#{$namespace}1of4 - #{$grid-selector}grid-box--#{$namespace}3of8 - width: 37.5% - #{$grid-selector}grid-box--#{$namespace}4of8 - @extend #{$grid-selector}grid-box--#{$namespace}1of2 - #{$grid-selector}grid-box--#{$namespace}5of8 - width: 62.5% - #{$grid-selector}grid-box--#{$namespace}6of8 - @extend #{$grid-selector}grid-box--#{$namespace}3of4 - #{$grid-selector}grid-box--#{$namespace}7of8 - width: 87.5% - - // ----- Ten Parts ----- // - - @if $grid-columns >= 10 - #{$grid-selector}grid-box--#{$namespace}1of10 - width: 10% - #{$grid-selector}grid-box--#{$namespace}2of10 - @extend #{$grid-selector}grid-box--#{$namespace}1of5 - #{$grid-selector}grid-box--#{$namespace}3of10 - width: 30% - #{$grid-selector}grid-box--#{$namespace}4of10 - @extend #{$grid-selector}grid-box--#{$namespace}2of5 - #{$grid-selector}grid-box--#{$namespace}5of10 - @extend #{$grid-selector}grid-box--#{$namespace}1of2 - #{$grid-selector}grid-box--#{$namespace}6of10 - @extend #{$grid-selector}grid-box--#{$namespace}3of5 - #{$grid-selector}grid-box--#{$namespace}7of10 - width: 70% - #{$grid-selector}grid-box--#{$namespace}8of10 - @extend #{$grid-selector}grid-box--#{$namespace}4of5 - #{$grid-selector}grid-box--#{$namespace}9of10 - width: 90% - - // ----- Twelve Parts ----- // - - @if $grid-columns >= 12 - #{$grid-selector}grid-box--#{$namespace}1of12 - width: 8.333% - #{$grid-selector}grid-box--#{$namespace}2of12 - @extend #{$grid-selector}grid-box--#{$namespace}1of6 - #{$grid-selector}grid-box--#{$namespace}3of12 - @extend #{$grid-selector}grid-box--#{$namespace}1of4 - #{$grid-selector}grid-box--#{$namespace}4of12 - @extend #{$grid-selector}grid-box--#{$namespace}1of3 - #{$grid-selector}grid-box--#{$namespace}5of12 - width: 41.666% - #{$grid-selector}grid-box--#{$namespace}6of12 - @extend #{$grid-selector}grid-box--#{$namespace}1of2 - #{$grid-selector}grid-box--#{$namespace}7of12 - width: 58.333% - #{$grid-selector}grid-box--#{$namespace}8of12 - @extend #{$grid-selector}grid-box--#{$namespace}2of3 - #{$grid-selector}grid-box--#{$namespace}9of12 - @extend #{$grid-selector}grid-box--#{$namespace}3of4 - #{$grid-selector}grid-box--#{$namespace}10of12 - @extend #{$grid-selector}grid-box--#{$namespace}5of6 - #{$grid-selector}grid-box--#{$namespace}11of12 - width: 91.666% - -// ------------------------------------- -// Creation -// ------------------------------------- - -+device-type() - -@each $device in $grid-defaults - @media screen and (min-width: nth($device, 2)) - +device-type("#{nth($device, 1)}--") diff --git a/modules/_button.sass b/structures/_button.sass similarity index 100% rename from modules/_button.sass rename to structures/_button.sass diff --git a/modules/_form.sass b/structures/_form.sass similarity index 100% rename from modules/_form.sass rename to structures/_form.sass diff --git a/modules/_list.sass b/structures/_list.sass similarity index 100% rename from modules/_list.sass rename to structures/_list.sass diff --git a/modules/_tab.sass b/structures/_tab.sass similarity index 100% rename from modules/_tab.sass rename to structures/_tab.sass diff --git a/modules/_table.sass b/structures/_table.sass similarity index 100% rename from modules/_table.sass rename to structures/_table.sass From 27540057ab958c41877b7821def327473b1c5346 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Nov 2013 07:02:53 -0500 Subject: [PATCH 009/195] Remove the docs --- docs/grid.md | 49 ------------------------------------------------- 1 file changed, 49 deletions(-) delete mode 100644 docs/grid.md diff --git a/docs/grid.md b/docs/grid.md deleted file mode 100644 index b99822c..0000000 --- a/docs/grid.md +++ /dev/null @@ -1,49 +0,0 @@ -# Modules - Grid - -## Basic Grid - -**Haml** - -```haml -.grid - .grid-box.grid-box--1of1 - %p 1/1 - -.grid - .grid-box.grid-box--1of2 - %p 1/2 - .grid-box.grid-box--1of2 - %p 1/2 -``` - -### Silent Classes - -If you don't want to explicitly call any of the `.grid` classes in your HTML, you can set the `$grid-silent` variable to true to use Sass placeholder selectors, like so: - -**Sass** - -```sass -.main - @extend %grid - .content, - .sidebar - @extend %grid-box - .content - @extend %grid-box--2of3 - .sidebar - @extend %grid-box--1of3 -``` - -## Responsive Grid - -In order to set up breakpoints for the grid, you'll need to set the `$grid-defaults` variable for your specified breakpoints. Then, either in your HTML or through `@extends` (when using `$grid-silent`), you'll do something like this: - -**Haml** - -```haml -.grid - .grid-box.grid-box--desk--1of2.grid-box--lap--1of1 - %p 1/2 - .grid-box.grid-box--desk--1of2.grid-box--lap--1of1 - %p 1/2 -``` From 6edb0bd05ba7cb64fc14eb2f781193f41b434db5 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Nov 2013 07:04:06 -0500 Subject: [PATCH 010/195] Add mod-padding mixin --- helpers/_mixins.sass | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/helpers/_mixins.sass b/helpers/_mixins.sass index 8dfddee..3007224 100644 --- a/helpers/_mixins.sass +++ b/helpers/_mixins.sass @@ -25,6 +25,25 @@ #{$side}: -$size #{$opposite}: auto +// ------------------------------------- +// Module Padding +// ------------------------------------- + +=mod-padding($padding) + padding: 0 $padding + + &::before, + &::after + content: '' + display: block + height: 1px + + &::before + margin-bottom: $padding - 1 + + &::after + margin-top: $padding - 1 + // ------------------------------------- // Retina-image // ------------------------------------- From f7f7e1307d380962ff83811a6933042d1eba430d Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Nov 2013 07:04:27 -0500 Subject: [PATCH 011/195] Add stretch extend --- helpers/_extends.sass | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/helpers/_extends.sass b/helpers/_extends.sass index be7c5f9..6e44a31 100644 --- a/helpers/_extends.sass +++ b/helpers/_extends.sass @@ -23,3 +23,15 @@ opacity: 1 overflow: visible visibility: visible + +// ------------------------------------- +// Stretch +// ------------------------------------- + +%stretch + bottom: 0 + left: 0 + position: absolute + right: 0 + top: 0 + From d086f9afb1ba20035f49763d6a7a31e8ac9e32c8 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Nov 2013 07:06:00 -0500 Subject: [PATCH 012/195] Remove sprite icons helper --- helpers/_sprite_icons.sass | 37 ------------------------------------- 1 file changed, 37 deletions(-) delete mode 100644 helpers/_sprite_icons.sass diff --git a/helpers/_sprite_icons.sass b/helpers/_sprite_icons.sass deleted file mode 100644 index 90d2c9b..0000000 --- a/helpers/_sprite_icons.sass +++ /dev/null @@ -1,37 +0,0 @@ -// ************************************* -// -// Sprite Icons -// -// ************************************* - -@import compass - -// ------------------------------------- -// Variables -// ------------------------------------- - -$icons: sprite-map("icons/*.png") -$icons-hd: sprite-map("icons-hd/*.png") - -// ------------------------------------- -// Base -// ------------------------------------- - -i - background: $icons - display: inline-block - @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) - background: $icons-hd - +background-size(image-width(sprite-path($icons)) auto) - -// ------------------------------------- -// Setup -// ------------------------------------- - -@each $icon in sprite_names($icons) - .icn-#{$icon} - +sprite-dimensions($icons, $icon) - background-position: sprite-position($icons, $icon) - @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) - $offset: nth(sprite-position($icons-hd, $icon), 2) / 2 - background-position: 0 $offset From 014403ee3acbcded65084eb415acefd9ea710359 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Nov 2013 07:07:31 -0500 Subject: [PATCH 013/195] Update CHANGELOG --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cfa91f2..88628c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 2.0.0 + +- Remove JS components +- Remove the docs +- Add additional helpers +- Rename **Modules** to **Structures** + ## 1.4.1 **July 30, 2013** From b095f17e836d756fa3e71b782553b833bd075d25 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Nov 2013 07:09:15 -0500 Subject: [PATCH 014/195] Rename helpers to foundation --- {helpers => foundation}/_extends.sass | 0 {helpers => foundation}/_mixins.sass | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename {helpers => foundation}/_extends.sass (100%) rename {helpers => foundation}/_mixins.sass (100%) diff --git a/helpers/_extends.sass b/foundation/_extends.sass similarity index 100% rename from helpers/_extends.sass rename to foundation/_extends.sass diff --git a/helpers/_mixins.sass b/foundation/_mixins.sass similarity index 100% rename from helpers/_mixins.sass rename to foundation/_mixins.sass From 70591a6085e9d4ea722aea1e2ff1b1bb2ffee051 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Nov 2013 07:09:35 -0500 Subject: [PATCH 015/195] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 88628c1..7865a11 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Remove JS components - Remove the docs - Add additional helpers +- Rename **Helpers** to **Foundation** - Rename **Modules** to **Structures** ## 1.4.1 From d49ff5a0f78cd29a2810cd3bb5b7230a5df79fa7 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Nov 2013 07:10:37 -0500 Subject: [PATCH 016/195] Update README --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 9374972..c0295e5 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,13 @@ **Version 2.0.0** -## Structures/Helpers +## Foundation -Choose the Sass modules you want from `/structures` to include in your [MVCSS](http://mvcss.github.io/) project. +Choose the Sass extends, functions, mixins, and general helpers from `/foundation` to include in your [MVCSS](http://mvcss.github.io/) project. + +## Structures -Choose the Sass extends, functions, mixins, and general helpers from `/helpers` to include in your [MVCSS](http://mvcss.github.io/) project. +Choose the Sass modules you want from `/structures` to include in your [MVCSS](http://mvcss.github.io/) project. ## Documentation From 41ae235a705913dc57c12e3437c4b3c6bb35647c Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Nov 2013 15:09:40 -0500 Subject: [PATCH 017/195] Remove structures --- README.md | 4 -- structures/_button.sass | 85 -------------------------------- structures/_form.sass | 106 ---------------------------------------- structures/_list.sass | 94 ----------------------------------- structures/_tab.sass | 59 ---------------------- structures/_table.sass | 49 ------------------- 6 files changed, 397 deletions(-) delete mode 100644 structures/_button.sass delete mode 100644 structures/_form.sass delete mode 100644 structures/_list.sass delete mode 100644 structures/_tab.sass delete mode 100644 structures/_table.sass diff --git a/README.md b/README.md index c0295e5..268bb20 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,6 @@ Choose the Sass extends, functions, mixins, and general helpers from `/foundation` to include in your [MVCSS](http://mvcss.github.io/) project. -## Structures - -Choose the Sass modules you want from `/structures` to include in your [MVCSS](http://mvcss.github.io/) project. - ## Documentation The documentation, for anything that requires more full documentation than the source file, is included in `/docs`. diff --git a/structures/_button.sass b/structures/_button.sass deleted file mode 100644 index dbd2a9f..0000000 --- a/structures/_button.sass +++ /dev/null @@ -1,85 +0,0 @@ -// ************************************* -// -// Button -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$btn-background: #4e4e5b !default -$btn-borderRadius: 2px !default -$btn--error-background: red !default -$btn-fontSize: 16px !default -$btn-whitespace: 20px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -%btn, .btn - border-radius: $btn-borderRadius - border: 0 - cursor: pointer - display: inline-block - font-size: $btn-fontSize - padding: ($btn-whitespace / 2) ($btn-whitespace + 10) - text-align: center - text-decoration: none - &:focus, - &:hover - text-decoration: none - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -// ----- A ----- // - -.btn--a - @extend %btn - background: $btn-background - color: #fff - &:focus, - &:hover - background: lighten($btn-background, 10%) - -// ----- B ----- // - -.btn--b - @extend %btn - background: lighten($btn-background, 30%) - color: $btn-background - &:focus, - &:hover - background: lighten($btn-background, 40%) - -// ----- Block ----- // - -.btn--block - -moz-box-sizing: border-box - box-sizing: border-box - display: block - width: 100% - -// ----- Large ----- // - -.btn--large - font-size: 150% - padding-left: 100px - padding-right: 100px - -// ----- Mini ----- // - -.btn--mini - font-size: 70% - letter-spacing: 1px - text-transform: uppercase - -// ----- Small ----- // - -.btn--small - font-size: 90% - letter-spacing: 1px - text-transform: uppercase diff --git a/structures/_form.sass b/structures/_form.sass deleted file mode 100644 index b4f7812..0000000 --- a/structures/_form.sass +++ /dev/null @@ -1,106 +0,0 @@ -// ************************************* -// -// Form -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$form-border: 1px solid #ccc !default -$form-borderRadius: 2px !default -$form-color: #444 !default -$form-error-color: red !default -$form-fontFamily: sans-serif !default -$form-fontSize: 16px !default -$form-highlight-color: #4e4e5b !default -$form-input-background: #fff !default -$form-whitespace: 10px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.form - margin: 0 0 $form-whitespace - ul - margin: 0 - padding: 0 - ul li - list-style-type: none - padding-bottom: ($form-whitespace / 2) - &:last-child - padding-bottom: 0 - -// ------------------------------------- -// Submodules -// ------------------------------------- - -// ----- Field ----- // - -.form-field - border: 0 - margin: 0 0 ($form-whitespace * 2) - padding: 0 - -// Modifiers - -.form-field--submit - margin-top: ($form-whitespace * 4) - -// ----- Header ----- // - -.form-header - margin-bottom: $form-whitespace - -// ----- Input ----- // - -.form-input - background: $form-input-background - border: $form-border - border-radius: $form-borderRadius - -moz-box-sizing: border-box - box-sizing: border-box - font-family: $form-fontFamily - font-size: $form-fontSize - padding: $form-whitespace - width: 100% - &:focus - border-color: $form-highlight-color - outline: none - -// Modifiers - -.form-input--check, -.form-input--radio - margin-right: $form-whitespace - -// ----- Label ----- // - -.form-label - display: block - font-size: $form-fontSize - font-weight: bold - margin-bottom: 5px - em - color: $form-error-color - -// Modifiers - -.form-label--radio, -.form-label--check - font-size: 90% - font-weight: normal - -// ----- Note ----- // - -.form-note - color: lighten($form-color, 40%) - font-size: 90% - margin-top: 5px - -// ----- Select ----- // - -.form-select - width: 30% diff --git a/structures/_list.sass b/structures/_list.sass deleted file mode 100644 index da3f205..0000000 --- a/structures/_list.sass +++ /dev/null @@ -1,94 +0,0 @@ -// ************************************* -// -// List -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$list--block-background: #4e4e5b !default -$list-border-color: #9a9aa8 !default -$list-border-size: 2px !default -$list-borderRadius: 2px !default -$list-color: #444 !default -$list-fontSize: 16px !default -$list-link-color: #ddd !default -$list--nav-color: #4e4e5b !default -$list-whitespace: 20px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.list - margin: 0 0 $list-whitespace - padding-left: $list-whitespace - li - font-size: $list-fontSize - margin-bottom: ($list-whitespace / 2) - &:last-child - margin-bottom: 0 - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -// ----- Block ----- // - -.list--block - padding-left: 0 - li - list-style-type: none - margin-bottom: ($list-whitespace / 2) - a - background: $list--block-background - border-radius: $list-borderRadius - color: #fff - display: block - padding: 8px $list-whitespace - &:hover - background: lighten($list--block-background, 10%) - text-decoration: none - - // States - - .is-active a - background: $list-color - -// ----- Bulleted ----- // - -.list--bulleted li - list-style-type: square - -// ----- Nav ----- // - -.list--nav - padding-left: 0 - li - display: inline - margin-right: $list-whitespace - &:last-child - margin-right: 0 - - a - border-bottom: $list-border-size solid lighten($list-border-color, 10%) - color: $list--nav-color - &:hover - background: $list-link-color - border-bottom-color: $list-border-color - text-decoration: none - - // States - - &.is-active a - border-bottom: $list-border-size solid $list-border-color - color: $list-color - font-weight: bold - text-decoration: none - -// ----- Numbered ----- // - -.list--numbered li - list-style-type: decimal diff --git a/structures/_tab.sass b/structures/_tab.sass deleted file mode 100644 index a8710d5..0000000 --- a/structures/_tab.sass +++ /dev/null @@ -1,59 +0,0 @@ -// ************************************* -// -// Tab -// -> Note; -// * Replace the '.tabs:after' with -// your preferred clearfix -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$tab-border: 1px solid #ccc !default -$tab-borderRadius: 2px !default -$tab-color: #444 !default -$tab-fontSize: 16px !default -$tab-whitespace: 20px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.tab - list-style-type: none - float: left - font-size: $tab-fontSize - a - background: lighten($tab-color, 65%) - border: $tab-border - border-radius: $tab-borderRadius $tab-borderRadius 0 0 - color: $tab-color - display: block - margin-bottom: -1px - margin-right: ($tab-whitespace / 2) - padding: 8px $tab-whitespace - text-decoration: none - &:hover, - &:focus, - &.is-active - background: #fff - - // States - - &.is-active - border-bottom-color: transparent - -// ------------------------------------- -// Tabs -// ------------------------------------- - -.tabs - border-bottom: $tab-border - margin: 0 0 $tab-whitespace - padding: 0 - &:after - clear: both - content: '' - display: table diff --git a/structures/_table.sass b/structures/_table.sass deleted file mode 100644 index cb9f32a..0000000 --- a/structures/_table.sass +++ /dev/null @@ -1,49 +0,0 @@ -// ************************************* -// -// Table -// -// ************************************* - -// ------------------------------------- -// Variables -// ------------------------------------- - -$table-border: 1px solid #999 !default -$table-color: #444 !default -$table-fontSize: 14px !default -$table-whitespace: 20px !default - -// ------------------------------------- -// Base -// ------------------------------------- - -.table - -moz-box-sizing: border-box - box-sizing: border-box - font-size: $table-fontSize - margin: 0 0 $table-whitespace - width: 100% - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -// ----- Striped ----- // - -.table--striped - .table-body tr:nth-child(odd) - background: lighten($table-color, 65%) - -// ------------------------------------- -// Submodules -// ------------------------------------- - -// ----- Row ----- // - -.table-row - border-bottom: $table-border - th, td - padding: ($table-whitespace / 2) - th - font-weight: bold - text-align: left From ec1bdb4f9d86a74ef674de17c0ef4441a4adf000 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 27 Nov 2013 14:22:40 -0500 Subject: [PATCH 018/195] Add Foundation functions --- foundation/_functions.sass | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 foundation/_functions.sass diff --git a/foundation/_functions.sass b/foundation/_functions.sass new file mode 100644 index 0000000..60b0e64 --- /dev/null +++ b/foundation/_functions.sass @@ -0,0 +1,23 @@ +// ************************************* +// +// Functions +// +// ************************************* + +// ------------------------------------- +// Em +// ------------------------------------- + +@function em($target, $context: $base-fontSize) + @if ($target == 0) + @return 0 + @else + @return #{$target / $context}em + +// ------------------------------------- +// Rem +// ------------------------------------- + +@function rem($size) + @return #{$size / $base-fontSize}rem + From 228a52912967eb2a9cf26c5bbde2f0e40439a545 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 27 Nov 2013 14:24:29 -0500 Subject: [PATCH 019/195] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7865a11..c15d1b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Add additional helpers - Rename **Helpers** to **Foundation** - Rename **Modules** to **Structures** +- Add **Foundation** functions ## 1.4.1 **July 30, 2013** From 0d31072a4135747cb327740fb59c2ea7f7f737e8 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 21 Feb 2014 07:22:34 -0500 Subject: [PATCH 020/195] Update foundation mixins --- foundation/_mixins.sass | 50 ++++++++++++++++++++++++++++------------- 1 file changed, 34 insertions(+), 16 deletions(-) diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index 3007224..580a770 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -5,10 +5,27 @@ // ************************************* // ------------------------------------- +// // Caret +// -> Returns the opposite side +// +// ------------------------------------- +// +// $side - the side to return the opposite of +// // ------------------------------------- -// @import "compass" -> required +// Requires this function (replaces Compass) + +@function opposite-position($side) + @if $side == 'top' + @return 'bottom' + @if $side == 'bottom' + @return 'top' + @if $side == 'left' + @return 'right' + @if $side == 'right' + @return 'left' =caret($side, $size, $color) $opposite: opposite-position($side) @@ -26,23 +43,24 @@ #{$opposite}: auto // ------------------------------------- -// Module Padding +// +// Keyframe Animation +// -> Auto-prefixed keyframe-animation +// +// ------------------------------------- +// +// $name - the name of the animation +// @content - the generated content within the mixin +// // ------------------------------------- -=mod-padding($padding) - padding: 0 $padding - - &::before, - &::after - content: '' - display: block - height: 1px - - &::before - margin-bottom: $padding - 1 - - &::after - margin-top: $padding - 1 +=keyframe-animation($name) + @-webkit-keyframes #{$name} + @content + @-moz-keyframes #{$name} + @content + @keyframes #{$name} + @content // ------------------------------------- // Retina-image From 7f8ddbf91a34ce606d3f4ebdb4f9111b9dcbc94b Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 1 May 2014 10:53:14 -0400 Subject: [PATCH 021/195] Add thumb component --- components/_thumb.sass | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 components/_thumb.sass diff --git a/components/_thumb.sass b/components/_thumb.sass new file mode 100644 index 0000000..20400fc --- /dev/null +++ b/components/_thumb.sass @@ -0,0 +1,34 @@ +// ************************************* +// +// Thumb +// -> Media elements +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %img.thumb[.thumb--m]{src: '', alt: ''} +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$b-borderRadius: 4px !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.thumb + border-radius: 50% + display: block + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +.thumb--m + border-radius: $b-borderRadius + From 4aaf061859070dfe8aa9d34d0fee5b8f3bf94cf2 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 1 May 2014 11:01:48 -0400 Subject: [PATCH 022/195] Add progress component --- components/_progress.sass | 54 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 components/_progress.sass diff --git a/components/_progress.sass b/components/_progress.sass new file mode 100644 index 0000000..5677c5d --- /dev/null +++ b/components/_progress.sass @@ -0,0 +1,54 @@ +// ************************************* +// +// Progress +// -> Progress bar +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .progress +// .progress-bar{style: 'width: 65%;'} +// +// ************************************* + +// ------------------------------------- +// Utilities +// ------------------------------------- + +.boxSizing + -moz-box-sizing: border-box + box-sizing: border-box + +// ------------------------------------- +// Variables +// ------------------------------------- + +$c-highlight: #4e4e5b !default +$c-invert: #fff !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.progress + background: $c-invert + height: 10px + position: relative + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Bar ----- // + +.progress-bar + @extend .boxSizing + background: $c-highlight + bottom: 0 + left: 0 + max-width: 100% + position: absolute + top: 0 + z-index: 1 + From d2ca81bcc97279c23a76b0618ce6192958ffe15a Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 13 Jun 2014 08:45:40 -0400 Subject: [PATCH 023/195] Update the thumb component --- components/_thumb.sass | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/_thumb.sass b/components/_thumb.sass index 20400fc..c9def71 100644 --- a/components/_thumb.sass +++ b/components/_thumb.sass @@ -7,7 +7,7 @@ // Template (Haml) // ------------------------------------- // -// %img.thumb[.thumb--m]{src: '', alt: ''} +// %img.thumb[.thumb--m]{ src: '', alt: '' } // // ************************************* @@ -15,7 +15,7 @@ // Variables // ------------------------------------- -$b-borderRadius: 4px !default +$thumb-borderRadius: 4px !default // ------------------------------------- // Base @@ -30,5 +30,5 @@ $b-borderRadius: 4px !default // ------------------------------------- .thumb--m - border-radius: $b-borderRadius + border-radius: $thumb-borderRadius From e2dcd826a046dd66475107771bc4d600f19c6f07 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 13 Jun 2014 08:47:14 -0400 Subject: [PATCH 024/195] Update progress component --- components/_progress.sass | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/_progress.sass b/components/_progress.sass index 5677c5d..1caa8a8 100644 --- a/components/_progress.sass +++ b/components/_progress.sass @@ -8,12 +8,12 @@ // ------------------------------------- // // .progress -// .progress-bar{style: 'width: 65%;'} +// .progress-bar{ style: 'width: 65%;' } // // ************************************* // ------------------------------------- -// Utilities +// Tools // ------------------------------------- .boxSizing @@ -24,15 +24,15 @@ // Variables // ------------------------------------- -$c-highlight: #4e4e5b !default -$c-invert: #fff !default +$progress-background: #fff !default +$progress-bar-background: #4e4e5b !default // ------------------------------------- // Base // ------------------------------------- .progress - background: $c-invert + background: $progress-background height: 10px position: relative @@ -44,7 +44,7 @@ $c-invert: #fff !default .progress-bar @extend .boxSizing - background: $c-highlight + background: $progress-bar-background bottom: 0 left: 0 max-width: 100% From 77f77ad871017531540e03dc7e6c2188f9126bb4 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 13 Jun 2014 08:47:51 -0400 Subject: [PATCH 025/195] Update extends --- foundation/_extends.sass | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/foundation/_extends.sass b/foundation/_extends.sass index 6e44a31..42e3609 100644 --- a/foundation/_extends.sass +++ b/foundation/_extends.sass @@ -8,7 +8,7 @@ // Faux Hide // ------------------------------------- -%fauxHide +.fauxHide height: 0 opacity: 0 overflow: hidden @@ -18,7 +18,7 @@ // Faux Show // ------------------------------------- -%fauxShow +.fauxShow height: auto opacity: 1 overflow: visible @@ -28,7 +28,7 @@ // Stretch // ------------------------------------- -%stretch +.stretch bottom: 0 left: 0 position: absolute From 2ee845c7361578a3404932df019049dbebd01784 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 16 Jun 2014 07:34:52 -0400 Subject: [PATCH 026/195] Add extends - Vertical/Horizontal Center - Semantic Hide - Vertical Align --- foundation/_extends.sass | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/foundation/_extends.sass b/foundation/_extends.sass index 42e3609..f192c04 100644 --- a/foundation/_extends.sass +++ b/foundation/_extends.sass @@ -24,6 +24,32 @@ overflow: visible visibility: visible +// ------------------------------------- +// Vertical/Horizontal Center +// ------------------------------------- + +.middle + left: 50% + position: absolute + top: 50% + -webkit-transform: translate(-50%, -50%) + -ms-transform: translate(-50%, -50%) + transform: translate(-50%, -50%) + +// ------------------------------------- +// Semantic Hide +// ------------------------------------- + +.srt + border: 0 + clip: rect(0 0 0 0) + height: 1px + margin: -1px + overflow: hidden + padding: 0 + position: absolute + width: 1px + // ------------------------------------- // Stretch // ------------------------------------- @@ -35,3 +61,12 @@ right: 0 top: 0 +// ------------------------------------- +// Vertical Align +// ------------------------------------- + +.valign + +transform(translateY(-50%)) + position: relative + top: 50% + From c3ad574ca42c1eaf5932303e2f5cd62d9fba62f8 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 19 Jun 2014 20:51:38 -0400 Subject: [PATCH 027/195] Update README.md --- README.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 268bb20..5dd63a0 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,17 @@ -# MVCSS Library +MVCSS Library +============= -**Version 2.0.0** - -## Foundation +Foundation +---------- Choose the Sass extends, functions, mixins, and general helpers from `/foundation` to include in your [MVCSS](http://mvcss.github.io/) project. -## Documentation +Components +---------- + +Choose the Sass components from `/components` to include in your [MVCSS](http://mvcss.github.io/) project. + +Documentation +------------- The documentation, for anything that requires more full documentation than the source file, is included in `/docs`. From f56734b29f9851625742edf2533124f2fcf4e9fa Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 19 Jun 2014 20:52:09 -0400 Subject: [PATCH 028/195] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5dd63a0..02fdc80 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ MVCSS Library Foundation ---------- -Choose the Sass extends, functions, mixins, and general helpers from `/foundation` to include in your [MVCSS](http://mvcss.github.io/) project. +Choose the Sass extends, functions, and mixins from `/foundation` to include in your [MVCSS](http://mvcss.github.io/) project. Components ---------- From a3926bb8194c5ca24bd8ad86f4c9995b6e9c04d2 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 20 Jun 2014 22:37:44 -0400 Subject: [PATCH 029/195] Add list component --- components/_list.sass | 98 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 components/_list.sass diff --git a/components/_list.sass b/components/_list.sass new file mode 100644 index 0000000..10f97d6 --- /dev/null +++ b/components/_list.sass @@ -0,0 +1,98 @@ +// ************************************* +// +// List +// -> Enumeration of items +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %ul.list[.list--inline|object|object--single|styled|styled--numbered] +// %li.list-item List Item +// %li.list-item List Item +// +// ************************************* + +// ------------------------------------- +// Tools +// ------------------------------------- + +.group::after + clear: both + content: '' + display: table + +// ------------------------------------- +// Variables +// ------------------------------------- + +$list-whitespace: 1.25em + +// ------------------------------------- +// Base +// ------------------------------------- + +.list + list-style-type: none + margin: 0 + padding: 0 + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Inline ----- // + +.list--inline + + .list-item + display: inline + margin-right: $list-whitespace + &:last-child + margin-right: 0 + +// ----- Object ----- // + +.list--object + @extend .group + + .list-item + float: left + margin-right: $list-whitespace + &:last-child + margin-right: 0 + +// Single + +.list--object--single + + .list-item + margin-bottom: 0 + +// ----- Styled ----- // + +.list--styled + padding-left: $list-whitespace + + .list-item + display: list-item + list-style-type: disc + +// Numbered + +.list--styled--numbered + + .list-item + list-style-type: decimal + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Item ----- // + +.list-item + display: block + margin-bottom: $list-whitespace + &:last-child + margin-bottom: 0 From 917c1de495c5d3869c330b666ce0b3e58a947ce6 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 20 Jun 2014 22:39:24 -0400 Subject: [PATCH 030/195] Remove the 'list--object--single' modifier --- components/_list.sass | 7 ------- 1 file changed, 7 deletions(-) diff --git a/components/_list.sass b/components/_list.sass index 10f97d6..9bdef88 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -62,13 +62,6 @@ $list-whitespace: 1.25em &:last-child margin-right: 0 -// Single - -.list--object--single - - .list-item - margin-bottom: 0 - // ----- Styled ----- // .list--styled From fc1a9e818cb722921751c5674b27b4b33673475a Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 23 Jun 2014 09:51:19 -0400 Subject: [PATCH 031/195] Add panel component, docs --- components/_panel.sass | 131 +++++++++++++++++++++++++++++++++++++++ docs/components/panel.md | 103 ++++++++++++++++++++++++++++++ 2 files changed, 234 insertions(+) create mode 100644 components/_panel.sass create mode 100644 docs/components/panel.md diff --git a/components/_panel.sass b/components/_panel.sass new file mode 100644 index 0000000..c2146ad --- /dev/null +++ b/components/_panel.sass @@ -0,0 +1,131 @@ +// ************************************* +// +// Panel +// -> Sticky panels +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .panel[.panel--scroll|top--1of4|top--tablet--1of2|etc.] +// .panel-content +// +// ************************************* + +// ------------------------------------- +// Tools +// ------------------------------------- + +// ----- Box Sizing ----- // + +.boxSizing + -moz-box-sizing: border-box + box-sizing: border-box + +// ----- Stretch ----- // + +.stretch + bottom: 0 + left: 0 + position: absolute + right: 0 + top: 0 + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Sizes ----- // + +$panel-s: 56em !default +$panel-m: 64em !default +$panel-l: 82em !default + +// ----- Settings ----- // + +$panel-defaults: 'tablet' $panel-s, 'desk' $panel-m, 'wide' $panel-l !default +$panel-columns: 5 !default +$panel-whitespace: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.panel + @extend .boxSizing + @extend .stretch + overflow: hidden + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Scroll ----- // + +.panel--scroll + overflow: auto + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Content ----- // + +.panel-content + padding: $panel-whitespace + +// ------------------------------------- +// Setup +// ------------------------------------- + +=panel-setup($side, $namespace: '') + + // ----- One Part ----- // + + .panel--#{$side}--#{$namespace}1of1 + #{opposite-position($side)}: 0 + + // ----- Two Parts ----- // + + .panel--#{$side}--#{$namespace}1of2 + #{opposite-position($side)}: 50% + + // ----- Three Parts ----- // + + @if $panel-columns >= 3 + .panel--#{$side}--#{$namespace}1of3 + #{opposite-position($side)}: 66.666% + .panel--#{$side}--#{$namespace}2of3 + #{opposite-position($side)}: 33.333% + + // ----- Four Parts ----- // + + @if $panel-columns >= 4 + .panel--#{$side}--#{$namespace}1of4 + #{opposite-position($side)}: 75% + .panel--#{$side}--#{$namespace}3of4 + #{opposite-position($side)}: 25% + + @if $panel-columns >= 5 + .panel--#{$side}--#{$namespace}1of5 + #{opposite-position($side)}: 80% + .panel--#{$side}--#{$namespace}2of5 + #{opposite-position($side)}: 60% + .panel--#{$side}--#{$namespace}3of5 + #{opposite-position($side)}: 40% + .panel--#{$side}--#{$namespace}4of5 + #{opposite-position($side)}: 20% + +// ------------------------------------- +// Creation +// ------------------------------------- + +$panel-sides: top, right, bottom, left + +@each $side in $panel-sides + +panel-setup($side) + +@each $device in $panel-defaults + @media screen and (min-width: nth($device, 2)) + @each $side in $panel-sides + +panel-setup($side, "#{nth($device, 1)}--") diff --git a/docs/components/panel.md b/docs/components/panel.md new file mode 100644 index 0000000..9699689 --- /dev/null +++ b/docs/components/panel.md @@ -0,0 +1,103 @@ +Components - Panel +================== + +The `panel` Component is useful for layouts, such as web applications, that need absolutely positioned, sticky panels. + +Basic Usage +----------- + +```html +
+ +
+ +
+ +
+``` + +In its most basic form, you define a `panel` class alongside some class modifiers for the side (`top`, `right`, `bottom`, `left`), and then the sizing (`1of4`, `1of2`, etc.). Those modifier numbers correspond to the appropriate side's positioning values (`1/4 = 25%`, etc.). + +Content +------- + +If you want to add some spacing within a `panel`, use the `panel-content` scaffolding class, like so: + +```html +
+
+ +
+
+ +
+
+ +
+
+``` + +Responsiveness +-------------- + +If you want your panels to adapt responsively, you just need to add additional modifiers. For example: + +```html +
+
+ +
+
+ +
+
+ +
+
+``` + +Now, at the `desk` breakpoint, which is defined in the variables (covered below), each `panel` will be sized at `50%` on their respective side. + +### Vertical & Horizontal Adjustments + +You can also make vertical and horizontal adjustments responsively. + +```html +
+
+ +
+
+ +
+
+ +
+
+``` + +Now we have a set of two panels that are 25/75 stacked horizontally until the `desk` size, and then they convert to vertical 50/50. Simple as that. + +Customization +------------- + +There are variables at the top of the file that you can overwrite in your `_config.sass` Foundation file. + +```sass +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Sizes ----- // + +$panel-s: 56em !default +$panel-m: 64em !default +$panel-l: 82em !default + +// ----- Settings ----- // + +$panel-defaults: 'tablet' $panel-s, 'desk' $panel-m, 'wide' $panel-l !default +$panel-columns: 5 !default +$panel-whitespace: 1.25em !default +``` + From e06cb3dac93f9f591e78df9a771f9487c8607530 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 09:47:12 -0400 Subject: [PATCH 032/195] Update list/panel whitespace variable names --- components/_list.sass | 10 +++++----- components/_panel.sass | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/_list.sass b/components/_list.sass index 9bdef88..b3349b5 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -26,7 +26,7 @@ // Variables // ------------------------------------- -$list-whitespace: 1.25em +$list-space: 1.25em // ------------------------------------- // Base @@ -47,7 +47,7 @@ $list-whitespace: 1.25em .list-item display: inline - margin-right: $list-whitespace + margin-right: $list-space &:last-child margin-right: 0 @@ -58,14 +58,14 @@ $list-whitespace: 1.25em .list-item float: left - margin-right: $list-whitespace + margin-right: $list-space &:last-child margin-right: 0 // ----- Styled ----- // .list--styled - padding-left: $list-whitespace + padding-left: $list-space .list-item display: list-item @@ -86,6 +86,6 @@ $list-whitespace: 1.25em .list-item display: block - margin-bottom: $list-whitespace + margin-bottom: $list-space &:last-child margin-bottom: 0 diff --git a/components/_panel.sass b/components/_panel.sass index c2146ad..ee11f2a 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -45,7 +45,7 @@ $panel-l: 82em !default $panel-defaults: 'tablet' $panel-s, 'desk' $panel-m, 'wide' $panel-l !default $panel-columns: 5 !default -$panel-whitespace: 1.25em !default +$panel-space: 1.25em !default // ------------------------------------- // Base @@ -72,7 +72,7 @@ $panel-whitespace: 1.25em !default // ----- Content ----- // .panel-content - padding: $panel-whitespace + padding: $panel-space // ------------------------------------- // Setup From 54a328bd9dce8fd6ec0b3b9aadce0ad802f539c4 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 09:50:53 -0400 Subject: [PATCH 033/195] Add comments to Foundation - Functions --- foundation/_functions.sass | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/foundation/_functions.sass b/foundation/_functions.sass index 60b0e64..1c9d7f4 100644 --- a/foundation/_functions.sass +++ b/foundation/_functions.sass @@ -6,9 +6,13 @@ // ------------------------------------- // Em +// -> Converts a pixel value into an em +// +// $target - the target pixel size +// $context - the context pixel size // ------------------------------------- -@function em($target, $context: $base-fontSize) +@function em($target, $context: $b-fontSize) @if ($target == 0) @return 0 @else @@ -16,8 +20,11 @@ // ------------------------------------- // Rem +// -> Converts a pixel value into a rem +// +// $size - the pixel size // ------------------------------------- @function rem($size) - @return #{$size / $base-fontSize}rem + @return #{$size / $b-fontSize}rem From ef836d7738f51843f34ed533be022bdbcb42b938 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 10:04:06 -0400 Subject: [PATCH 034/195] Add new Table Component --- components/_table.sass | 88 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 components/_table.sass diff --git a/components/_table.sass b/components/_table.sass new file mode 100644 index 0000000..e990e2b --- /dev/null +++ b/components/_table.sass @@ -0,0 +1,88 @@ +// ************************************* +// +// Table +// -> Tabular data +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %table.table[.table--striped] +// %thead.table-header +// %tr.table-row +// %th.table-head Heading +// %th.table-head Heading +// %tbody.table-body +// %tr.table-row +// %td.table-data Data +// %td.table-data Data +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$table-border: 2px solid #ddd !default +$table-data-borderWidth: 1px !default +$table-fontSize-s: 75% !default +$table-fontSize-m: 90% !default +$table-lineHeight: 1.5 !default +$table--striped-row-background: #eee !default +$table-space: 1.25em !default +$table-space-s: 0.5 * $table-space !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.table + width: 100% + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Striped ----- // + +.table--striped + + .table-body .table-row:nth-child(odd) + background: $table--striped-row-background + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Shared ----- // + +.table-data, +.table-header + border-top: $table-border + line-height: $table-lineHeight + padding: $table-space-s $table-space + vertical-align: top + +// ----- Data ----- // + +.table-data + border-top-width: $table-data-borderWidth + font-size: $table-fontSize-m + vertical-align: middle + +// ----- Header ----- // + +.table-header + border-top: 0 + text-align: left + +// ----- Head ----- // + +.table-head + border-bottom: $table-border + border-top: 0 + font-size: $table-fontSize-s + padding: $table-space-s $table-space + text-transform: uppercase + vertical-align: bottom + From c293fc7679a6691ae225fdf8a09d837c6085d46f Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 10:15:24 -0400 Subject: [PATCH 035/195] Add Button Component --- components/_button.css.sass | 64 +++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 components/_button.css.sass diff --git a/components/_button.css.sass b/components/_button.css.sass new file mode 100644 index 0000000..cbc2154 --- /dev/null +++ b/components/_button.css.sass @@ -0,0 +1,64 @@ +// ************************************* +// +// Button +// -> Clickable controls +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .btn[.btn--a] +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$btn--a-background: #4e4e5b !default +$btn--a-color: #fff !default +$btn--b-background: lighten($btn--a-background, 45%) !default +$btn--b-color: #fff !default +$btn-borderRadius: 3px !default +$btn-fontSize: 100% !default +$btn-lineHeight: 2.5 !default +$btn-space: 2.5em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.btn + border-radius: $btn-borderRadius + cursor: pointer + display: inline-block + font-size: $btn-fontSize + line-height: $btn-lineHeight + padding: 0 $btn-space + text-align: center + text-decoration: none + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Hierarchy ----- // + +.btn--a + background: $btn--a-background + color: $btn--a-color + &:hover, + &:focus, + &:active + background: lighten($btn--a-background, 10%) + color: $btn--a-color + +.btn--b + background: $btn--b-background + color: $btn--b-color + &:hover, + &:focus, + &:active + background: lighten($btn--b-background, 5%) + color: $btn--b-color + From e684dde16820cd2053c16d121c509503bab8eb5c Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 10:16:15 -0400 Subject: [PATCH 036/195] Rename Button Component file --- components/{_button.css.sass => _button.sass} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename components/{_button.css.sass => _button.sass} (100%) diff --git a/components/_button.css.sass b/components/_button.sass similarity index 100% rename from components/_button.css.sass rename to components/_button.sass From 99274dfc1bb25464e25942220bc2a9561e800569 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 10:17:33 -0400 Subject: [PATCH 037/195] Update button component --- components/_button.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/components/_button.sass b/components/_button.sass index cbc2154..b260797 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -30,6 +30,7 @@ $btn-space: 2.5em !default .btn border-radius: $btn-borderRadius + border: 0 cursor: pointer display: inline-block font-size: $btn-fontSize From 8c8c82e96030d0d22743c7ac25c9e5a37100abea Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 10:21:48 -0400 Subject: [PATCH 038/195] Add small/large button modifiers --- components/_button.sass | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/components/_button.sass b/components/_button.sass index b260797..4708d1d 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -7,7 +7,7 @@ // Template (Haml) // ------------------------------------- // -// .btn[.btn--a] +// .btn[.btn--a|b|l] // // ************************************* @@ -18,9 +18,11 @@ $btn--a-background: #4e4e5b !default $btn--a-color: #fff !default $btn--b-background: lighten($btn--a-background, 45%) !default -$btn--b-color: #fff !default +$btn--b-color: #4e4e5b !default $btn-borderRadius: 3px !default $btn-fontSize: 100% !default +$btn--s-fontSize: 90% !default +$btn--l-fontSize: 110% !default $btn-lineHeight: 2.5 !default $btn-space: 2.5em !default @@ -63,3 +65,13 @@ $btn-space: 2.5em !default background: lighten($btn--b-background, 5%) color: $btn--b-color +// ----- Sizes ----- // + +.btn--s + font-size: $btn--s-fontSize + padding: 0 (0.5 * $btn-space) + +.btn--l + font-size: $btn--l-fontSize + padding: 0 (2 * $btn-space) + From ab5c53f422f005c12ed396bf665efde1620e2ba9 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 10:22:13 -0400 Subject: [PATCH 039/195] Update button Component comment --- components/_button.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_button.sass b/components/_button.sass index 4708d1d..1251ff0 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -7,7 +7,7 @@ // Template (Haml) // ------------------------------------- // -// .btn[.btn--a|b|l] +// .btn[.btn--a|b|l|s] // // ************************************* From 1e5d3d0bb93c210bed11e5c3d32fbad3ff5a6103 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 10:37:09 -0400 Subject: [PATCH 040/195] Add form Component --- components/_form.sass | 104 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 components/_form.sass diff --git a/components/_form.sass b/components/_form.sass new file mode 100644 index 0000000..ed0850e --- /dev/null +++ b/components/_form.sass @@ -0,0 +1,104 @@ +// ************************************* +// +// Form +// -> Fields, selects, & such +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %form.form +// %fieldset.form-field +// %label.form-label(for="email") Email +// %input.form-input(type="email" id="email") +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$form-borderRadius: 2px !default +$form-fontSize-m: 90% !default +$form-input-background: #fff !default +$form-input-border: 2px solid #ddd !default +$form-input-focus-borderColor: #4e4e5b !default +$form-space: 1.25em !default +$form-space-xs: 0.25 * $form-space !default +$form-space-s: 0.5 * $form-space !default + +// ------------------------------------- +// Tools +// ------------------------------------- + +.boxSizing + -moz-box-sizing: border-box + box-sizing: border-box + +// ------------------------------------- +// Base +// ------------------------------------- + +.form + margin-bottom: $form-space + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Condensed ----- // + +.form--condensed + + .form-field + margin-bottom: $form-space-s + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Field ----- // + +.form-field + border: 0 + margin-bottom: $form-space + padding: 0 + +// Inline + +.form-field--inline + + .form-btn + display: block + line-height: 2.9 + min-width: 100% + +// ----- Input ----- // + +.form-input + @extend .boxSizing + background: $form-input-background + border: $form-input-border + border-radius: $form-borderRadius + font-size: 100% + padding: $form-space-s + position: relative + transition: border-color 0.2s ease-in-out + width: 100% + &:focus + border-color: $form-input-focus-borderColor + outline: none + +// ----- Label ----- // + +.form-label + display: block + font-size: $form-fontSize-m + font-weight: bold + margin-bottom: $form-space-xs + +// ----- Select ----- // + +.form-select + min-width: 12.5em // ~200px + From 39e8390b0fc07071bcae9fdbf6a62256b0627172 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 10:40:00 -0400 Subject: [PATCH 041/195] Rename component 'Tools' section --- components/_form.sass | 16 ++++++++-------- components/_list.sass | 2 +- components/_panel.sass | 2 +- components/_progress.sass | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/components/_form.sass b/components/_form.sass index ed0850e..e12380e 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -14,6 +14,14 @@ // // ************************************* +// ------------------------------------- +// Helpers +// ------------------------------------- + +.boxSizing + -moz-box-sizing: border-box + box-sizing: border-box + // ------------------------------------- // Variables // ------------------------------------- @@ -27,14 +35,6 @@ $form-space: 1.25em !default $form-space-xs: 0.25 * $form-space !default $form-space-s: 0.5 * $form-space !default -// ------------------------------------- -// Tools -// ------------------------------------- - -.boxSizing - -moz-box-sizing: border-box - box-sizing: border-box - // ------------------------------------- // Base // ------------------------------------- diff --git a/components/_list.sass b/components/_list.sass index b3349b5..78f8c00 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -14,7 +14,7 @@ // ************************************* // ------------------------------------- -// Tools +// Helpers // ------------------------------------- .group::after diff --git a/components/_panel.sass b/components/_panel.sass index ee11f2a..7604852 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -13,7 +13,7 @@ // ************************************* // ------------------------------------- -// Tools +// Helpers // ------------------------------------- // ----- Box Sizing ----- // diff --git a/components/_progress.sass b/components/_progress.sass index 1caa8a8..1049c15 100644 --- a/components/_progress.sass +++ b/components/_progress.sass @@ -13,7 +13,7 @@ // ************************************* // ------------------------------------- -// Tools +// Helpers // ------------------------------------- .boxSizing From 139bfab760e2245a08a16aa8be7094150702aada Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 28 Jun 2014 17:42:01 -0400 Subject: [PATCH 042/195] Update list component comment --- components/_list.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_list.sass b/components/_list.sass index 78f8c00..79db053 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -7,7 +7,7 @@ // Template (Haml) // ------------------------------------- // -// %ul.list[.list--inline|object|object--single|styled|styled--numbered] +// %ul.list[.list--inline|object|styled|styled--numbered] // %li.list-item List Item // %li.list-item List Item // From bf2f444a88bfca1063a768f24356350e4acb9452 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 30 Jun 2014 13:53:14 -0400 Subject: [PATCH 043/195] Fix em and rem functions --- foundation/_functions.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/foundation/_functions.sass b/foundation/_functions.sass index 1c9d7f4..daf1848 100644 --- a/foundation/_functions.sass +++ b/foundation/_functions.sass @@ -16,7 +16,7 @@ @if ($target == 0) @return 0 @else - @return #{$target / $context}em + @return ($target / $context) * 1em // ------------------------------------- // Rem @@ -26,5 +26,5 @@ // ------------------------------------- @function rem($size) - @return #{$size / $b-fontSize}rem + @return ($size / $b-fontSize) * 1rem From a934eacfe35f683c2ae577f7da684818e1b0bf4d Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 06:55:39 -0400 Subject: [PATCH 044/195] Remove the em function, since it's now in the core --- foundation/_functions.sass | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/foundation/_functions.sass b/foundation/_functions.sass index daf1848..27c3039 100644 --- a/foundation/_functions.sass +++ b/foundation/_functions.sass @@ -4,20 +4,6 @@ // // ************************************* -// ------------------------------------- -// Em -// -> Converts a pixel value into an em -// -// $target - the target pixel size -// $context - the context pixel size -// ------------------------------------- - -@function em($target, $context: $b-fontSize) - @if ($target == 0) - @return 0 - @else - @return ($target / $context) * 1em - // ------------------------------------- // Rem // -> Converts a pixel value into a rem From f77a857eb8f9d994ac2de226a734b93d801a6a6f Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 08:21:34 -0400 Subject: [PATCH 045/195] Update form/table variables --- components/_form.sass | 12 +++++++++--- components/_table.sass | 10 ++++++++-- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/components/_form.sass b/components/_form.sass index e12380e..3369d87 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -26,11 +26,17 @@ // Variables // ------------------------------------- -$form-borderRadius: 2px !default -$form-fontSize-m: 90% !default +// ----- Colors ----- // + $form-input-background: #fff !default -$form-input-border: 2px solid #ddd !default +$form-input-borderColor: #ddd !default $form-input-focus-borderColor: #4e4e5b !default + +// ----- Settings ----- // + +$form-borderRadius: 2px !default +$form-fontSize-m: 90% !default +$form-input-border: 2px solid $form-input-borderColor !default $form-space: 1.25em !default $form-space-xs: 0.25 * $form-space !default $form-space-s: 0.5 * $form-space !default diff --git a/components/_table.sass b/components/_table.sass index e990e2b..d53dc1e 100644 --- a/components/_table.sass +++ b/components/_table.sass @@ -23,12 +23,18 @@ // Variables // ------------------------------------- -$table-border: 2px solid #ddd !default +// ----- Colors ----- // + +$table-borderColor: #ddd !default +$table--striped-row-background: #eee !default + +// ----- Settings ----- // + +$table-border: 2px solid $table-borderColor !default $table-data-borderWidth: 1px !default $table-fontSize-s: 75% !default $table-fontSize-m: 90% !default $table-lineHeight: 1.5 !default -$table--striped-row-background: #eee !default $table-space: 1.25em !default $table-space-s: 0.5 * $table-space !default From 87a7bde9582a8734452d685f5d8e8c1aa7f32282 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 08:39:10 -0400 Subject: [PATCH 046/195] Add Foundation - Tools file --- foundation/_tools.sass | 117 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 foundation/_tools.sass diff --git a/foundation/_tools.sass b/foundation/_tools.sass new file mode 100644 index 0000000..341e172 --- /dev/null +++ b/foundation/_tools.sass @@ -0,0 +1,117 @@ +// ************************************* +// +// Tools +// -> Additional global utilities +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$b-border: 2px solid #ddd !default +$b-space: 1.25em !default + +// ------------------------------------- +// Borders +// ------------------------------------- + +// ----- All ----- // + +.bdr + border: $b-border + +// ----- Sides ----- // + +.bdrb + border-bottom: $b-border +.bdrl + border-left: $b-border +.bdrr + border-right: $b-border +.bdrt + border-top: $b-border + +// ------------------------------------- +// Opacity +// ------------------------------------- + +.optq + opacity: 0.75 +.oph + opacity: 0.5 +.opf + opacity: 1 + +// ------------------------------------- +// Positioning +// ------------------------------------- + +// ----- Bottom ----- // + +.pobxs + bottom: $b-space-xs +.pobs + bottom: $b-space-s +.pobm + bottom: $b-space +.pobl + bottom: $b-space-l +.pobsn + bottom: -$b-space-s +.pobmn + bottom: -$b-space +.pobln + bottom: -$b-space-l + +// ----- Left ----- // + +.polxs + left: $b-space-xs +.pols + left: $b-space-s +.polm + left: $b-space +.poll + left: $b-space-l +.polsn + left: -$b-space-s +.polmn + left: -$b-space +.polln + left: -$b-space-l + +// ----- Right ----- // + +.porxs + right: $b-space-xs +.pors + right: $b-space-s +.porm + right: $b-space +.porl + right: $b-space-l +.porsn + right: -$b-space-s +.pormn + right: -$b-space +.porln + right: -$b-space-l + +// ----- Top ----- // + +.potxs + top: $b-space-xs +.pots + top: $b-space-s +.potm + top: $b-space +.potl + top: $b-space-l +.potsn + top: -$b-space-s +.potmn + top: -$b-space +.potln + top: -$b-space-l + From b2bdc281eec2a123e3a4dd0c3ccfbd8aeb145095 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 1 Jul 2014 10:23:28 -0400 Subject: [PATCH 047/195] Add Split Component --- components/_split.sass | 62 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 components/_split.sass diff --git a/components/_split.sass b/components/_split.sass new file mode 100644 index 0000000..19a1b43 --- /dev/null +++ b/components/_split.sass @@ -0,0 +1,62 @@ +// ************************************* +// +// Split +// -> Horizontally repellent content +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %[ul].split[.split--divided] +// %[li].split-item +// .split-cell[.split-cell--fluid] +// .split-cell[.split-cell--fixed] +// +// ************************************* + +.split + list-style-type: none + margin: 0 + padding: 0 + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Divided ----- // + +.split--divided + + .split-item + border-bottom: $b-border + padding-bottom: $split-space + &:last-child + border-bottom: 0 + padding-bottom: 0 + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Split Item ----- // + +.split-item + display: table + width: 100% + img + max-width: none + +// ----- Split Item ----- // + +.split-cell + display: table-cell + +// Fixed width + +.split-cell--fixed + white-space: nowrap + +// Fluid width + +.split-cell--fluid + width: 10000px From a13abe422dabd8e6209d84a27e808f0aa7526af9 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 10:55:30 -0400 Subject: [PATCH 048/195] Update CHANGELOG.md --- CHANGELOG.md | 222 ++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 183 insertions(+), 39 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c15d1b1..6348024 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,44 +1,114 @@ -## 2.0.0 +v2.0.0 - 2014-07-01 +------------------- + +### Added + +- **Foundation** functions, extends, helpers +- Several **Components** + +### Removed + +- JS components + +### Fixed -- Remove JS components -- Remove the docs -- Add additional helpers - Rename **Helpers** to **Foundation** -- Rename **Modules** to **Structures** -- Add **Foundation** functions +- Rename **Modules** to **Components** + +v1.4.1 - 2014-07-30 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Security vulnerability in hash URLs component by sanitizing `window.location.hash` + +v1.4.0 - 2014-07-10 +------------------- + +### Added + +- New **Helpers - Extends** file + +### Removed + +- Nothing + +### Fixed + +- Nothing + +v1.3.1 - 2014-07-04 +------------------- -## 1.4.1 -**July 30, 2013** +### Added -- Fix security vulnerability in hash URLs component by sanitizing `window.location.hash` +- Nothing -## 1.4.0 -**July 10, 2013** +### Removed -- Add new **Helpers - Extends** file +- Nothing -## 1.3.1 -**July 4, 2013** +### Fixed - Refactor hash URL component -## 1.3.0 -**July 4, 2013** +v1.3.0 - 2014-07-04 +------------------- + +### Added - Add new bucket module -## 1.2.1 -**June 27, 2013** +### Removed + +- Nothing + +### Fixed + +- Nothing + +v1.3.0 - 2014-06-27 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed - Update to MVCSS v3.0.1 (new comment hierarchy) -## 1.2.0 -**May 17, 2013** +v1.2.0 - 2014-05-17 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed - Convert $.hashURLs to a HashURLs CoffeeScript class -## 1.1.0 -**May 16, 2013** +v1.1.0 - 2014-05-16 +------------------- + +### Added - Better defaults for **Modules - Button** - Better defaults for **Modules - Flag** @@ -48,47 +118,121 @@ - Better defaults for **Modules - Tab** - Remove `.tab-content` from **Modules - Tab** - Better defaults for **Modules - Table** + +### Removed + - Remove `border-collapse` and `border-spacing` from **Modules - Table** because those are set in `Normalize` -## 1.0.0 -**May 15, 2013** +### Fixed + +- Nothing + +v1.0.0 - 2014-05-16 +------------------- + +### Added -- Strip full application down to `modules`, `components`, and `helpers` -- Remove placeholder modules - Add default variables to all modules - Add new flag module -## 0.9.0 -**March 8, 2013** +### Removed + +- Strip full application down to `modules`, `components`, and `helpers` +- Remove placeholder modules + +### Fixed + +- Nothing + +v0.9.0 - 2014-03-08 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed - Fix incorrect version -## 0.8.2 -**March 8, 2013** +v0.8.2 - 2014-03-08 +------------------- + +### Added - Add `retina-image` mixin - Comment headings for the mixins + +### Removed + - Remove unnecessary context font size on the base paragraphs -## 0.8.1 -**March 6, 2013** +### Fixed + +- Nothing + +v0.8.1 - 2014-03-08 +------------------- + +### Added - Add `.is-active` state to `.list--block` modifier + +### Removed + +- Nothing + +### Fixed + - Update `.list` variables -## 0.8.0 -**March 6, 2013** +v0.8.1 - 2014-03-06 +------------------- + +### Added - Add a `.list--block` modifier to the `.list` module - Add a **Typography** module -- Fix an incorrect comment heading -## 0.7.1 -**March 1, 2013** +### Removed + +- Nothing + +### Fixed + +- Incorrect comment heading + +v0.7.1 - 2014-03-01 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed - Adjust the `.grid` module to account for a bug in WebKit -## 0.7.0 -**February 22, 2013** +v0.7.0 - 2014-02-22 +------------------- + +### Added - Initial version applied + +### Removed + +- Nothing + +### Fixed + +- Nothing + From e7bcf03a011cc0c6981e689710d641ecd1c6a1eb Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 1 Jul 2014 13:49:31 -0400 Subject: [PATCH 049/195] Add Changelog title heading --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6348024..4c07c5d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +Changelog +========= + v2.0.0 - 2014-07-01 ------------------- From fcacc146c8a2863c95eabca4b552844777d6f1bc Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 15:05:08 -0400 Subject: [PATCH 050/195] Update README.md --- README.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/README.md b/README.md index 02fdc80..8af122d 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,67 @@ Components Choose the Sass components from `/components` to include in your [MVCSS](http://mvcss.github.io/) project. +### Example + +```sass +// ************************************* +// +// Component +// -> Description +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .component[.component--modifier](.is-state)(.has-context) +// .component-scaffolding +// +// ************************************* + +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ... + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +// ... (with the !default flag) + +// ----- Sizing ----- // + +// ... (with the !default flag) + +// ------------------------------------- +// Base +// ------------------------------------- + +.component + // ... + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Modifier Name ----- // + +.component--modifier + // ... + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Scaffolding Name ----- // + +.component-scaffolding + // ... +``` + Documentation ------------- From e3ccbc9d86bcb1474146271f36b29f675b713fd7 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 15:05:57 -0400 Subject: [PATCH 051/195] Add bordered list to the list component --- CHANGELOG.md | 15 +++++++++++++++ components/_list.sass | 29 +++++++++++++++++++++++------ 2 files changed, 38 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c07c5d..9fa4943 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.0.1 - 2014-07-01 +------------------- + +### Added + +- Bordered list style to the list component + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.0.0 - 2014-07-01 ------------------- diff --git a/components/_list.sass b/components/_list.sass index 79db053..be1cd24 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -7,7 +7,7 @@ // Template (Haml) // ------------------------------------- // -// %ul.list[.list--inline|object|styled|styled--numbered] +// %ul.list[.list--bordered|inline|object|styled|styled--numbered] // %li.list-item List Item // %li.list-item List Item // @@ -26,7 +26,13 @@ // Variables // ------------------------------------- -$list-space: 1.25em +// ----- Colors ----- // + +$list-border: 1px solid #ddd !default + +// ----- Sizing ----- // + +$list-space: 1.25em !default // ------------------------------------- // Base @@ -41,11 +47,22 @@ $list-space: 1.25em // Modifiers // ------------------------------------- +// ----- Bordered ----- // + +.list--bordered + + > .list-item + border-bottom: $list-border + padding-bottom: $list-space + &:last-child + border-bottom: 0 + padding-bottom: 0 + // ----- Inline ----- // .list--inline - .list-item + > .list-item display: inline margin-right: $list-space &:last-child @@ -56,7 +73,7 @@ $list-space: 1.25em .list--object @extend .group - .list-item + > .list-item float: left margin-right: $list-space &:last-child @@ -67,7 +84,7 @@ $list-space: 1.25em .list--styled padding-left: $list-space - .list-item + > .list-item display: list-item list-style-type: disc @@ -75,7 +92,7 @@ $list-space: 1.25em .list--styled--numbered - .list-item + > .list-item list-style-type: decimal // ------------------------------------- From 14417d633bf7f9bfb0f5131ff8d9dcabf56d448d Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 18:40:23 -0400 Subject: [PATCH 052/195] Add better comments for components --- CHANGELOG.md | 15 +++++++++++++++ components/_button.sass | 11 +++++++++++ components/_form.sass | 10 ++++++++-- components/_list.sass | 2 +- components/_panel.sass | 4 ++-- components/_progress.sass | 2 ++ components/_table.sass | 8 +++++++- components/_thumb.sass | 2 ++ 8 files changed, 48 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fa4943..e986f4b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.0.2 - 2014-07-01 +------------------- + +### Added + +- Better comments for components + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.0.1 - 2014-07-01 ------------------- diff --git a/components/_button.sass b/components/_button.sass index 1251ff0..03c98f0 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -15,15 +15,26 @@ // Variables // ------------------------------------- +// ----- Colors ----- // + $btn--a-background: #4e4e5b !default $btn--a-color: #fff !default $btn--b-background: lighten($btn--a-background, 45%) !default $btn--b-color: #4e4e5b !default + +// ----- Borders ----- // + $btn-borderRadius: 3px !default + +// ----- Typography ----- // + $btn-fontSize: 100% !default $btn--s-fontSize: 90% !default $btn--l-fontSize: 110% !default $btn-lineHeight: 2.5 !default + +// ----- Sizing ----- // + $btn-space: 2.5em !default // ------------------------------------- diff --git a/components/_form.sass b/components/_form.sass index 3369d87..13246c4 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -32,11 +32,17 @@ $form-input-background: #fff !default $form-input-borderColor: #ddd !default $form-input-focus-borderColor: #4e4e5b !default -// ----- Settings ----- // +// ----- Borders ----- // $form-borderRadius: 2px !default -$form-fontSize-m: 90% !default $form-input-border: 2px solid $form-input-borderColor !default + +// ----- Typography ----- // + +$form-fontSize-m: 90% !default + +// ----- Sizing ----- // + $form-space: 1.25em !default $form-space-xs: 0.25 * $form-space !default $form-space-s: 0.5 * $form-space !default diff --git a/components/_list.sass b/components/_list.sass index be1cd24..979489c 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -26,7 +26,7 @@ // Variables // ------------------------------------- -// ----- Colors ----- // +// ----- Borders ----- // $list-border: 1px solid #ddd !default diff --git a/components/_panel.sass b/components/_panel.sass index 7604852..d8f4867 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -35,17 +35,17 @@ // Variables // ------------------------------------- -// ----- Sizes ----- // +// ----- Sizing ----- // $panel-s: 56em !default $panel-m: 64em !default $panel-l: 82em !default +$panel-space: 1.25em !default // ----- Settings ----- // $panel-defaults: 'tablet' $panel-s, 'desk' $panel-m, 'wide' $panel-l !default $panel-columns: 5 !default -$panel-space: 1.25em !default // ------------------------------------- // Base diff --git a/components/_progress.sass b/components/_progress.sass index 1049c15..95a8fa8 100644 --- a/components/_progress.sass +++ b/components/_progress.sass @@ -24,6 +24,8 @@ // Variables // ------------------------------------- +// ----- Colors ----- // + $progress-background: #fff !default $progress-bar-background: #4e4e5b !default diff --git a/components/_table.sass b/components/_table.sass index d53dc1e..bc69ee0 100644 --- a/components/_table.sass +++ b/components/_table.sass @@ -28,13 +28,19 @@ $table-borderColor: #ddd !default $table--striped-row-background: #eee !default -// ----- Settings ----- // +// ----- Borders ----- // $table-border: 2px solid $table-borderColor !default $table-data-borderWidth: 1px !default + +// ----- Typography ----- // + $table-fontSize-s: 75% !default $table-fontSize-m: 90% !default $table-lineHeight: 1.5 !default + +// ----- Sizing ----- // + $table-space: 1.25em !default $table-space-s: 0.5 * $table-space !default diff --git a/components/_thumb.sass b/components/_thumb.sass index c9def71..43c3007 100644 --- a/components/_thumb.sass +++ b/components/_thumb.sass @@ -15,6 +15,8 @@ // Variables // ------------------------------------- +// ----- Borders ----- // + $thumb-borderRadius: 4px !default // ------------------------------------- From dc66ce4a705e468a5ada2bd8a5a399540ee24ab2 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 18:43:51 -0400 Subject: [PATCH 053/195] Update README.md --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8af122d..cc3f131 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Components Choose the Sass components from `/components` to include in your [MVCSS](http://mvcss.github.io/) project. -### Example +### Authoring Example ```sass // ************************************* @@ -76,3 +76,8 @@ Documentation ------------- The documentation, for anything that requires more full documentation than the source file, is included in `/docs`. + +Versioning +---------- + +We use [Semantic Versioning](http://semver.org) for all versioning. From 4f4f1ac579cbc4505b5ba2eadfe7d22618c948dc Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 18:49:53 -0400 Subject: [PATCH 054/195] Add better comments for tools --- CHANGELOG.md | 15 +++++++++++++++ foundation/_tools.sass | 5 +++++ 2 files changed, 20 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e986f4b..fea77f8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.0.3 - 2014-07-01 +------------------- + +### Added + +- Better comments for tools + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.0.2 - 2014-07-01 ------------------- diff --git a/foundation/_tools.sass b/foundation/_tools.sass index 341e172..fdba705 100644 --- a/foundation/_tools.sass +++ b/foundation/_tools.sass @@ -9,7 +9,12 @@ // Variables // ------------------------------------- +// ----- Borders ----- // + $b-border: 2px solid #ddd !default + +// ----- Sizing ----- // + $b-space: 1.25em !default // ------------------------------------- From 6f15c33dd4580ebb6087c8fe51410b0320662394 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 18:50:11 -0400 Subject: [PATCH 055/195] Update README.md --- README.md | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/README.md b/README.md index cc3f131..279ca91 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,62 @@ Foundation Choose the Sass extends, functions, and mixins from `/foundation` to include in your [MVCSS](http://mvcss.github.io/) project. +### Authoring Example + +**Extends** + +```sass +// ------------------------------------- +// Extend Name +// ------------------------------------- + +.extend + // ... +``` + +**Functions** + +```sass +// ------------------------------------- +// Funcation Name +// -> Description +// +// $arg - the argument description +// ------------------------------------- + +@function name($arg) + // ... +``` + +**Mixins** + +```sass +// ------------------------------------- +// +// Mixin Name +// -> Description +// +// ------------------------------------- +// +// $arg - the argument description +// +// ------------------------------------- + +=name($arg) + // ... +``` + +**Tools** + +```sass +// ------------------------------------- +// Tool Section Name +// ------------------------------------- + +.name + // ... +``` + Components ---------- From 4ced6c640f3c7a4c70a6a68e9a4346e34c158045 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 18:50:51 -0400 Subject: [PATCH 056/195] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 279ca91..1002b37 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ Choose the Sass extends, functions, and mixins from `/foundation` to include in ```sass // ------------------------------------- -// Funcation Name +// Function Name // -> Description // // $arg - the argument description From 1054027b5a1eb1a5ca3a25f77a357712a881fc94 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 1 Jul 2014 18:59:48 -0400 Subject: [PATCH 057/195] Add better defaults for the panel component --- CHANGELOG.md | 15 +++++++++++++++ components/_panel.sass | 14 ++++++++------ docs/components/panel.md | 24 +++++++++++++----------- 3 files changed, 36 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fea77f8..df18d22 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.0.4 - 2014-07-01 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Better defaults for the panel component + v2.0.3 - 2014-07-01 ------------------- diff --git a/components/_panel.sass b/components/_panel.sass index d8f4867..25519d5 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -7,7 +7,7 @@ // Template (Haml) // ------------------------------------- // -// .panel[.panel--scroll|top--1of4|top--tablet--1of2|etc.] +// .panel[.panel--scroll|top--1of4|top--s--1of2|etc.] // .panel-content // // ************************************* @@ -35,18 +35,20 @@ // Variables // ------------------------------------- -// ----- Sizing ----- // +// ----- Breakpoint ----- // -$panel-s: 56em !default +$panel-s: 44em !default $panel-m: 64em !default -$panel-l: 82em !default -$panel-space: 1.25em !default // ----- Settings ----- // -$panel-defaults: 'tablet' $panel-s, 'desk' $panel-m, 'wide' $panel-l !default +$panel-defaults: 's' $panel-s, 'm' $panel-m !default $panel-columns: 5 !default +// ----- Sizing ----- // + +$panel-space: 1.25em !default + // ------------------------------------- // Base // ------------------------------------- diff --git a/docs/components/panel.md b/docs/components/panel.md index 9699689..791691b 100644 --- a/docs/components/panel.md +++ b/docs/components/panel.md @@ -43,40 +43,40 @@ Responsiveness If you want your panels to adapt responsively, you just need to add additional modifiers. For example: ```html -
+
-
+
``` -Now, at the `desk` breakpoint, which is defined in the variables (covered below), each `panel` will be sized at `50%` on their respective side. +Now, at the `m` breakpoint, which is defined in the variables (covered below), each `panel` will be sized at `50%` on their respective side. ### Vertical & Horizontal Adjustments You can also make vertical and horizontal adjustments responsively. ```html -
+
-
+
``` -Now we have a set of two panels that are 25/75 stacked horizontally until the `desk` size, and then they convert to vertical 50/50. Simple as that. +Now we have a set of two panels that are 25/75 stacked horizontally until the `m` size, and then they convert to vertical 50/50. Simple as that. Customization ------------- @@ -88,16 +88,18 @@ There are variables at the top of the file that you can overwrite in your `_conf // Variables // ------------------------------------- -// ----- Sizes ----- // +// ----- Breakpoints ----- // -$panel-s: 56em !default +$panel-s: 44em !default $panel-m: 64em !default -$panel-l: 82em !default // ----- Settings ----- // -$panel-defaults: 'tablet' $panel-s, 'desk' $panel-m, 'wide' $panel-l !default +$panel-defaults: 's' $panel-s, 'm' $panel-m !default $panel-columns: 5 !default -$panel-whitespace: 1.25em !default + +// ----- Sizing ----- // + +$panel-space: 1.25em !default ``` From 6efc91958ad0e15b100a3c866cebfec4a6375bb4 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 2 Jul 2014 08:33:33 -0400 Subject: [PATCH 058/195] Change List modifier name --- components/_list.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/_list.sass b/components/_list.sass index 979489c..116aa47 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -47,9 +47,9 @@ $list-space: 1.25em !default // Modifiers // ------------------------------------- -// ----- Bordered ----- // +// ----- Divided ----- // -.list--bordered +.list--divided > .list-item border-bottom: $list-border From 6792f51c1ed944adeda25f76c14c182026cb8e14 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 2 Jul 2014 08:34:04 -0400 Subject: [PATCH 059/195] Update Split Component - Add variables - Fix sub-heading --- components/_split.sass | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/components/_split.sass b/components/_split.sass index 19a1b43..507833d 100644 --- a/components/_split.sass +++ b/components/_split.sass @@ -14,6 +14,28 @@ // // ************************************* +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$split-borderColor: #9a9aa8 !default + +// ----- Borders & Box Shadow ----- // + +$split-borderStyle: solid !default +$split-borderWidth: 2px !default +$split-border: $split-borderWidth $split-borderStyle $split-borderColor !default + +// ----- Sizing ----- // + +$split-space: 0.75em !default + +// ------------------------------------- +// Base +// ------------------------------------- + .split list-style-type: none margin: 0 @@ -28,7 +50,7 @@ .split--divided .split-item - border-bottom: $b-border + border-bottom: $split-border padding-bottom: $split-space &:last-child border-bottom: 0 @@ -46,7 +68,7 @@ img max-width: none -// ----- Split Item ----- // +// ----- Split Cell ----- // .split-cell display: table-cell From 756c70ff29565bc110b8df608314b2dd279910fc Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 2 Jul 2014 08:35:37 -0400 Subject: [PATCH 060/195] Add Split Component --- components/_pillar.sass | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 components/_pillar.sass diff --git a/components/_pillar.sass b/components/_pillar.sass new file mode 100644 index 0000000..326b2ec --- /dev/null +++ b/components/_pillar.sass @@ -0,0 +1,41 @@ +// ************************************* +// +// Pillar +// -> Vertically capped container +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .pillar +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$pillar-borderColor: #9a9aa8 !default + +// ----- Borders & Box Shadow ----- // + +$pillar-borderStyle: solid !default +$pillar-borderWidth: 2px !default +$pillar-border: $pillar-borderWidth $pillar-borderStyle $pillar-borderColor !default + +// ----- Sizing ----- // + +$pillar-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.pillar + border-bottom: $pillar-border + border-top: $pillar-border + padding-bottom: $pillar-space + padding-top: $pillar-space From 062ed0ce3dd5fda296f780d4bda4b96d16656abf Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 2 Jul 2014 08:38:11 -0400 Subject: [PATCH 061/195] Update CHANGELOG.md --- CHANGELOG.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index df18d22..67ba6c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ Changelog ========= +v2.1.0 - 2014-07-02 +------------------- + +### Added + +- Pillar Component +- Split varialbes + +### Removed + +- Nothing + +### Fixed + +- `.list--bordered` now `.list-divided` + v2.0.4 - 2014-07-01 ------------------- From 66dfab7882e1d2672e79d6562880f92360aba192 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 2 Jul 2014 08:39:06 -0400 Subject: [PATCH 062/195] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 67ba6c4..89f7ee8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ v2.1.0 - 2014-07-02 ### Added - Pillar Component -- Split varialbes +- Split variables ### Removed From 94b35256a8f2974d561809f483b62772ec10cac7 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 19 Jul 2014 12:18:49 -0400 Subject: [PATCH 063/195] Add opposite-position function Also, adds the function to the panel Component for internal use. --- CHANGELOG.md | 17 ++++++++++++++++- components/_panel.sass | 16 ++++++++++++++++ foundation/_functions.sass | 17 +++++++++++++++++ 3 files changed, 49 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 89f7ee8..0929e99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.1.1 - 2014-07-19 +------------------- + +### Added + +- `opposite-position()` function + +### Removed + +- Nothing + +### Fixed + +- Added `opposite-position()` function to panel Component + v2.1.0 - 2014-07-02 ------------------- @@ -30,7 +45,7 @@ v2.0.4 - 2014-07-01 ### Fixed -- Better defaults for the panel component +- Better defaults for the panel Component v2.0.3 - 2014-07-01 ------------------- diff --git a/components/_panel.sass b/components/_panel.sass index 25519d5..ea7ae76 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -12,6 +12,22 @@ // // ************************************* +// ------------------------------------- +// Functions +// ------------------------------------- + +// ----- Opposite Position ----- // + +@function opposite-position($side) + @if $side == 'top' + @return 'bottom' + @if $side == 'bottom' + @return 'top' + @if $side == 'left' + @return 'right' + @if $side == 'right' + @return 'left' + // ------------------------------------- // Helpers // ------------------------------------- diff --git a/foundation/_functions.sass b/foundation/_functions.sass index 27c3039..61488fd 100644 --- a/foundation/_functions.sass +++ b/foundation/_functions.sass @@ -4,6 +4,23 @@ // // ************************************* +// ------------------------------------- +// Opposite Position +// -> Returns the opposite side +// +// $side - the side to return the opposite of +// ------------------------------------- + +@function opposite-position($side) + @if $side == 'top' + @return 'bottom' + @if $side == 'bottom' + @return 'top' + @if $side == 'left' + @return 'right' + @if $side == 'right' + @return 'left' + // ------------------------------------- // Rem // -> Converts a pixel value into a rem From d780277eab38597ab868ee0a0a35cf06c94f9b9d Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 19 Jul 2014 13:33:02 -0400 Subject: [PATCH 064/195] Fix comment in panel Component --- components/_panel.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_panel.sass b/components/_panel.sass index ea7ae76..639fb13 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -51,7 +51,7 @@ // Variables // ------------------------------------- -// ----- Breakpoint ----- // +// ----- Breakpoints ----- // $panel-s: 44em !default $panel-m: 64em !default From 781a269992cab9d55d1ab2ca57c5b475c1f3b6ff Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 23 Jul 2014 07:34:46 -0400 Subject: [PATCH 065/195] Add size mixin, remove retina-image mixin --- CHANGELOG.md | 15 +++++++++++++++ foundation/_mixins.sass | 19 ++++++++++++------- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0929e99..a6752f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.2.0 - 2014-07-23 +------------------- + +### Added + +- `size` mixin + +### Removed + +- `retina-image` mixin + +### Fixed + +- Nothing + v2.1.1 - 2014-07-19 ------------------- diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index 580a770..b56ebef 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -63,12 +63,17 @@ @content // ------------------------------------- -// Retina-image +// +// Size +// -> Outputs width/height properties +// +// ------------------------------------- +// +// $width - the element width +// $height - the element height +// // ------------------------------------- -// @import "compass" -> required - -=retina-image($img) - @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) - background-image: image-url($img) - background-size: image-width($img) / 2 image-height($img) / 2 +=size($width, $height: $width) + height: $height + width: $width From 4f270a0a0c674db8ca28724e6445d84ca04ea858 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 28 Jul 2014 08:49:47 -0400 Subject: [PATCH 066/195] Simplify Split Component - Remove `split-cell` modifiers - Add first and last-child selectors to `split-cell` --- CHANGELOG.md | 15 +++++++++++++++ components/_split.sass | 18 ++++++------------ 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a6752f2..0f0f282 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.2.1 - 2014-07-28 +------------------- + +### Added + +- First and last-child selectors to `split-cell` + +### Removed + +- `split-cell` modifiers + +### Fixed + +- Nothing + v2.2.0 - 2014-07-23 ------------------- diff --git a/components/_split.sass b/components/_split.sass index 507833d..4eb33dc 100644 --- a/components/_split.sass +++ b/components/_split.sass @@ -9,8 +9,8 @@ // // %[ul].split[.split--divided] // %[li].split-item -// .split-cell[.split-cell--fluid] -// .split-cell[.split-cell--fixed] +// .split-cell +// .split-cell // // ************************************* @@ -72,13 +72,7 @@ $split-space: 0.75em !default .split-cell display: table-cell - -// Fixed width - -.split-cell--fixed - white-space: nowrap - -// Fluid width - -.split-cell--fluid - width: 10000px + &:first-child + width: 10000px + &:last-child + white-space: nowrap From 0af48138d31e9f4222fd64161df7cf802cc413b9 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 28 Jul 2014 10:43:34 -0400 Subject: [PATCH 067/195] Remove boxSizing extend from Form Component Firefox now supports the `box-sizing` property, so this is no longer necessary. --- CHANGELOG.md | 15 +++++++++++++++ components/_form.sass | 10 +--------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f0f282..fe1af1f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.2.2 - 2014-07-28 +------------------- + +### Added + +- Nothing + +### Removed + +- `boxSizing` extend in Form Component + +### Fixed + +- Nothing + v2.2.1 - 2014-07-28 ------------------- diff --git a/components/_form.sass b/components/_form.sass index 13246c4..b66fbed 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -14,14 +14,6 @@ // // ************************************* -// ------------------------------------- -// Helpers -// ------------------------------------- - -.boxSizing - -moz-box-sizing: border-box - box-sizing: border-box - // ------------------------------------- // Variables // ------------------------------------- @@ -88,10 +80,10 @@ $form-space-s: 0.5 * $form-space !default // ----- Input ----- // .form-input - @extend .boxSizing background: $form-input-background border: $form-input-border border-radius: $form-borderRadius + box-sizing: border-box font-size: 100% padding: $form-space-s position: relative From 00af163f149a83f185ec24b8660373a0de163acb Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 29 Jul 2014 08:50:34 -0400 Subject: [PATCH 068/195] Remove boxSizing extend in Panel Component --- CHANGELOG.md | 15 +++++++++++++++ components/_panel.sass | 8 +------- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fe1af1f..4790d6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.2.3 - 2014-07-29 +------------------- + +### Added + +- Nothing + +### Removed + +- `boxSizing` extend in Panel Component + +### Fixed + +- Nothing + v2.2.2 - 2014-07-28 ------------------- diff --git a/components/_panel.sass b/components/_panel.sass index 639fb13..f533bca 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -32,12 +32,6 @@ // Helpers // ------------------------------------- -// ----- Box Sizing ----- // - -.boxSizing - -moz-box-sizing: border-box - box-sizing: border-box - // ----- Stretch ----- // .stretch @@ -70,8 +64,8 @@ $panel-space: 1.25em !default // ------------------------------------- .panel - @extend .boxSizing @extend .stretch + box-sizing: border-box overflow: hidden // ------------------------------------- From 8896a3c134874e1110336fea47a48fe5751e63b0 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 29 Jul 2014 08:52:29 -0400 Subject: [PATCH 069/195] Update Panel comment header --- components/_panel.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_panel.sass b/components/_panel.sass index f533bca..a9cdff4 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -1,7 +1,7 @@ // ************************************* // // Panel -// -> Sticky panels +// -> Sticky panel // // ------------------------------------- // Template (Haml) From a501b463a3dc2552ff83c4200454dcf1a8beb06d Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 29 Jul 2014 09:25:54 -0400 Subject: [PATCH 070/195] Add new Bar Component --- CHANGELOG.md | 15 ++++++++ components/_bar.sass | 87 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 102 insertions(+) create mode 100644 components/_bar.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index 4790d6d..e30699c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.3.0 - 2014-07-29 +------------------- + +### Added + +- New Bar Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.2.3 - 2014-07-29 ------------------- diff --git a/components/_bar.sass b/components/_bar.sass new file mode 100644 index 0000000..75b0f44 --- /dev/null +++ b/components/_bar.sass @@ -0,0 +1,87 @@ +// ************************************* +// +// Bar +// -> Sticky bar +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// (.has-bar|bar--content) +// +// .bar[.bar--fixed|header|footer|n|s|e|w] +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$bar-background: #333 !default + +// ----- Sizing ----- // + +$bar-height: 50px !default +$bar-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.bar + background: $bar-background + box-sizing: border-box + height: $bar-height + line-height: $bar-height + padding: 0 $bar-space + position: absolute + width: 100% + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Fixed ----- // + +.bar--fixed + position: fixed + +// ----- Positioning ----- // + +.bar--n + top: 0 + +.bar--s + bottom: 0 + +.bar--e + right: 0 + +.bar--w + left: 0 + +// ----- Types ----- // + +.bar--header + @extend .bar--n + @extend .bar--e + @extend .bar--w + +.bar--footer + @extend .bar--s + @extend .bar--e + @extend .bar--w + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-bar + padding-top: $bar-height + +.has-bar--content + margin-top: $bar-space + From c32b6a0dbb6bdbb81fe4b303295db16cdbf17335 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 29 Jul 2014 09:57:59 -0400 Subject: [PATCH 071/195] Remove the line-height from the Bar Component --- CHANGELOG.md | 15 +++++++++++++++ components/_bar.sass | 1 - 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e30699c..4aa9310 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.3.1 - 2014-07-29 +------------------- + +### Added + +- Nothing + +### Removed + +- The `line-height` from the Bar Component + +### Fixed + +- Nothing + v2.3.0 - 2014-07-29 ------------------- diff --git a/components/_bar.sass b/components/_bar.sass index 75b0f44..75b30f3 100644 --- a/components/_bar.sass +++ b/components/_bar.sass @@ -35,7 +35,6 @@ $bar-space: 1.25em !default background: $bar-background box-sizing: border-box height: $bar-height - line-height: $bar-height padding: 0 $bar-space position: absolute width: 100% From 7cae000e64f6d6bb8b3fb3b5b4f964bc876dbad4 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 30 Jul 2014 06:51:54 -0400 Subject: [PATCH 072/195] Remove 'codekit-config.json' from .gitignore --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 86b73e2..4b11432 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,2 @@ .sass-cache .DS_Store -codekit-config.json From 32703df0bd4a77f4d062b93639383e94f53be068 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 30 Jul 2014 08:26:25 -0400 Subject: [PATCH 073/195] Add position relative to bar component --- CHANGELOG.md | 15 +++++++++++++++ components/_bar.sass | 1 + 2 files changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4aa9310..9af0d3e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.3.2 - 2014-07-30 +------------------- + +### Added + +- `position: relative` to Bar Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.3.1 - 2014-07-29 ------------------- diff --git a/components/_bar.sass b/components/_bar.sass index 75b30f3..401626f 100644 --- a/components/_bar.sass +++ b/components/_bar.sass @@ -80,6 +80,7 @@ $bar-space: 1.25em !default .has-bar padding-top: $bar-height + position: relative .has-bar--content margin-top: $bar-space From 278ac3d7ee689b75ed857f40012617ce5fbec3c7 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 30 Jul 2014 09:47:34 -0400 Subject: [PATCH 074/195] Add Card Component There's a default Card Component in the MVCSS base, but this is a more built-out version that has sectioning (dividers), rows, etc. --- CHANGELOG.md | 15 ++++ components/_card.sass | 167 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 182 insertions(+) create mode 100644 components/_card.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index 9af0d3e..931564e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.4.0 - 2014-07-30 +------------------- + +### Added + +- Card Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.3.2 - 2014-07-30 ------------------- diff --git a/components/_card.sass b/components/_card.sass new file mode 100644 index 0000000..8c3f776 --- /dev/null +++ b/components/_card.sass @@ -0,0 +1,167 @@ +// ************************************* +// +// Card +// -> Individual style containers +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// (.has-card-item|card-row|card-section) +// +// .card[.card--xs|s|l|f] +// .card-row[.card-row--n|s] +// .card-section +// +// %a.card-item.btn{href: '#'} Button +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$card-background: #fff !default +$card-borderColor: #dedede !default +$card-row-background: #dedede !default + +// ----- Borders & Box Shadows ----- // + +$card-borderStyle: solid !default +$card-borderWidth: 1px !default +$card-border: $card-borderWidth $card-borderStyle $card-borderColor +$card-borderRadius: 3px !default +$card-boxShadow: 0 2px 0 rgba(#000, 0.15) !default + +// ----- Sizing ----- // + +$card-space: 1.25em !default +$card-space-xs: 0.25 * $card-space !default +$card-space-s: 0.5 * $card-space !default +$card-space-l: 2 * $card-space !default + +$card-sizes: 'xs', 's', 'l' !default +$card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.card + border-radius: $card-borderRadius + padding: $card-space + position: relative + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Sizes ----- // + +.card--f + padding: 0 + +@for $i from 1 through length($card-sizes) + .card--#{nth($card-sizes, $i)} + padding: nth($card-size-vars, $i) + + > .card-row + margin-left: -#{nth($card-size-vars, $i)} + margin-right: -#{nth($card-size-vars, $i)} + + > .card-row--n + margin-top: -#{nth($card-size-vars, $i)} + + > .card-row--s + margin-bottom: -#{nth($card-size-vars, $i)} + + > .card-section + margin-bottom: nth($card-size-vars, $i) + padding-top: nth($card-size-vars, $i) + &::after + left: -#{nth($card-size-vars, $i)} + right: -#{nth($card-size-vars, $i)} + +// ----- Theme ----- // + +.card--a + background: $card-background + box-shadow: $card-boxShadow + +.card--b + background: none + border: $card-border + box-shadow: none + +// ------------------------------------- +// Context +// ------------------------------------- + +// ----- Item ----- // + +.has-card-item + padding-bottom: 3 * $card-space + +// ----- Row ----- // + +.has-card-row + overflow: hidden + +// ----- Section ----- // + +.has-card-section + padding-top: 0 + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Item ----- // + +.card-item + bottom: $card-space + left: $card-space + position: absolute + right: $card-space + +// ----- Row ----- // + +.card-row + background: $card-row-background + margin-bottom: $card-space + margin-left: -$card-space + margin-right: -$card-space + padding: $card-space-s $card-space + +.card-row--n + border-bottom: $card-border + margin-bottom: $card-space + margin-top: -$card-space + +.card-row--s + border-top: $card-border + margin-bottom: -$card-space + margin-top: $card-space + +// ----- Section ----- // + +.card-section + margin-bottom: $card-space + padding-top: $card-space + position: relative + &:first-child + padding: 0 + &:last-child + margin: 0 + &::after + background: none + &::after + background: $card-borderColor + bottom: -$card-space + content: '' + height: $card-borderWidth + left: -$card-space + position: absolute + right: -$card-space From dd7fef454ccc318e51e9f7ad2c30ef07b7fc99a4 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 30 Jul 2014 09:55:37 -0400 Subject: [PATCH 075/195] Adjust Card Component comment --- components/_card.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_card.sass b/components/_card.sass index 8c3f776..5190f6b 100644 --- a/components/_card.sass +++ b/components/_card.sass @@ -9,7 +9,7 @@ // // (.has-card-item|card-row|card-section) // -// .card[.card--xs|s|l|f] +// .card[.card--a|b|xs|s|l|f] // .card-row[.card-row--n|s] // .card-section // From 5fe9d8dc68576b236837b259e3305988015f34ac Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 30 Jul 2014 10:00:23 -0400 Subject: [PATCH 076/195] Remove duplicate property on Card scaffolding --- CHANGELOG.md | 15 +++++++++++++++ components/_card.sass | 1 - 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 931564e..b1c8024 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.4.1 - 2014-07-30 +------------------- + +### Added + +- Nothing + +### Removed + +- Duplicate property on `.card-row` + +### Fixed + +- Nothing + v2.4.0 - 2014-07-30 ------------------- diff --git a/components/_card.sass b/components/_card.sass index 5190f6b..39ad075 100644 --- a/components/_card.sass +++ b/components/_card.sass @@ -137,7 +137,6 @@ $card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default .card-row--n border-bottom: $card-border - margin-bottom: $card-space margin-top: -$card-space .card-row--s From 24b1991348340fbd28663eaedf2b54e842ba9b72 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 30 Jul 2014 15:02:36 -0400 Subject: [PATCH 077/195] Add 'lr' list reset Extend --- CHANGELOG.md | 15 +++++++++++++++ foundation/_extends.sass | 9 +++++++++ 2 files changed, 24 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b1c8024..8cadb48 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.5.0 - 2014-07-30 +------------------- + +### Added + +- `.lr` Extend (list reset) + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.4.1 - 2014-07-30 ------------------- diff --git a/foundation/_extends.sass b/foundation/_extends.sass index f192c04..86e0f4e 100644 --- a/foundation/_extends.sass +++ b/foundation/_extends.sass @@ -24,6 +24,15 @@ overflow: visible visibility: visible +// ------------------------------------- +// List Reset +// ------------------------------------- + +.lr + list-style-type: none + margin: 0 + padding: 0 + // ------------------------------------- // Vertical/Horizontal Center // ------------------------------------- From 48616ef8b40ce5981633ba22db99cfa86d648e8a Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 6 Aug 2014 07:01:38 -0400 Subject: [PATCH 078/195] Update caret mixin - Update the comments - Replace the need for the Compass 'stretch' mixin --- CHANGELOG.md | 16 ++++++++++++++++ foundation/_mixins.sass | 12 +++++++++--- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8cadb48..a5b7759 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ Changelog ========= +v2.5.1 - 2014-08-06 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Comments for the `+caret` Mixin +- Replace need for `+stretch` Compass Mixin in `+caret` Mixin + v2.5.0 - 2014-07-30 ------------------- diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index b56ebef..20493a1 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -7,11 +7,13 @@ // ------------------------------------- // // Caret -// -> Returns the opposite side +// -> Creates a caret (arrow) icon // // ------------------------------------- // -// $side - the side to return the opposite of +// $side - the side the caret is on +// $size - the caret size +// $color - the caret color // // ------------------------------------- @@ -29,15 +31,19 @@ =caret($side, $size, $color) $opposite: opposite-position($side) - +stretch(50%, auto, auto, 50%) border: $size solid transparent border-#{$opposite}: $size solid $color border-#{$side}: 0 + bottom: auto content: '' display: block height: 0 + left: 50% margin: (-$size) 0 0 (-$size) margin-#{$side}: 0 + position: absolute + right: auto + top: 50% width: 0 #{$side}: -$size #{$opposite}: auto From 0779203eca8980dcd71e5a8efd9a3a9c11670c20 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 13 Aug 2014 18:04:00 -0400 Subject: [PATCH 079/195] Update button component, comments --- CHANGELOG.md | 16 ++++++++++++++++ components/_button.sass | 8 +++++--- components/_card.sass | 2 +- components/_form.sass | 2 +- components/_thumb.sass | 2 +- 5 files changed, 24 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a5b7759..07ff611 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ Changelog ========= +v2.5.2 - 2014-08-13 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Better variable setup for Button Component +- Better comments for Components + v2.5.1 - 2014-08-06 ------------------- diff --git a/components/_button.sass b/components/_button.sass index 03c98f0..134b8fa 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -1,7 +1,7 @@ // ************************************* // // Button -// -> Clickable controls +// -> Clickable control // // ------------------------------------- // Template (Haml) @@ -36,6 +36,8 @@ $btn-lineHeight: 2.5 !default // ----- Sizing ----- // $btn-space: 2.5em !default +$btn-space-s: 0.5 * $btn-space !default +$btn-space-l: 2 * $btn-space !default // ------------------------------------- // Base @@ -80,9 +82,9 @@ $btn-space: 2.5em !default .btn--s font-size: $btn--s-fontSize - padding: 0 (0.5 * $btn-space) + padding: 0 $btn-space-s .btn--l font-size: $btn--l-fontSize - padding: 0 (2 * $btn-space) + padding: 0 $btn-space-l diff --git a/components/_card.sass b/components/_card.sass index 39ad075..6cfe09a 100644 --- a/components/_card.sass +++ b/components/_card.sass @@ -1,7 +1,7 @@ // ************************************* // // Card -// -> Individual style containers +// -> Individual style container // // ------------------------------------- // Template (Haml) diff --git a/components/_form.sass b/components/_form.sass index b66fbed..f0f8a8f 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -1,7 +1,7 @@ // ************************************* // // Form -// -> Fields, selects, & such +// -> User input environment // // ------------------------------------- // Template (Haml) diff --git a/components/_thumb.sass b/components/_thumb.sass index 43c3007..6910fa3 100644 --- a/components/_thumb.sass +++ b/components/_thumb.sass @@ -1,7 +1,7 @@ // ************************************* // // Thumb -// -> Media elements +// -> Media element // // ------------------------------------- // Template (Haml) From cbb6a677db97d1fcd02aaa15fbf61d6a7eaa80ad Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 15 Aug 2014 08:29:31 -0400 Subject: [PATCH 080/195] Add responsive-tools pattern document --- docs/patterns/responsive-tools.md | 83 +++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 docs/patterns/responsive-tools.md diff --git a/docs/patterns/responsive-tools.md b/docs/patterns/responsive-tools.md new file mode 100644 index 0000000..fc0d44f --- /dev/null +++ b/docs/patterns/responsive-tools.md @@ -0,0 +1,83 @@ +Responsive Tools +================ + +As is the M.O. of the [Tools](http://mvcss.github.io/foundation/tools), we don't want to be forced to create too many new, unnecessary Structures for one-off alterations of styles. Additionally, with responsiveness, we have to make small one off changes at various viewport sizes. + +- Show a particular element until it hits a higher viewport, then hide it +- Float an element to a side once it gets to a higher viewport + +Etc. etc. + +Working Solution +---------------- + +As of now, we add responsive tool classes to handle this for us. For example: + +```sass +// ------------------------------------- +// Display +// ------------------------------------- + +.db + display: block +.di + display: inline +.dib + display: inline-block +.dn + display: none + +// ----- Responsive ----- // + ++respond-to($g-m) + + .db--m + display: block + ++respond-to($g-l) + + .db--l + display: block + +// ------------------------------------- +// Positioning +// ------------------------------------- + +// ----- Float ----- // + +.fl + float: left +.fr + float: right + +// Responsive + ++respond-to($g-m) + + .fr--m + float: right + ++respond-to($g-l) + + .fr--l + float: right +``` + +**Note**: This assumes you have `$g-m`, `$g-l`, and the `+respond-to` mixin set up in your project, which are set up in the base version of MVCSS. + +Usage +----- + +Now, in your markup, you can utilize these responsive tools, like so: + +```html +
+ +
+``` + +```html +
+ +
+``` From 138780caa9486f728f66f53c79f43ec32ac043c7 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 15 Aug 2014 08:31:10 -0400 Subject: [PATCH 081/195] Add icons pattern document --- docs/patterns/icons.md | 124 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 docs/patterns/icons.md diff --git a/docs/patterns/icons.md b/docs/patterns/icons.md new file mode 100644 index 0000000..ea98b6f --- /dev/null +++ b/docs/patterns/icons.md @@ -0,0 +1,124 @@ +Icons +===== + +Prerequisites +------------- + +Before getting started, you'll need [FontForge](http://fontforge.org). It's available on Homebrew: + + brew install fontforge --with-python --with-cairo --with-pango eot-utils + +Setup +----- + +In your `Gemfile`, add: + +```ruby +gem 'fontcustom' +``` + +Now, create a folder called `icons` in in `assets/fonts`. This will house Font Custom's configuration file, the Sass template, and the SVG files. + +`assets/fonts/icons/fontcustom.yml` + +```yml +# http://jaydenseric.com/blog/font-icons-like-a-boss-with-sass-and-font-custom +# https://github.com/FontCustom/fontcustom#configuration + +font_name: icons +no_hash: true +autowidth: true +output: + fonts: .. + _icon.sass: ../../stylesheets/components +templates: [_icon.sass] +``` + +`assets/fonts/icons/_icon.sass` + +```sass +// ************************************* +// +// Icon +// -> Based on: +// * http://jaydenseric.com/blog/font-icons-like-a-boss-with-sass-and-font-custom +// +// ************************************* + +@font-face + font-family: <%= font_name %> + src: font-url('<%= font_name %>.eot') + src: font-url('<%= font_name %>.eot?#iefix') format('embedded-opentype'), font-url('<%= font_name %>.woff') format('woff'), font-url('<%= font_name %>.ttf') format('truetype'), font-url('<%= font_name %>.svg#<%= font_name %>') format('svg') + font-weight: normal + font-style: normal + +i::before, +.icn::before + -moz-osx-font-smoothing: grayscale + -webkit-font-smoothing: antialiased + display: inline-block + font-family: "<%= font_name %>" + font-style: normal + font-weight: normal + speak: none + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +<% @glyphs.each do |name, value| %> +.icn--<%= name.to_s %>::before + content: "\<%= value[:codepoint].to_s(16) %>" +<% end %> +``` + +Note that this Sass file is treated like an ERB template - it'll compile into your `assets/stylesheets/components` directory, but changes and additions should be made to the root template file. + +`assets/stylesheets/application.sass` + +```sass +... + +// ------------------------------------- +// Components +// ------------------------------------- + +@import "components/icon" + +... + +``` + +SVG Guidelines +-------------- + +The best SVG files: + + * are placed on a **512 × 512** artboard (FontCustom will trim horizontal space for you, unless you tell it otherwise in your `fontcustom.yml` file.) + * are given a baseline of 448px from the top (cap height is at 64px from the top) + * have “squared” icons at a height of 384px and centered (i.e., flush with baseline & cap height) + * have circular icons at a height of *around* 432px (384 × 1.125) and centered *(this can be adjusted to taste according to the icon; see [Overshoot](http://en.wikipedia.org/wiki/Overshoot_(typography)))* + * do not exceed the edges of the artboard + * are fully *outlined* (meaning all overlapping shapes have been merged, no transparent shapes are present, all shapes are a solid color, and all strokes have been expanded + merged) + +Compile +------- + +Drop your SVG files into `assets/fonts/icons`. + +Navigate to your `assets/fonts/icons` directory in Terminal and run `fontcustom watch`. This'll keep an eye out for any changes or new additions, and recompile as necessary. + +Usage +----- + +With `arrow.svg`, you'd use this pattern: + +```haml +%i.icn--arrow{'aria-hidden' => 'true'} +``` + +or + +```haml +%h2.icn.icn--arrow A Header +``` From 02aeaeb06ee07ac70f73acf621f75977bdd0ca61 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 15 Aug 2014 08:32:18 -0400 Subject: [PATCH 082/195] Add bash-mvcss pattern document --- docs/patterns/bash-mvcss.md | 53 +++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 docs/patterns/bash-mvcss.md diff --git a/docs/patterns/bash-mvcss.md b/docs/patterns/bash-mvcss.md new file mode 100644 index 0000000..1a74f1d --- /dev/null +++ b/docs/patterns/bash-mvcss.md @@ -0,0 +1,53 @@ +Bash MVCSS +========== + +If you want to easily pull down and copy various files from MVCSS and the Library via the command line, this is how you can do it. + +Bash Functions +-------------- + +```bash +curl -s https://raw.githubusercontent.com/drewbarontini/dotfiles/master/bash/functions/mvcss >> ~/.bash_profile +``` + +Yes, it's a lot, but you can also, [like I do](https://github.com/drewbarontini/dotfiles/blob/master/bash_profile), create a `.bash` root directory and have a `functions` file in there. Then, in your `bash_profile`, use `source ~/.bash/functions` to pull that file in. + +Usage +----- + +That's it! Here's the interface for using it. + +To download a ZIP of MVCSS in the current directory, run: + +```bash +mvcss all +``` + +To pull a specific Foundation/Component/Structure file: + +```bash +mvcss components grid +``` + +To pull a specific Library file: + +```bash +mvcss-library components list +``` + +To copy a file to your clipboard: + +```bash +mvcss copy components grid +mvcss-library copy components list +``` + +### Aliases + +You can also shorten these up with some aliases. For example: + +```bash +alias mc='mvcss components' +``` + +Then, you can just run `mc grid` to get the grid component. From 71242a6b2c02e021c44431d85993712baac9ea5f Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 15 Aug 2014 08:33:14 -0400 Subject: [PATCH 083/195] Add sticky-footer pattern document --- docs/patterns/sticky-footer.md | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 docs/patterns/sticky-footer.md diff --git a/docs/patterns/sticky-footer.md b/docs/patterns/sticky-footer.md new file mode 100644 index 0000000..25cdea2 --- /dev/null +++ b/docs/patterns/sticky-footer.md @@ -0,0 +1,34 @@ +Sticky Footer +============= + +http://mystrd.at/modern-clean-css-sticky-footer/ + +`foundation/_settings.sass` + +```sass +$b-whitespace: 1.25em +$footer-height: 12.5em // ~200px +``` + +`foundation/_base.sass` + +```sass +html + min-height: 100% + position: relative + +body + margin-bottom: $footer-height + $b-whitespace +``` + +`structures/_footer.sass` + +```sass +.footer + bottom: 0 + left: 0 + height: $footer-height + position: absolute + right: 0 + width: 100% +``` From 44970e3b33ac27522c45e196fffa22141644ea79 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 18 Aug 2014 14:53:44 -0400 Subject: [PATCH 084/195] Add Collection Structure --- structures/_collection.sass | 69 +++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 structures/_collection.sass diff --git a/structures/_collection.sass b/structures/_collection.sass new file mode 100644 index 0000000..0c0c70e --- /dev/null +++ b/structures/_collection.sass @@ -0,0 +1,69 @@ +// ************************************* +// +// Collection +// -> Accumulation of items +// +// ------------------------------------- +// Dependencies +// ------------------------------------- +// +// - components/grid +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .g.collection[.collection--s|m|l--1of1|1of2|1of3|...] +// .g-b[.g-b--s|m|l--1of1|1of2|1of3|...].collection-item +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$collection-columns: 3 !default +$collection-defaults: 's' 30em, 'm' 50em, 'l' 64em !default +$collection-space: 1.25em !default + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +.collection-item + margin-bottom: $collection-space + +// ------------------------------------- +// Setup +// ------------------------------------- + +=collection-device-type($namespace: '', $breakpoint: null) + + @if $namespace != '' + [class*='collection#{$namespace}'] + + > .collection-item:nth-child(n) + clear: none + + %collection-clear#{$namespace} + @if $breakpoint == null + clear: left + @else + @media screen and (min-width: #{$breakpoint}) + clear: left + + @for $i from 1 through $collection-columns + + .collection#{$namespace}--1of#{$i} + + > .collection-item:nth-child(#{$i}n + 1) + @extend %collection-clear#{$namespace} + +// ------------------------------------- +// Creation +// ------------------------------------- + ++collection-device-type() + +@each $device in $collection-defaults + +collection-device-type("--#{nth($device, 1)}", nth($device, 2)) From f6a71276222e9a1e6a395d71d1c05f8dd4abf245 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 18 Aug 2014 14:54:21 -0400 Subject: [PATCH 085/195] Add Column Component --- components/_column.sass | 47 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 components/_column.sass diff --git a/components/_column.sass b/components/_column.sass new file mode 100644 index 0000000..1dd015b --- /dev/null +++ b/components/_column.sass @@ -0,0 +1,47 @@ +// ************************************* +// +// Column +// -> Adjacent vertical blocks +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .column[.column--|1|2|3|...] +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$column-columns: 4 !default +$column-defaults: 's' 30em, 'm' 50em, 'l' 64em !default +$column-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.column + column-gap: $column-space + +// ------------------------------------- +// Setup +// ------------------------------------- + +=column-device-type($namespace: '') + @for $i from 1 through $column-columns + .column--#{$namespace}#{$i} + columns: $i + +// ------------------------------------- +// Creation +// ------------------------------------- + ++column-device-type() + +@each $device in $column-defaults + @media screen and (min-width: nth($device, 2)) + +column-device-type("#{nth($device, 1)}--") From 7a21899c752fcda6f6dc1009bd5779c5abefc48a Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 18 Aug 2014 15:09:47 -0400 Subject: [PATCH 086/195] Add `respond-within` mixin --- foundation/_mixins.sass | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index 20493a1..a41bb27 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -68,6 +68,22 @@ @keyframes #{$name} @content +// ------------------------------------- +// +// Respond-within +// -> Generates a media query within a range +// +// ------------------------------------- +// +// $min - the initial breakpoint size +// $max - the larger breakpoint size +// $media - the media type ('screen', 'print', etc.) +// @content - the generated content within the mixin + +=respond-within($min, $max, $media: screen) + @media #{$media} and (min-width: $min) and (max-width: $max) + @content + // ------------------------------------- // // Size From 3f976755c6ab7c0641cf6afec342df63cdbce6ff Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 18 Aug 2014 15:13:55 -0400 Subject: [PATCH 087/195] Update CHANGELOG --- CHANGELOG.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 07ff611..007487c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,24 @@ Changelog ========= +v2.6.0 - 2014-08-18 +------------------- + +### Added + +- Column Component +- `structures` directory +- Collection Structure +- `respond-within` mixin + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.5.2 - 2014-08-13 ------------------- From 573fa33b2d192bc825d75cec244886e08f1f3ebf Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 18 Aug 2014 19:09:18 -0400 Subject: [PATCH 088/195] Update README.md --- README.md | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/README.md b/README.md index 1002b37..240095b 100644 --- a/README.md +++ b/README.md @@ -128,6 +128,78 @@ Choose the Sass components from `/components` to include in your [MVCSS](http:// // ... ``` +Structures +---------- + +Choose the Sass structures from `/structures` to include in your [MVCSS](http://mvcss.github.io/) project. + +### Authoring Example + +```sass +// ************************************* +// +// Structure +// -> Description +// +// ------------------------------------- +// Dependencies +// ------------------------------------- +// +// - components/grid +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .structure[.structure--modifier](.is-state)(.has-context) +// .structure-scaffolding +// +// ************************************* + +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ... + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +// ... (with the !default flag) + +// ----- Sizing ----- // + +// ... (with the !default flag) + +// ------------------------------------- +// Base +// ------------------------------------- + +.component + // ... + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Modifier Name ----- // + +.component--modifier + // ... + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Scaffolding Name ----- // + +.structure-scaffolding + // ... +``` + Documentation ------------- From df2d31a1a9b4e89b7d5aa6664a08dd253cf188b4 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 20 Aug 2014 15:22:59 -0400 Subject: [PATCH 089/195] Add Dropdown Component --- CHANGELOG.md | 15 +++ components/_dropdown.sass | 188 ++++++++++++++++++++++++++++++++++++ docs/components/dropdown.md | 71 ++++++++++++++ 3 files changed, 274 insertions(+) create mode 100644 components/_dropdown.sass create mode 100644 docs/components/dropdown.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 007487c..ba5c2ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.7.0 - 2014-08-20 +------------------- + +### Added + +- Dropdown Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.6.0 - 2014-08-18 ------------------- diff --git a/components/_dropdown.sass b/components/_dropdown.sass new file mode 100644 index 0000000..7b58181 --- /dev/null +++ b/components/_dropdown.sass @@ -0,0 +1,188 @@ +// ************************************* +// +// Dropdown +// -> Revealing menu +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .dropdown[.dropdown--floating|center](.is-active) +// %ul.dropdown-menu +// %li.dropdown-menu-item +// %a.dropdown-menu-item-link{ href: '#' } Menu Item +// %li.dropdown-menu-item +// %a.dropdown-menu-item-link{ href: '#' } Menu Item +// +// ************************************* + +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ----- Functions ----- // + +@function opposite-position($side) + @if $side == 'top' + @return 'bottom' + @if $side == 'bottom' + @return 'top' + @if $side == 'left' + @return 'right' + @if $side == 'right' + @return 'left' + +// ----- Mixins ----- // + +=caret($side, $size, $color) + $opposite: opposite-position($side) + border: $size solid transparent + border-#{$opposite}: $size solid $color + border-#{$side}: 0 + bottom: auto + content: '' + display: block + height: 0 + left: 50% + margin: (-$size) 0 0 (-$size) + margin-#{$side}: 0 + position: absolute + right: auto + width: 0 + #{$side}: -$size + #{$opposite}: auto + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$dropdown-menu-background: #333 !default +$dropdown-menu-item-link-hover-background: #555 !default +$dropdown-text-invert: #fff !default + +// ----- Borders ----- // + +$dropdown-borderColor: #555 !default +$dropdown-borderStyle: solid !default +$dropdown-borderWidth: 1px !default +$dropdown-border: $dropdown-borderWidth $dropdown-borderStyle $dropdown-borderColor !default +$dropdown-borderRadius: 3px !default + +// ----- Typography ----- // + +$dropdown-menu-item-fontSize: 85% !default + +// ----- Sizing ----- // + +$dropdown-space: 1.25em !default +$dropdown-space-s: 0.5 * $dropdown-space !default +$dropdown-space-l: 2 * $dropdown-space !default +$dropdown-width: 250px !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.dropdown + position: relative + + .dropdown-menu + height: 0 + opacity: 0 + overflow: hidden + transition: none + visibility: hidden + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Floating ----- // + +.dropdown--floating + + .dropdown-menu + border-radius: $b-borderRadius + margin-top: $b-space + transition: opacity 0.2s ease-in-out, top 0.3s ease-in-out + top: 65% + &::before + +caret(top, 10px, $dropdown-menu-background) + left: $b-space-l + z-index: 10 + + .dropdown-menu-item:first-child + + .dropdown-menu-item-link + border-top-left-radius: $dropdown-borderRadius + border-top-right-radius: $dropdown-borderRadius + +// ----- Position ----- // + +// Center + +.dropdown--center + display: inline-block + + .dropdown-menu + left: 50% + margin-left: -($dropdown-width * 0.5) + &::before + left: 50% + +// ------------------------------------- +// States +// ------------------------------------- + +// ----- Active ----- // + +.dropdown.is-active + + .dropdown-menu + height: auto + opacity: 1 + overflow: visible + top: 100% + visibility: visible + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Menu ----- // + +.dropdown-menu + background: $dropdown-menu-background + border-bottom-left-radius: $dropdown-borderRadius + border-bottom-right-radius: $dropdown-borderRadius + list-style-type: none + margin: 0 + padding: 0 + position: absolute + top: 100% + width: $dropdown-width + +// Scaffolding + +.dropdown-menu-item + font-size: $dropdown-menu-item-fontSize + margin: 0 + &:not(:last-child) + border-bottom: $dropdown-border + &:last-child + .dropdown-menu-item-link + border-bottom-left-radius: $dropdown-borderRadius + border-bottom-right-radius: $dropdown-borderRadius + +.dropdown-menu-item-link + border: 0 + color: $dropdown-text-invert + display: block + padding: $dropdown-space-s + transition: all 0.2s ease-in-out + &:hover, + &:focus + background: $dropdown-menu-item-link-hover-background + color: $dropdown-text-invert diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md new file mode 100644 index 0000000..0152be1 --- /dev/null +++ b/docs/components/dropdown.md @@ -0,0 +1,71 @@ +Dropdown +======== + +There are a few variants of the dropdown. + +Standard +-------- + +```html +
+ Button + +
+``` + +Floating +-------- + +```html +
+ Button + +
+``` + +### Centered + +```html +
+ Button + +
+``` + +JavaScript +---------- + +In CoffeeScript, you can use the following JavaScript to trigger your dropdown: + +```coffeescript +$('.js-dropdown-btn').on 'click', (e) -> + e.stopPropagation() + $(@).closest('.js-dropdown').toggleClass('is-active') + +$(document).on 'click', -> + $('.js-dropdown').removeClass('is-active') +``` + +**Note**: This should go in a document ready call. + From 2a07e3df959e648f1753eaedccfc2df0756e68f8 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 21 Aug 2014 18:57:03 -0400 Subject: [PATCH 090/195] Update dropdown.md --- docs/components/dropdown.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md index 0152be1..e028304 100644 --- a/docs/components/dropdown.md +++ b/docs/components/dropdown.md @@ -60,6 +60,7 @@ In CoffeeScript, you can use the following JavaScript to trigger your dropdown: ```coffeescript $('.js-dropdown-btn').on 'click', (e) -> + e.preventDefault() e.stopPropagation() $(@).closest('.js-dropdown').toggleClass('is-active') From 3fdb44971615b875b2487cd31eea1f536af6425e Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 21 Aug 2014 18:59:45 -0400 Subject: [PATCH 091/195] Add z-index to dropdown-menu in Dropdown Component --- CHANGELOG.md | 15 +++++++++++++++ components/_dropdown.sass | 1 + 2 files changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ba5c2ad..1649fce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.7.1 - 2014-08-21 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- `z-index` on Dropdown Component + v2.7.0 - 2014-08-20 ------------------- diff --git a/components/_dropdown.sass b/components/_dropdown.sass index 7b58181..185eda9 100644 --- a/components/_dropdown.sass +++ b/components/_dropdown.sass @@ -163,6 +163,7 @@ $dropdown-width: 250px !default position: absolute top: 100% width: $dropdown-width + z-index: 10 // Scaffolding From dcdda2343ae076a4e76025bd4598bb953e06f4c6 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 21 Aug 2014 19:12:41 -0400 Subject: [PATCH 092/195] Clean up Dropdown Component --- CHANGELOG.md | 15 +++++++++++++++ components/_dropdown.sass | 18 ++++++++---------- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1649fce..7f4a6f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.7.2 - 2014-08-21 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Minor cleanup of Dropdown Component + v2.7.1 - 2014-08-21 ------------------- diff --git a/components/_dropdown.sass b/components/_dropdown.sass index 185eda9..523a0ba 100644 --- a/components/_dropdown.sass +++ b/components/_dropdown.sass @@ -88,13 +88,6 @@ $dropdown-width: 250px !default .dropdown position: relative - .dropdown-menu - height: 0 - opacity: 0 - overflow: hidden - transition: none - visibility: hidden - // ------------------------------------- // Modifiers // ------------------------------------- @@ -104,13 +97,13 @@ $dropdown-width: 250px !default .dropdown--floating .dropdown-menu - border-radius: $b-borderRadius - margin-top: $b-space + border-radius: $dropdown-borderRadius + margin-top: $dropdown-space transition: opacity 0.2s ease-in-out, top 0.3s ease-in-out top: 65% &::before +caret(top, 10px, $dropdown-menu-background) - left: $b-space-l + left: $dropdown-space-l z-index: 10 .dropdown-menu-item:first-child @@ -157,11 +150,16 @@ $dropdown-width: 250px !default background: $dropdown-menu-background border-bottom-left-radius: $dropdown-borderRadius border-bottom-right-radius: $dropdown-borderRadius + height: 0 list-style-type: none margin: 0 + opacity: 0 + overflow: hidden padding: 0 position: absolute top: 100% + transition: none + visibility: hidden width: $dropdown-width z-index: 10 From 0fa5482a98d05a96a6a8f02df5615aaf2b07acd4 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 25 Aug 2014 18:49:07 -0400 Subject: [PATCH 093/195] Add missing !default flag in Card Component --- CHANGELOG.md | 15 +++++++++++++++ components/_card.sass | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7f4a6f2..308228a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.7.3 - 2014-08-25 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Missing `!default` flag in Card Component + v2.7.2 - 2014-08-21 ------------------- diff --git a/components/_card.sass b/components/_card.sass index 6cfe09a..a3454c8 100644 --- a/components/_card.sass +++ b/components/_card.sass @@ -31,7 +31,7 @@ $card-row-background: #dedede !default $card-borderStyle: solid !default $card-borderWidth: 1px !default -$card-border: $card-borderWidth $card-borderStyle $card-borderColor +$card-border: $card-borderWidth $card-borderStyle $card-borderColor !default $card-borderRadius: 3px !default $card-boxShadow: 0 2px 0 rgba(#000, 0.15) !default From 03e48f96aa0e179ae33e14703064f0fe64ce77a9 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 28 Aug 2014 15:12:23 -0400 Subject: [PATCH 094/195] Fix Table Component heading alignment in IE --- CHANGELOG.md | 15 +++++++++++++++ components/_table.sass | 1 + 2 files changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 308228a..201091e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.7.4 - 2014-08-28 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Table Component heading alignment in IE + v2.7.3 - 2014-08-25 ------------------- diff --git a/components/_table.sass b/components/_table.sass index bc69ee0..28005d5 100644 --- a/components/_table.sass +++ b/components/_table.sass @@ -95,6 +95,7 @@ $table-space-s: 0.5 * $table-space !default border-top: 0 font-size: $table-fontSize-s padding: $table-space-s $table-space + text-align: left text-transform: uppercase vertical-align: bottom From bec1ef09e01c26aa7d45dc3772eefeb59650cd2a Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 3 Sep 2014 13:40:43 -0400 Subject: [PATCH 095/195] Remove 'bash-mvcss.md' The setup is a lot more complicated now. --- docs/patterns/bash-mvcss.md | 53 ------------------------------------- 1 file changed, 53 deletions(-) delete mode 100644 docs/patterns/bash-mvcss.md diff --git a/docs/patterns/bash-mvcss.md b/docs/patterns/bash-mvcss.md deleted file mode 100644 index 1a74f1d..0000000 --- a/docs/patterns/bash-mvcss.md +++ /dev/null @@ -1,53 +0,0 @@ -Bash MVCSS -========== - -If you want to easily pull down and copy various files from MVCSS and the Library via the command line, this is how you can do it. - -Bash Functions --------------- - -```bash -curl -s https://raw.githubusercontent.com/drewbarontini/dotfiles/master/bash/functions/mvcss >> ~/.bash_profile -``` - -Yes, it's a lot, but you can also, [like I do](https://github.com/drewbarontini/dotfiles/blob/master/bash_profile), create a `.bash` root directory and have a `functions` file in there. Then, in your `bash_profile`, use `source ~/.bash/functions` to pull that file in. - -Usage ------ - -That's it! Here's the interface for using it. - -To download a ZIP of MVCSS in the current directory, run: - -```bash -mvcss all -``` - -To pull a specific Foundation/Component/Structure file: - -```bash -mvcss components grid -``` - -To pull a specific Library file: - -```bash -mvcss-library components list -``` - -To copy a file to your clipboard: - -```bash -mvcss copy components grid -mvcss-library copy components list -``` - -### Aliases - -You can also shorten these up with some aliases. For example: - -```bash -alias mc='mvcss components' -``` - -Then, you can just run `mc grid` to get the grid component. From 9532dc5db5138be66963332ed819fd0d7a4dac23 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 3 Sep 2014 13:45:41 -0400 Subject: [PATCH 096/195] Update CHANGELOG.md --- CHANGELOG.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 201091e..b80a2ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.7.5 - 2014-09-03 +------------------- + +### Added + +- Nothing + +### Removed + +- `docs/patterns/bash-mvcss.md` file + +### Fixed + +- Nothing + v2.7.4 - 2014-08-28 ------------------- From 5d5c7c5150868e054cbe6b7da1d730dce5e4c8a6 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Sat, 13 Sep 2014 15:16:10 -0400 Subject: [PATCH 097/195] Fix Collection Structure clearfixing This fixes an issue where using multiple breakpoints unset clearfixing at smaller viewport widths. --- CHANGELOG.md | 15 +++++++++++++++ structures/_collection.sass | 7 ++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b80a2ac..d33d3e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.7.6 - 2014-09-13 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Collection Structure clearfixing when using multiple modifiers + v2.7.5 - 2014-09-03 ------------------- diff --git a/structures/_collection.sass b/structures/_collection.sass index 0c0c70e..19c8de7 100644 --- a/structures/_collection.sass +++ b/structures/_collection.sass @@ -40,10 +40,11 @@ $collection-space: 1.25em !default =collection-device-type($namespace: '', $breakpoint: null) @if $namespace != '' - [class*='collection#{$namespace}'] + @media screen and (min-width: #{$breakpoint}) + [class*='collection#{$namespace}'] - > .collection-item:nth-child(n) - clear: none + > .collection-item:nth-child(n) + clear: none %collection-clear#{$namespace} @if $breakpoint == null From cd2ac28fb9ec2f7572446df3899cc7090294021b Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 15 Sep 2014 06:14:11 -0400 Subject: [PATCH 098/195] Update dropdown.md --- docs/components/dropdown.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md index e028304..e21c905 100644 --- a/docs/components/dropdown.md +++ b/docs/components/dropdown.md @@ -59,9 +59,9 @@ JavaScript In CoffeeScript, you can use the following JavaScript to trigger your dropdown: ```coffeescript -$('.js-dropdown-btn').on 'click', (e) -> - e.preventDefault() - e.stopPropagation() +$('.js-dropdown-btn').on 'click', (event) -> + event.preventDefault() + event.stopPropagation() $(@).closest('.js-dropdown').toggleClass('is-active') $(document).on 'click', -> From 911be2b6e9907a13c5db2718d12950aabb73d8b2 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 8 Oct 2014 08:22:30 -0400 Subject: [PATCH 099/195] Add state mixin --- CHANGELOG.md | 15 +++++++++++++++ foundation/_mixins.sass | 21 +++++++++++++++++++++ 2 files changed, 36 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d33d3e4..c0df650 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.8.0 - 2014-10-08 +------------------- + +### Added + +- State mixin + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.7.6 - 2014-09-13 ------------------- diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index a41bb27..5cbb2d6 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -99,3 +99,24 @@ =size($width, $height: $width) height: $height width: $width + +// ------------------------------------- +// +// State +// -> Combines state-related pseudo-classes +// +// ------------------------------------- +// +// $class - an optional state class ('is-active') +// +// ------------------------------------- + +=state($class: false) + + @if $class + &:active, &:focus, &:hover, &.#{$class} + @content + + @else + &:active, &:focus, &:hover + @content From 4d3f495e4226ad2ce2fc7cf48897e0ebef74e911 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Fri, 10 Oct 2014 11:23:41 -0400 Subject: [PATCH 100/195] Add Sector and Flex Sector Components --- CHANGELOG.md | 16 +++++++++++ components/_flexSector.sass | 53 +++++++++++++++++++++++++++++++++++++ components/_sector.sass | 49 ++++++++++++++++++++++++++++++++++ 3 files changed, 118 insertions(+) create mode 100644 components/_flexSector.sass create mode 100644 components/_sector.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index c0df650..061f915 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ Changelog ========= +v2.9.0 - 2014-10-10 +------------------- + +### Added + +- Sector Component +- Flex Sector Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.8.0 - 2014-10-08 ------------------- diff --git a/components/_flexSector.sass b/components/_flexSector.sass new file mode 100644 index 0000000..cbf3682 --- /dev/null +++ b/components/_flexSector.sass @@ -0,0 +1,53 @@ +// ************************************* +// +// Flex Sector +// -> Adjacent bleed divisions (requires flexbox) +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-sector +// .sector +// .sector-item[.sector-item--a|b|...] +// .sector-item[.sector-item--a|b|...] +// +// ************************************* + +.sector + display: flex + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-sector + overflow: hidden + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +.sector-item + position: relative + + &::before + bottom: 0 + content: '' + left: 0 + position: absolute + top: 0 + width: 9999px + z-index: -1 + + &:first-child::before + left: auto + right: 0 + +// Hierarchy + +.sector-item--a::before + background: #ecf0f1 + +.sector-item--b::before + background: #cfd9db diff --git a/components/_sector.sass b/components/_sector.sass new file mode 100644 index 0000000..65bf147 --- /dev/null +++ b/components/_sector.sass @@ -0,0 +1,49 @@ +// ************************************* +// +// Sector +// -> Adjacent bleed divisions +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-sector +// .sector[.sector--a|b|...] +// .sector[.sector--a|b|...] +// +// ************************************* + +.sector + position: relative + + &::before + content: '' + height: 9999px + left: 0 + position: absolute + top: 0 + width: 9999px + z-index: -1 + + &:first-child::before + left: auto + right: 0 + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Hierarchy----- // + +.sector--a::before + background: #ecf0f1 + +.sector--b::before + background: #cfd9db + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-sector + overflow: hidden From cb906d385442262b68803d38a5b9fb5e2b4b42a6 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Sun, 12 Oct 2014 16:47:18 -0400 Subject: [PATCH 101/195] Add Base (Foundation) starter --- CHANGELOG.md | 15 ++++ foundation/_base.sass | 176 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 191 insertions(+) create mode 100644 foundation/_base.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index 061f915..bc0437e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.10.0 - 2014-10-12 +------------------- + +### Added + +- Base (Foundation) starter + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.9.0 - 2014-10-10 ------------------- diff --git a/foundation/_base.sass b/foundation/_base.sass new file mode 100644 index 0000000..2f76340 --- /dev/null +++ b/foundation/_base.sass @@ -0,0 +1,176 @@ +// ************************************* +// +// Base +// -> Tag-level settings +// +// ************************************* + +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ----- Functions ----- // + +@function em($target, $context: $b-fontSize) + @if ($target == 0) + @return 0 + @else + @return ($target / $context) * 1em + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Palette ----- // + +$plum: #4e4e5b !default + +// ----- Base ----- // + +$c-background: #ecf0f1 !default +$c-border: lighten($plum, 30%) !default +$c-highlight: $plum !default +$c-selection: lighten( $plum, 50% ) !default +$c-subdue: lighten($plum, 40%) !default +$c-text-invert: #fff !default +$c-text: #444 !default + +// ----- Borders & Box Shadow ----- // + +$b-borderStyle: solid !default +$b-borderWidth: 2px !default +$b-border: $b-borderWidth $b-borderStyle $c-border !default + +// ----- Transitions ----- // + +$b-transition: 0.2s ease-in-out !default + +// ----- Typography ----- // + +$b-fontFamily-heading: sans-serif !default +$b-fontFamily-mono: monospace !default +$b-fontFamily: sans-serif !default +$b-fontSize: 16px !default +$b-lineHeight: 1.5 !default + +// ----- Sizing ----- // + +$b-space: em(20px) !default +$b-space-xs: 0.25 * $b-space !default +$b-space-s: 0.5 * $b-space !default + +// ------------------------------------- +// Document +// ------------------------------------- + +html + background: $c-background + color: $c-text + font-family: $b-fontFamily + font-size: $b-fontSize + line-height: $b-lineHeight + +body + font-size: 100% + +// ------------------------------------- +// Block Content +// ------------------------------------- + +// ----- Lists, Paragraphs ----- // + +dl, ol, ul, p + margin-bottom: $b-space + margin-top: 0 + +dd, li + margin-bottom: $b-space-s + margin-top: 0 + +dd + margin-left: 0 + +dt + font-weight: bold + +// ----- Headings ----- // + +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4 + font-family: $b-fontFamily-heading + font-weight: bold + line-height: 1.2 + margin-bottom: $b-space-xs + margin-top: 0 + +h1, .h1 + font-size: 200% + +h2, .h2 + font-size: 150% + +h3, .h3 + font-size: 125% + +h4, .h4 + font-size: 110% + +// ----- Preformatted Text ----- // + +pre + font-family: $b-fontFamily-mono + +// ------------------------------------- +// Inline Content +// ------------------------------------- + +// ----- Links ----- // + +a + border-bottom: $b-border + color: $c-highlight + text-decoration: none + transition: $b-transition + &:active, + &:focus, + &:hover + border-bottom-color: $c-highlight + color: $c-subdue + +// ----- Images ----- // + +img + height: auto + max-width: 100% + +// ----- Inputs ----- // + +input[type='email'], +input[type='number'], +input[type='password'], +input[type='search'], +input[type='text'], +textarea + -webkit-appearance: none + box-sizing: border-box + + &::placeholder + color: $c-subdue + +// ----- Text ----- // + +strong, b + font-weight: bold + +em, i + font-style: italic + +code + font-family: $b-fontFamily-mono + +// ----- Selection ----- // + +::selection + background: $c-selection From 2cf61ba70cc8ab4cee94b788d2950eacb51cac30 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 15 Oct 2014 07:20:30 -0400 Subject: [PATCH 102/195] Add Sticker Component --- CHANGELOG.md | 15 ++++++++ components/_sticker.sass | 81 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 components/_sticker.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index bc0437e..b50ea4f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.11.0 - 2014-10-15 +------------------- + +### Added + +- Sticker Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.10.0 - 2014-10-12 ------------------- diff --git a/components/_sticker.sass b/components/_sticker.sass new file mode 100644 index 0000000..e36b885 --- /dev/null +++ b/components/_sticker.sass @@ -0,0 +1,81 @@ +// ************************************* +// +// Sticker +// -> Enclosed icon +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// Colors + +$sticker-background: #eee !default +$sticker-color: #278998 !default + +// Borders + +$sticker-borderRadius: 50% !default +$sticker-border: 2px solid #278998 !default + +// Sizes + +$sticker-fontSize: 100% !default +$sticker-fontSize-s: $sticker-fontSize * 0.65 !default +$sticker-fontSize-m: $sticker-fontSize * 0.8 !default +$sticker-fontSize-l: $sticker-fontSize * 1.5 !default +$sticker-size: 3em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.sticker + background: $sticker-background + border-radius: $sticker-borderRadius + border: 0 + box-sizing: border-box + color: $sticker-color + display: inline-block + font-size: $sticker-fontSize + height: $sticker-size + position: relative + vertical-align: middle + width: $sticker-size + + &::before + left: 50% + position: absolute + top: 50% + transform: translate( -50%, -50% ) + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Bordered ----- // + +.sticker--bordered + border: $sticker-border + +// ----- Numbers ----- // + +@for $index from 0 through 10 + + .sticker--#{$index} + font-weight: bold + + &::before + content: "#{$index}" + +// ----- Sizes ----- // + +.sticker--s + font-size: $sticker-fontSize-s + +.sticker--m + font-size: $sticker-fontSize-m + +.sticker--l + font-size: $sticker-fontSize-l From 2be37b651608e2d349cd29491b468326598fb3d5 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 21 Oct 2014 08:05:12 -0400 Subject: [PATCH 103/195] Clean up the Card Component --- CHANGELOG.md | 19 +++++++++++++++++-- components/_card.sass | 3 +-- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b50ea4f..2cb8c82 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,26 @@ Changelog ========= -v2.11.0 - 2014-10-15 +v2.11.1 - 2014-10-21 ------------------- ### Added +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Cleaned up the Card Component + +v2.11.0 - 2014-10-15 +-------------------- + +### Added + - Sticker Component ### Removed @@ -17,7 +32,7 @@ v2.11.0 - 2014-10-15 - Nothing v2.10.0 - 2014-10-12 -------------------- +-------------------- ### Added diff --git a/components/_card.sass b/components/_card.sass index a3454c8..1d3e5b9 100644 --- a/components/_card.sass +++ b/components/_card.sass @@ -81,6 +81,7 @@ $card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default margin-bottom: nth($card-size-vars, $i) padding-top: nth($card-size-vars, $i) &::after + bottom: -#{nth($card-size-vars, $i)} left: -#{nth($card-size-vars, $i)} right: -#{nth($card-size-vars, $i)} @@ -150,8 +151,6 @@ $card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default margin-bottom: $card-space padding-top: $card-space position: relative - &:first-child - padding: 0 &:last-child margin: 0 &::after From 1d151da220adaa883723c2922758b64ce45b6c5d Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 21 Oct 2014 13:02:05 -0400 Subject: [PATCH 104/195] Fix List Component comment heading --- components/_list.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_list.sass b/components/_list.sass index 116aa47..970d1ec 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -7,7 +7,7 @@ // Template (Haml) // ------------------------------------- // -// %ul.list[.list--bordered|inline|object|styled|styled--numbered] +// %ul.list[.list--divided|inline|object|styled|styled--numbered] // %li.list-item List Item // %li.list-item List Item // From ed494f5167aa3400d22ed86e6cd059506487a204 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 22 Oct 2014 07:26:17 -0400 Subject: [PATCH 105/195] Move components/_flexSector to components/flexbox --- CHANGELOG.md | 15 +++++++++++++++ .../{_flexSector.sass => flexbox/_sector.sass} | 4 ++-- 2 files changed, 17 insertions(+), 2 deletions(-) rename components/{_flexSector.sass => flexbox/_sector.sass} (92%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2cb8c82..2ccda76 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.11.2 - 2014-10-22 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Moved `components/_flexSector.sass` to new `components/flexbox` directory. + v2.11.1 - 2014-10-21 ------------------- diff --git a/components/_flexSector.sass b/components/flexbox/_sector.sass similarity index 92% rename from components/_flexSector.sass rename to components/flexbox/_sector.sass index cbf3682..250efa2 100644 --- a/components/_flexSector.sass +++ b/components/flexbox/_sector.sass @@ -1,7 +1,7 @@ // ************************************* // -// Flex Sector -// -> Adjacent bleed divisions (requires flexbox) +// Sector +// -> Adjacent bleed divisions // // ------------------------------------- // Template (Haml) From 5390d9463fda13537bd4914ba36a41c355041004 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 22 Oct 2014 11:15:59 -0400 Subject: [PATCH 106/195] Add Video Component --- components/_video.sass | 66 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 components/_video.sass diff --git a/components/_video.sass b/components/_video.sass new file mode 100644 index 0000000..c388331 --- /dev/null +++ b/components/_video.sass @@ -0,0 +1,66 @@ +// ************************************* +// +// Video +// -> Responsive media embed +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .video +// %embed|iframe|object|video.video-item +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$video-background: #000 !default + +// ----- Ratios ----- // + +$video-ratios: ( 16, 9 ), ( 4, 3 ) !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.video + background: $video-background + display: block + height: 0 + overflow: hidden + padding: 0 + position: relative + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Ratios ----- // + +@each $ratio in $video-ratios + + .video--#{ nth( $ratio, 1 ) }by#{ nth( $ratio, 2 ) } + padding-bottom: percentage( nth( $ratio, 2 ) / nth( $ratio, 1 ) ) + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Item ----- // + +embed, +iframe, +object, +video, +.video-item + bottom: 0 + height: 100% + left: 0 + position: absolute + top: 0 + width: 100% From 23c769145c77355e66a8ec8909793fb8bd2656cb Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 22 Oct 2014 11:17:41 -0400 Subject: [PATCH 107/195] Update CHANGELOG.md --- CHANGELOG.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ccda76..006b072 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.12.0 - 2014-10-22 +------------------- + +### Added + +- Video Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.11.2 - 2014-10-22 ------------------- From 8907d767e3ea1d922b2644c04f54adf0a70532c8 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 23 Oct 2014 07:13:53 -0400 Subject: [PATCH 108/195] Update the Sticker Component variables --- CHANGELOG.md | 19 +++++++++++++++++-- components/_sticker.sass | 3 ++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 006b072..35adaf2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,23 @@ Changelog ========= +v2.12.1 - 2014-10-23 +-------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- `$sticker-borderColor` variable + v2.12.0 - 2014-10-22 -------------------- +-------------------- ### Added @@ -17,7 +32,7 @@ v2.12.0 - 2014-10-22 - Nothing v2.11.2 - 2014-10-22 -------------------- +-------------------- ### Added diff --git a/components/_sticker.sass b/components/_sticker.sass index e36b885..d1e711b 100644 --- a/components/_sticker.sass +++ b/components/_sticker.sass @@ -12,12 +12,13 @@ // Colors $sticker-background: #eee !default +$sticker-borderColor: #278998 !default $sticker-color: #278998 !default // Borders $sticker-borderRadius: 50% !default -$sticker-border: 2px solid #278998 !default +$sticker-border: 2px solid $sticker-borderColor !default // Sizes From 60272f0f20f8210d8811c450cc962ac9c46453d3 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Fri, 24 Oct 2014 08:03:07 -0400 Subject: [PATCH 109/195] Add Sticker Component Haml template --- CHANGELOG.md | 15 +++++++++++++++ components/_sticker.sass | 6 ++++++ 2 files changed, 21 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35adaf2..22450aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.12.2 - 2014-10-24 +------------------- + +### Added + +- Sticker Component Haml template + +### Removed + +- Nothing + +### Fixed + +- Nothing + v2.12.1 - 2014-10-23 -------------------- diff --git a/components/_sticker.sass b/components/_sticker.sass index d1e711b..cd2a634 100644 --- a/components/_sticker.sass +++ b/components/_sticker.sass @@ -3,6 +3,12 @@ // Sticker // -> Enclosed icon // +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .sticker--[bordered|s|m|l|1|2|3|...] +// // ************************************* // ------------------------------------- From 0e52704260450b243377c669ff16bb1daff3bb98 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 31 Oct 2014 07:36:35 -0400 Subject: [PATCH 110/195] Add relevant CodePen URLs for Components --- components/_bar.sass | 1 + components/_button.sass | 1 + components/_card.sass | 1 + components/_form.sass | 1 + components/_list.sass | 1 + components/_panel.sass | 1 + components/_progress.sass | 1 + components/_sector.sass | 1 + components/_sticker.sass | 1 + components/_table.sass | 1 + components/_thumb.sass | 1 + components/flexbox/_sector.sass | 1 + 12 files changed, 12 insertions(+) diff --git a/components/_bar.sass b/components/_bar.sass index 401626f..2a112d1 100644 --- a/components/_bar.sass +++ b/components/_bar.sass @@ -2,6 +2,7 @@ // // Bar // -> Sticky bar +// CodePen: http://codepen.io/drewbarontini/pen/8ca6f3cc4ad1d90680ac6f694c13a34e // // ------------------------------------- // Template (Haml) diff --git a/components/_button.sass b/components/_button.sass index 134b8fa..f03d9ae 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -2,6 +2,7 @@ // // Button // -> Clickable control +// CodePen: http://codepen.io/drewbarontini/pen/44ab18e722fc03fb463ac885a841d285 // // ------------------------------------- // Template (Haml) diff --git a/components/_card.sass b/components/_card.sass index 1d3e5b9..167ea45 100644 --- a/components/_card.sass +++ b/components/_card.sass @@ -2,6 +2,7 @@ // // Card // -> Individual style container +// CodePen: http://codepen.io/drewbarontini/pen/27d4b6d764be635e9001208b3438d80c // // ------------------------------------- // Template (Haml) diff --git a/components/_form.sass b/components/_form.sass index f0f8a8f..3abe8f8 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -2,6 +2,7 @@ // // Form // -> User input environment +// CodePen: http://codepen.io/drewbarontini/pen/1429f644a6eb5fb9ae68883fade3ec08 // // ------------------------------------- // Template (Haml) diff --git a/components/_list.sass b/components/_list.sass index 970d1ec..c9ddb17 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -2,6 +2,7 @@ // // List // -> Enumeration of items +// CodePen: http://codepen.io/drewbarontini/pen/c26afa5531453c94d76e580826bdd7d7 // // ------------------------------------- // Template (Haml) diff --git a/components/_panel.sass b/components/_panel.sass index a9cdff4..492cc4b 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -2,6 +2,7 @@ // // Panel // -> Sticky panel +// CodePen: http://codepen.io/drewbarontini/pen/685c02666777c7f20a5dcdde43537698 // // ------------------------------------- // Template (Haml) diff --git a/components/_progress.sass b/components/_progress.sass index 95a8fa8..78c0f59 100644 --- a/components/_progress.sass +++ b/components/_progress.sass @@ -2,6 +2,7 @@ // // Progress // -> Progress bar +// CodePen: http://codepen.io/drewbarontini/pen/b28d187b7b36b60936fb2e8233d3b49c // // ------------------------------------- // Template (Haml) diff --git a/components/_sector.sass b/components/_sector.sass index 65bf147..3a3d2c8 100644 --- a/components/_sector.sass +++ b/components/_sector.sass @@ -2,6 +2,7 @@ // // Sector // -> Adjacent bleed divisions +// CodePen: http://codepen.io/johndjameson/pen/IzdAe // // ------------------------------------- // Template (Haml) diff --git a/components/_sticker.sass b/components/_sticker.sass index cd2a634..8c6086e 100644 --- a/components/_sticker.sass +++ b/components/_sticker.sass @@ -2,6 +2,7 @@ // // Sticker // -> Enclosed icon +// CodePen: http://codepen.io/johndjameson/pen/HlzCd // // ------------------------------------- // Template (Haml) diff --git a/components/_table.sass b/components/_table.sass index 28005d5..91d031a 100644 --- a/components/_table.sass +++ b/components/_table.sass @@ -2,6 +2,7 @@ // // Table // -> Tabular data +// CodePen: http://codepen.io/drewbarontini/pen/2af76a98e0b52f5bb2369b8f1aea9a52 // // ------------------------------------- // Template (Haml) diff --git a/components/_thumb.sass b/components/_thumb.sass index 6910fa3..01c5665 100644 --- a/components/_thumb.sass +++ b/components/_thumb.sass @@ -2,6 +2,7 @@ // // Thumb // -> Media element +// CodePen: http://codepen.io/drewbarontini/pen/385de08c2e1b3a30822fa81fe1cbadac // // ------------------------------------- // Template (Haml) diff --git a/components/flexbox/_sector.sass b/components/flexbox/_sector.sass index 250efa2..f32eccd 100644 --- a/components/flexbox/_sector.sass +++ b/components/flexbox/_sector.sass @@ -2,6 +2,7 @@ // // Sector // -> Adjacent bleed divisions +// CodePen: http://codepen.io/johndjameson/pen/LaiKH // // ------------------------------------- // Template (Haml) From 71d1babdccbb783a045023bc1d933ca5a5ed3f5f Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Fri, 31 Oct 2014 09:04:13 -0400 Subject: [PATCH 111/195] Update Sticker Component - Add `authored` modifier - Update Haml template - Remove number modifiers --- components/_sticker.sass | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/components/_sticker.sass b/components/_sticker.sass index 8c6086e..1253bd7 100644 --- a/components/_sticker.sass +++ b/components/_sticker.sass @@ -8,7 +8,7 @@ // Template (Haml) // ------------------------------------- // -// .sticker--[bordered|s|m|l|1|2|3|...] +// .sticker--[authored|bordered|s|m|l]{ data: { sticker: '...' } } // // ************************************* @@ -62,20 +62,17 @@ $sticker-size: 3em !default // Modifiers // ------------------------------------- -// ----- Bordered ----- // - -.sticker--bordered - border: $sticker-border +// ----- Authored ----- // -// ----- Numbers ----- // +.sticker--authored -@for $index from 0 through 10 + &::before + content: attr(data-sticker) - .sticker--#{$index} - font-weight: bold +// ----- Bordered ----- // - &::before - content: "#{$index}" +.sticker--bordered + border: $sticker-border // ----- Sizes ----- // From 19f4518e4617da382eb48be4a2a7d505cfa84fbd Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Fri, 31 Oct 2014 09:05:52 -0400 Subject: [PATCH 112/195] Move Flex Sector colors to variables --- components/flexbox/_sector.sass | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/components/flexbox/_sector.sass b/components/flexbox/_sector.sass index f32eccd..a97c11b 100644 --- a/components/flexbox/_sector.sass +++ b/components/flexbox/_sector.sass @@ -15,6 +15,17 @@ // // ************************************* +// ------------------------------------- +// Variables +// ------------------------------------- + +$sector-item--a-background: #ecf0f1 !default +$sector-item--b-background: #cfd9db !default + +// ------------------------------------- +// Base +// ------------------------------------- + .sector display: flex @@ -48,7 +59,7 @@ // Hierarchy .sector-item--a::before - background: #ecf0f1 + background: $sector-item--a-background .sector-item--b::before - background: #cfd9db + background: $sector-item--b-backgroundackground: $sector-background-b From da62900f32c2576ef08264f7a4ad3dfe0ad09321 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Fri, 31 Oct 2014 09:13:11 -0400 Subject: [PATCH 113/195] Move Sector colors to variables --- components/_sector.sass | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/components/_sector.sass b/components/_sector.sass index 3a3d2c8..9ddddf6 100644 --- a/components/_sector.sass +++ b/components/_sector.sass @@ -14,6 +14,17 @@ // // ************************************* +// ------------------------------------- +// Variables +// ------------------------------------- + +$sector--a-background: #ecf0f1 !default +$sector--b-background: #cfd9db !default + +// ------------------------------------- +// Base +// ------------------------------------- + .sector position: relative @@ -37,10 +48,10 @@ // ----- Hierarchy----- // .sector--a::before - background: #ecf0f1 + background: $sector--a-background .sector--b::before - background: #cfd9db + background: $sector--b-background // ------------------------------------- // Context From e4e1a24a029848514178827e8b31dfc065c42f56 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Fri, 31 Oct 2014 09:17:32 -0400 Subject: [PATCH 114/195] Update CHANGELOG.md --- CHANGELOG.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 22450aa..c272825 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ Changelog ========= +v2.12.3 - 2014-10-31 +------------------- + +### Added + +- CodePen comments to relevant modules +- Sticker component `authored` modifier + +### Removed + +- Sticker Component number modifiers + +### Fixed + +- Moved Sector and Flexbox Sector Component colors to variables + v2.12.2 - 2014-10-24 ------------------- From dc68fc816535175c543a1458b9e0601687ac6371 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 3 Nov 2014 09:34:27 -0500 Subject: [PATCH 115/195] Update Split Component - Add CodePen link - Fix `.split--divided` padding - Change border style - Improve Haml template - Organize scaffolding blocks - Remove img element handling --- components/_split.sass | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/components/_split.sass b/components/_split.sass index 4eb33dc..8d2f388 100644 --- a/components/_split.sass +++ b/components/_split.sass @@ -2,6 +2,7 @@ // // Split // -> Horizontally repellent content +// CodePen: http://codepen.io/johndjameson/pen/uvtCI // // ------------------------------------- // Template (Haml) @@ -9,8 +10,8 @@ // // %[ul].split[.split--divided] // %[li].split-item -// .split-cell -// .split-cell +// .split-cell Split cell +// .split-cell Split cell // // ************************************* @@ -20,12 +21,12 @@ // ----- Colors ----- // -$split-borderColor: #9a9aa8 !default +$split-borderColor: #dddddd !default // ----- Borders & Box Shadow ----- // $split-borderStyle: solid !default -$split-borderWidth: 2px !default +$split-borderWidth: 1px !default $split-border: $split-borderWidth $split-borderStyle $split-borderColor !default // ----- Sizing ----- // @@ -49,30 +50,30 @@ $split-space: 0.75em !default .split--divided - .split-item + .split-item:not(:last-child) border-bottom: $split-border padding-bottom: $split-space - &:last-child - border-bottom: 0 - padding-bottom: 0 + + .split-item:not(:first-child) + padding-top: $split-space // ------------------------------------- // Scaffolding // ------------------------------------- -// ----- Split Item ----- // - -.split-item - display: table - width: 100% - img - max-width: none - -// ----- Split Cell ----- // +// ----- Cell ----- // .split-cell display: table-cell + &:first-child width: 10000px + &:last-child white-space: nowrap + +// ----- Item ----- // + +.split-item + display: table + width: 100% From f77e7cf2db8679a2fd049039a69e10ed595634fa Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 3 Nov 2014 11:00:08 -0500 Subject: [PATCH 116/195] Add Flexbox Split Component --- components/flexbox/_split.sass | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 components/flexbox/_split.sass diff --git a/components/flexbox/_split.sass b/components/flexbox/_split.sass new file mode 100644 index 0000000..b2ec1eb --- /dev/null +++ b/components/flexbox/_split.sass @@ -0,0 +1,32 @@ +// ************************************* +// +// Split +// -> Horizontally repellent content +// CodePen: http://codepen.io/johndjameson/pen/nKcep +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .split +// .split-cell Split cell +// .split-cell Split cell +// +// ************************************* + +.split + display: flex + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Cell ----- // + +.split-cell + + &:first-child + flex-grow: 1 + + &:last-child + flex-shrink: 0 From 6282d7dcb8b111b149055365dedfad555992720d Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 3 Nov 2014 11:01:14 -0500 Subject: [PATCH 117/195] Add Flexbox Bucket Component --- components/flexbox/_bucket.sass | 57 +++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 components/flexbox/_bucket.sass diff --git a/components/flexbox/_bucket.sass b/components/flexbox/_bucket.sass new file mode 100644 index 0000000..777b090 --- /dev/null +++ b/components/flexbox/_bucket.sass @@ -0,0 +1,57 @@ +// ************************************* +// +// Bucket +// -> Media-supported content +// CodePen: http://codepen.io/johndjameson/pen/saEDx +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .bucket[.bucket--flag] +// .bucket-media +// / ... +// .bucket-content +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$bucket-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.bucket + display: flex + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Flag ----- // + +.bucket--flag + align-items: center + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Content ----- // + +.bucket-content + flex-grow: 1 + +// ----- Media ----- // + +.bucket-media + flex-shrink: 0 + margin-right: $bucket-space + + > img + display: block From 54c38c989a03a0e8773f79b69350e587afcc52ab Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 3 Nov 2014 11:13:05 -0500 Subject: [PATCH 118/195] Update CHANGELOG.md --- CHANGELOG.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c272825..d7b243f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,23 @@ Changelog ========= +v2.13.0 - 2014-11-03 +------------------- + +### Added + +- Flexbox Bucket Component +- Flexbox Split Component + +### Removed + +- Split Component `img` element handling + +### Fixed + +- Split Component `.split--divided` modifier top padding + + v2.12.3 - 2014-10-31 ------------------- From 8b78686d84dce634c28489a6c7f82e26c53ab155 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 3 Nov 2014 15:05:51 -0500 Subject: [PATCH 119/195] Create LICENSE --- LICENSE | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..6aaa6fb --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2014 Drew Barontini + +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. From 4e74c2d9963a99519b5ff91370dc9099a295a7c9 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Fri, 7 Nov 2014 14:43:09 -0500 Subject: [PATCH 120/195] Fix Flexbox Split Component vertical alignment --- CHANGELOG.md | 15 +++++++++++++++ components/flexbox/_split.sass | 1 + 2 files changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d7b243f..727d11f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +v2.13.1 - 2014-11-07 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Flexbox Split Component vertical alignment + v2.13.0 - 2014-11-03 ------------------- diff --git a/components/flexbox/_split.sass b/components/flexbox/_split.sass index b2ec1eb..b667e2c 100644 --- a/components/flexbox/_split.sass +++ b/components/flexbox/_split.sass @@ -15,6 +15,7 @@ // ************************************* .split + align-items: baseline display: flex // ------------------------------------- From af4dc5890acc72840b4b2b28d344a0f493e1b13f Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Mon, 24 Nov 2014 09:36:31 -0500 Subject: [PATCH 121/195] Update operation syntax and Card modifiers --- CHANGELOG.md | 16 ++++++++++++++++ components/_button.sass | 4 ++-- components/_card.sass | 18 +++++++++--------- components/_dropdown.sass | 4 ++-- components/_form.sass | 4 ++-- components/_table.sass | 2 +- 6 files changed, 32 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 727d11f..246a886 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ Changelog ========= +v2.13.2 - 2014-11-24 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Changed inline operations to use trailing figures +- Changed Card Rows to use verbose `north` and `south` modifiers + v2.13.1 - 2014-11-07 ------------------- diff --git a/components/_button.sass b/components/_button.sass index f03d9ae..793b8d6 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -37,8 +37,8 @@ $btn-lineHeight: 2.5 !default // ----- Sizing ----- // $btn-space: 2.5em !default -$btn-space-s: 0.5 * $btn-space !default -$btn-space-l: 2 * $btn-space !default +$btn-space-s: $btn-space * 0.5 !default +$btn-space-l: $btn-space * 2 !default // ------------------------------------- // Base diff --git a/components/_card.sass b/components/_card.sass index 167ea45..1aec7a0 100644 --- a/components/_card.sass +++ b/components/_card.sass @@ -11,7 +11,7 @@ // (.has-card-item|card-row|card-section) // // .card[.card--a|b|xs|s|l|f] -// .card-row[.card-row--n|s] +// .card-row[.card-row--north|south] // .card-section // // %a.card-item.btn{href: '#'} Button @@ -39,9 +39,9 @@ $card-boxShadow: 0 2px 0 rgba(#000, 0.15) !default // ----- Sizing ----- // $card-space: 1.25em !default -$card-space-xs: 0.25 * $card-space !default -$card-space-s: 0.5 * $card-space !default -$card-space-l: 2 * $card-space !default +$card-space-xs: $card-space * 0.25 !default +$card-space-s: $card-space * 0.5 !default +$card-space-l: $card-space * 2 !default $card-sizes: 'xs', 's', 'l' !default $card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default @@ -72,10 +72,10 @@ $card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default margin-left: -#{nth($card-size-vars, $i)} margin-right: -#{nth($card-size-vars, $i)} - > .card-row--n + > .card-row--north margin-top: -#{nth($card-size-vars, $i)} - > .card-row--s + > .card-row--south margin-bottom: -#{nth($card-size-vars, $i)} > .card-section @@ -104,7 +104,7 @@ $card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default // ----- Item ----- // .has-card-item - padding-bottom: 3 * $card-space + padding-bottom: $card-space * 3 // ----- Row ----- // @@ -137,11 +137,11 @@ $card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default margin-right: -$card-space padding: $card-space-s $card-space -.card-row--n +.card-row--north border-bottom: $card-border margin-top: -$card-space -.card-row--s +.card-row--south border-top: $card-border margin-bottom: -$card-space margin-top: $card-space diff --git a/components/_dropdown.sass b/components/_dropdown.sass index 523a0ba..22126fb 100644 --- a/components/_dropdown.sass +++ b/components/_dropdown.sass @@ -77,8 +77,8 @@ $dropdown-menu-item-fontSize: 85% !default // ----- Sizing ----- // $dropdown-space: 1.25em !default -$dropdown-space-s: 0.5 * $dropdown-space !default -$dropdown-space-l: 2 * $dropdown-space !default +$dropdown-space-s: $dropdown-space * 0.5 !default +$dropdown-space-l: $dropdown-space * 2 !default $dropdown-width: 250px !default // ------------------------------------- diff --git a/components/_form.sass b/components/_form.sass index 3abe8f8..75f5d55 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -37,8 +37,8 @@ $form-fontSize-m: 90% !default // ----- Sizing ----- // $form-space: 1.25em !default -$form-space-xs: 0.25 * $form-space !default -$form-space-s: 0.5 * $form-space !default +$form-space-xs: $form-space * 0.25 !default +$form-space-s: $form-space * 0.5 !default // ------------------------------------- // Base diff --git a/components/_table.sass b/components/_table.sass index 91d031a..5e50ce4 100644 --- a/components/_table.sass +++ b/components/_table.sass @@ -43,7 +43,7 @@ $table-lineHeight: 1.5 !default // ----- Sizing ----- // $table-space: 1.25em !default -$table-space-s: 0.5 * $table-space !default +$table-space-s: $table-space * 0.5 !default // ------------------------------------- // Base From 26b60be9913aded9aad0145533b460e60327c67b Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 1 Dec 2014 08:05:08 -0500 Subject: [PATCH 122/195] Update CodePen URLs in Component files --- components/_bar.sass | 2 +- components/_button.sass | 2 +- components/_card.sass | 2 +- components/_form.sass | 2 +- components/_list.sass | 2 +- components/_panel.sass | 2 +- components/_progress.sass | 2 +- components/_table.sass | 2 +- components/_thumb.sass | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/components/_bar.sass b/components/_bar.sass index 2a112d1..c3cec85 100644 --- a/components/_bar.sass +++ b/components/_bar.sass @@ -2,7 +2,7 @@ // // Bar // -> Sticky bar -// CodePen: http://codepen.io/drewbarontini/pen/8ca6f3cc4ad1d90680ac6f694c13a34e +// CodePen: http://codepen.io/drewbarontini/pen/zuchq // // ------------------------------------- // Template (Haml) diff --git a/components/_button.sass b/components/_button.sass index 793b8d6..b81c809 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -2,7 +2,7 @@ // // Button // -> Clickable control -// CodePen: http://codepen.io/drewbarontini/pen/44ab18e722fc03fb463ac885a841d285 +// CodePen: http://codepen.io/drewbarontini/pen/yAveh // // ------------------------------------- // Template (Haml) diff --git a/components/_card.sass b/components/_card.sass index 1aec7a0..2c25200 100644 --- a/components/_card.sass +++ b/components/_card.sass @@ -2,7 +2,7 @@ // // Card // -> Individual style container -// CodePen: http://codepen.io/drewbarontini/pen/27d4b6d764be635e9001208b3438d80c +// CodePen: http://codepen.io/drewbarontini/pen/HtEAJ // // ------------------------------------- // Template (Haml) diff --git a/components/_form.sass b/components/_form.sass index 75f5d55..c5f4177 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -2,7 +2,7 @@ // // Form // -> User input environment -// CodePen: http://codepen.io/drewbarontini/pen/1429f644a6eb5fb9ae68883fade3ec08 +// CodePen: http://codepen.io/drewbarontini/pen/mbIwj // // ------------------------------------- // Template (Haml) diff --git a/components/_list.sass b/components/_list.sass index c9ddb17..02bce96 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -2,7 +2,7 @@ // // List // -> Enumeration of items -// CodePen: http://codepen.io/drewbarontini/pen/c26afa5531453c94d76e580826bdd7d7 +// CodePen: http://codepen.io/drewbarontini/pen/ouqil // // ------------------------------------- // Template (Haml) diff --git a/components/_panel.sass b/components/_panel.sass index 492cc4b..ff2c39c 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -2,7 +2,7 @@ // // Panel // -> Sticky panel -// CodePen: http://codepen.io/drewbarontini/pen/685c02666777c7f20a5dcdde43537698 +// CodePen: http://codepen.io/drewbarontini/pen/Cxuit // // ------------------------------------- // Template (Haml) diff --git a/components/_progress.sass b/components/_progress.sass index 78c0f59..885364a 100644 --- a/components/_progress.sass +++ b/components/_progress.sass @@ -2,7 +2,7 @@ // // Progress // -> Progress bar -// CodePen: http://codepen.io/drewbarontini/pen/b28d187b7b36b60936fb2e8233d3b49c +// CodePen: http://codepen.io/drewbarontini/pen/tiorh // // ------------------------------------- // Template (Haml) diff --git a/components/_table.sass b/components/_table.sass index 5e50ce4..7b69aa2 100644 --- a/components/_table.sass +++ b/components/_table.sass @@ -2,7 +2,7 @@ // // Table // -> Tabular data -// CodePen: http://codepen.io/drewbarontini/pen/2af76a98e0b52f5bb2369b8f1aea9a52 +// CodePen: http://codepen.io/drewbarontini/pen/uaBfq // // ------------------------------------- // Template (Haml) diff --git a/components/_thumb.sass b/components/_thumb.sass index 01c5665..ded925a 100644 --- a/components/_thumb.sass +++ b/components/_thumb.sass @@ -2,7 +2,7 @@ // // Thumb // -> Media element -// CodePen: http://codepen.io/drewbarontini/pen/385de08c2e1b3a30822fa81fe1cbadac +// CodePen: http://codepen.io/drewbarontini/pen/acGmE // // ------------------------------------- // Template (Haml) From 7a059b4e36bdde8ebc57fb7206e49a0d0f096bb9 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 3 Dec 2014 11:27:13 -0500 Subject: [PATCH 123/195] Remove optional vendor prefixes --- CHANGELOG.md | 17 +++++++++++++++++ components/_progress.sass | 10 +--------- foundation/_extends.sass | 2 -- foundation/_mixins.sass | 20 -------------------- 4 files changed, 18 insertions(+), 31 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 246a886..587fa9b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,23 @@ Changelog ========= +v2.14.0 - 2014-12-03 +------------------- + +### Added + +- Nothing + +### Removed + +- Progress Component `boxSizing` helper +- `keyframe-animation` mixin +- `middle` extend vendor prefixes + +### Fixed + +- Nothing + v2.13.2 - 2014-11-24 ------------------- diff --git a/components/_progress.sass b/components/_progress.sass index 885364a..a37c933 100644 --- a/components/_progress.sass +++ b/components/_progress.sass @@ -13,14 +13,6 @@ // // ************************************* -// ------------------------------------- -// Helpers -// ------------------------------------- - -.boxSizing - -moz-box-sizing: border-box - box-sizing: border-box - // ------------------------------------- // Variables // ------------------------------------- @@ -46,7 +38,7 @@ $progress-bar-background: #4e4e5b !default // ----- Bar ----- // .progress-bar - @extend .boxSizing + box-sizing: border-box background: $progress-bar-background bottom: 0 left: 0 diff --git a/foundation/_extends.sass b/foundation/_extends.sass index 86e0f4e..b2d7aa2 100644 --- a/foundation/_extends.sass +++ b/foundation/_extends.sass @@ -41,8 +41,6 @@ left: 50% position: absolute top: 50% - -webkit-transform: translate(-50%, -50%) - -ms-transform: translate(-50%, -50%) transform: translate(-50%, -50%) // ------------------------------------- diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index 5cbb2d6..0169b5c 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -48,26 +48,6 @@ #{$side}: -$size #{$opposite}: auto -// ------------------------------------- -// -// Keyframe Animation -// -> Auto-prefixed keyframe-animation -// -// ------------------------------------- -// -// $name - the name of the animation -// @content - the generated content within the mixin -// -// ------------------------------------- - -=keyframe-animation($name) - @-webkit-keyframes #{$name} - @content - @-moz-keyframes #{$name} - @content - @keyframes #{$name} - @content - // ------------------------------------- // // Respond-within From 8c51ce26ec1f724456bfb3c04b760055046682d2 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 9 Dec 2014 07:57:21 -0500 Subject: [PATCH 124/195] Update Bar Component positioning modifiers --- CHANGELOG.md | 135 ++++++++++++++++++++++++------------------- components/_bar.sass | 20 +++---- 2 files changed, 85 insertions(+), 70 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 587fa9b..5ad76a4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,22 @@ Changelog ========= -v2.14.0 - 2014-12-03 +2.14.1 - 2014-12-09 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Update Bar Component positioning modifiers + +2.14.0 - 2014-12-03 ------------------- ### Added @@ -18,7 +33,7 @@ v2.14.0 - 2014-12-03 - Nothing -v2.13.2 - 2014-11-24 +2.13.2 - 2014-11-24 ------------------- ### Added @@ -34,7 +49,7 @@ v2.13.2 - 2014-11-24 - Changed inline operations to use trailing figures - Changed Card Rows to use verbose `north` and `south` modifiers -v2.13.1 - 2014-11-07 +2.13.1 - 2014-11-07 ------------------- ### Added @@ -49,7 +64,7 @@ v2.13.1 - 2014-11-07 - Flexbox Split Component vertical alignment -v2.13.0 - 2014-11-03 +2.13.0 - 2014-11-03 ------------------- ### Added @@ -66,7 +81,7 @@ v2.13.0 - 2014-11-03 - Split Component `.split--divided` modifier top padding -v2.12.3 - 2014-10-31 +2.12.3 - 2014-10-31 ------------------- ### Added @@ -82,7 +97,7 @@ v2.12.3 - 2014-10-31 - Moved Sector and Flexbox Sector Component colors to variables -v2.12.2 - 2014-10-24 +2.12.2 - 2014-10-24 ------------------- ### Added @@ -97,8 +112,8 @@ v2.12.2 - 2014-10-24 - Nothing -v2.12.1 - 2014-10-23 --------------------- +2.12.1 - 2014-10-23 +------------------- ### Added @@ -112,8 +127,8 @@ v2.12.1 - 2014-10-23 - `$sticker-borderColor` variable -v2.12.0 - 2014-10-22 --------------------- +2.12.0 - 2014-10-22 +------------------- ### Added @@ -127,8 +142,8 @@ v2.12.0 - 2014-10-22 - Nothing -v2.11.2 - 2014-10-22 --------------------- +2.11.2 - 2014-10-22 +------------------- ### Added @@ -142,7 +157,7 @@ v2.11.2 - 2014-10-22 - Moved `components/_flexSector.sass` to new `components/flexbox` directory. -v2.11.1 - 2014-10-21 +2.11.1 - 2014-10-21 ------------------- ### Added @@ -157,8 +172,8 @@ v2.11.1 - 2014-10-21 - Cleaned up the Card Component -v2.11.0 - 2014-10-15 --------------------- +2.11.0 - 2014-10-15 +------------------- ### Added @@ -172,8 +187,8 @@ v2.11.0 - 2014-10-15 - Nothing -v2.10.0 - 2014-10-12 --------------------- +2.10.0 - 2014-10-12 +------------------- ### Added @@ -187,7 +202,7 @@ v2.10.0 - 2014-10-12 - Nothing -v2.9.0 - 2014-10-10 +2.9.0 - 2014-10-10 ------------------- ### Added @@ -203,7 +218,7 @@ v2.9.0 - 2014-10-10 - Nothing -v2.8.0 - 2014-10-08 +2.8.0 - 2014-10-08 ------------------- ### Added @@ -218,7 +233,7 @@ v2.8.0 - 2014-10-08 - Nothing -v2.7.6 - 2014-09-13 +2.7.6 - 2014-09-13 ------------------- ### Added @@ -233,7 +248,7 @@ v2.7.6 - 2014-09-13 - Collection Structure clearfixing when using multiple modifiers -v2.7.5 - 2014-09-03 +2.7.5 - 2014-09-03 ------------------- ### Added @@ -248,7 +263,7 @@ v2.7.5 - 2014-09-03 - Nothing -v2.7.4 - 2014-08-28 +2.7.4 - 2014-08-28 ------------------- ### Added @@ -263,7 +278,7 @@ v2.7.4 - 2014-08-28 - Table Component heading alignment in IE -v2.7.3 - 2014-08-25 +2.7.3 - 2014-08-25 ------------------- ### Added @@ -278,7 +293,7 @@ v2.7.3 - 2014-08-25 - Missing `!default` flag in Card Component -v2.7.2 - 2014-08-21 +2.7.2 - 2014-08-21 ------------------- ### Added @@ -293,7 +308,7 @@ v2.7.2 - 2014-08-21 - Minor cleanup of Dropdown Component -v2.7.1 - 2014-08-21 +2.7.1 - 2014-08-21 ------------------- ### Added @@ -308,7 +323,7 @@ v2.7.1 - 2014-08-21 - `z-index` on Dropdown Component -v2.7.0 - 2014-08-20 +2.7.0 - 2014-08-20 ------------------- ### Added @@ -323,7 +338,7 @@ v2.7.0 - 2014-08-20 - Nothing -v2.6.0 - 2014-08-18 +2.6.0 - 2014-08-18 ------------------- ### Added @@ -341,7 +356,7 @@ v2.6.0 - 2014-08-18 - Nothing -v2.5.2 - 2014-08-13 +2.5.2 - 2014-08-13 ------------------- ### Added @@ -357,7 +372,7 @@ v2.5.2 - 2014-08-13 - Better variable setup for Button Component - Better comments for Components -v2.5.1 - 2014-08-06 +2.5.1 - 2014-08-06 ------------------- ### Added @@ -373,7 +388,7 @@ v2.5.1 - 2014-08-06 - Comments for the `+caret` Mixin - Replace need for `+stretch` Compass Mixin in `+caret` Mixin -v2.5.0 - 2014-07-30 +2.5.0 - 2014-07-30 ------------------- ### Added @@ -388,7 +403,7 @@ v2.5.0 - 2014-07-30 - Nothing -v2.4.1 - 2014-07-30 +2.4.1 - 2014-07-30 ------------------- ### Added @@ -403,7 +418,7 @@ v2.4.1 - 2014-07-30 - Nothing -v2.4.0 - 2014-07-30 +2.4.0 - 2014-07-30 ------------------- ### Added @@ -418,7 +433,7 @@ v2.4.0 - 2014-07-30 - Nothing -v2.3.2 - 2014-07-30 +2.3.2 - 2014-07-30 ------------------- ### Added @@ -433,7 +448,7 @@ v2.3.2 - 2014-07-30 - Nothing -v2.3.1 - 2014-07-29 +2.3.1 - 2014-07-29 ------------------- ### Added @@ -448,7 +463,7 @@ v2.3.1 - 2014-07-29 - Nothing -v2.3.0 - 2014-07-29 +2.3.0 - 2014-07-29 ------------------- ### Added @@ -463,7 +478,7 @@ v2.3.0 - 2014-07-29 - Nothing -v2.2.3 - 2014-07-29 +2.2.3 - 2014-07-29 ------------------- ### Added @@ -478,7 +493,7 @@ v2.2.3 - 2014-07-29 - Nothing -v2.2.2 - 2014-07-28 +2.2.2 - 2014-07-28 ------------------- ### Added @@ -493,7 +508,7 @@ v2.2.2 - 2014-07-28 - Nothing -v2.2.1 - 2014-07-28 +2.2.1 - 2014-07-28 ------------------- ### Added @@ -508,7 +523,7 @@ v2.2.1 - 2014-07-28 - Nothing -v2.2.0 - 2014-07-23 +2.2.0 - 2014-07-23 ------------------- ### Added @@ -523,7 +538,7 @@ v2.2.0 - 2014-07-23 - Nothing -v2.1.1 - 2014-07-19 +2.1.1 - 2014-07-19 ------------------- ### Added @@ -538,7 +553,7 @@ v2.1.1 - 2014-07-19 - Added `opposite-position()` function to panel Component -v2.1.0 - 2014-07-02 +2.1.0 - 2014-07-02 ------------------- ### Added @@ -554,7 +569,7 @@ v2.1.0 - 2014-07-02 - `.list--bordered` now `.list-divided` -v2.0.4 - 2014-07-01 +2.0.4 - 2014-07-01 ------------------- ### Added @@ -569,7 +584,7 @@ v2.0.4 - 2014-07-01 - Better defaults for the panel Component -v2.0.3 - 2014-07-01 +2.0.3 - 2014-07-01 ------------------- ### Added @@ -584,7 +599,7 @@ v2.0.3 - 2014-07-01 - Nothing -v2.0.2 - 2014-07-01 +2.0.2 - 2014-07-01 ------------------- ### Added @@ -599,7 +614,7 @@ v2.0.2 - 2014-07-01 - Nothing -v2.0.1 - 2014-07-01 +2.0.1 - 2014-07-01 ------------------- ### Added @@ -614,7 +629,7 @@ v2.0.1 - 2014-07-01 - Nothing -v2.0.0 - 2014-07-01 +2.0.0 - 2014-07-01 ------------------- ### Added @@ -631,7 +646,7 @@ v2.0.0 - 2014-07-01 - Rename **Helpers** to **Foundation** - Rename **Modules** to **Components** -v1.4.1 - 2014-07-30 +1.4.1 - 2014-07-30 ------------------- ### Added @@ -646,7 +661,7 @@ v1.4.1 - 2014-07-30 - Security vulnerability in hash URLs component by sanitizing `window.location.hash` -v1.4.0 - 2014-07-10 +1.4.0 - 2014-07-10 ------------------- ### Added @@ -661,7 +676,7 @@ v1.4.0 - 2014-07-10 - Nothing -v1.3.1 - 2014-07-04 +1.3.1 - 2014-07-04 ------------------- ### Added @@ -676,7 +691,7 @@ v1.3.1 - 2014-07-04 - Refactor hash URL component -v1.3.0 - 2014-07-04 +1.3.0 - 2014-07-04 ------------------- ### Added @@ -691,7 +706,7 @@ v1.3.0 - 2014-07-04 - Nothing -v1.3.0 - 2014-06-27 +1.3.0 - 2014-06-27 ------------------- ### Added @@ -706,7 +721,7 @@ v1.3.0 - 2014-06-27 - Update to MVCSS v3.0.1 (new comment hierarchy) -v1.2.0 - 2014-05-17 +1.2.0 - 2014-05-17 ------------------- ### Added @@ -721,7 +736,7 @@ v1.2.0 - 2014-05-17 - Convert $.hashURLs to a HashURLs CoffeeScript class -v1.1.0 - 2014-05-16 +1.1.0 - 2014-05-16 ------------------- ### Added @@ -743,7 +758,7 @@ v1.1.0 - 2014-05-16 - Nothing -v1.0.0 - 2014-05-16 +1.0.0 - 2014-05-16 ------------------- ### Added @@ -760,7 +775,7 @@ v1.0.0 - 2014-05-16 - Nothing -v0.9.0 - 2014-03-08 +0.9.0 - 2014-03-08 ------------------- ### Added @@ -775,7 +790,7 @@ v0.9.0 - 2014-03-08 - Fix incorrect version -v0.8.2 - 2014-03-08 +0.8.2 - 2014-03-08 ------------------- ### Added @@ -791,7 +806,7 @@ v0.8.2 - 2014-03-08 - Nothing -v0.8.1 - 2014-03-08 +0.8.1 - 2014-03-08 ------------------- ### Added @@ -806,7 +821,7 @@ v0.8.1 - 2014-03-08 - Update `.list` variables -v0.8.1 - 2014-03-06 +0.8.1 - 2014-03-06 ------------------- ### Added @@ -822,7 +837,7 @@ v0.8.1 - 2014-03-06 - Incorrect comment heading -v0.7.1 - 2014-03-01 +0.7.1 - 2014-03-01 ------------------- ### Added @@ -837,7 +852,7 @@ v0.7.1 - 2014-03-01 - Adjust the `.grid` module to account for a bug in WebKit -v0.7.0 - 2014-02-22 +0.7.0 - 2014-02-22 ------------------- ### Added diff --git a/components/_bar.sass b/components/_bar.sass index c3cec85..11ce9ba 100644 --- a/components/_bar.sass +++ b/components/_bar.sass @@ -51,29 +51,29 @@ $bar-space: 1.25em !default // ----- Positioning ----- // -.bar--n +.bar--north top: 0 -.bar--s +.bar--south bottom: 0 -.bar--e +.bar--east right: 0 -.bar--w +.bar--west left: 0 // ----- Types ----- // .bar--header - @extend .bar--n - @extend .bar--e - @extend .bar--w + @extend .bar--north + @extend .bar--east + @extend .bar--west .bar--footer - @extend .bar--s - @extend .bar--e - @extend .bar--w + @extend .bar--south + @extend .bar--east + @extend .bar--west // ------------------------------------- // Context From f969a229c1abfef6d320ddaa71571d8fd71cfc20 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 9 Dec 2014 08:18:19 -0500 Subject: [PATCH 125/195] Update README --- README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 240095b..0c140d1 100644 --- a/README.md +++ b/README.md @@ -205,7 +205,11 @@ Documentation The documentation, for anything that requires more full documentation than the source file, is included in `/docs`. -Versioning ----------- +Contributing +------------ + +We use [Semantic Versioning](http://semver.org) for all versioning. When you make a **Major**, **Minor**, or **Patch** update, you'll need to the do the following: -We use [Semantic Versioning](http://semver.org) for all versioning. +- Update the `CHANGELOG.md` file +- Add the new tag locally +- Push the tag (along with your commit(s)) From 60cf41b6326d470b88467150bae354b3f6463d4d Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 10 Dec 2014 06:15:14 -0500 Subject: [PATCH 126/195] Remove accidental code duplication in Flex Sector --- CHANGELOG.md | 15 +++++++++++++++ components/flexbox/_sector.sass | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ad76a4..b11ee58 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.14.2 - 2014-12-10 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Remove accidental code duplication in Flex Sector + 2.14.1 - 2014-12-09 ------------------- diff --git a/components/flexbox/_sector.sass b/components/flexbox/_sector.sass index a97c11b..c3fb5b0 100644 --- a/components/flexbox/_sector.sass +++ b/components/flexbox/_sector.sass @@ -62,4 +62,4 @@ $sector-item--b-background: #cfd9db !default background: $sector-item--a-background .sector-item--b::before - background: $sector-item--b-backgroundackground: $sector-background-b + background: $sector-item--b-background From df364a1db93245674d16749dc073574ccabc0f67 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 18 Dec 2014 09:24:09 -0500 Subject: [PATCH 127/195] Update README.md --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0c140d1..2f231c7 100644 --- a/README.md +++ b/README.md @@ -79,7 +79,9 @@ Choose the Sass components from `/components` to include in your [MVCSS](http:// // Template (Haml) // ------------------------------------- // -// .component[.component--modifier](.is-state)(.has-context) +// (.has-context) +// +// .component[.component--modifier](.is-state) // .component-scaffolding // // ************************************* @@ -151,7 +153,9 @@ Choose the Sass structures from `/structures` to include in your [MVCSS](http:// // Template (Haml) // ------------------------------------- // -// .structure[.structure--modifier](.is-state)(.has-context) +// (.has-context) +// +// .structure[.structure--modifier](.is-state) // .structure-scaffolding // // ************************************* From 5b5322b550899021fc313a9508ada1f93afe2294 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 1 Jan 2015 11:36:52 -0500 Subject: [PATCH 128/195] Update spacing across files --- CHANGELOG.md | 15 +++++++++++++++ components/_button.sass | 2 ++ components/_card.sass | 4 ++++ components/_dropdown.sass | 5 +++++ components/_form.sass | 1 + components/_list.sass | 4 ++++ components/_progress.sass | 1 - foundation/_base.sass | 1 + 8 files changed, 32 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b11ee58..5bb6043 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.14.3 - 2015-01-01 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Update spacing across files + 2.14.2 - 2014-12-10 ------------------- diff --git a/components/_button.sass b/components/_button.sass index b81c809..3aa5a1e 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -64,6 +64,7 @@ $btn-space-l: $btn-space * 2 !default .btn--a background: $btn--a-background color: $btn--a-color + &:hover, &:focus, &:active @@ -73,6 +74,7 @@ $btn-space-l: $btn-space * 2 !default .btn--b background: $btn--b-background color: $btn--b-color + &:hover, &:focus, &:active diff --git a/components/_card.sass b/components/_card.sass index 2c25200..5a6a935 100644 --- a/components/_card.sass +++ b/components/_card.sass @@ -81,6 +81,7 @@ $card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default > .card-section margin-bottom: nth($card-size-vars, $i) padding-top: nth($card-size-vars, $i) + &::after bottom: -#{nth($card-size-vars, $i)} left: -#{nth($card-size-vars, $i)} @@ -152,10 +153,13 @@ $card-size-vars: $card-space-xs, $card-space-s, $card-space-l !default margin-bottom: $card-space padding-top: $card-space position: relative + &:last-child margin: 0 + &::after background: none + &::after background: $card-borderColor bottom: -$card-space diff --git a/components/_dropdown.sass b/components/_dropdown.sass index 22126fb..c3105a1 100644 --- a/components/_dropdown.sass +++ b/components/_dropdown.sass @@ -101,6 +101,7 @@ $dropdown-width: 250px !default margin-top: $dropdown-space transition: opacity 0.2s ease-in-out, top 0.3s ease-in-out top: 65% + &::before +caret(top, 10px, $dropdown-menu-background) left: $dropdown-space-l @@ -122,6 +123,7 @@ $dropdown-width: 250px !default .dropdown-menu left: 50% margin-left: -($dropdown-width * 0.5) + &::before left: 50% @@ -168,8 +170,10 @@ $dropdown-width: 250px !default .dropdown-menu-item font-size: $dropdown-menu-item-fontSize margin: 0 + &:not(:last-child) border-bottom: $dropdown-border + &:last-child .dropdown-menu-item-link border-bottom-left-radius: $dropdown-borderRadius @@ -181,6 +185,7 @@ $dropdown-width: 250px !default display: block padding: $dropdown-space-s transition: all 0.2s ease-in-out + &:hover, &:focus background: $dropdown-menu-item-link-hover-background diff --git a/components/_form.sass b/components/_form.sass index c5f4177..87fe2f8 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -90,6 +90,7 @@ $form-space-s: $form-space * 0.5 !default position: relative transition: border-color 0.2s ease-in-out width: 100% + &:focus border-color: $form-input-focus-borderColor outline: none diff --git a/components/_list.sass b/components/_list.sass index 02bce96..acd2198 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -55,6 +55,7 @@ $list-space: 1.25em !default > .list-item border-bottom: $list-border padding-bottom: $list-space + &:last-child border-bottom: 0 padding-bottom: 0 @@ -66,6 +67,7 @@ $list-space: 1.25em !default > .list-item display: inline margin-right: $list-space + &:last-child margin-right: 0 @@ -77,6 +79,7 @@ $list-space: 1.25em !default > .list-item float: left margin-right: $list-space + &:last-child margin-right: 0 @@ -105,5 +108,6 @@ $list-space: 1.25em !default .list-item display: block margin-bottom: $list-space + &:last-child margin-bottom: 0 diff --git a/components/_progress.sass b/components/_progress.sass index a37c933..20c61f8 100644 --- a/components/_progress.sass +++ b/components/_progress.sass @@ -46,4 +46,3 @@ $progress-bar-background: #4e4e5b !default position: absolute top: 0 z-index: 1 - diff --git a/foundation/_base.sass b/foundation/_base.sass index 2f76340..b5f47dd 100644 --- a/foundation/_base.sass +++ b/foundation/_base.sass @@ -133,6 +133,7 @@ a color: $c-highlight text-decoration: none transition: $b-transition + &:active, &:focus, &:hover From fe5062b77d32ce7379eda33e1cad0e7a0ed6e1aa Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 1 Jan 2015 11:38:09 -0500 Subject: [PATCH 129/195] Docs: Update 'Responsive Tools' --- docs/patterns/responsive-tools.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/patterns/responsive-tools.md b/docs/patterns/responsive-tools.md index fc0d44f..3e99a49 100644 --- a/docs/patterns/responsive-tools.md +++ b/docs/patterns/responsive-tools.md @@ -72,12 +72,12 @@ Now, in your markup, you can utilize these responsive tools, like so: ```html
- +
``` ```html
- +
``` From b99e0c8d99fa0c56a06b393289274ba5e72ec376 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 13 Jan 2015 08:30:02 -0500 Subject: [PATCH 130/195] Add additional Foundation Tools --- CHANGELOG.md | 15 ++++++++++++ foundation/_tools.sass | 52 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5bb6043..ceb644b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.15.0 - 2015-01-13 +------------------- + +### Added + +- Additional Foundation Tools + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.14.3 - 2015-01-01 ------------------- diff --git a/foundation/_tools.sass b/foundation/_tools.sass index fdba705..47069b6 100644 --- a/foundation/_tools.sass +++ b/foundation/_tools.sass @@ -13,6 +13,13 @@ $b-border: 2px solid #ddd !default +// ----- Typography ----- // + +$b-fontSize-h1: 200% +$b-fontSize-h2: 150% +$b-fontSize-h3: 125% +$b-fontSize-h4: 110% + // ----- Sizing ----- // $b-space: 1.25em !default @@ -48,6 +55,15 @@ $b-space: 1.25em !default .opf opacity: 1 +// ------------------------------------- +// Overflow +// ------------------------------------- + +.ovh + overflow: hidden +.ovv + overflow: visible + // ------------------------------------- // Positioning // ------------------------------------- @@ -120,3 +136,39 @@ $b-space: 1.25em !default .potln top: -$b-space-l +// ------------------------------------- +// Text +// ------------------------------------- + +// ----- Size ----- // + +// Headings + +.tsh1 + font-size: $b-fontSize-h1 +.tsh2 + font-size: $b-fontSize-h2 +.tsh3 + font-size: $b-fontSize-h3 +.tsh4 + font-size: $b-fontSize-h4 + +// ------------------------------------- +// Vertical Align +// ------------------------------------- + +.vab + vertical-align: baseline +.vam + vertical-align: middle +.vat + vertical-align: top + +// ------------------------------------- +// Visibility +// ------------------------------------- + +.vih + visibility: hidden +.viv + visibility: visible From 92ebe467958e6a3c40072e21cd2e8147e2b254d4 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 13 Jan 2015 08:32:35 -0500 Subject: [PATCH 131/195] Update Foundation Tools comment heading --- foundation/_tools.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundation/_tools.sass b/foundation/_tools.sass index 47069b6..8eb82a8 100644 --- a/foundation/_tools.sass +++ b/foundation/_tools.sass @@ -1,7 +1,7 @@ // ************************************* // // Tools -// -> Additional global utilities +// -> Global utilities // // ************************************* From 1a09cb9aae1440b9a61ef2c3ef9a88876e8a71b0 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 13 Jan 2015 08:34:38 -0500 Subject: [PATCH 132/195] Add additional variables to Foundation Base --- CHANGELOG.md | 15 +++++++++++++++ foundation/_base.sass | 15 ++++++++++----- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ceb644b..dc30175 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.15.1 - 2015-01-13 +------------------- + +### Added + +- Additional variables to Foundation Base + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.15.0 - 2015-01-13 ------------------- diff --git a/foundation/_base.sass b/foundation/_base.sass index b5f47dd..c851349 100644 --- a/foundation/_base.sass +++ b/foundation/_base.sass @@ -51,7 +51,12 @@ $b-fontFamily-heading: sans-serif !default $b-fontFamily-mono: monospace !default $b-fontFamily: sans-serif !default $b-fontSize: 16px !default +$b-fontSize-h1: 200% !default +$b-fontSize-h2: 150% !default +$b-fontSize-h3: 125% !default +$b-fontSize-h4: 110% !default $b-lineHeight: 1.5 !default +$b-lineHeight-heading: 1.2 !default // ----- Sizing ----- // @@ -101,21 +106,21 @@ h3, .h3, h4, .h4 font-family: $b-fontFamily-heading font-weight: bold - line-height: 1.2 + line-height: $b-lineHeight-heading margin-bottom: $b-space-xs margin-top: 0 h1, .h1 - font-size: 200% + font-size: $b-fontSize-h1 h2, .h2 - font-size: 150% + font-size: $b-fontSize-h2 h3, .h3 - font-size: 125% + font-size: $b-fontSize-h3 h4, .h4 - font-size: 110% + font-size: $b-fontSize-h4 // ----- Preformatted Text ----- // From 9a4e4642c3b365ff84aab3c0ce60bcc86d2b1212 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 14 Jan 2015 06:39:38 -0500 Subject: [PATCH 133/195] Update spacing of state mixin --- CHANGELOG.md | 15 +++++++++++++++ foundation/_mixins.sass | 2 -- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dc30175..33be49d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.15.2 - 2015-01-14 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Update spacing of `+state` mixin + 2.15.1 - 2015-01-13 ------------------- diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index 0169b5c..582f68d 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -92,11 +92,9 @@ // ------------------------------------- =state($class: false) - @if $class &:active, &:focus, &:hover, &.#{$class} @content - @else &:active, &:focus, &:hover @content From 23f1d332adb929d257ae34497c4552bf5b721c73 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 14 Jan 2015 18:29:09 -0500 Subject: [PATCH 134/195] Add additional Foundation Tools --- CHANGELOG.md | 15 +++++++++++++++ foundation/_tools.sass | 7 +++++++ 2 files changed, 22 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 33be49d..d38fc69 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.16.0 - 2015-01-14 +------------------- + +### Added + +- Additional Foundation Tools + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.15.2 - 2015-01-14 ------------------- diff --git a/foundation/_tools.sass b/foundation/_tools.sass index 8eb82a8..b7b8308 100644 --- a/foundation/_tools.sass +++ b/foundation/_tools.sass @@ -140,6 +140,13 @@ $b-space: 1.25em !default // Text // ------------------------------------- +// ----- Alignment ----- // + +.tal + text-align: left +.tar + text-align: right + // ----- Size ----- // // Headings From 57bbf582c35c6debeabcf6be5a5a50c630adb49a Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 15 Jan 2015 09:31:21 -0500 Subject: [PATCH 135/195] Add additional Foundation Tools - Small-number pixel positioning values - Background colors based on palette - Text colors based on palette --- CHANGELOG.md | 17 ++++++++++ foundation/_tools.sass | 70 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 86 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d38fc69..93c86c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,23 @@ Changelog ========= +2.17.0 - 2015-01-15 +------------------- + +### Added + +- Foundation Tools for small-number pixel positioning values +- Foundation Tools for setting background colors based on palette +- Foundation Tools for setting text colors based on palette + +### Removed + +- Nothing + +### Fixed + +- Update Foundation Tools comment heading to 'Vertical Alignment' + 2.16.0 - 2015-01-14 ------------------- diff --git a/foundation/_tools.sass b/foundation/_tools.sass index b7b8308..42ab68c 100644 --- a/foundation/_tools.sass +++ b/foundation/_tools.sass @@ -9,6 +9,13 @@ // Variables // ------------------------------------- +// ----- Palette ----- // + +$black: black +$blue: blue +$green: green +$yellow: yellow + // ----- Borders ----- // $b-border: 2px solid #ddd !default @@ -24,6 +31,30 @@ $b-fontSize-h4: 110% $b-space: 1.25em !default +// ----- Tools ----- // + +// Text + +$tool-background-names: 'black', 'green' !default +$tool-background-vars: $black, $green !default +$tool-color-names: 'blue', 'yellow' !default +$tool-color-vars: $blue, $yellow !default + +// Positioning + +$tool-position-values: 1, 2, 3, 4, 5 !default + +// ------------------------------------- +// Background +// ------------------------------------- + +// ----- Palette ----- // + +@for $i from 1 through length($tool-background-vars) + + .bc-#{nth($tool-background-names, $i)} + background: nth($tool-color-vars, $i) + // ------------------------------------- // Borders // ------------------------------------- @@ -85,6 +116,13 @@ $b-space: 1.25em !default .pobln bottom: -$b-space-l +@each $value in $tool-position-values + + .pob#{$value} + bottom: #{$value}px + .pobn#{$value} + bottom: -#{$value}px + // ----- Left ----- // .polxs @@ -102,6 +140,13 @@ $b-space: 1.25em !default .polln left: -$b-space-l +@each $value in $tool-position-values + + .pol#{$value} + left: #{$value}px + .poln#{$value} + left: -#{$value}px + // ----- Right ----- // .porxs @@ -119,6 +164,13 @@ $b-space: 1.25em !default .porln right: -$b-space-l +@each $value in $tool-position-values + + .por#{$value} + right: #{$value}px + .porn#{$value} + right: -#{$value}px + // ----- Top ----- // .potxs @@ -136,6 +188,13 @@ $b-space: 1.25em !default .potln top: -$b-space-l +@each $value in $tool-position-values + + .pot#{$value} + top: #{$value}px + .potn#{$value} + top: -#{$value}px + // ------------------------------------- // Text // ------------------------------------- @@ -147,6 +206,15 @@ $b-space: 1.25em !default .tar text-align: right +// ----- Color ----- // + +// Palette + +@for $i from 1 through length($tool-color-vars) + + .tc-#{nth($tool-color-names, $i)} + color: nth($tool-color-vars, $i) + // ----- Size ----- // // Headings @@ -161,7 +229,7 @@ $b-space: 1.25em !default font-size: $b-fontSize-h4 // ------------------------------------- -// Vertical Align +// Vertical Alignnment // ------------------------------------- .vab From 61542dce1a131ca6888d19d8d6f8c2327f3fabae Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 21 Jan 2015 07:38:17 -0500 Subject: [PATCH 136/195] Add shade and tint functions These functions can be generally used in place of darken and lighten to provide more accurate color scaling. `mix` is used instead of `scale-color` because of the syntactical weirdness with `scale-color`. --- CHANGELOG.md | 15 +++++++++++++++ foundation/_functions.sass | 23 +++++++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 93c86c2..ef187c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.18.0 - 2015-01-21 +------------------- + +### Added + +- `shade` and `tint` Functions + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.17.0 - 2015-01-15 ------------------- diff --git a/foundation/_functions.sass b/foundation/_functions.sass index 61488fd..0d4ad26 100644 --- a/foundation/_functions.sass +++ b/foundation/_functions.sass @@ -31,3 +31,26 @@ @function rem($size) @return ($size / $b-fontSize) * 1rem +// ------------------------------------- +// Shade +// -> Slightly darken a color +// Via: http://sass-guidelin.es/#lightening-and-darkening-colors (modified) +// +// $color - the color to shade +// $percentage - the percentage of black to add to `$color` +// ------------------------------------- + +@function shade($color, $percentage) + @return mix(black, $color, $percentage) + + // ------------------------------------- + // Tint + // -> Slightly lighten a color + // Via: http://sass-guidelin.es/#lightening-and-darkening-colors (modified) + // + // $color - the color to tint + // $percentage - the percentage of white to add to `$color` + // ------------------------------------- + + @function tint($color, $percentage) + @return mix(white, $color, $percentage) From c35574cf6e6b13a768b1a75fbe44b1200b06181b Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 21 Jan 2015 07:57:18 -0500 Subject: [PATCH 137/195] Add more consistent comment structure --- CHANGELOG.md | 15 ++++++++++++ README.md | 22 +++++------------ foundation/_extends.sass | 28 ++++++---------------- foundation/_functions.sass | 48 ++++++++++++++++---------------------- foundation/_mixins.sass | 38 +++++++----------------------- 5 files changed, 56 insertions(+), 95 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ef187c1..57c90ea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.18.1 - 2015-01-21 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- More consistent comment structure across Extends, Functions, and Mixins + 2.18.0 - 2015-01-21 ------------------- diff --git a/README.md b/README.md index 2f231c7..b7fb552 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,7 @@ Choose the Sass extends, functions, and mixins from `/foundation` to include in **Extends** ```sass -// ------------------------------------- -// Extend Name -// ------------------------------------- +// ----- Extend Name ----- // .extend // ... @@ -22,12 +20,10 @@ Choose the Sass extends, functions, and mixins from `/foundation` to include in **Functions** ```sass -// ------------------------------------- -// Function Name -// -> Description +// ----- Function Name ----- // +// -> Description // -// $arg - the argument description -// ------------------------------------- +// $arg - the argument description @function name($arg) // ... @@ -36,16 +32,10 @@ Choose the Sass extends, functions, and mixins from `/foundation` to include in **Mixins** ```sass -// ------------------------------------- -// -// Mixin Name -// -> Description -// -// ------------------------------------- +// ----- Mixin Name ----- // +// -> Description // // $arg - the argument description -// -// ------------------------------------- =name($arg) // ... diff --git a/foundation/_extends.sass b/foundation/_extends.sass index b2d7aa2..676ee94 100644 --- a/foundation/_extends.sass +++ b/foundation/_extends.sass @@ -4,9 +4,7 @@ // // ************************************* -// ------------------------------------- -// Faux Hide -// ------------------------------------- +// ----- Faux Hide ----- // .fauxHide height: 0 @@ -14,9 +12,7 @@ overflow: hidden visibility: hidden -// ------------------------------------- -// Faux Show -// ------------------------------------- +// ----- Faux Hide ----- // .fauxShow height: auto @@ -24,18 +20,14 @@ overflow: visible visibility: visible -// ------------------------------------- -// List Reset -// ------------------------------------- +// ----- List Reset ----- // .lr list-style-type: none margin: 0 padding: 0 -// ------------------------------------- -// Vertical/Horizontal Center -// ------------------------------------- +// ----- Vertical/Horizontal Center ----- // .middle left: 50% @@ -43,9 +35,7 @@ top: 50% transform: translate(-50%, -50%) -// ------------------------------------- -// Semantic Hide -// ------------------------------------- +// ----- Semantic Hide ----- // .srt border: 0 @@ -57,9 +47,7 @@ position: absolute width: 1px -// ------------------------------------- -// Stretch -// ------------------------------------- +// ----- Stretch ----- // .stretch bottom: 0 @@ -68,9 +56,7 @@ right: 0 top: 0 -// ------------------------------------- -// Vertical Align -// ------------------------------------- +// ----- Vertical Align ----- // .valign +transform(translateY(-50%)) diff --git a/foundation/_functions.sass b/foundation/_functions.sass index 0d4ad26..6171c05 100644 --- a/foundation/_functions.sass +++ b/foundation/_functions.sass @@ -4,12 +4,10 @@ // // ************************************* -// ------------------------------------- -// Opposite Position -// -> Returns the opposite side +// ----- Opposite Position ----- // +// -> Returns the opposite side // -// $side - the side to return the opposite of -// ------------------------------------- +// $side - the side to return the opposite of @function opposite-position($side) @if $side == 'top' @@ -21,36 +19,30 @@ @if $side == 'right' @return 'left' -// ------------------------------------- -// Rem -// -> Converts a pixel value into a rem +// ----- Rem ----- // +// -> Converts a pixel value into a rem // -// $size - the pixel size -// ------------------------------------- +// $size - the pixel size @function rem($size) @return ($size / $b-fontSize) * 1rem -// ------------------------------------- -// Shade -// -> Slightly darken a color -// Via: http://sass-guidelin.es/#lightening-and-darkening-colors (modified) +// ----- Shade ----- // +// -> Slightly darken a color +// via: http://sass-guidelin.es/#lightening-and-darkening-colors (modified) // -// $color - the color to shade -// $percentage - the percentage of black to add to `$color` -// ------------------------------------- +// $color - the color to shade +// $percentage - the percentage of black to add to `$color` @function shade($color, $percentage) @return mix(black, $color, $percentage) - // ------------------------------------- - // Tint - // -> Slightly lighten a color - // Via: http://sass-guidelin.es/#lightening-and-darkening-colors (modified) - // - // $color - the color to tint - // $percentage - the percentage of white to add to `$color` - // ------------------------------------- - - @function tint($color, $percentage) - @return mix(white, $color, $percentage) +// ----- Tint ----- // +// -> Slightly lighten a color +// Via: http://sass-guidelin.es/#lightening-and-darkening-colors (modified) +// +// $color - the color to tint +// $percentage - the percentage of white to add to `$color` + +@function tint($color, $percentage) + @return mix(white, $color, $percentage) diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index 582f68d..007ba05 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -4,18 +4,12 @@ // // ************************************* -// ------------------------------------- -// -// Caret -// -> Creates a caret (arrow) icon -// -// ------------------------------------- +// ----- Caret ----- // +// -> Creates a caret (arrow) icon // // $side - the side the caret is on // $size - the caret size // $color - the caret color -// -// ------------------------------------- // Requires this function (replaces Compass) @@ -48,12 +42,8 @@ #{$side}: -$size #{$opposite}: auto -// ------------------------------------- -// -// Respond-within -// -> Generates a media query within a range -// -// ------------------------------------- +// ----- Respond-within ----- // +// -> Generates a media query within a range // // $min - the initial breakpoint size // $max - the larger breakpoint size @@ -64,32 +54,20 @@ @media #{$media} and (min-width: $min) and (max-width: $max) @content -// ------------------------------------- -// -// Size -// -> Outputs width/height properties -// -// ------------------------------------- +// ----- Size ----- // +// -> Outputs width/height properties // // $width - the element width // $height - the element height -// -// ------------------------------------- =size($width, $height: $width) height: $height width: $width -// ------------------------------------- -// -// State -// -> Combines state-related pseudo-classes -// -// ------------------------------------- +// ----- State ----- // +// -> Combines state-related pseudo-classes // // $class - an optional state class ('is-active') -// -// ------------------------------------- =state($class: false) @if $class From 5ed69a11547be04f870bb1fc79e55c3c63a21601 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 21 Jan 2015 08:02:11 -0500 Subject: [PATCH 138/195] Add 'zi' mixin --- CHANGELOG.md | 15 +++++++++++++++ foundation/_mixins.sass | 16 ++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 57c90ea..add816b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.18.0 - 2015-01-21 +------------------- + +### Added + +- `zi` Mixin + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.18.1 - 2015-01-21 ------------------- diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index 007ba05..67de1a5 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -76,3 +76,19 @@ @else &:active, &:focus, &:hover @content + +// ----- z-index ----- // +// -> http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/ +// +// $element - the name of the element in the list +// $list - the name of the list (defaults to `$zi-global`) + +@function zi($element, $list: $zi-global) + $index: index($list, $element) + + @if $index + @return $index + + @warn 'There is no item "#{$element}" in this list; choose one of: #{$list}' + @return null + From 5be56b295fbf8a70b90e2bf6e4593d7f17e17474 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 21 Jan 2015 08:05:56 -0500 Subject: [PATCH 139/195] Add 'z-index' docs --- docs/patterns/z-index.md | 43 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 docs/patterns/z-index.md diff --git a/docs/patterns/z-index.md b/docs/patterns/z-index.md new file mode 100644 index 0000000..7ab911d --- /dev/null +++ b/docs/patterns/z-index.md @@ -0,0 +1,43 @@ +z-index +======= + +To manage your `z-index` using the `zi` mixin, you first need to create a `$zi-global` list. + +```sass +$zi-global: 'tooltip', 'popover', 'modal' +``` + +Next, in your styles, you can set the `z-index`. + +```sass +.tooltip + // ... + z-index: zi('tooltip') + +.popover + // ... + z-index: zi('popover') + +.modal + // ... + z-index: zi('modal') +``` + +If you want a new scope of ordering, you can create a new list. + +```sass +$zi-course: 'course-badge', 'course-content' +``` + +Then you can use your new list in your styles. + + +```sass +.course-badge + // ... + z-index: zi('course-badge', $zi-course) + +.course-content + // ... + z-index: zi('course-content', $zi-course) +``` From 43bc961cd0504bb5856f14c7af620f28525d5286 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 21 Jan 2015 11:43:20 -0500 Subject: [PATCH 140/195] Remove Form Component form-field horizontal margin --- components/_form.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_form.sass b/components/_form.sass index 87fe2f8..b4d0a78 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -66,7 +66,7 @@ $form-space-s: $form-space * 0.5 !default .form-field border: 0 - margin-bottom: $form-space + margin: 0 0 $form-space padding: 0 // Inline From cc9b698326d494d5ca254404bc81f37078880dc0 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 21 Jan 2015 11:43:56 -0500 Subject: [PATCH 141/195] Encapsulate Video Structure descendant elements --- components/_video.sass | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/_video.sass b/components/_video.sass index c388331..023c3e1 100644 --- a/components/_video.sass +++ b/components/_video.sass @@ -53,11 +53,11 @@ $video-ratios: ( 16, 9 ), ( 4, 3 ) !default // ----- Item ----- // -embed, -iframe, -object, -video, -.video-item +.video-item, +.video embed, +.video iframe, +.video object, +.video video bottom: 0 height: 100% left: 0 From 728266f60ad9ae22e85b4536b18b6b3cacf9a115 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 21 Jan 2015 11:45:06 -0500 Subject: [PATCH 142/195] Add Range Component --- components/_range.sass | 132 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 components/_range.sass diff --git a/components/_range.sass b/components/_range.sass new file mode 100644 index 0000000..a44def4 --- /dev/null +++ b/components/_range.sass @@ -0,0 +1,132 @@ +// ************************************* +// +// Range +// -> Sliding user input +// CodePen: http://codepen.io/johndjameson/pen/MYmzGR/ +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %input.range{ type: 'range', min: 0, max: 100 } +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$range-thumb-background: #ddd !default +$range-track-background: #ccc !default + +// ----- Track ----- // + +// Borders & Box Shadows + +$range-track-border: 0 !default +$range-track-borderRadius: 0 !default +$range-track-boxShadow: inset 0 1px 1px rgba( #000, 0.3 ) !default + +// Sizing + +$range-track-height: 10px !default + +// ----- Range ----- // + +// Borders & Box Shadows + +$range-thumb-border: 0 !default +$range-thumb-borderRadius: 0 !default +$range-thumb-boxShadow: 0 1px 1px rgba( #000, 0.3 ) !default + +// Sizing + +$range-thumb-height: 30px !default +$range-thumb-width: $range-thumb-height !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.range + -webkit-appearance: none + background: transparent + display: block + margin: 0 + width: 100% + + &:focus + outline: 0 + +// ----- Webkit ----- // + +.range::-webkit-slider-runnable-track + background: $range-track-background + border-radius: $range-track-borderRadius + border: $range-track-border + box-shadow: $range-track-boxShadow + cursor: pointer + height: $range-track-height + width: 100% + +.range::-webkit-slider-thumb + -webkit-appearance: none + background: $range-thumb-background + border-radius: $range-thumb-borderRadius + border: $range-thumb-border + box-shadow: $range-thumb-boxShadow + cursor: pointer + height: $range-thumb-height + margin-top: ( $range-track-height - $range-thumb-height ) * 0.5 + width: $range-thumb-width + +// ----- Firefox ----- // + +.range::-moz-range-track + background: $range-track-background + border-radius: $range-track-borderRadius + border: $range-track-border + box-shadow: $range-track-boxShadow + cursor: pointer + height: $range-track-height + width: 100% + +.range::-moz-range-thumb + background: $range-thumb-background + border-radius: $range-thumb-borderRadius + border: $range-thumb-border + box-shadow: $range-thumb-boxShadow + cursor: pointer + height: $range-thumb-height + width: $range-thumb-width + +.range::-moz-focus-outer + border: 0 + +// ----- Internet Explorer ----- // + +.range::-ms-track + background: transparent + border-color: transparent + color: transparent + cursor: pointer + height: $range-track-height + width: 100% + +.range::-ms-fill-lower, +.range::-ms-fill-upper + background: $range-track-background + border-radius: $range-track-borderRadius + border: $range-track-border + box-shadow: $range-track-boxShadow + +.range::-ms-thumb + background: $range-thumb-background + border-radius: $range-thumb-borderRadius + border: $range-thumb-border + box-shadow: $range-thumb-boxShadow + cursor: pointer + height: $range-thumb-height + width: $range-thumb-width From d15952289408ab5ec35885a7fb43240ef934182a Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Wed, 21 Jan 2015 11:45:18 -0500 Subject: [PATCH 143/195] Update CHANGELOG.md, fix previous version number --- CHANGELOG.md | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index add816b..3dce952 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,22 @@ Changelog ========= -2.18.0 - 2015-01-21 +2.20.0 - 2015-01-21 +------------------- + +### Added + +- Range Component + +### Removed + +- `.form-field` horizontal margins when used on `fieldset` elements + +### Fixed + +- Encapsulate Video Structure descendant elements + +2.19.0 - 2015-01-21 ------------------- ### Added From 1f4b8e61b7900bc08af4aea4aa4d9553f6aea43f Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 4 Feb 2015 10:22:56 -0500 Subject: [PATCH 144/195] Update Sass comment Haml documentation --- CHANGELOG.md | 15 +++++++++++++++ components/_bar.sass | 5 ++--- components/_button.sass | 11 +++++++++-- components/_card.sass | 10 ++++++---- components/_column.sass | 2 +- components/_dropdown.sass | 7 +++---- components/_form.sass | 11 ++++++----- components/_list.sass | 2 +- components/_panel.sass | 4 +++- components/_sector.sass | 5 +++-- components/_split.sass | 12 ++++++++---- components/_sticker.sass | 2 +- components/_table.sass | 13 +++++++------ components/_thumb.sass | 3 +-- components/_video.sass | 2 +- components/flexbox/_bucket.sass | 4 +++- components/flexbox/_sector.sass | 7 ++++--- components/flexbox/_split.sass | 8 ++++++-- structures/_collection.sass | 6 ++++-- 19 files changed, 84 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3dce952..b3e62bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.20.1 - 2015-02-04 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- The Sass comment Haml template documentation + 2.20.0 - 2015-01-21 ------------------- diff --git a/components/_bar.sass b/components/_bar.sass index 11ce9ba..4943695 100644 --- a/components/_bar.sass +++ b/components/_bar.sass @@ -8,9 +8,9 @@ // Template (Haml) // ------------------------------------- // -// (.has-bar|bar--content) +// .has-bar[context] // -// .bar[.bar--fixed|header|footer|n|s|e|w] +// .bar[north|south|east|west header|footer fixed] // / ... // // ************************************* @@ -85,4 +85,3 @@ $bar-space: 1.25em !default .has-bar--content margin-top: $bar-space - diff --git a/components/_button.sass b/components/_button.sass index 3aa5a1e..05bec3e 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -8,7 +8,7 @@ // Template (Haml) // ------------------------------------- // -// .btn[.btn--a|b|l|s] +// .btn[a|b s|l] // // ************************************* @@ -61,6 +61,8 @@ $btn-space-l: $btn-space * 2 !default // ----- Hierarchy ----- // +// Primary + .btn--a background: $btn--a-background color: $btn--a-color @@ -71,6 +73,8 @@ $btn-space-l: $btn-space * 2 !default background: lighten($btn--a-background, 10%) color: $btn--a-color +// Secondary + .btn--b background: $btn--b-background color: $btn--b-color @@ -83,11 +87,14 @@ $btn-space-l: $btn-space * 2 !default // ----- Sizes ----- // +// Small + .btn--s font-size: $btn--s-fontSize padding: 0 $btn-space-s +// Large + .btn--l font-size: $btn--l-fontSize padding: 0 $btn-space-l - diff --git a/components/_card.sass b/components/_card.sass index 5a6a935..932581b 100644 --- a/components/_card.sass +++ b/components/_card.sass @@ -8,13 +8,15 @@ // Template (Haml) // ------------------------------------- // -// (.has-card-item|card-row|card-section) +// .has-card-item|card-row|card-section +// +// .card[a|b f|xs|s|l] +// +// .card-row[north|south] // -// .card[.card--a|b|xs|s|l|f] -// .card-row[.card-row--north|south] // .card-section // -// %a.card-item.btn{href: '#'} Button +// .card-item // // ************************************* diff --git a/components/_column.sass b/components/_column.sass index 1dd015b..57f5985 100644 --- a/components/_column.sass +++ b/components/_column.sass @@ -7,7 +7,7 @@ // Template (Haml) // ------------------------------------- // -// .column[.column--|1|2|3|...] +// .column[1|2|3|...] // / ... // // ************************************* diff --git a/components/_dropdown.sass b/components/_dropdown.sass index c3105a1..6025d8f 100644 --- a/components/_dropdown.sass +++ b/components/_dropdown.sass @@ -7,12 +7,11 @@ // Template (Haml) // ------------------------------------- // -// .dropdown[.dropdown--floating|center](.is-active) +// .dropdown[center floating](active) +// // %ul.dropdown-menu // %li.dropdown-menu-item -// %a.dropdown-menu-item-link{ href: '#' } Menu Item -// %li.dropdown-menu-item -// %a.dropdown-menu-item-link{ href: '#' } Menu Item +// %a.dropdown-menu-item-link // // ************************************* diff --git a/components/_form.sass b/components/_form.sass index b4d0a78..5d9a3c3 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -8,10 +8,12 @@ // Template (Haml) // ------------------------------------- // -// %form.form -// %fieldset.form-field -// %label.form-label(for="email") Email -// %input.form-input(type="email" id="email") +// %form.form[condensed] +// +// %fieldset.form-field[inline] +// %label.form-label +// %input.form-input +// %select.form-select // // ************************************* @@ -107,4 +109,3 @@ $form-space-s: $form-space * 0.5 !default .form-select min-width: 12.5em // ~200px - diff --git a/components/_list.sass b/components/_list.sass index acd2198..b8d62d2 100644 --- a/components/_list.sass +++ b/components/_list.sass @@ -8,7 +8,7 @@ // Template (Haml) // ------------------------------------- // -// %ul.list[.list--divided|inline|object|styled|styled--numbered] +// %ul.list[divided inline|object styled|styled--numbered] // %li.list-item List Item // %li.list-item List Item // diff --git a/components/_panel.sass b/components/_panel.sass index ff2c39c..f2e6646 100644 --- a/components/_panel.sass +++ b/components/_panel.sass @@ -8,8 +8,10 @@ // Template (Haml) // ------------------------------------- // -// .panel[.panel--scroll|top--1of4|top--s--1of2|etc.] +// .panel[scroll top--1of2|...] +// // .panel-content +// / ... // // ************************************* diff --git a/components/_sector.sass b/components/_sector.sass index 9ddddf6..9e2f963 100644 --- a/components/_sector.sass +++ b/components/_sector.sass @@ -9,8 +9,9 @@ // ------------------------------------- // // .has-sector -// .sector[.sector--a|b|...] -// .sector[.sector--a|b|...] +// +// .sector[a|b] +// .sector[a|b] // // ************************************* diff --git a/components/_split.sass b/components/_split.sass index 8d2f388..213fff4 100644 --- a/components/_split.sass +++ b/components/_split.sass @@ -8,10 +8,14 @@ // Template (Haml) // ------------------------------------- // -// %[ul].split[.split--divided] -// %[li].split-item -// .split-cell Split cell -// .split-cell Split cell +// %ul.split[divided] +// +// %li.split-item +// +// .split-cell +// / ... +// .split-cell +// / ... // // ************************************* diff --git a/components/_sticker.sass b/components/_sticker.sass index 1253bd7..bb7d805 100644 --- a/components/_sticker.sass +++ b/components/_sticker.sass @@ -8,7 +8,7 @@ // Template (Haml) // ------------------------------------- // -// .sticker--[authored|bordered|s|m|l]{ data: { sticker: '...' } } +// .sticker[authored|bordered s|m|l]{ data: { sticker: '...' } } // // ************************************* diff --git a/components/_table.sass b/components/_table.sass index 7b69aa2..634253b 100644 --- a/components/_table.sass +++ b/components/_table.sass @@ -8,15 +8,17 @@ // Template (Haml) // ------------------------------------- // -// %table.table[.table--striped] +// %table.table[striped] +// // %thead.table-header +// // %tr.table-row -// %th.table-head Heading -// %th.table-head Heading +// %th.table-head +// // %tbody.table-body +// // %tr.table-row -// %td.table-data Data -// %td.table-data Data +// %td.table-data // // ************************************* @@ -99,4 +101,3 @@ $table-space-s: $table-space * 0.5 !default text-align: left text-transform: uppercase vertical-align: bottom - diff --git a/components/_thumb.sass b/components/_thumb.sass index ded925a..60eb68f 100644 --- a/components/_thumb.sass +++ b/components/_thumb.sass @@ -8,7 +8,7 @@ // Template (Haml) // ------------------------------------- // -// %img.thumb[.thumb--m]{ src: '', alt: '' } +// %img.thumb[m] // // ************************************* @@ -34,4 +34,3 @@ $thumb-borderRadius: 4px !default .thumb--m border-radius: $thumb-borderRadius - diff --git a/components/_video.sass b/components/_video.sass index 023c3e1..1aed39e 100644 --- a/components/_video.sass +++ b/components/_video.sass @@ -8,7 +8,7 @@ // ------------------------------------- // // .video -// %embed|iframe|object|video.video-item +// %embed|iframe|object|video|.video-item // // ************************************* diff --git a/components/flexbox/_bucket.sass b/components/flexbox/_bucket.sass index 777b090..305264c 100644 --- a/components/flexbox/_bucket.sass +++ b/components/flexbox/_bucket.sass @@ -8,9 +8,11 @@ // Template (Haml) // ------------------------------------- // -// .bucket[.bucket--flag] +// .bucket[flag] +// // .bucket-media // / ... +// // .bucket-content // / ... // diff --git a/components/flexbox/_sector.sass b/components/flexbox/_sector.sass index c3fb5b0..68756f3 100644 --- a/components/flexbox/_sector.sass +++ b/components/flexbox/_sector.sass @@ -9,9 +9,10 @@ // ------------------------------------- // // .has-sector -// .sector -// .sector-item[.sector-item--a|b|...] -// .sector-item[.sector-item--a|b|...] +// +// .sector +// .sector-item[a|b] +// .sector-item[a|b] // // ************************************* diff --git a/components/flexbox/_split.sass b/components/flexbox/_split.sass index b667e2c..f473e26 100644 --- a/components/flexbox/_split.sass +++ b/components/flexbox/_split.sass @@ -9,8 +9,12 @@ // ------------------------------------- // // .split -// .split-cell Split cell -// .split-cell Split cell +// +// .split-cell +// / ... +// +// .split-cell +// / ... // // ************************************* diff --git a/structures/_collection.sass b/structures/_collection.sass index 19c8de7..a863569 100644 --- a/structures/_collection.sass +++ b/structures/_collection.sass @@ -13,8 +13,10 @@ // Template (Haml) // ------------------------------------- // -// .g.collection[.collection--s|m|l--1of1|1of2|1of3|...] -// .g-b[.g-b--s|m|l--1of1|1of2|1of3|...].collection-item +// .g.collection[s|m|l--1of1|...] +// +// .g-b[s|m|l--1of1|...].collection-item +// / ... // // ************************************* From 7820f208022a3bc1de81baa87177703efd49316c Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 5 Feb 2015 12:35:05 -0500 Subject: [PATCH 145/195] Update spacing to keep consistency across files --- CHANGELOG.md | 15 +++++++++++++++ components/_range.sass | 4 ++-- components/_video.sass | 6 +++--- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b3e62bf..96aae5b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.20.2 - 2015-02-05 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Spacing standards + 2.20.1 - 2015-02-04 ------------------- diff --git a/components/_range.sass b/components/_range.sass index a44def4..f0a605d 100644 --- a/components/_range.sass +++ b/components/_range.sass @@ -27,7 +27,7 @@ $range-track-background: #ccc !default $range-track-border: 0 !default $range-track-borderRadius: 0 !default -$range-track-boxShadow: inset 0 1px 1px rgba( #000, 0.3 ) !default +$range-track-boxShadow: inset 0 1px 1px rgba(#000, 0.3) !default // Sizing @@ -39,7 +39,7 @@ $range-track-height: 10px !default $range-thumb-border: 0 !default $range-thumb-borderRadius: 0 !default -$range-thumb-boxShadow: 0 1px 1px rgba( #000, 0.3 ) !default +$range-thumb-boxShadow: 0 1px 1px rgba(#000, 0.3) !default // Sizing diff --git a/components/_video.sass b/components/_video.sass index 1aed39e..8ff2565 100644 --- a/components/_video.sass +++ b/components/_video.sass @@ -22,7 +22,7 @@ $video-background: #000 !default // ----- Ratios ----- // -$video-ratios: ( 16, 9 ), ( 4, 3 ) !default +$video-ratios: (16, 9), (4, 3) !default // ------------------------------------- // Base @@ -44,8 +44,8 @@ $video-ratios: ( 16, 9 ), ( 4, 3 ) !default @each $ratio in $video-ratios - .video--#{ nth( $ratio, 1 ) }by#{ nth( $ratio, 2 ) } - padding-bottom: percentage( nth( $ratio, 2 ) / nth( $ratio, 1 ) ) + .video--#{nth($ratio, 1)}by#{nth($ratio, 2)} + padding-bottom: percentage(nth($ratio, 2) / nth($ratio, 1)) // ------------------------------------- // Scaffolding From be314ed45d7b2f2d72976548722a55e350187b79 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 6 Feb 2015 17:35:20 -0500 Subject: [PATCH 146/195] Update Table Component styles --- CHANGELOG.md | 15 +++++++++++++++ components/_table.sass | 22 +++++++++++++++------- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 96aae5b..edf3ca4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.21.0 - 2015-02-06 +------------------- + +### Added + +- Small modifier to the Table Component + +### Removed + +- Nothing + +### Fixed + +- Style update to the Table Component + 2.20.2 - 2015-02-05 ------------------- diff --git a/components/_table.sass b/components/_table.sass index 634253b..85b18a9 100644 --- a/components/_table.sass +++ b/components/_table.sass @@ -38,9 +38,10 @@ $table-data-borderWidth: 1px !default // ----- Typography ----- // -$table-fontSize-s: 75% !default -$table-fontSize-m: 90% !default +$table-fontSize-s: 90% !default +$table-fontSize: 16px !default $table-lineHeight: 1.5 !default +$table-lineHeight-s: 1.2 !default // ----- Sizing ----- // @@ -58,6 +59,17 @@ $table-space-s: $table-space * 0.5 !default // Modifiers // ------------------------------------- +// ----- Sizes ----- // + +.table--s + + .table-data, + .table-header, + .table-head + font-size: $table-fontSize-s + line-height: $table-lineHeight-s + padding: $table-space-s + // ----- Striped ----- // .table--striped @@ -74,6 +86,7 @@ $table-space-s: $table-space * 0.5 !default .table-data, .table-header border-top: $table-border + font-size: $table-fontSize line-height: $table-lineHeight padding: $table-space-s $table-space vertical-align: top @@ -82,8 +95,6 @@ $table-space-s: $table-space * 0.5 !default .table-data border-top-width: $table-data-borderWidth - font-size: $table-fontSize-m - vertical-align: middle // ----- Header ----- // @@ -96,8 +107,5 @@ $table-space-s: $table-space * 0.5 !default .table-head border-bottom: $table-border border-top: 0 - font-size: $table-fontSize-s padding: $table-space-s $table-space text-align: left - text-transform: uppercase - vertical-align: bottom From 034b6fbc38e4061e9c65b34dde7565b3aab6f3b9 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 6 Feb 2015 17:37:04 -0500 Subject: [PATCH 147/195] Update Table Component variable order --- components/_table.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_table.sass b/components/_table.sass index 85b18a9..1451fd4 100644 --- a/components/_table.sass +++ b/components/_table.sass @@ -38,8 +38,8 @@ $table-data-borderWidth: 1px !default // ----- Typography ----- // -$table-fontSize-s: 90% !default $table-fontSize: 16px !default +$table-fontSize-s: 90% !default $table-lineHeight: 1.5 !default $table-lineHeight-s: 1.2 !default From f7ef24d7fa67dd55fd7d6edcbfffb6576c3270f2 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 16 Feb 2015 08:47:48 -0500 Subject: [PATCH 148/195] Update spacing in sticker component --- components/_sticker.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_sticker.sass b/components/_sticker.sass index bb7d805..e4104c1 100644 --- a/components/_sticker.sass +++ b/components/_sticker.sass @@ -56,7 +56,7 @@ $sticker-size: 3em !default left: 50% position: absolute top: 50% - transform: translate( -50%, -50% ) + transform: translate(-50%, -50%) // ------------------------------------- // Modifiers From 580d0a25d0d9d9c19aae02d0620bbef3fc322c3c Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 16 Feb 2015 08:48:38 -0500 Subject: [PATCH 149/195] Update spacing in range component --- components/_range.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_range.sass b/components/_range.sass index f0a605d..c4a934e 100644 --- a/components/_range.sass +++ b/components/_range.sass @@ -79,7 +79,7 @@ $range-thumb-width: $range-thumb-height !default box-shadow: $range-thumb-boxShadow cursor: pointer height: $range-thumb-height - margin-top: ( $range-track-height - $range-thumb-height ) * 0.5 + margin-top: ($range-track-height - $range-thumb-height) * 0.5 width: $range-thumb-width // ----- Firefox ----- // From 954de6c2eb399809e84987f5996f7ebe330476ff Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 16 Feb 2015 09:18:31 -0500 Subject: [PATCH 150/195] Update README --- README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b7fb552..615cf14 100644 --- a/README.md +++ b/README.md @@ -69,9 +69,10 @@ Choose the Sass components from `/components` to include in your [MVCSS](http:// // Template (Haml) // ------------------------------------- // -// (.has-context) +// .has-context +// +// .component[modifier](state) // -// .component[.component--modifier](.is-state) // .component-scaffolding // // ************************************* @@ -143,9 +144,10 @@ Choose the Sass structures from `/structures` to include in your [MVCSS](http:// // Template (Haml) // ------------------------------------- // -// (.has-context) +// .has-context +// +// .structure[modifier](state) // -// .structure[.structure--modifier](.is-state) // .structure-scaffolding // // ************************************* From 55ff7678be6a7eaf070619b2cbe176076a26d450 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 19 Feb 2015 14:22:32 -0500 Subject: [PATCH 151/195] Fix typo in Foundation Tools --- CHANGELOG.md | 15 +++++++++++++++ foundation/_tools.sass | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index edf3ca4..537ee67 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.21.1 - 2015-02-19 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Typo in Foundation Tools list name + 2.21.0 - 2015-02-06 ------------------- diff --git a/foundation/_tools.sass b/foundation/_tools.sass index 42ab68c..983c1c8 100644 --- a/foundation/_tools.sass +++ b/foundation/_tools.sass @@ -53,7 +53,7 @@ $tool-position-values: 1, 2, 3, 4, 5 !default @for $i from 1 through length($tool-background-vars) .bc-#{nth($tool-background-names, $i)} - background: nth($tool-color-vars, $i) + background: nth($tool-background-vars, $i) // ------------------------------------- // Borders From fbe7ba9bd8e4009f89912fecd86e0396f44ce33b Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 25 Feb 2015 17:46:21 -0500 Subject: [PATCH 152/195] Add Animate Component --- CHANGELOG.md | 15 ++++ components/_animate.sass | 188 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 203 insertions(+) create mode 100644 components/_animate.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index 537ee67..9f8668a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.22.0 - 2015-02-25 +------------------- + +### Added + +- Animate Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.21.1 - 2015-02-19 ------------------- diff --git a/components/_animate.sass b/components/_animate.sass new file mode 100644 index 0000000..cd5c900 --- /dev/null +++ b/components/_animate.sass @@ -0,0 +1,188 @@ +// ************************************* +// +// Animate +// -> Movement and effects +// CodePen: http://codepen.io/drewbarontini/pen/vErBjO +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .animate[fadeIn|slideDown|... infinite 1|2|3...] +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Settings ----- // + +$animate-duration: 1s !default +$animate-effects-basic: fadeIn, fadeOut, scaleDown, scaleUp, slideDown, slideUp !default +$animate-effects-fancy: bounce, fadeInDown, fadeInUp, flash, shake, tada !default +$animate-steps: 4 !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.animate + animation-duration: $animate-duration + animation-fill-mode: both + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Effects ----- // + +// Basic + +@each $effect in $animate-effects-basic + + .animate--#{$effect} + animation-name: $effect + +// Fancy + +@each $effect in $animate-effects-fancy + + .animate--#{$effect} + animation-name: $effect + +// ----- Infinite ----- // + +.animate--infinite + animation-iteration-count: infinite + +// ----- Steps ----- // + +@for $i from 1 through $animate-steps + + .animate--#{$i} + animation-delay: ($animate-duration * $i) - $animate-duration + +// ------------------------------------- +// Animations: Basic +// ------------------------------------- + +// ----- Fade In ----- // + +@keyframes fadeIn + from + opacity: 0 + to + opacity: 1 + +// ----- Fade Out ----- // + +@keyframes fadeOut + from + opacity: 1 + to + opacity: 0 + +// ----- Scale Down ----- // + +@keyframes scaleDown + from + transform: scale(2) + to + transform: scale(1) + +// ----- Scale Up ----- // + +@keyframes scaleUp + from + transform: scale(0) + to + transform: scale(1) + +// ----- Slide Down ----- // + +@keyframes slideDown + from + transform: translateY(-100%) + to + transform: translateY(0) + +// ----- Slide Up ----- // + +@keyframes slideUp + from + transform: translateY(100%) + to + transform: translateY(0) + +// ------------------------------------- +// Animations: Fancy (Animate.css) +// -> Credit: http://daneden.github.io/animate.css/ +// ------------------------------------- + +// ----- Bounce ----- // + +@keyframes bounce + 0%, 20%, 53%, 80%, 100% + transform: translate3d(0,0,0) + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000) + 40%, 43% + transform: translate3d(0, -30px, 0) + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060) + 70% + transform: translate3d(0, -15px, 0) + transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060) + 90% + transform: translate3d(0,-4px,0) + +// ----- Fade In Down ----- // + +@keyframes fadeInDown + 0% + opacity: 0 + transform: translate3d(0, -100%, 0) + 100% + opacity: 1 + transform: none + +// ----- Fade In Up ----- // + +@keyframes fadeInUp + 0% + opacity: 0 + transform: translate3d(0, 100%, 0) + 100% + opacity: 1 + transform: none + +// ----- Flash ----- // + +@keyframes flash + 0%, 50%, 100% + opacity: 1 + 25%, 75% + opacity: 0 + +// ----- Shake ----- // + +@keyframes shake + 0%, 100% + transform: translate3d(0, 0, 0) + 10%, 30%, 50%, 70%, 90% + transform: translate3d(-10px, 0, 0) + 20%, 40%, 60%, 80% + transform: translate3d(10px, 0, 0) + +// ----- Tada ----- // + +@keyframes tada + 0% + transform: scale3d(1, 1, 1) + 10%, 20% + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg) + 30%, 50%, 70%, 90% + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) + 40%, 60%, 80% + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) + 100% + transform: scale3d(1, 1, 1) From 5390a4872873414b1320223195c9865d69526ffc Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 26 Feb 2015 05:37:25 -0500 Subject: [PATCH 153/195] Update negative Tool position values --- CHANGELOG.md | 15 +++++++++++++++ foundation/_tools.sass | 8 ++++---- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f8668a..d1f61a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.22.1 - 2015-02-26 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Tool negative position values should end with `n` + 2.22.0 - 2015-02-25 ------------------- diff --git a/foundation/_tools.sass b/foundation/_tools.sass index 983c1c8..c5079e9 100644 --- a/foundation/_tools.sass +++ b/foundation/_tools.sass @@ -120,7 +120,7 @@ $tool-position-values: 1, 2, 3, 4, 5 !default .pob#{$value} bottom: #{$value}px - .pobn#{$value} + .pob#{$value}n bottom: -#{$value}px // ----- Left ----- // @@ -144,7 +144,7 @@ $tool-position-values: 1, 2, 3, 4, 5 !default .pol#{$value} left: #{$value}px - .poln#{$value} + .pol#{$value}n left: -#{$value}px // ----- Right ----- // @@ -168,7 +168,7 @@ $tool-position-values: 1, 2, 3, 4, 5 !default .por#{$value} right: #{$value}px - .porn#{$value} + .por#{$value}n right: -#{$value}px // ----- Top ----- // @@ -192,7 +192,7 @@ $tool-position-values: 1, 2, 3, 4, 5 !default .pot#{$value} top: #{$value}px - .potn#{$value} + .pot#{$value}n top: -#{$value}px // ------------------------------------- From 61610d15ed8d1f5c70c88bde7be7bc7562b35e1e Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 5 Mar 2015 07:00:44 -0500 Subject: [PATCH 154/195] Add enclosed modifier to table component --- CHANGELOG.md | 15 +++++++++++++++ components/_table.sass | 28 ++++++++++++++++++++++------ 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d1f61a8..9ea7f15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.23.0 - 2015-03-05 +------------------- + +### Added + +- `table--enclosed` modifier to the Table Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.22.1 - 2015-02-26 ------------------- diff --git a/components/_table.sass b/components/_table.sass index 1451fd4..1fbf94f 100644 --- a/components/_table.sass +++ b/components/_table.sass @@ -8,7 +8,7 @@ // Template (Haml) // ------------------------------------- // -// %table.table[striped] +// %table.table[s enclosed|striped] // // %thead.table-header // @@ -33,8 +33,11 @@ $table--striped-row-background: #eee !default // ----- Borders ----- // -$table-border: 2px solid $table-borderColor !default -$table-data-borderWidth: 1px !default +$table-borderStyle: solid !default +$table-borderWidth: 1px !default +$table-borderWidth-l: 2px !default +$table-border: $table-borderWidth $table-borderStyle $table-borderColor !default +$table-border-l: $table-borderWidth-l $table-borderStyle $table-borderColor !default // ----- Typography ----- // @@ -59,10 +62,23 @@ $table-space-s: $table-space * 0.5 !default // Modifiers // ------------------------------------- +// ----- Enclosed ----- // + +.table--enclosed + border: $table-border + + .table-data, + .table-head + border-right: $table-border + + .table-head + background: $table--striped-row-background + border-width: $table-borderWidth + // ----- Sizes ----- // .table--s - + .table-data, .table-header, .table-head @@ -94,7 +110,7 @@ $table-space-s: $table-space * 0.5 !default // ----- Data ----- // .table-data - border-top-width: $table-data-borderWidth + border-top-width: $table-borderWidth // ----- Header ----- // @@ -105,7 +121,7 @@ $table-space-s: $table-space * 0.5 !default // ----- Head ----- // .table-head - border-bottom: $table-border + border-bottom: $table-border-l border-top: 0 padding: $table-space-s $table-space text-align: left From b37de25b28e9eb220644c266f755f0d6c515a639 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 5 Mar 2015 14:52:58 -0500 Subject: [PATCH 155/195] Add additional scaffolding to form component --- CHANGELOG.md | 15 +++++++++++++++ components/_form.sass | 44 +++++++++++++++++++++++++++++++++++++++---- 2 files changed, 55 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ea7f15..66bbbdd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.24.0 - 2015-03-05 +------------------- + +### Added + +- Additional scaffolding to Form Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.23.0 - 2015-03-05 ------------------- diff --git a/components/_form.sass b/components/_form.sass index 5d9a3c3..eb3e053 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -8,11 +8,16 @@ // Template (Haml) // ------------------------------------- // -// %form.form[condensed] +// %form.form[s|l] +// +// %fieldset.form-field[checkbox|inline|radio] +// +// .form-field-item // -// %fieldset.form-field[inline] // %label.form-label +// // %input.form-input +// // %select.form-select // // ************************************* @@ -41,6 +46,7 @@ $form-fontSize-m: 90% !default $form-space: 1.25em !default $form-space-xs: $form-space * 0.25 !default $form-space-s: $form-space * 0.5 !default +$form-space-l: $form-space * 2 !default // ------------------------------------- // Base @@ -53,13 +59,22 @@ $form-space-s: $form-space * 0.5 !default // Modifiers // ------------------------------------- -// ----- Condensed ----- // +// ----- Sizes ----- // -.form--condensed +// Small + +.form--s .form-field margin-bottom: $form-space-s +// Large + +.form--l + + .form-field + margin-bottom: $form-space-l + // ------------------------------------- // Scaffolding // ------------------------------------- @@ -71,6 +86,19 @@ $form-space-s: $form-space * 0.5 !default margin: 0 0 $form-space padding: 0 +// Checkbox & Radio + +.form-field--checkbox, +.form-field--radio + + .form-input + display: inline-block + margin-right: $form-space-xs + width: auto + + .form-label + display: inline-block + // Inline .form-field--inline @@ -80,6 +108,14 @@ $form-space-s: $form-space * 0.5 !default line-height: 2.9 min-width: 100% +// Item + +.form-field-item + margin-bottom: $form-space-s + + &:last-child + margin-bottom: 0 + // ----- Input ----- // .form-input From 29a8770433fbec29245c75c8f12d3acf7495a293 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 5 Mar 2015 14:59:10 -0500 Subject: [PATCH 156/195] Fix font size in Form Component --- CHANGELOG.md | 15 +++++++++++++++ components/_form.sass | 7 ++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 66bbbdd..f0ab030 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.24.1 - 2015-03-05 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- `$b-fontSize-m` in Form Component + 2.24.0 - 2015-03-05 ------------------- diff --git a/components/_form.sass b/components/_form.sass index eb3e053..80092e0 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -39,7 +39,8 @@ $form-input-border: 2px solid $form-input-borderColor !default // ----- Typography ----- // -$form-fontSize-m: 90% !default +$form-fontSize: 100% !default +$form-fontSize-s: 90% !default // ----- Sizing ----- // @@ -123,7 +124,7 @@ $form-space-l: $form-space * 2 !default border: $form-input-border border-radius: $form-borderRadius box-sizing: border-box - font-size: 100% + font-size: $form-fontSize padding: $form-space-s position: relative transition: border-color 0.2s ease-in-out @@ -137,7 +138,7 @@ $form-space-l: $form-space * 2 !default .form-label display: block - font-size: $form-fontSize-m + font-size: $form-fontSize-s font-weight: bold margin-bottom: $form-space-xs From 92f1f338cd11cbc18e6799cbce505445375cb818 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 7 Mar 2015 13:07:49 -0500 Subject: [PATCH 157/195] Add 'action' mixin Refs: #4 --- foundation/_mixins.sass | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index 67de1a5..c8a2618 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -4,6 +4,17 @@ // // ************************************* +// ----- Action ----- // +// -> Sets clickable element defaults + +=action + border: 1px solid transparent + cursor: pointer + display: inline-block + text-align: center + text-decoration: none + white-space: nowrap + // ----- Caret ----- // // -> Creates a caret (arrow) icon // From 6d948909780e54a0525e13a1d397156d56c03175 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 7 Mar 2015 13:13:27 -0500 Subject: [PATCH 158/195] Update button component - Better management via mixins - Bordered/Rounded/Block variants - State type variants ('danger', 'success', 'warning') --- components/_button.sass | 202 +++++++++++++++++++++++++++++++++------- 1 file changed, 170 insertions(+), 32 deletions(-) diff --git a/components/_button.sass b/components/_button.sass index 05bec3e..ff33040 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -8,24 +8,91 @@ // Template (Haml) // ------------------------------------- // -// .btn[a|b s|l] +// .btn[a|b s|l block bordered|rounded danger|success|error] // // ************************************* +// ------------------------------------- +// Helpers +// ------------------------------------- + +// ----- Mixins ----- // + +// ----- Action ----- // +// -> Sets clickable element defaults + +=action + border: 1px solid transparent + cursor: pointer + display: inline-block + text-align: center + text-decoration: none + white-space: nowrap + +// ----- Button Variant ----- // +// -> Creates button variations (modifiers) +// +// $background - background-color value +// $color - color value +// $borderColor - border-color value +// $bordered - bordered button (boolean) +// $scale-type - 'darken' or 'lighten' +// $scale-percent - 'darken' or 'lighten' percentage + +=btn-variant($background, $color, $borderColor, $bordered: false, $scale-type: 'darken', $scale-percent: 10%) + background-color: $background + border: $btn-borderWidth $btn-borderStyle $borderColor + color: $color + + &:hover, + &:focus, + &:active + @if $scale-type == 'darken' + background-color: darken($background, $scale-percent) + border-color: darken($borderColor, $scale-percent) + @if $scale-type == 'lighten' + background-color: lighten($background, $scale-percent) + border-color: lighten($borderColor, $scale-percent) + @if $bordered + @if $scale-type == 'darken' + color: darken($color, $scale-percent) + @if $scale-type == 'lighten' + color: lighten($color, $scale-percent) + @else + color: $color + +// ----- Button Size ----- // +// -> Creates button size variations (modifiers) +// +// $fontSize - font-size value +// $lineHeihgt - line-height value +// $padding - padding value + +=btn-size($fontSize: $btn-fontSize, $lineHeight: $btn-lineHeight, $padding: $btn-space) + font-size: $fontSize + line-height: $lineHeight + padding: 0 $padding + // ------------------------------------- // Variables // ------------------------------------- -// ----- Colors ----- // +// ----- Palette ----- // -$btn--a-background: #4e4e5b !default -$btn--a-color: #fff !default -$btn--b-background: lighten($btn--a-background, 45%) !default -$btn--b-color: #4e4e5b !default +$brandy: #c6b781 +$leaf: #84b582 +$plum: #4e4e5b +$pearl: #c3c3cc +$rose: #bc6f82 +$white: #fff // ----- Borders ----- // +$btn-borderWidth: 2px !default +$btn-borderStyle: solid !default +$btn-border: $btn-borderWidth $btn-borderStyle $plum !default $btn-borderRadius: 3px !default +$btn-borderRadius-l: 20px !default // ----- Typography ----- // @@ -37,64 +104,135 @@ $btn-lineHeight: 2.5 !default // ----- Sizing ----- // $btn-space: 2.5em !default +$btn-space-xs: $btn-space * 0.25 !default $btn-space-s: $btn-space * 0.5 !default $btn-space-l: $btn-space * 2 !default +// ----- Variants ----- // + +// Primary + +$btn--a-background: $plum !default +$btn--a-color: $white !default +$btn--a-border: transparent !default + +// Secondary + +$btn--b-background: $pearl !default +$btn--b-color: $plum !default +$btn--b-border: transparent !default + +// States: Danger + +$btn--danger-background: $rose !default +$btn--danger-color: $white !default +$btn--danger-border: $rose !default + +// States: Success + +$btn--success-background: $leaf !default +$btn--success-color: $white !default +$btn--success-border: $leaf !default + +// States: Warning + +$btn--warning-background: $brandy !default +$btn--warning-color: $white !default +$btn--warning-border: $brandy !default + // ------------------------------------- // Base // ------------------------------------- .btn + +action + +btn-size border-radius: $btn-borderRadius - border: 0 - cursor: pointer - display: inline-block - font-size: $btn-fontSize - line-height: $btn-lineHeight - padding: 0 $btn-space - text-align: center - text-decoration: none + transition: 0.2s ease-in-out // ------------------------------------- // Modifiers // ------------------------------------- +// ----- Behavior ----- // + +.btn--block + display: block + // ----- Hierarchy ----- // // Primary .btn--a - background: $btn--a-background - color: $btn--a-color + +btn-variant($btn--a-background, $btn--a-color, $btn--a-border) - &:hover, - &:focus, - &:active - background: lighten($btn--a-background, 10%) - color: $btn--a-color + &.btn--bordered + +btn-variant(transparent, $btn--a-background, $btn--a-background, true, 'lighten', 30%) // Secondary .btn--b - background: $btn--b-background - color: $btn--b-color + +btn-variant($btn--b-background, $btn--b-color, $btn--b-border) - &:hover, - &:focus, - &:active - background: lighten($btn--b-background, 5%) - color: $btn--b-color + &.btn--bordered + +btn-variant(transparent, $btn--b-background, $btn--b-background, true, 'darken', 20%) // ----- Sizes ----- // // Small .btn--s - font-size: $btn--s-fontSize - padding: 0 $btn-space-s + +btn-size($btn--s-fontSize, $btn-lineHeight, $btn-space-s) // Large .btn--l - font-size: $btn--l-fontSize - padding: 0 $btn-space-l + +btn-size($btn--l-fontSize, $btn-lineHeight, $btn-space-l) + +// ----- Theme ----- // + +// Bordered + +.btn--bordered + +btn-variant(transparent, inherit, $plum) + +// Rounded + +.btn--rounded + border-radius: $btn-borderRadius-l + +// States: Danger + +.btn--danger + +btn-variant($btn--danger-background, $btn--danger-color, transparent) + + &.btn--bordered + +btn-variant(transparent, $btn--danger-background, $btn--danger-background, true, 'darken', 20%) + +// States: Success + +.btn--success + +btn-variant($btn--success-background, $btn--success-color, transparent) + + &.btn--bordered + +btn-variant(transparent, $btn--success-background, $btn--success-background, true, 'darken', 20%) + +// States: Warning + +.btn--warning + +btn-variant($btn--warning-background, $btn--warning-color, transparent) + + &.btn--bordered + +btn-variant(transparent, $btn--warning-background, $btn--warning-background, true, 'darken', 20%) + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-btn + + .btn + margin-right: $btn-space-xs + + &:last-child + margin-right: 0 From d6dc6e8abdfcee6b916c42c17b57c265984dfd7e Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 7 Mar 2015 13:15:04 -0500 Subject: [PATCH 159/195] Update CHANGELOG --- CHANGELOG.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f0ab030..60ed156 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ Changelog ========= +2.25.0 - 2015-03-07 +------------------- + +### Added + +- `+action` mixin +- Better Button Component (additional variants, better organization) + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.24.1 - 2015-03-05 ------------------- From afe7937b74c13a138d346391e81077a2f93e6492 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 9 Mar 2015 15:25:31 -0400 Subject: [PATCH 160/195] Update button component --bordered modifiers --- CHANGELOG.md | 15 +++++++++++++++ components/_button.sass | 30 ++++++++++++++++++++---------- 2 files changed, 35 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 60ed156..be4a4cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.25.1 - 2015-03-09 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Button Component `--borderd` modifier classes + 2.25.0 - 2015-03-07 ------------------- diff --git a/components/_button.sass b/components/_button.sass index ff33040..a5e8bc6 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -166,16 +166,20 @@ $btn--warning-border: $brandy !default .btn--a +btn-variant($btn--a-background, $btn--a-color, $btn--a-border) - &.btn--bordered - +btn-variant(transparent, $btn--a-background, $btn--a-background, true, 'lighten', 30%) +// Primary: Bordered + +.btn--a--bordered + +btn-variant(transparent, $btn--a-background, $btn--a-background, true, 'lighten', 30%) // Secondary .btn--b +btn-variant($btn--b-background, $btn--b-color, $btn--b-border) - &.btn--bordered - +btn-variant(transparent, $btn--b-background, $btn--b-background, true, 'darken', 20%) +// Secondary: Bordered + +.btn--b--bordered + +btn-variant(transparent, $btn--b-background, $btn--b-background, true, 'darken', 20%) // ----- Sizes ----- // @@ -206,24 +210,30 @@ $btn--warning-border: $brandy !default .btn--danger +btn-variant($btn--danger-background, $btn--danger-color, transparent) - &.btn--bordered - +btn-variant(transparent, $btn--danger-background, $btn--danger-background, true, 'darken', 20%) +// States: Danger: Bordered + +.btn--danger--bordered + +btn-variant(transparent, $btn--danger-background, $btn--danger-background, true, 'darken', 20%) // States: Success .btn--success +btn-variant($btn--success-background, $btn--success-color, transparent) - &.btn--bordered - +btn-variant(transparent, $btn--success-background, $btn--success-background, true, 'darken', 20%) +// States: Success: Bordered + +.btn--success--bordered + +btn-variant(transparent, $btn--success-background, $btn--success-background, true, 'darken', 20%) // States: Warning .btn--warning +btn-variant($btn--warning-background, $btn--warning-color, transparent) - &.btn--bordered - +btn-variant(transparent, $btn--warning-background, $btn--warning-background, true, 'darken', 20%) +// States: Warning: Bordered + +.btn--bordered + +btn-variant(transparent, $btn--warning-background, $btn--warning-background, true, 'darken', 20%) // ------------------------------------- // Context From 5dff0109898e158f5d7df49fa4515f8b84e48d44 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 10 Mar 2015 09:03:28 -0400 Subject: [PATCH 161/195] Update Collection structure --- structures/_collection.sass | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/structures/_collection.sass b/structures/_collection.sass index a863569..2153812 100644 --- a/structures/_collection.sass +++ b/structures/_collection.sass @@ -2,12 +2,9 @@ // // Collection // -> Accumulation of items +// CodePen: http://codepen.io/johndjameson/pen/EaeBZd // -// ------------------------------------- -// Dependencies -// ------------------------------------- -// -// - components/grid +// Dependencies: .g // // ------------------------------------- // Template (Haml) @@ -28,12 +25,21 @@ $collection-columns: 3 !default $collection-defaults: 's' 30em, 'm' 50em, 'l' 64em !default $collection-space: 1.25em !default +// ------------------------------------- +// Base +// ------------------------------------- + +.collection + margin-left: -$collection-space * 0.5 + // ------------------------------------- // Scaffolding // ------------------------------------- .collection-item margin-bottom: $collection-space + padding-left: $collection-space * 0.5 + padding-left: $collection-space * 0.5 // ------------------------------------- // Setup From b774d3af74c1e5efd35d275dd8acdb04c23289eb Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 10 Mar 2015 09:03:53 -0400 Subject: [PATCH 162/195] Add flexbox Collection structure --- structures/flexbox/_collection.sass | 42 +++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 structures/flexbox/_collection.sass diff --git a/structures/flexbox/_collection.sass b/structures/flexbox/_collection.sass new file mode 100644 index 0000000..1ec0a76 --- /dev/null +++ b/structures/flexbox/_collection.sass @@ -0,0 +1,42 @@ +// ************************************* +// +// Collection +// -> Accumulation of items +// CodePen: http://codepen.io/johndjameson/pen/dPqBjy +// +// Dependencies: .g +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .g.collection[s|m|l--1of1|...] +// +// .g-b[s|m|l--1of1|...].collection-item +// / ... +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +$collection-space: 1.25em !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.collection + display: flex + flex-wrap: wrap + margin-left: -$collection-space * 0.5 + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +.collection-item + margin-bottom: $collection-space + padding-left: $collection-space * 0.5 + padding-right: $collection-space * 0.5 From b986f5b6abc71a86fb284171ba810f6fa826725e Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 10 Mar 2015 09:04:05 -0400 Subject: [PATCH 163/195] Fix Flexbox Sector width magic number Support for flexbox and viewport units are nearly identical, so we can swap out `9999px` for a sensible, computed number. --- components/flexbox/_sector.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/flexbox/_sector.sass b/components/flexbox/_sector.sass index 68756f3..8e892ce 100644 --- a/components/flexbox/_sector.sass +++ b/components/flexbox/_sector.sass @@ -50,7 +50,7 @@ $sector-item--b-background: #cfd9db !default left: 0 position: absolute top: 0 - width: 9999px + width: 100vw z-index: -1 &:first-child::before From f9efc1cf5cabc47d5566f9e6f6f0c5d0559af66c Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 10 Mar 2015 09:05:44 -0400 Subject: [PATCH 164/195] Update CHANGELOG.md --- CHANGELOG.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index be4a4cc..2d07f45 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,24 @@ Changelog ========= +2.26.0 - 2015-03-10 +------------------- + +### Added + +- Collection gutter and margin standarization +- Collection CodePen link +- Flexbox Collection structure + +### Removed + +- Nothing + +### Fixed + +- Flexbox Sector width magic number +- Collection dependency syntax + 2.25.1 - 2015-03-09 ------------------- From e38e82762185389fd9731f3843308ad57930acc6 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 10 Mar 2015 09:54:10 -0400 Subject: [PATCH 165/195] Fix Collection structure duplicate property --- CHANGELOG.md | 15 +++++++++++++++ structures/_collection.sass | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d07f45..de0b9da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.26.1 - 2015-03-10 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Collection structure `padding-right` property name + 2.26.0 - 2015-03-10 ------------------- diff --git a/structures/_collection.sass b/structures/_collection.sass index 2153812..5088795 100644 --- a/structures/_collection.sass +++ b/structures/_collection.sass @@ -39,7 +39,7 @@ $collection-space: 1.25em !default .collection-item margin-bottom: $collection-space padding-left: $collection-space * 0.5 - padding-left: $collection-space * 0.5 + padding-right: $collection-space * 0.5 // ------------------------------------- // Setup From 96e99aef50734ed4e6d4a4300abc1ea59efacac1 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 10 Mar 2015 11:07:35 -0400 Subject: [PATCH 166/195] Add width property tools --- CHANGELOG.md | 15 +++++++++++++++ foundation/_tools.sass | 13 +++++++++++++ 2 files changed, 28 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index de0b9da..c672056 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.27.0 - 2015-03-10 +------------------- + +### Added + +- `width` Tools + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.26.1 - 2015-03-10 ------------------- diff --git a/foundation/_tools.sass b/foundation/_tools.sass index c5079e9..7b12c00 100644 --- a/foundation/_tools.sass +++ b/foundation/_tools.sass @@ -44,6 +44,10 @@ $tool-color-vars: $blue, $yellow !default $tool-position-values: 1, 2, 3, 4, 5 !default +// Widths + +$tool-widths-max: 4 !default + // ------------------------------------- // Background // ------------------------------------- @@ -247,3 +251,12 @@ $tool-position-values: 1, 2, 3, 4, 5 !default visibility: hidden .viv visibility: visible + +// ------------------------------------- +// Widths +// ------------------------------------- + +@for $i from 1 through $tool-widths-max + + .w-1of#{$i} + width: percentage(1 / $i) From 65903ed560e4cd939441a210ff3bf7dc6f173fdd Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 10 Mar 2015 11:29:05 -0400 Subject: [PATCH 167/195] Fix the bordered warning button class --- CHANGELOG.md | 15 +++++++++++++++ components/_button.sass | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c672056..686ac3f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.27.1 - 2015-03-10 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- `.btn--warning--bordered` class + 2.27.0 - 2015-03-10 ------------------- diff --git a/components/_button.sass b/components/_button.sass index a5e8bc6..5423353 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -232,7 +232,7 @@ $btn--warning-border: $brandy !default // States: Warning: Bordered -.btn--bordered +.btn--warning--bordered +btn-variant(transparent, $btn--warning-background, $btn--warning-background, true, 'darken', 20%) // ------------------------------------- From a3c9630e5846788b6c27a2aa9b493842e7f01f82 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 11 Mar 2015 06:41:53 -0400 Subject: [PATCH 168/195] Add Link Structure Refs: #6 --- CHANGELOG.md | 15 ++++++++ structures/_link.sass | 85 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 structures/_link.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index 686ac3f..baf0746 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.28.0 - 2015-03-11 +------------------- + +### Added + +- Link Structure + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.27.1 - 2015-03-10 ------------------- diff --git a/structures/_link.sass b/structures/_link.sass new file mode 100644 index 0000000..273ad01 --- /dev/null +++ b/structures/_link.sass @@ -0,0 +1,85 @@ +// ************************************* +// +// Link +// -> Actionable text +// CodePen: http://codepen.io/drewbarontini/pen/qEJNPv +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .link[bordered|inverted|muted] +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Base ----- // + +$link-color: #4a4ab5 !default +$link-hover-color: lighten($link-color, 20%) !default +$link--inverted-color: #fff !default +$link--inverted-hover-color: rgba(#fff, 0.65) !default +$link--muted-color: #999 !default +$link--muted-hover-color: #777 !default + +// ----- Borders ----- // + +$link-borderWidth: 2px !default +$link-borderStyle: solid !default +$link-border: $link-borderWidth $link-borderStyle !default + +// ----- Settings ----- // + +$link-transition: all 0.3s ease-in-out + +// ------------------------------------- +// Base +// ------------------------------------- + +.link + // Either use a placeholder selector to extend your base `a` tag + // styles, or create a mixin for the shared styling on your links. + // For this exampled, the styles will be inline, but you should use + // the global `a` tag styles you're using elsewhere. + // Ex: @extend %a + // Ex: +link + color: $link-color + text-decoration: none + transition: $link-transition + + &:active, + &:focus, + &:hover + color: $link-hover-color + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Bordered ----- // + +.link--bordered + border-bottom: $link-border currentColor + +// ----- Inverted ----- // + +.link--inverted + color: $link--inverted-color + + &:active, + &:focus, + &:hover + color: $link--inverted-hover-color + +// ----- Muted ----- // + +.link--muted + color: $link--muted-color + + &:active, + &:focus, + &:hover + color: $link--muted-hover-color From aa39b2ee18da45d28e290c26de4d616448176e72 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 11 Mar 2015 07:32:48 -0400 Subject: [PATCH 169/195] Move 'z-index' function to correct file --- CHANGELOG.md | 15 +++++++++++++++ foundation/_functions.sass | 15 +++++++++++++++ foundation/_mixins.sass | 16 ---------------- 3 files changed, 30 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index baf0746..7fc55e0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.28.1 - 2015-03-11 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Move `z-index` function to `_functions.sass` + 2.28.0 - 2015-03-11 ------------------- diff --git a/foundation/_functions.sass b/foundation/_functions.sass index 6171c05..61aef21 100644 --- a/foundation/_functions.sass +++ b/foundation/_functions.sass @@ -46,3 +46,18 @@ @function tint($color, $percentage) @return mix(white, $color, $percentage) + +// ----- z-index ----- // +// -> http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/ +// +// $element - the name of the element in the list +// $list - the name of the list (defaults to `$zi-global`) + +@function zi($element, $list: $zi-global) + $index: index($list, $element) + + @if $index + @return $index + + @warn 'There is no item "#{$element}" in this list; choose one of: #{$list}' + @return null diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index c8a2618..44efa82 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -87,19 +87,3 @@ @else &:active, &:focus, &:hover @content - -// ----- z-index ----- // -// -> http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/ -// -// $element - the name of the element in the list -// $list - the name of the list (defaults to `$zi-global`) - -@function zi($element, $list: $zi-global) - $index: index($list, $element) - - @if $index - @return $index - - @warn 'There is no item "#{$element}" in this list; choose one of: #{$list}' - @return null - From 94cb4fdc3caa2402a6e68f1d6b10c29e158c4912 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 11 Mar 2015 07:53:48 -0400 Subject: [PATCH 170/195] Add 'strip-unit' function --- CHANGELOG.md | 15 +++++++++++++++ foundation/_functions.sass | 9 +++++++++ 2 files changed, 24 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7fc55e0..631dbe2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.29.0 - 2015-03-11 +------------------- + +### Added + +- `strip-unit` function + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.28.1 - 2015-03-11 ------------------- diff --git a/foundation/_functions.sass b/foundation/_functions.sass index 61aef21..17d5d72 100644 --- a/foundation/_functions.sass +++ b/foundation/_functions.sass @@ -37,6 +37,15 @@ @function shade($color, $percentage) @return mix(black, $color, $percentage) +// ----- Strip Unit ----- // +// -> Remove unit from number +// via: http://hugogiraudel.com/2013/08/12/sass-functions/ +// +// $value - the value to remove the unit from + +@function strip-unit($value) + @return $value / ($value * 0 + 1) + // ----- Tint ----- // // -> Slightly lighten a color // Via: http://sass-guidelin.es/#lightening-and-darkening-colors (modified) From 85cad945a3aa7d090a52c506ec5a3481070ddaec Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 17 Mar 2015 13:37:38 -0400 Subject: [PATCH 171/195] Add context class to Button Haml template --- components/_button.sass | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/_button.sass b/components/_button.sass index 5423353..9f44a57 100644 --- a/components/_button.sass +++ b/components/_button.sass @@ -8,6 +8,8 @@ // Template (Haml) // ------------------------------------- // +// .has-btn +// // .btn[a|b s|l block bordered|rounded danger|success|error] // // ************************************* From 988d4c8862b6d2f30b4fbd51d9a81ee882b3bb56 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 20 Mar 2015 22:02:13 -0400 Subject: [PATCH 172/195] Add flush bottom margin to form-help --- CHANGELOG.md | 15 +++++++++++++++ components/_form.sass | 5 +++++ 2 files changed, 20 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 631dbe2..9c173a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.29.1 - 2015-03-20 +------------------- + +### Added + +- `.form-help` flush margin + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.29.0 - 2015-03-11 ------------------- diff --git a/components/_form.sass b/components/_form.sass index 80092e0..859770a 100644 --- a/components/_form.sass +++ b/components/_form.sass @@ -117,6 +117,11 @@ $form-space-l: $form-space * 2 !default &:last-child margin-bottom: 0 +// ----- Help ----- // + +.form-help + margin-bottom: 0 + // ----- Input ----- // .form-input From f0cc3b5bb6e84687424e9427a47c0703abc1ba60 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Thu, 2 Apr 2015 09:01:56 -0400 Subject: [PATCH 173/195] Fix Collection structure margin right --- CHANGELOG.md | 16 ++++++++++++++++ structures/_collection.sass | 1 + structures/flexbox/_collection.sass | 1 + 3 files changed, 18 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9c173a8..ad61b88 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ Changelog ========= +2.29.2 - 2015-04-02 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Collection structure margin right +- Flexbox Collection structure margin right + 2.29.1 - 2015-03-20 ------------------- diff --git a/structures/_collection.sass b/structures/_collection.sass index 5088795..bdc3ffb 100644 --- a/structures/_collection.sass +++ b/structures/_collection.sass @@ -31,6 +31,7 @@ $collection-space: 1.25em !default .collection margin-left: -$collection-space * 0.5 + margin-right: -$collection-space * 0.5 // ------------------------------------- // Scaffolding diff --git a/structures/flexbox/_collection.sass b/structures/flexbox/_collection.sass index 1ec0a76..4b38435 100644 --- a/structures/flexbox/_collection.sass +++ b/structures/flexbox/_collection.sass @@ -31,6 +31,7 @@ $collection-space: 1.25em !default display: flex flex-wrap: wrap margin-left: -$collection-space * 0.5 + margin-right: -$collection-space * 0.5 // ------------------------------------- // Scaffolding From ea5b6ca600fba1eb8b1fd198e79eb9248cda8f7c Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 22 Apr 2015 09:24:09 -0400 Subject: [PATCH 174/195] Add Highlight Component --- CHANGELOG.md | 15 +++++++++++ components/_highlight.sass | 53 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100644 components/_highlight.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index ad61b88..0d37492 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.30.0 - 2015-04-22 +------------------- + +### Added + +- Highlight Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.29.2 - 2015-04-02 ------------------- diff --git a/components/_highlight.sass b/components/_highlight.sass new file mode 100644 index 0000000..47e3711 --- /dev/null +++ b/components/_highlight.sass @@ -0,0 +1,53 @@ +// ************************************* +// +// Highlight +// -> Highly stylized link +// Credit: http://www.webdesignerdepot.com/ +// CodePen: http://codepen.io/drewbarontini/pen/vOYgwE +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %a.highlight +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Borders ----- // + +$highlight-border: 0 !default + +// ----- Colors ----- // + +$highlight-background: #f1c40f !default +$highlight-color: black !default + +// ----- Settings ----- // + +$highlight-color-speed: 0.5s !default + +// ----- Text ----- // + +$highlight-textDecoration: none !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.highlight + background-image: linear-gradient(to right, rgba(white, 0) 50%, $highlight-background 50%) + background-position: 0 0 + background-size: 200% auto + border: $highlight-border + color: $highlight-color + text-decoration: $highlight-textDecoration + transition: background-position $highlight-color-speed ease-in-out + + &:active, + &:focus, + &:hover + background-position: -100% 0 From c883a0d339f45e970b6750866ebeae36d28c3b9c Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 22 Apr 2015 09:28:33 -0400 Subject: [PATCH 175/195] Update Highlight component hover color --- CHANGELOG.md | 15 +++++++++++++++ components/_highlight.sass | 1 + 2 files changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d37492..d5be8bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.30.1 - 2015-04-22 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- The Highlight Component hover color + 2.30.0 - 2015-04-22 ------------------- diff --git a/components/_highlight.sass b/components/_highlight.sass index 47e3711..79c7e56 100644 --- a/components/_highlight.sass +++ b/components/_highlight.sass @@ -51,3 +51,4 @@ $highlight-textDecoration: none !default &:focus, &:hover background-position: -100% 0 + color: $highlight-color From 3a223290ffc25f375070c2dda6d6da4c485bcf44 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 22 Apr 2015 10:19:29 -0400 Subject: [PATCH 176/195] Update border property in Highlight component --- CHANGELOG.md | 15 +++++++++++++++ components/_highlight.sass | 2 +- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d5be8bc..fd5a537 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.30.2 - 2015-04-22 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Set the `border-bottom` instead of `border` on the Highlight Component + 2.30.1 - 2015-04-22 ------------------- diff --git a/components/_highlight.sass b/components/_highlight.sass index 79c7e56..d6253ac 100644 --- a/components/_highlight.sass +++ b/components/_highlight.sass @@ -42,7 +42,7 @@ $highlight-textDecoration: none !default background-image: linear-gradient(to right, rgba(white, 0) 50%, $highlight-background 50%) background-position: 0 0 background-size: 200% auto - border: $highlight-border + border-bottom: $highlight-border color: $highlight-color text-decoration: $highlight-textDecoration transition: background-position $highlight-color-speed ease-in-out From a8e7899d2b135b7586c9f8c449b89879a8fd4cd6 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 22 Apr 2015 10:34:45 -0400 Subject: [PATCH 177/195] Add bordered highlight to Highlight component --- CHANGELOG.md | 15 +++++++++++++++ components/_highlight.sass | 38 +++++++++++++++++++++++++++++++++++++- 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fd5a537..1903264 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.31.0 - 2015-04-22 +------------------- + +### Added + +- `highlight--bordered` variant to Highlight Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.30.2 - 2015-04-22 ------------------- diff --git a/components/_highlight.sass b/components/_highlight.sass index d6253ac..841f84f 100644 --- a/components/_highlight.sass +++ b/components/_highlight.sass @@ -20,10 +20,12 @@ // ----- Borders ----- // $highlight-border: 0 !default +$highlight--bordered-borderWidth: 4px !default // ----- Colors ----- // $highlight-background: #f1c40f !default +$highlight--bordered-cover-background: white !default $highlight-color: black !default // ----- Settings ----- // @@ -51,4 +53,38 @@ $highlight-textDecoration: none !default &:focus, &:hover background-position: -100% 0 - color: $highlight-color + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// ----- Bordered ----- // + +.highlight--bordered + position: relative + + &::after, + &::before + content: '' + height: $highlight--bordered-borderWidth + left: 0 + position: absolute + top: 100% + width: 100% + + &::after + background: $highlight-background + + &::before + background: $highlight--bordered-cover-background + transform: translateX(0) + transition: transform $highlight-color-speed ease-in-out + z-index: 1 + + &:active, + &:focus, + &:hover + background: none + + &::before + transform: translateX(100%) From a7ae87482be0cdb9b6a43a80ebf2dc5aea0e802a Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 22 Apr 2015 10:37:47 -0400 Subject: [PATCH 178/195] Add additional variable for Highlight component --- CHANGELOG.md | 15 +++++++++++++++ components/_highlight.sass | 3 ++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1903264..355a082 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.31.1 - 2015-04-22 +------------------- + +### Added + +- Additional variable for the Highlight Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + 2.31.0 - 2015-04-22 ------------------- diff --git a/components/_highlight.sass b/components/_highlight.sass index 841f84f..9b9cb2d 100644 --- a/components/_highlight.sass +++ b/components/_highlight.sass @@ -25,6 +25,7 @@ $highlight--bordered-borderWidth: 4px !default // ----- Colors ----- // $highlight-background: #f1c40f !default +$highlight--bordered-borderColor: $highlight-background !default $highlight--bordered-cover-background: white !default $highlight-color: black !default @@ -73,7 +74,7 @@ $highlight-textDecoration: none !default width: 100% &::after - background: $highlight-background + background: $highlight--bordered-borderColor &::before background: $highlight--bordered-cover-background From a53aa6f2390c909984730e38b9c7260b6fab6ab8 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 22 Apr 2015 10:49:41 -0400 Subject: [PATCH 179/195] Update Highlight component hover color --- CHANGELOG.md | 15 +++++++++++++++ components/_highlight.sass | 1 + 2 files changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 355a082..6bba110 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +2.31.2 - 2015-04-22 +------------------- + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- The Highlight Component hover color + 2.31.1 - 2015-04-22 ------------------- diff --git a/components/_highlight.sass b/components/_highlight.sass index 9b9cb2d..8f86b53 100644 --- a/components/_highlight.sass +++ b/components/_highlight.sass @@ -54,6 +54,7 @@ $highlight-textDecoration: none !default &:focus, &:hover background-position: -100% 0 + color: $highlight-color // ------------------------------------- // Modifiers From 1fd03936ecd7e28836cec1719307de48a70882c5 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 22 Apr 2015 11:55:07 -0400 Subject: [PATCH 180/195] Remove bordered highlight, add Underline component --- CHANGELOG.md | 15 +++++++++ components/_highlight.sass | 52 ++++------------------------- components/_underline.sass | 68 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 45 deletions(-) create mode 100644 components/_underline.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index 6bba110..1adff7b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +3.0.0 - 2015-04-22 +------------------ + +### Added + +- Underline Component + +### Removed + +- `highlight--bordered` modifier + +### Fixed + +- Nothing + 2.31.2 - 2015-04-22 ------------------- diff --git a/components/_highlight.sass b/components/_highlight.sass index 8f86b53..21d9f34 100644 --- a/components/_highlight.sass +++ b/components/_highlight.sass @@ -1,7 +1,7 @@ // ************************************* // // Highlight -// -> Highly stylized link +// -> Highly stylized link background // Credit: http://www.webdesignerdepot.com/ // CodePen: http://codepen.io/drewbarontini/pen/vOYgwE // @@ -17,21 +17,18 @@ // Variables // ------------------------------------- -// ----- Borders ----- // - -$highlight-border: 0 !default -$highlight--bordered-borderWidth: 4px !default - // ----- Colors ----- // $highlight-background: #f1c40f !default -$highlight--bordered-borderColor: $highlight-background !default -$highlight--bordered-cover-background: white !default $highlight-color: black !default +// ----- Borders ----- // + +$highlight-border: 0 !default + // ----- Settings ----- // -$highlight-color-speed: 0.5s !default +$highlight-color-transition-speed: 0.5s !default // ----- Text ----- // @@ -48,45 +45,10 @@ $highlight-textDecoration: none !default border-bottom: $highlight-border color: $highlight-color text-decoration: $highlight-textDecoration - transition: background-position $highlight-color-speed ease-in-out + transition: background-position $highlight-color-transition-speed ease-in-out &:active, &:focus, &:hover background-position: -100% 0 color: $highlight-color - -// ------------------------------------- -// Modifiers -// ------------------------------------- - -// ----- Bordered ----- // - -.highlight--bordered - position: relative - - &::after, - &::before - content: '' - height: $highlight--bordered-borderWidth - left: 0 - position: absolute - top: 100% - width: 100% - - &::after - background: $highlight--bordered-borderColor - - &::before - background: $highlight--bordered-cover-background - transform: translateX(0) - transition: transform $highlight-color-speed ease-in-out - z-index: 1 - - &:active, - &:focus, - &:hover - background: none - - &::before - transform: translateX(100%) diff --git a/components/_underline.sass b/components/_underline.sass new file mode 100644 index 0000000..ad81578 --- /dev/null +++ b/components/_underline.sass @@ -0,0 +1,68 @@ +// ************************************* +// +// Underline +// -> Highly stylized link border +// CodePen: http://codepen.io/drewbarontini/pen/oXNWYw +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// %a.underline +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Colors ----- // + +$underline-borderColor: currentColor !default +$underline-cover-background: white !default +$underline-color: black !default + +// ----- Borders ----- // + +$underline-borderStyle: solid !default +$underline-borderWidth: 4px !default +$underline-border: $underline-borderWidth $underline-borderStyle $underline-borderColor !default + +// ----- Settings ----- // + +$underline-color-transition-speed: 0.5s !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.underline + border-bottom: $underline-border + position: relative + text-decoration: none + + &::after, + &::before + content: '' + height: $underline-borderWidth + left: 0 + position: absolute + top: 100% + width: 100% + + &::after + background: $underline-borderColor + + &::before + background: $underline-cover-background + transform: translateX(0) + transition: transform $underline-color-transition-speed ease-in-out + z-index: 1 + + &:active, + &:focus, + &:hover + background: none + + &::before + transform: translateX(100%) From 68ec48d22c80646f6cff63d8cbebce044116e347 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 25 Apr 2015 11:23:04 -0400 Subject: [PATCH 181/195] Update highlight/underline comment headers --- components/_highlight.sass | 2 +- components/_underline.sass | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/_highlight.sass b/components/_highlight.sass index 21d9f34..a647fd9 100644 --- a/components/_highlight.sass +++ b/components/_highlight.sass @@ -17,7 +17,7 @@ // Variables // ------------------------------------- -// ----- Colors ----- // +// ----- Base ----- // $highlight-background: #f1c40f !default $highlight-color: black !default diff --git a/components/_underline.sass b/components/_underline.sass index ad81578..1434126 100644 --- a/components/_underline.sass +++ b/components/_underline.sass @@ -16,7 +16,7 @@ // Variables // ------------------------------------- -// ----- Colors ----- // +// ----- Base ----- // $underline-borderColor: currentColor !default $underline-cover-background: white !default From 11a8d12329be2d68f824c3fcfe1aa3616a4a19a6 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 29 Apr 2015 07:42:53 -0400 Subject: [PATCH 182/195] Add Pin Component --- CHANGELOG.md | 15 +++++++++ components/_pin.sass | 80 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 95 insertions(+) create mode 100644 components/_pin.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index 1adff7b..f960bf1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +3.0.1 - 2015-04-29 +------------------ + +### Added + +- Pin Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + 3.0.0 - 2015-04-22 ------------------ diff --git a/components/_pin.sass b/components/_pin.sass new file mode 100644 index 0000000..7518346 --- /dev/null +++ b/components/_pin.sass @@ -0,0 +1,80 @@ +// ************************************* +// +// Pin +// -> Fastened element +// CodePen: http://codepen.io/drewbarontini/pen/jPPNdo +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// (.has-pin) +// +// .pin[ +// north|south|east|west +// north--s|south--s|east--s|west--s +// north--f|south--f|east--f|west--f +// north--out|south--out|east--out|west--out +// north--out--l|south--out--l|east--out--l|west--out--l +// ] +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Settings ----- // + +$pin-keys: 'north', 'south', 'east', 'west' !default +$pin-values: 'top', 'bottom', 'right', 'left' !default + +// ----- Sizing ----- // + +$pin-space: 20px !default + +// ------------------------------------- +// Base +// ------------------------------------- + +.pin + position: absolute + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +@for $i from 1 through length($pin-keys) + $side: nth($pin-values, $i) + + // ----- Base ----- // + + .pin--#{nth($pin-keys, $i)} + #{$side}: $pin-space + + // ----- Small ----- // + + .pin--#{nth($pin-keys, $i)}--s + #{$side}: ($pin-space / 2) + + // ----- Flush ----- // + + .pin--#{nth($pin-keys, $i)}--f + #{$side}: 0 + + // ----- Out ----- // + + .pin--#{nth($pin-keys, $i)}--out + #{$side}: -$pin-space + + // ----- Out Large ----- // + + .pin--#{nth($pin-keys, $i)}--out--l + #{$side}: -($pin-space * 2) + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-pin + position: relative From 643cb3f58cffe3c8ff874b87892356b98cbbb428 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 29 Apr 2015 08:01:03 -0400 Subject: [PATCH 183/195] Update opacity tool class names --- CHANGELOG.md | 17 ++++++++++++++++- foundation/_tools.sass | 10 ++++++---- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f960bf1..115b39b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,22 @@ Changelog ========= -3.0.1 - 2015-04-29 +3.1.1 - 2015-04-29 +------------------ + +### Added + +- Nothing + +### Removed + +- Nothing + +### Fixed + +- Better opacity tool class names + +3.1.0 - 2015-04-29 ------------------ ### Added diff --git a/foundation/_tools.sass b/foundation/_tools.sass index 7b12c00..7ff9f71 100644 --- a/foundation/_tools.sass +++ b/foundation/_tools.sass @@ -83,11 +83,13 @@ $tool-widths-max: 4 !default // Opacity // ------------------------------------- -.optq - opacity: 0.75 -.oph +.op-1of4 + opacity: 0.25 +.op-1of2 opacity: 0.5 -.opf +.op-3of4 + opacity: 0.75 +.op-1of1 opacity: 1 // ------------------------------------- From 8e5025eca9393e4a3f59f4175d861e9037b4d6ae Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 29 Apr 2015 08:24:38 -0400 Subject: [PATCH 184/195] Add opacity tool --- CHANGELOG.md | 15 +++++++++++++++ foundation/_tools.sass | 2 ++ 2 files changed, 17 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 115b39b..3a5ca4b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +3.2.0 - 2015-04-29 +------------------ + +### Added + +- Opacity tool + +### Removed + +- Nothing + +### Fixed + +- Nothing + 3.1.1 - 2015-04-29 ------------------ diff --git a/foundation/_tools.sass b/foundation/_tools.sass index 7ff9f71..45cf065 100644 --- a/foundation/_tools.sass +++ b/foundation/_tools.sass @@ -83,6 +83,8 @@ $tool-widths-max: 4 !default // Opacity // ------------------------------------- +.opf + opacity: 0 .op-1of4 opacity: 0.25 .op-1of2 From 83a224c76e5a491d182537ef187794364c3ffc9a Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 28 May 2015 11:29:55 -0400 Subject: [PATCH 185/195] Fix sector dimensions to avoid cutoff --- components/_sector.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/_sector.sass b/components/_sector.sass index 9e2f963..a5b5573 100644 --- a/components/_sector.sass +++ b/components/_sector.sass @@ -31,11 +31,11 @@ $sector--b-background: #cfd9db !default &::before content: '' - height: 9999px + height: 1000% left: 0 position: absolute top: 0 - width: 9999px + width: 1000% z-index: -1 &:first-child::before From 334399cd14d699e098a95d1fa608e4216f4b2626 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 28 May 2015 11:30:41 -0400 Subject: [PATCH 186/195] Update CHANGELOG --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3a5ca4b..75a1aee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ Changelog ========= -3.2.0 - 2015-04-29 +3.2.1 - 2015-04-29 ------------------ ### Added @@ -14,7 +14,7 @@ Changelog ### Fixed -- Nothing +- Sector Component dimensions 3.1.1 - 2015-04-29 ------------------ From 6ff77d78be51274277c6f5c0cac5980143dc67e5 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Thu, 11 Jun 2015 00:37:38 -0400 Subject: [PATCH 187/195] Add Select Component --- components/_select.sass | 132 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 components/_select.sass diff --git a/components/_select.sass b/components/_select.sass new file mode 100644 index 0000000..81a0265 --- /dev/null +++ b/components/_select.sass @@ -0,0 +1,132 @@ +// ************************************* +// +// Select +// -> Menu input +// CodePen: http://codepen.io/johndjameson/pen/rVmaJq/ +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .select +// %select.select-input +// %option.select-input-option +// +// ************************************* + +// ------------------------------------- +// Variables +// ------------------------------------- + +// ----- Color ----- // + +$select-background: #eee +$select-borderColor: #bbb +$select-focus-borderColor: #888 +$select-color: #333 + +// Caret + +$select-caret-color: rgba($select-color, 0.5) + +// ----- Borders ----- // + +$select-borderRadius: 6px +$select-borderStyle: solid +$select-borderWidth: 1px +$select-border: $select-borderWidth $select-borderStyle $select-borderColor + +// ----- Sizing ----- // + +$select-horizontalSpace: 1.25em +$select-verticalSpace: 0.625em + +// Caret + +$select-caret-size: 6px + +// ----- Typography ----- // + +$select-fontFamily: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif +$select-fontSize: 16px +$select-lineHeight: 1.5 + +// ------------------------------------- +// Base +// ------------------------------------- + +.select + color: $select-color + display: inline-block + font-family: $select-fontFamily + font-size: $select-fontSize + position: relative + + &::after + border-bottom: $select-caret-size solid transparent + border-left: $select-caret-size solid transparent + border-right: $select-caret-size solid transparent + border-top: $select-caret-size solid $select-caret-color + content: '' + display: inline-block + height: 0 + pointer-events: none + position: absolute + right: $select-horizontalSpace + top: calc(50% - #{$select-caret-size / 3}) + width: 0 + +// ------------------------------------- +// Scaffolding +// ------------------------------------- + +// ----- Input ----- // + +.select-input + -moz-appearance: none + -webkit-appearance: none + appearance: none + background-color: $select-background + border-radius: $select-borderRadius + border: $select-border + box-shadow: none + color: $select-color + cursor: pointer + display: inline-block + line-height: $select-lineHeight + margin: 0 + outline: 0 + padding-bottom: $select-verticalSpace + padding-left: $select-horizontalSpace + padding-right: calc(#{$select-horizontalSpace * 2} + #{$select-caret-size}) + padding-top: $select-verticalSpace + + &:focus + border-color: $select-focus-borderColor + + &:-moz-focusring + color: transparent + text-shadow: 0 0 0 $select-color + +// ------------------------------------- +// Browser Support +// ------------------------------------- + +// ----- Internet Explorer ----- // + +// IE9+ + +@media screen and (min-width:0\0) + + .select::after + display: none + +// IE10+ + +.select-input::-ms-expand + display: none + +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) + + .select::after + display: inline-block From 44a6c3caee8362d784a0362bf9cb72279f65ae53 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Thu, 11 Jun 2015 00:38:10 -0400 Subject: [PATCH 188/195] Add Handle Component --- components/_handle.sass | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 components/_handle.sass diff --git a/components/_handle.sass b/components/_handle.sass new file mode 100644 index 0000000..b44adf3 --- /dev/null +++ b/components/_handle.sass @@ -0,0 +1,28 @@ +// ************************************* +// +// Handle +// -> Attached element +// CodePen: http://codepen.io/johndjameson/pen/toDwb +// +// ------------------------------------- +// Template (Haml) +// ------------------------------------- +// +// .has-handle +// +// .handle +// +// ************************************* + +.handle + left: 50% + position: absolute + top: 50% + transform: translate(-50%, -50%) + +// ------------------------------------- +// Context +// ------------------------------------- + +.has-handle + position: relative From 3fb931b48d57848212be3858c6eaa73a40c58a13 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Thu, 11 Jun 2015 00:40:27 -0400 Subject: [PATCH 189/195] Update CHANGELOG --- CHANGELOG.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 75a1aee..eadcdb8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ Changelog ========= +3.3.0 - 2015-06-05 +------------------- + +### Added + +- Handle Component +- Select Component + +### Removed + +- Nothing + +### Fixed + +- Nothing + 3.2.1 - 2015-04-29 ------------------ From e21077d166adc616a44944f998af580dff47f9d6 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 30 Sep 2015 10:32:46 -0400 Subject: [PATCH 190/195] Update pin component --- components/_pin.sass | 34 ++++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/components/_pin.sass b/components/_pin.sass index 7518346..e82ec8b 100644 --- a/components/_pin.sass +++ b/components/_pin.sass @@ -11,11 +11,12 @@ // (.has-pin) // // .pin[ -// north|south|east|west -// north--s|south--s|east--s|west--s -// north--f|south--f|east--f|west--f -// north--out|south--out|east--out|west--out -// north--out--l|south--out--l|east--out--l|west--out--l +// top|bottom|right|left +// top--s|bottom--s|right--s|left--s +// top--f|bottom--f|right--f|left--f +// top--out|bottom--out|right--out|left--out +// top--out--l|bottom--out--l|right--out--l|left--out--l +// xcenter|ycenter // ] // // ************************************* @@ -26,7 +27,6 @@ // ----- Settings ----- // -$pin-keys: 'north', 'south', 'east', 'west' !default $pin-values: 'top', 'bottom', 'right', 'left' !default // ----- Sizing ----- // @@ -44,34 +44,44 @@ $pin-space: 20px !default // Modifiers // ------------------------------------- -@for $i from 1 through length($pin-keys) +@for $i from 1 through length($pin-values) $side: nth($pin-values, $i) // ----- Base ----- // - .pin--#{nth($pin-keys, $i)} + .pin--#{nth($pin-values, $i)} #{$side}: $pin-space // ----- Small ----- // - .pin--#{nth($pin-keys, $i)}--s + .pin--#{nth($pin-values, $i)}--s #{$side}: ($pin-space / 2) // ----- Flush ----- // - .pin--#{nth($pin-keys, $i)}--f + .pin--#{nth($pin-values, $i)}--f #{$side}: 0 // ----- Out ----- // - .pin--#{nth($pin-keys, $i)}--out + .pin--#{nth($pin-values, $i)}--out #{$side}: -$pin-space // ----- Out Large ----- // - .pin--#{nth($pin-keys, $i)}--out--l + .pin--#{nth($pin-values, $i)}--out--l #{$side}: -($pin-space * 2) +// ----- Axis Alignment ----- // + +.pin--xcenter + left: 50% + transform: translateX(-50%) + +.pin--ycenter + top: 50% + transform: translateY(-50%) + // ------------------------------------- // Context // ------------------------------------- From 1ed517e2ccc13d26ceedc6d3abe4608672e68ebf Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 30 Sep 2015 10:41:55 -0400 Subject: [PATCH 191/195] Update CHANGELOG --- CHANGELOG.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index eadcdb8..a95a249 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,21 @@ Changelog ========= +3.4.0 - 2015-09-30 +------------------ + +### Added + +- `pin--xcenter` and `pin--ycenter` + +### Removed + +- Nothing + +### Fixed + +- Updated Pin Component position modifier names + 3.3.0 - 2015-06-05 ------------------- From b01a4b8eecaa110381cc1f9dbffde2e3aa53781a Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 5 Apr 2016 11:17:53 -0400 Subject: [PATCH 192/195] Add Stretch mixin --- foundation/_mixins.sass | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index 44efa82..c720b70 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -87,3 +87,15 @@ @else &:active, &:focus, &:hover @content + +// ----- Stretch ----- // +// -> Fill container element +// +// $position - position property value (absolute, fixed, etc.) + +=stretch($position: absolute) + bottom: 0 + left: 0 + position: $position + right: 0 + top: 0 From 9ef3824da54b976fa2dbb786f7f0df866ce05bc7 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 5 Apr 2016 11:20:28 -0400 Subject: [PATCH 193/195] Add List Reset mixin --- foundation/_mixins.sass | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/foundation/_mixins.sass b/foundation/_mixins.sass index c720b70..76cba75 100644 --- a/foundation/_mixins.sass +++ b/foundation/_mixins.sass @@ -53,6 +53,14 @@ #{$side}: -$size #{$opposite}: auto +// ----- List Reset ----- // +// -> Removes default list styles + +=list-reset + list-style-type: none + margin: 0 + padding: 0 + // ----- Respond-within ----- // // -> Generates a media query within a range // From c53f6c4182a2bb67979799728b7a505a0f8d1d36 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 5 Apr 2016 11:21:09 -0400 Subject: [PATCH 194/195] Update CHANGELOG --- CHANGELOG.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a95a249..6f14309 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,22 @@ Changelog ========= +3.5.0 - 2016-04-05 +------------------- + +### Added + +- List Reset mixin +- Stretch mixin + +### Removed + +- Nothing + +### Fixed + +- Nothing + 3.4.0 - 2015-09-30 ------------------ From 19754cdb1c8273948fc7a22041c45233ac37c8d5 Mon Sep 17 00:00:00 2001 From: "John D. Jameson" Date: Tue, 24 May 2016 13:35:26 -0400 Subject: [PATCH 195/195] Update _collection.sass --- structures/flexbox/_collection.sass | 2 ++ 1 file changed, 2 insertions(+) diff --git a/structures/flexbox/_collection.sass b/structures/flexbox/_collection.sass index 4b38435..198497f 100644 --- a/structures/flexbox/_collection.sass +++ b/structures/flexbox/_collection.sass @@ -37,6 +37,8 @@ $collection-space: 1.25em !default // Scaffolding // ------------------------------------- +// ----- Item ------ // + .collection-item margin-bottom: $collection-space padding-left: $collection-space * 0.5