From 67d4d8d79418c3e7f9560c68503c05380dfd20c6 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Feb 2013 08:03:37 -0800 Subject: [PATCH 01/54] Initial commit --- README.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..f2c13ed --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +mvcss +===== + +A Sass-based CSS Architecture \ No newline at end of file From 45337ecb8241ffe8c71214347bc8964cd7f6b4fc Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Feb 2013 11:09:18 -0500 Subject: [PATCH 02/54] Initial commit --- .DS_Store | Bin 0 -> 6148 bytes MIT-LICENSE | 7 +++++ README.md | 8 +++-- application.sass | 63 +++++++++++++++++++++++++++++++++++++++ core/_base.sass | 53 ++++++++++++++++++++++++++++++++ core/_reset.sass | 43 ++++++++++++++++++++++++++ core/_settings.sass | 55 ++++++++++++++++++++++++++++++++++ core/_states.sass | 5 ++++ modules/_containers.sass | 25 ++++++++++++++++ 9 files changed, 256 insertions(+), 3 deletions(-) create mode 100644 .DS_Store create mode 100644 MIT-LICENSE create mode 100644 application.sass create mode 100644 core/_base.sass create mode 100644 core/_reset.sass create mode 100644 core/_settings.sass create mode 100644 core/_states.sass create mode 100644 modules/_containers.sass diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ba1d8bcc3f2b70c650980538db94eab5dee26917 GIT binary patch literal 6148 zcmeHKOHRW;47E!o%4g9f%eg|=-HfUr*s$sa5J?4#L{m|+&m}k(r{E$ykF6*n?G_=h zCHqYrdp>WJc!r30(^e~@B@r#4g0l;lBO>obCo(gSg2oq%dpQViRaW{5*4*n z(~b_~QTcirF&z8uQ@Z%x$8ZM6BgXTPkHEzla0Z-#|G)rhw#ed2(XBJ!3^)Tl1M+_e zP{C-}Ddt}XOuhmD=Wu61J0GKfK^(wn*eSvTVNC^UD%%xs#8J_$GvEx28939&rPTl1)A#>zl0P{E&cL5yfak@w*kDOkTPKT?S{tB` pP!Wmi6#Eo3aw$fvl;Rs`7WjiSfYGp1ga_gWflPxNXW&N}_yYN_M%n-X literal 0 HcmV?d00001 diff --git a/MIT-LICENSE b/MIT-LICENSE new file mode 100644 index 0000000..751b80f --- /dev/null +++ b/MIT-LICENSE @@ -0,0 +1,7 @@ +Copyright (C) 2012 Drew Barontini & Nick Walsh + +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. diff --git a/README.md b/README.md index f2c13ed..db069e4 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ -mvcss -===== +MVCSS +============= -A Sass-based CSS Architecture \ No newline at end of file +More information coming soon. For the time being, visit [the GitHub page](http://mvcss.github.com) for the low down. + +MVCSS is licensed under the MIT License. diff --git a/application.sass b/application.sass new file mode 100644 index 0000000..93b1bd8 --- /dev/null +++ b/application.sass @@ -0,0 +1,63 @@ +//------------------------------------- +// Imports +//------------------------------------- + +// ----- Compass ----- // + +// Import Compass here... + +// ----- Core ----- // + +@import "core/reset" +@import "core/settings" +@import "core/base" +@import "core/states" + +//------------------------------------- +// Modules +//------------------------------------- + +@import "modules/containers" + +// ----- Module ----- // + +// Examples: +// ------------------ +// .module +// .moduleName +// ------------------ + +// ----- Sub-module ----- // + +// Examples: +// ------------------ +// .module-sub +// .moduleName-sub +// .moduleName-subName +// ------------------ + +// ----- Modifiers ----- // + +// Examples: +// ------------------ +// .module--modifier +// .moduleName--modifier +// .module-sub--modifier +// .moduleName-sub--modifier +// .moduleName-subName--modifer +// ------------------ + +// ----- State Modifiers ----- // + +// Examples: +// ------------------ +// .is-module-action +// .is-moduleName-action +// .is-module-sub-action +// .is-moduleName-subName-action +// ------------------ + +//------------------------------------- +// Inbox +//------------------------------------- + diff --git a/core/_base.sass b/core/_base.sass new file mode 100644 index 0000000..73699c0 --- /dev/null +++ b/core/_base.sass @@ -0,0 +1,53 @@ +//------------------------------------- +// Base +//------------------------------------- + +html + background: #FFF + font-size: 16px +body + color: $color-base + font: 62.5%/1.5 $font-base + +// ----- Block Content ----- // + +// Headings + +h1, h2, h3, +h4, h5, h6 + font-weight: bold +h1 + font-size: 4em +h2 + font-size: 3.5em +h3 + font-size: 3em +h4 + font-size: 2.5em +h5 + font-size: 2em +h6 + font-size: 1.6em + +// Paragraphs + +p + font-size: 1.6em + +// ----- Inline Content ----- // + +// Links + +a + color: $color-highlight + text-decoration: none + &:hover, + &:focus + text-decoration: underline + +// Formatting + +em + font-style: italic +strong + font-weight: bold diff --git a/core/_reset.sass b/core/_reset.sass new file mode 100644 index 0000000..641bd28 --- /dev/null +++ b/core/_reset.sass @@ -0,0 +1,43 @@ +//------------------------------------- +// Reset +//------------------------------------- + +// http://meyerweb.com/eric/tools/css/reset/ +// v2.0 | 20110126 +// License: none (public domain) + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video + margin: 0 + padding: 0 + border: 0 + font-size: 100% + font: inherit + vertical-align: baseline +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section + display: block +body + line-height: 1 +ol, ul + list-style: none +blockquote, q + quotes: none +blockquote:before, blockquote:after, +q:before, q:after + content: '' + content: none +table + border-collapse: collapse + border-spacing: 0 diff --git a/core/_settings.sass b/core/_settings.sass new file mode 100644 index 0000000..5c9511c --- /dev/null +++ b/core/_settings.sass @@ -0,0 +1,55 @@ +//------------------------------------- +// Settings +//------------------------------------- + +// ----- @font-face ----- // + +// ... + +// ----- Variables ----- // + +// Colors + +$color-base: #222 +$color-highlight: #0053C9 + +// Fonts + +$font-base: sans-serif +$font-header: sans-serif + +// ----- Mixins ----- // + +=respond-to($val, $query: min-width, $media: screen) + @media #{$media} and ($query: $val) + @content + +// ----- Extends ----- // + +%debug + background-color: pink !important + +%ellipsis + overflow: hidden + -ms-text-overflow: ellipsis + -o-text-overflow: ellipsis + text-overflow: ellipsis + white-space: nowrap + +%group + zoom: 1 + &:before, + &:after + content: '' + display: table + &:after + clear: both + +%ir + background-color: transparent + border: 0 + color: transparent + font: 0/0 a + text-shadow: none + +// ----- Animations ----- // diff --git a/core/_states.sass b/core/_states.sass new file mode 100644 index 0000000..7fc09c8 --- /dev/null +++ b/core/_states.sass @@ -0,0 +1,5 @@ +//------------------------------------- +// States +//------------------------------------- + +// .is-state diff --git a/modules/_containers.sass b/modules/_containers.sass new file mode 100644 index 0000000..5e24c3f --- /dev/null +++ b/modules/_containers.sass @@ -0,0 +1,25 @@ +//------------------------------------- +// Containers +//------------------------------------- + +// ----- Rows ----- // + +.row + +// ----- Cells ----- // + +.cell + +// ----- Grids ----- // + +.grid + +.grid-box + +// ----- Cards ----- // + +.card + +// ----- Buckets ----- // + +.bucket From 51dea51091a7f1abfe4995714504d575325ca54f Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Feb 2013 11:10:55 -0500 Subject: [PATCH 03/54] Add gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store From ad1efa2f5532f7313f8b6544195ea9a50000974f Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Feb 2013 11:11:44 -0500 Subject: [PATCH 04/54] Remove .DS_Store --- .DS_Store | Bin 6148 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index ba1d8bcc3f2b70c650980538db94eab5dee26917..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKOHRW;47E!o%4g9f%eg|=-HfUr*s$sa5J?4#L{m|+&m}k(r{E$ykF6*n?G_=h zCHqYrdp>WJc!r30(^e~@B@r#4g0l;lBO>obCo(gSg2oq%dpQViRaW{5*4*n z(~b_~QTcirF&z8uQ@Z%x$8ZM6BgXTPkHEzla0Z-#|G)rhw#ed2(XBJ!3^)Tl1M+_e zP{C-}Ddt}XOuhmD=Wu61J0GKfK^(wn*eSvTVNC^UD%%xs#8J_$GvEx28939&rPTl1)A#>zl0P{E&cL5yfak@w*kDOkTPKT?S{tB` pP!Wmi6#Eo3aw$fvl;Rs`7WjiSfYGp1ga_gWflPxNXW&N}_yYN_M%n-X From bb29967c9632f500abc3861004eae1b031edc1ca Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Feb 2013 17:13:27 -0500 Subject: [PATCH 05/54] Update README --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index db069e4..736f6c9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,5 @@ -MVCSS -============= - -More information coming soon. For the time being, visit [the GitHub page](http://mvcss.github.com) for the low down. +# [MVCSS v2.0.0](http://mvcss.github.com) +## License MVCSS is licensed under the MIT License. + From c4bd17d3b291e1b47778dbe9a8a2141768e87e04 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 22 Feb 2013 17:28:59 -0500 Subject: [PATCH 06/54] Add CHANGELOG --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..685c7b2 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,3 @@ +## 2.0.0 (February 22, 2013) + +- Initial version applied From 9df1c51b6a386be3b9e91ef67ebf653a2d726664 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 5 Mar 2013 06:19:57 -0500 Subject: [PATCH 07/54] Modify the ellipsis, group, and ir extends --- CHANGELOG.md | 4 ++++ core/_settings.sass | 23 ++++++++++------------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 685c7b2..23ac520 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 2.0.1 (March 5, 2013) + +- Modify the ellipsis, group, and ir extends + ## 2.0.0 (February 22, 2013) - Initial version applied diff --git a/core/_settings.sass b/core/_settings.sass index 5c9511c..dd5f68a 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -31,25 +31,22 @@ $font-header: sans-serif %ellipsis overflow: hidden - -ms-text-overflow: ellipsis - -o-text-overflow: ellipsis text-overflow: ellipsis white-space: nowrap -%group - zoom: 1 - &:before, - &:after - content: '' - display: table - &:after - clear: both +%group:after + clear: both + content: '' + display: table %ir background-color: transparent border: 0 - color: transparent - font: 0/0 a - text-shadow: none + overflow: hidden + &:before + content: '' + display: block + width: 0 + height: 150% // ----- Animations ----- // From fcf4817aeda20ea0bdaa171c73641369fad51eef Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 5 Mar 2013 06:30:44 -0500 Subject: [PATCH 08/54] Update README version number --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 736f6c9..fddf113 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [MVCSS v2.0.0](http://mvcss.github.com) +# [MVCSS v2.0.1](http://mvcss.github.com) ## License MVCSS is licensed under the MIT License. From 93fa6a357989322c0a4cd9e2257cf5a5314899ef Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 6 Mar 2013 13:24:13 -0500 Subject: [PATCH 09/54] Remove States as part of Core --- CHANGELOG.md | 4 ++++ README.md | 2 +- application.sass | 1 - core/_states.sass | 5 ----- 4 files changed, 5 insertions(+), 7 deletions(-) delete mode 100644 core/_states.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index 23ac520..8f8fdc6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 2.1.0 (March 5, 2013) + +- Remove **States** as part of **Core** + ## 2.0.1 (March 5, 2013) - Modify the ellipsis, group, and ir extends diff --git a/README.md b/README.md index fddf113..42dc21a 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [MVCSS v2.0.1](http://mvcss.github.com) +# [MVCSS v2.1.0](http://mvcss.github.com) ## License MVCSS is licensed under the MIT License. diff --git a/application.sass b/application.sass index 93b1bd8..f1e7dd3 100644 --- a/application.sass +++ b/application.sass @@ -11,7 +11,6 @@ @import "core/reset" @import "core/settings" @import "core/base" -@import "core/states" //------------------------------------- // Modules diff --git a/core/_states.sass b/core/_states.sass deleted file mode 100644 index 7fc09c8..0000000 --- a/core/_states.sass +++ /dev/null @@ -1,5 +0,0 @@ -//------------------------------------- -// States -//------------------------------------- - -// .is-state From 87fa882d38ead303b699b63625b80077be10a3e4 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 25 Mar 2013 07:49:27 -0400 Subject: [PATCH 10/54] Version 3.0.0-wip initial implementation --- CHANGELOG.md | 8 ++++++ application.sass | 1 + core/_base.sass | 19 +++++++------- core/_helpers.sass | 63 +++++++++++++++++++++++++++++++++++++++++++++ core/_settings.sass | 36 +++----------------------- 5 files changed, 86 insertions(+), 41 deletions(-) create mode 100644 core/_helpers.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f8fdc6..69201b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## 3.0.0 (March 25, 2013) + +- Add new **Helper** core file +- Move extends, mixins, animations to new **Helper** core file +- Add `$base-font-size` and `$base-line-height` variables +- Add `em()` function +- Add better documentation for **Helper** core file elements + ## 2.1.0 (March 5, 2013) - Remove **States** as part of **Core** diff --git a/application.sass b/application.sass index f1e7dd3..0ae8d4a 100644 --- a/application.sass +++ b/application.sass @@ -10,6 +10,7 @@ @import "core/reset" @import "core/settings" +@import "core/helpers" @import "core/base" //------------------------------------- diff --git a/core/_base.sass b/core/_base.sass index 73699c0..8571606 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -4,10 +4,11 @@ html background: #FFF - font-size: 16px + font-size: $base-font-size body color: $color-base - font: 62.5%/1.5 $font-base + font-family: $font-base + line-height: $base-line-height // ----- Block Content ----- // @@ -17,22 +18,22 @@ h1, h2, h3, h4, h5, h6 font-weight: bold h1 - font-size: 4em + font-size: em(40px) h2 - font-size: 3.5em + font-size: em(35px) h3 - font-size: 3em + font-size: em(30px) h4 - font-size: 2.5em + font-size: em(25px) h5 - font-size: 2em + font-size: em(20px) h6 - font-size: 1.6em + font-size: em(16px) // Paragraphs p - font-size: 1.6em + font-size: em($base-font-size) // ----- Inline Content ----- // diff --git a/core/_helpers.sass b/core/_helpers.sass new file mode 100644 index 0000000..cadf3af --- /dev/null +++ b/core/_helpers.sass @@ -0,0 +1,63 @@ +//------------------------------------- +// Helpers +//------------------------------------- + +// ----- Extends ----- // + +// @extend %debug +// -- Utility for debugging layout issues + +%debug + background-color: pink !important + +// @extend %ellipsis +// -- CSS text truncation + +%ellipsis + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + +// @extend %group +// -- Clearfix + +%group:after + clear: both + content: '' + display: table + +// @extend %ir +// -- Image replacement + +%ir + background-color: transparent + border: 0 + overflow: hidden + &:before + content: '' + display: block + width: 0 + height: 150% + +// ----- Functions ----- // + +// em() Function +// -- Sizes a pixel value to appropriate ems + +@function em($target, $context: $base-font-size) + @if ($target == 0) + @return 0 + @else + @return #{$target / $context}em + +// ----- Mixins ----- // + +// +respond-to() +// -- Generates a specified media query, which +// defaults to 'min-width' and 'screen' + +=respond-to($val, $query: min-width, $media: screen) + @media #{$media} and ($query: $val) + @content + +// ----- Animations ----- // diff --git a/core/_settings.sass b/core/_settings.sass index dd5f68a..0f0b1b4 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -18,35 +18,7 @@ $color-highlight: #0053C9 $font-base: sans-serif $font-header: sans-serif -// ----- Mixins ----- // - -=respond-to($val, $query: min-width, $media: screen) - @media #{$media} and ($query: $val) - @content - -// ----- Extends ----- // - -%debug - background-color: pink !important - -%ellipsis - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - -%group:after - clear: both - content: '' - display: table - -%ir - background-color: transparent - border: 0 - overflow: hidden - &:before - content: '' - display: block - width: 0 - height: 150% - -// ----- Animations ----- // +// Typography + +$base-font-size: 16px +$base-line-height: 1.5 From 31986c22210fd380e6b47b1afab83d887f18837f Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 25 Mar 2013 07:59:45 -0400 Subject: [PATCH 11/54] Add better documentation for Applictation file imports --- CHANGELOG.md | 1 + application.sass | 15 +++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 69201b1..6e48c8e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Add `$base-font-size` and `$base-line-height` variables - Add `em()` function - Add better documentation for **Helper** core file elements +- Add better documentation for **Application** file imports ## 2.1.0 (March 5, 2013) diff --git a/application.sass b/application.sass index 0ae8d4a..be4a64a 100644 --- a/application.sass +++ b/application.sass @@ -8,9 +8,24 @@ // ----- Core ----- // +// Reset +// -- The standard Eric Meyer Reset + @import "core/reset" + +// Settings +// -- Fonts, Variables + @import "core/settings" + +// Helpers +// -- Extends, Functions, Mixins, Animations + @import "core/helpers" + +// Base +// -- Base-level tags (h1, p, etc.) + @import "core/base" //------------------------------------- From ef69c0e26f2d401aa106499b1805e34611a5c389 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 26 Mar 2013 08:33:31 -0400 Subject: [PATCH 12/54] Change Core Reset to Normalize v2.1.0 --- CHANGELOG.md | 1 + application.sass | 2 +- core/_reset.sass | 43 ----- core/_reset.scss | 396 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 398 insertions(+), 44 deletions(-) delete mode 100644 core/_reset.sass create mode 100644 core/_reset.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e48c8e..bbaae1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Add new **Helper** core file - Move extends, mixins, animations to new **Helper** core file +- Change **Core Reset** to **Normalize v2.1.0** - Add `$base-font-size` and `$base-line-height` variables - Add `em()` function - Add better documentation for **Helper** core file elements diff --git a/application.sass b/application.sass index be4a64a..2f46083 100644 --- a/application.sass +++ b/application.sass @@ -9,7 +9,7 @@ // ----- Core ----- // // Reset -// -- The standard Eric Meyer Reset +// -- Normalize v2.1.0 (modify for your project) @import "core/reset" diff --git a/core/_reset.sass b/core/_reset.sass deleted file mode 100644 index 641bd28..0000000 --- a/core/_reset.sass +++ /dev/null @@ -1,43 +0,0 @@ -//------------------------------------- -// Reset -//------------------------------------- - -// http://meyerweb.com/eric/tools/css/reset/ -// v2.0 | 20110126 -// License: none (public domain) - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video - margin: 0 - padding: 0 - border: 0 - font-size: 100% - font: inherit - vertical-align: baseline -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section - display: block -body - line-height: 1 -ol, ul - list-style: none -blockquote, q - quotes: none -blockquote:before, blockquote:after, -q:before, q:after - content: '' - content: none -table - border-collapse: collapse - border-spacing: 0 diff --git a/core/_reset.scss b/core/_reset.scss new file mode 100644 index 0000000..a9c6f52 --- /dev/null +++ b/core/_reset.scss @@ -0,0 +1,396 @@ +/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} From 3fa899671543dc5976b1cb060f503a9fcf94f918 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 26 Mar 2013 09:10:31 -0400 Subject: [PATCH 13/54] Better variable naming conventions --- CHANGELOG.md | 1 + core/_base.sass | 13 ++++++------- core/_helpers.sass | 2 +- core/_settings.sass | 27 +++++++++++++-------------- 4 files changed, 21 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bbaae1b..b9069c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Add new **Helper** core file - Move extends, mixins, animations to new **Helper** core file - Change **Core Reset** to **Normalize v2.1.0** +- Add better variable naming conventions - Add `$base-font-size` and `$base-line-height` variables - Add `em()` function - Add better documentation for **Helper** core file elements diff --git a/core/_base.sass b/core/_base.sass index 8571606..ffd9a41 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -4,11 +4,10 @@ html background: #FFF - font-size: $base-font-size -body - color: $color-base - font-family: $font-base - line-height: $base-line-height + color: $content-color + font-size: $content-fontSize + font-family: $content-fontFamily + line-height: $content-lineHeight // ----- Block Content ----- // @@ -33,14 +32,14 @@ h6 // Paragraphs p - font-size: em($base-font-size) + font-size: em($content-fontSize) // ----- Inline Content ----- // // Links a - color: $color-highlight + color: $content-color--highlight text-decoration: none &:hover, &:focus diff --git a/core/_helpers.sass b/core/_helpers.sass index cadf3af..91b2aa4 100644 --- a/core/_helpers.sass +++ b/core/_helpers.sass @@ -44,7 +44,7 @@ // em() Function // -- Sizes a pixel value to appropriate ems -@function em($target, $context: $base-font-size) +@function em($target, $context: $content-fontSize) @if ($target == 0) @return 0 @else diff --git a/core/_settings.sass b/core/_settings.sass index 0f0b1b4..de8f6b8 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -8,17 +8,16 @@ // ----- Variables ----- // -// Colors - -$color-base: #222 -$color-highlight: #0053C9 - -// Fonts - -$font-base: sans-serif -$font-header: sans-serif - -// Typography - -$base-font-size: 16px -$base-line-height: 1.5 +// $module-property--modifier +// $moduleName-property--modifier +// $moduleName-propertyName--modifier +// $moduleName-propertyName--modifierName + +// Content + +$content-color: #222 +$content-color--highlight: #0053C9 +$content-fontFamily: sans-serif +$content-fontFamily--header: sans-serif +$content-fontSize: 16px +$content-lineHeight: 1.5 From e967b4b0d5122bac6d53005c157dd1ccf9360384 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 26 Mar 2013 09:19:53 -0400 Subject: [PATCH 14/54] Update README and CHANGELOG --- CHANGELOG.md | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b9069c8..8404b46 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ -## 3.0.0 (March 25, 2013) +## 3.0.0 (March 26, 2013) - Add new **Helper** core file - Move extends, mixins, animations to new **Helper** core file diff --git a/README.md b/README.md index 42dc21a..61aee54 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [MVCSS v2.1.0](http://mvcss.github.com) +# [MVCSS v3.0.0](http://mvcss.github.com) ## License MVCSS is licensed under the MIT License. From d18dfca8c45a0daaf76c40d9ce66976aca780b23 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 26 Mar 2013 14:10:54 -0400 Subject: [PATCH 15/54] Add better documentation for global variables --- CHANGELOG.md | 5 +++-- core/_base.sass | 27 ++++++++++++------------ core/_helpers.sass | 2 +- core/_settings.sass | 50 ++++++++++++++++++++++++++++++++++++--------- 4 files changed, 58 insertions(+), 26 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8404b46..43ca97d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,12 +2,13 @@ - Add new **Helper** core file - Move extends, mixins, animations to new **Helper** core file -- Change **Core Reset** to **Normalize v2.1.0** +- Change **Core - Reset** to **Normalize v2.1.0** - Add better variable naming conventions -- Add `$base-font-size` and `$base-line-height` variables +- Add more base variables - Add `em()` function - Add better documentation for **Helper** core file elements - Add better documentation for **Application** file imports +- Add better documentation for variables ## 2.1.0 (March 5, 2013) diff --git a/core/_base.sass b/core/_base.sass index ffd9a41..34f52e6 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -3,11 +3,11 @@ //------------------------------------- html - background: #FFF - color: $content-color - font-size: $content-fontSize - font-family: $content-fontFamily - line-height: $content-lineHeight + background: $l-background + color: $c-color + font-size: $c-fontSize + font-family: $c-fontFamily + line-height: $c-lineHeight // ----- Block Content ----- // @@ -15,31 +15,32 @@ html h1, h2, h3, h4, h5, h6 + font-family: $c--header-fontFamily font-weight: bold -h1 +h1, .h1 font-size: em(40px) -h2 +h2, .h2 font-size: em(35px) -h3 +h3, .h3 font-size: em(30px) -h4 +h4, .h4 font-size: em(25px) -h5 +h5, .h5 font-size: em(20px) -h6 +h6, .h6 font-size: em(16px) // Paragraphs p - font-size: em($content-fontSize) + font-size: em($c-fontSize) // ----- Inline Content ----- // // Links a - color: $content-color--highlight + color: $c-color--highlight text-decoration: none &:hover, &:focus diff --git a/core/_helpers.sass b/core/_helpers.sass index 91b2aa4..b605d8d 100644 --- a/core/_helpers.sass +++ b/core/_helpers.sass @@ -44,7 +44,7 @@ // em() Function // -- Sizes a pixel value to appropriate ems -@function em($target, $context: $content-fontSize) +@function em($target, $context: $c-fontSize) @if ($target == 0) @return 0 @else diff --git a/core/_settings.sass b/core/_settings.sass index de8f6b8..7946d74 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -8,16 +8,46 @@ // ----- Variables ----- // -// $module-property--modifier -// $moduleName-property--modifier -// $moduleName-propertyName--modifier -// $moduleName-propertyName--modifierName +// Examples: +// ------------------ +// .module-property +// .moduleName-property +// ------------------ + +// ----- Sub-module ----- // + +// Examples: +// ------------------ +// .module-sub-property +// .moduleName-sub-property +// .moduleName-subName-property +// ------------------ + +// ----- Modifiers ----- // + +// Examples: +// ------------------ +// .module--modifier-property +// .moduleName--modifier-property +// .module-sub--modifier-property +// .moduleName-sub--modifier-property +// .moduleName-subName--modifer-property +// ------------------ // Content +// -- color, font-size, line-height + +$c-color: #222 +$c--highlight-color: #0053C9 +$c-fontFamily: sans-serif +$c--header-fontFamily: sans-serif +$c-fontSize: 16px +$c-lineHeight: 1.5 + +// Layout +// -- backgrounds, borders, margin, padding -$content-color: #222 -$content-color--highlight: #0053C9 -$content-fontFamily: sans-serif -$content-fontFamily--header: sans-serif -$content-fontSize: 16px -$content-lineHeight: 1.5 +$l-background: #FFF +$l-borderRadius: 3px +$l-border: 1px solid $content-color +$l-boxShadow: 0 1px 2px rgba($content-color, 0.25) From 9fef0b853adc64c56a16b57ea0a582280c58813f Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 27 Mar 2013 05:22:12 -0400 Subject: [PATCH 16/54] Add new Content and Layout Module, remove Containers module, better documentation --- CHANGELOG.md | 6 +++-- application.sass | 11 ++++++++- core/_base.sass | 23 ++---------------- modules/_content.sass | 28 ++++++++++++++++++++++ modules/{_containers.sass => _layout.sass} | 14 +++++------ 5 files changed, 51 insertions(+), 31 deletions(-) create mode 100644 modules/_content.sass rename modules/{_containers.sass => _layout.sass} (76%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 43ca97d..72a3452 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,12 +1,14 @@ ## 3.0.0 (March 26, 2013) -- Add new **Helper** core file +- Add new **Helper** Core file +- Add new **Content** Module file (replaces **Containers** Module file) +- Add new **Layout** Module file - Move extends, mixins, animations to new **Helper** core file - Change **Core - Reset** to **Normalize v2.1.0** - Add better variable naming conventions - Add more base variables - Add `em()` function -- Add better documentation for **Helper** core file elements +- Add better documentation for **Helper** Core file elements - Add better documentation for **Application** file imports - Add better documentation for variables diff --git a/application.sass b/application.sass index 2f46083..4234c8a 100644 --- a/application.sass +++ b/application.sass @@ -32,7 +32,16 @@ // Modules //------------------------------------- -@import "modules/containers" +// Content +// -- base colors, font-sizes, line-heights + +@import "modules/content" + +// Layout +// -- base containers, backgrounds, borders, margins, padding + +@import "modules/layout" + // ----- Module ----- // diff --git a/core/_base.sass b/core/_base.sass index 34f52e6..7be2a23 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -5,35 +5,16 @@ html background: $l-background color: $c-color - font-size: $c-fontSize font-family: $c-fontFamily + font-size: $c-fontSize line-height: $c-lineHeight // ----- Block Content ----- // -// Headings - -h1, h2, h3, -h4, h5, h6 - font-family: $c--header-fontFamily - font-weight: bold -h1, .h1 - font-size: em(40px) -h2, .h2 - font-size: em(35px) -h3, .h3 - font-size: em(30px) -h4, .h4 - font-size: em(25px) -h5, .h5 - font-size: em(20px) -h6, .h6 - font-size: em(16px) - // Paragraphs p - font-size: em($c-fontSize) + font-size: em($c-fontsize) // ----- Inline Content ----- // diff --git a/modules/_content.sass b/modules/_content.sass new file mode 100644 index 0000000..7233875 --- /dev/null +++ b/modules/_content.sass @@ -0,0 +1,28 @@ +//------------------------------------- +// Content +//------------------------------------- + +// ----- Headings ----- // + +h1, h2, h3, +h4, h5, h6 + font-family: $c--header-fontFamily + font-weight: bold + +h1, .c-h1, %c-h1 + font-size: em(40px) + +h2, .c-h2, %c-h2 + font-size: em(35px) + +h3, .c-h3, %c-h3 + font-size: em(30px) + +h4, .c-h4, %c-h4 + font-size: em(25px) + +h5, .c-h5, %c-h5 + font-size: em(20px) + +h6, .c-h6, %c-h6 + font-size: em(16px) diff --git a/modules/_containers.sass b/modules/_layout.sass similarity index 76% rename from modules/_containers.sass rename to modules/_layout.sass index 5e24c3f..4c6024d 100644 --- a/modules/_containers.sass +++ b/modules/_layout.sass @@ -1,25 +1,25 @@ //------------------------------------- -// Containers +// Layout //------------------------------------- // ----- Rows ----- // -.row +.l-row // ----- Cells ----- // -.cell +.l-cell // ----- Grids ----- // -.grid +.l-grid -.grid-box +.l-grid-box // ----- Cards ----- // -.card +.l-card // ----- Buckets ----- // -.bucket +.l-bucket From 0f0a8bf8bcf2dddd17dcb91018f3e5df0bfc32e8 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 27 Mar 2013 06:16:05 -0400 Subject: [PATCH 17/54] Fix errors in variable names --- core/_base.sass | 4 ++-- core/_settings.sass | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/core/_base.sass b/core/_base.sass index 7be2a23..068d3e8 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -14,14 +14,14 @@ html // Paragraphs p - font-size: em($c-fontsize) + font-size: em($c-fontSize) // ----- Inline Content ----- // // Links a - color: $c-color--highlight + color: $c--highlight-color text-decoration: none &:hover, &:focus diff --git a/core/_settings.sass b/core/_settings.sass index 7946d74..30d2a94 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -49,5 +49,5 @@ $c-lineHeight: 1.5 $l-background: #FFF $l-borderRadius: 3px -$l-border: 1px solid $content-color -$l-boxShadow: 0 1px 2px rgba($content-color, 0.25) +$l-border: 1px solid $c-color +$l-boxShadow: 0 1px 2px rgba($c-color, 0.25) From a1f49c4f9aaea18e23f56490af2ede4a7f5a2be9 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 27 Mar 2013 07:48:27 -0400 Subject: [PATCH 18/54] Clean up Core - Base --- core/_base.sass | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/core/_base.sass b/core/_base.sass index 068d3e8..da74aeb 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -11,25 +11,14 @@ html // ----- Block Content ----- // -// Paragraphs - p font-size: em($c-fontSize) // ----- Inline Content ----- // -// Links - a color: $c--highlight-color text-decoration: none &:hover, &:focus text-decoration: underline - -// Formatting - -em - font-style: italic -strong - font-weight: bold From e040e9308ba5c82b156b05c3257883339c31b40b Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 27 Mar 2013 07:50:35 -0400 Subject: [PATCH 19/54] Adjust the link color variable --- core/_base.sass | 2 +- core/_settings.sass | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/_base.sass b/core/_base.sass index da74aeb..1f71d6f 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -17,7 +17,7 @@ p // ----- Inline Content ----- // a - color: $c--highlight-color + color: $c-link-color text-decoration: none &:hover, &:focus diff --git a/core/_settings.sass b/core/_settings.sass index 30d2a94..3384ee0 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -38,7 +38,7 @@ // -- color, font-size, line-height $c-color: #222 -$c--highlight-color: #0053C9 +$c-link-color: #0053C9 $c-fontFamily: sans-serif $c--header-fontFamily: sans-serif $c-fontSize: 16px From cc47c30bcac333b9118690d1bd61021b2e19ae3f Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 27 Mar 2013 07:55:02 -0400 Subject: [PATCH 20/54] Base Cell Layout Module setup --- core/_settings.sass | 1 + modules/_layout.sass | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/core/_settings.sass b/core/_settings.sass index 3384ee0..fb796c8 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -51,3 +51,4 @@ $l-background: #FFF $l-borderRadius: 3px $l-border: 1px solid $c-color $l-boxShadow: 0 1px 2px rgba($c-color, 0.25) +$l-cell-width: 980px diff --git a/modules/_layout.sass b/modules/_layout.sass index 4c6024d..a17780d 100644 --- a/modules/_layout.sass +++ b/modules/_layout.sass @@ -8,7 +8,10 @@ // ----- Cells ----- // -.l-cell +.l-cell, %l.cell + margin: 0 auto + max-width: em($l-cell-width) + padding: 0 em(60px) // ----- Grids ----- // From 6b352280eb44b725211934187e43dd19678f5ea4 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 27 Mar 2013 08:13:28 -0400 Subject: [PATCH 21/54] Remove the comment headers on the Modules --- application.sass | 8 -------- 1 file changed, 8 deletions(-) diff --git a/application.sass b/application.sass index 4234c8a..a7ac0c6 100644 --- a/application.sass +++ b/application.sass @@ -32,17 +32,9 @@ // Modules //------------------------------------- -// Content -// -- base colors, font-sizes, line-heights - @import "modules/content" - -// Layout -// -- base containers, backgrounds, borders, margins, padding - @import "modules/layout" - // ----- Module ----- // // Examples: From b2a07cadff5426db20a4e8c8a6170b22b51f488c Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 28 Mar 2013 10:12:02 -0400 Subject: [PATCH 22/54] Update variables --- core/_base.sass | 14 +++++++------- core/_helpers.sass | 2 +- core/_settings.sass | 37 ++++++++++++++++++++++++------------- modules/_content.sass | 2 +- modules/_layout.sass | 2 +- 5 files changed, 34 insertions(+), 23 deletions(-) diff --git a/core/_base.sass b/core/_base.sass index 1f71d6f..dda546d 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -3,21 +3,21 @@ //------------------------------------- html - background: $l-background - color: $c-color - font-family: $c-fontFamily - font-size: $c-fontSize - line-height: $c-lineHeight + background: $base-background + color: $base-color + font-family: $base-fontFamily + font-size: $base-fontSize + line-height: $base-lineHeight // ----- Block Content ----- // p - font-size: em($c-fontSize) + font-size: em($base-fontSize) // ----- Inline Content ----- // a - color: $c-link-color + color: $base-link-color text-decoration: none &:hover, &:focus diff --git a/core/_helpers.sass b/core/_helpers.sass index b605d8d..10dff08 100644 --- a/core/_helpers.sass +++ b/core/_helpers.sass @@ -44,7 +44,7 @@ // em() Function // -- Sizes a pixel value to appropriate ems -@function em($target, $context: $c-fontSize) +@function em($target, $context: $base-fontSize) @if ($target == 0) @return 0 @else diff --git a/core/_settings.sass b/core/_settings.sass index fb796c8..a684b34 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -34,21 +34,32 @@ // .moduleName-subName--modifer-property // ------------------ +// Base Colors + +$base-background: #FFF +$base-color: #222 +$base-link-color: #0053C9 + +// Base Borders & Box Shadows + +$base-border: 1px solid $base-color +$base-borderRadius: 3px +$base-boxShadow: 0 1px 2px rgba($base-color, 0.25) + +// Base Content + +$base-fontFamily: sans-serif +$base-fontSize: 16px +$base-lineHeight: 1.5 + +// Base Layout + +$base-whitespace: 20px + // Content -// -- color, font-size, line-height -$c-color: #222 -$c-link-color: #0053C9 -$c-fontFamily: sans-serif -$c--header-fontFamily: sans-serif -$c-fontSize: 16px -$c-lineHeight: 1.5 +$c-header-fontFamily: sans-serif // Layout -// -- backgrounds, borders, margin, padding -$l-background: #FFF -$l-borderRadius: 3px -$l-border: 1px solid $c-color -$l-boxShadow: 0 1px 2px rgba($c-color, 0.25) -$l-cell-width: 980px +$l-maxWidth: 980px diff --git a/modules/_content.sass b/modules/_content.sass index 7233875..67492ba 100644 --- a/modules/_content.sass +++ b/modules/_content.sass @@ -6,7 +6,7 @@ h1, h2, h3, h4, h5, h6 - font-family: $c--header-fontFamily + font-family: $c-header-fontFamily font-weight: bold h1, .c-h1, %c-h1 diff --git a/modules/_layout.sass b/modules/_layout.sass index a17780d..fbcfcc1 100644 --- a/modules/_layout.sass +++ b/modules/_layout.sass @@ -10,7 +10,7 @@ .l-cell, %l.cell margin: 0 auto - max-width: em($l-cell-width) + max-width: em($l-maxWidth) padding: 0 em(60px) // ----- Grids ----- // From 21fdf4789bdbfd966d02d5aa0d051db2221474f8 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 10 Apr 2013 07:40:03 -0400 Subject: [PATCH 23/54] Move Content and Layout modules into the core --- CHANGELOG.md | 6 +++--- application.sass | 12 +++++++++--- core/_content.sass | 28 ++++++++++++++++++++++++++++ core/_layout.sass | 28 ++++++++++++++++++++++++++++ 4 files changed, 68 insertions(+), 6 deletions(-) create mode 100644 core/_content.sass create mode 100644 core/_layout.sass diff --git a/CHANGELOG.md b/CHANGELOG.md index 72a3452..e4d686e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,10 @@ ## 3.0.0 (March 26, 2013) - Add new **Helper** Core file -- Add new **Content** Module file (replaces **Containers** Module file) -- Add new **Layout** Module file +- Add new **Content** Core file (replaces **Containers** Module file) +- Add new **Layout** Core file - Move extends, mixins, animations to new **Helper** core file -- Change **Core - Reset** to **Normalize v2.1.0** +- Change **Reset** Core file to **Normalize v2.1.0** - Add better variable naming conventions - Add more base variables - Add `em()` function diff --git a/application.sass b/application.sass index a7ac0c6..0d991a3 100644 --- a/application.sass +++ b/application.sass @@ -28,13 +28,19 @@ @import "core/base" +// Content +// -- Typography + +@import "core/content" + +// Layout + +@import "core/layout" + //------------------------------------- // Modules //------------------------------------- -@import "modules/content" -@import "modules/layout" - // ----- Module ----- // // Examples: diff --git a/core/_content.sass b/core/_content.sass new file mode 100644 index 0000000..67492ba --- /dev/null +++ b/core/_content.sass @@ -0,0 +1,28 @@ +//------------------------------------- +// Content +//------------------------------------- + +// ----- Headings ----- // + +h1, h2, h3, +h4, h5, h6 + font-family: $c-header-fontFamily + font-weight: bold + +h1, .c-h1, %c-h1 + font-size: em(40px) + +h2, .c-h2, %c-h2 + font-size: em(35px) + +h3, .c-h3, %c-h3 + font-size: em(30px) + +h4, .c-h4, %c-h4 + font-size: em(25px) + +h5, .c-h5, %c-h5 + font-size: em(20px) + +h6, .c-h6, %c-h6 + font-size: em(16px) diff --git a/core/_layout.sass b/core/_layout.sass new file mode 100644 index 0000000..fbcfcc1 --- /dev/null +++ b/core/_layout.sass @@ -0,0 +1,28 @@ +//------------------------------------- +// Layout +//------------------------------------- + +// ----- Rows ----- // + +.l-row + +// ----- Cells ----- // + +.l-cell, %l.cell + margin: 0 auto + max-width: em($l-maxWidth) + padding: 0 em(60px) + +// ----- Grids ----- // + +.l-grid + +.l-grid-box + +// ----- Cards ----- // + +.l-card + +// ----- Buckets ----- // + +.l-bucket From fc044dc3066e6f98c28e115594df744fb9f7e89f Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 10 Apr 2013 07:40:46 -0400 Subject: [PATCH 24/54] Remove Content and Layout module files --- modules/_content.sass | 28 ---------------------------- modules/_layout.sass | 28 ---------------------------- 2 files changed, 56 deletions(-) delete mode 100644 modules/_content.sass delete mode 100644 modules/_layout.sass diff --git a/modules/_content.sass b/modules/_content.sass deleted file mode 100644 index 67492ba..0000000 --- a/modules/_content.sass +++ /dev/null @@ -1,28 +0,0 @@ -//------------------------------------- -// Content -//------------------------------------- - -// ----- Headings ----- // - -h1, h2, h3, -h4, h5, h6 - font-family: $c-header-fontFamily - font-weight: bold - -h1, .c-h1, %c-h1 - font-size: em(40px) - -h2, .c-h2, %c-h2 - font-size: em(35px) - -h3, .c-h3, %c-h3 - font-size: em(30px) - -h4, .c-h4, %c-h4 - font-size: em(25px) - -h5, .c-h5, %c-h5 - font-size: em(20px) - -h6, .c-h6, %c-h6 - font-size: em(16px) diff --git a/modules/_layout.sass b/modules/_layout.sass deleted file mode 100644 index fbcfcc1..0000000 --- a/modules/_layout.sass +++ /dev/null @@ -1,28 +0,0 @@ -//------------------------------------- -// Layout -//------------------------------------- - -// ----- Rows ----- // - -.l-row - -// ----- Cells ----- // - -.l-cell, %l.cell - margin: 0 auto - max-width: em($l-maxWidth) - padding: 0 em(60px) - -// ----- Grids ----- // - -.l-grid - -.l-grid-box - -// ----- Cards ----- // - -.l-card - -// ----- Buckets ----- // - -.l-bucket From 4a2ab12e7f38134dd9e0682bfba14b6e6ecd7caf Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 10 Apr 2013 07:42:54 -0400 Subject: [PATCH 25/54] Add example Module file --- application.sass | 2 ++ modules/_example.sass | 3 +++ 2 files changed, 5 insertions(+) create mode 100644 modules/_example.sass diff --git a/application.sass b/application.sass index 0d991a3..90f94d5 100644 --- a/application.sass +++ b/application.sass @@ -41,6 +41,8 @@ // Modules //------------------------------------- +@import "modules/example" + // ----- Module ----- // // Examples: diff --git a/modules/_example.sass b/modules/_example.sass new file mode 100644 index 0000000..a09b7fa --- /dev/null +++ b/modules/_example.sass @@ -0,0 +1,3 @@ +//------------------------------------- +// Module Name +//------------------------------------- From 9a0bf4dde91bd68e35f8f8fd0eaeba5f64e374f3 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 11 Apr 2013 05:56:15 -0400 Subject: [PATCH 26/54] Add a few base utilities to the Content and Layout Modules --- core/_content.sass | 14 ++++++++++++++ core/_layout.sass | 11 +++++++++++ 2 files changed, 25 insertions(+) diff --git a/core/_content.sass b/core/_content.sass index 67492ba..27aba0a 100644 --- a/core/_content.sass +++ b/core/_content.sass @@ -26,3 +26,17 @@ h5, .c-h5, %c-h5 h6, .c-h6, %c-h6 font-size: em(16px) + +// ----- Utilities ----- // + +.c-center, %c-center + text-align: center + +.c-condensed, %c-condensed + font-size: 85% + +.c-lead, %c-lead + font-size: 125% + +.c-shout, %c-shout + text-transform: uppercase diff --git a/core/_layout.sass b/core/_layout.sass index fbcfcc1..89627fc 100644 --- a/core/_layout.sass +++ b/core/_layout.sass @@ -26,3 +26,14 @@ // ----- Buckets ----- // .l-bucket + +// ----- Utilities ----- // + +.l-block, %l-block + display: block + +.l-pullLeft, %l-pullLeft + float: left + +.l-pullRight, %l-pullRight + float: right From d3ec514ecd2c58c9aa91cc09123bef884aa915eb Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 25 Apr 2013 15:14:05 -0400 Subject: [PATCH 27/54] Adjust the main application.sass comment header --- application.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/application.sass b/application.sass index 90f94d5..13ac406 100644 --- a/application.sass +++ b/application.sass @@ -1,5 +1,5 @@ //------------------------------------- -// Imports +// MVCSS 3.0.0 //------------------------------------- // ----- Compass ----- // From 9b2b696f550242eea22f9927b87c0cd6330b7572 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 26 Apr 2013 14:20:24 -0400 Subject: [PATCH 28/54] Sub-module to Submodule --- application.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/application.sass b/application.sass index 13ac406..32c641b 100644 --- a/application.sass +++ b/application.sass @@ -51,7 +51,7 @@ // .moduleName // ------------------ -// ----- Sub-module ----- // +// ----- Submodule ----- // // Examples: // ------------------ From c20cc9cbed5585b85d7f86e5c0ea56677ce979f5 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 26 Apr 2013 18:23:44 -0400 Subject: [PATCH 29/54] Update comments in application --- application.sass | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/application.sass b/application.sass index 32c641b..63b2bb3 100644 --- a/application.sass +++ b/application.sass @@ -1,5 +1,6 @@ //------------------------------------- -// MVCSS 3.0.0 +// Application +// MVCSS v3.0.0 //------------------------------------- // ----- Compass ----- // @@ -24,7 +25,7 @@ @import "core/helpers" // Base -// -- Base-level tags (h1, p, etc.) +// -- Base-level Tags (h1, p, etc.) @import "core/base" @@ -34,6 +35,7 @@ @import "core/content" // Layout +// -- Margin, Padding, Sizing @import "core/layout" From d763b957b4913dfc6bb6c53258370d449432e516 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 29 Apr 2013 07:49:15 -0400 Subject: [PATCH 30/54] Explicitly set the font size to 100% on the body --- core/_base.sass | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core/_base.sass b/core/_base.sass index dda546d..b508ff1 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -8,6 +8,8 @@ html font-family: $base-fontFamily font-size: $base-fontSize line-height: $base-lineHeight +body + font-size: 100% // ----- Block Content ----- // From ed4fe7d394eee05b50f8648d3ee672ce70168c04 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Mon, 29 Apr 2013 15:32:30 -0400 Subject: [PATCH 31/54] Move properties from the html tag to the body tag --- core/_base.sass | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/core/_base.sass b/core/_base.sass index b508ff1..9207d0b 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -3,13 +3,14 @@ //------------------------------------- html + font-size: $base-fontSize + +body background: $base-background color: $base-color font-family: $base-fontFamily - font-size: $base-fontSize - line-height: $base-lineHeight -body font-size: 100% + line-height: $base-lineHeight // ----- Block Content ----- // From a6c11d24b187d861084f826cf9500a09d8994c75 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 30 Apr 2013 07:25:00 -0400 Subject: [PATCH 32/54] Adjust the order of placeholder selectors --- core/_layout.sass | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/core/_layout.sass b/core/_layout.sass index 89627fc..6ce89f7 100644 --- a/core/_layout.sass +++ b/core/_layout.sass @@ -8,7 +8,7 @@ // ----- Cells ----- // -.l-cell, %l.cell +%l-cell, .l.cell margin: 0 auto max-width: em($l-maxWidth) padding: 0 em(60px) @@ -29,11 +29,11 @@ // ----- Utilities ----- // -.l-block, %l-block +%l-block, .l-block display: block -.l-pullLeft, %l-pullLeft +%l-pullLeft, .l-pullLeft float: left -.l-pullRight, %l-pullRight +%l-pullRight, .l-pullRight float: right From 2c7c5835e1555beb03a3ff0e08cb764d877b1d5e Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 1 May 2013 07:15:43 -0400 Subject: [PATCH 33/54] Adjust the order of placeholder selectors in the Content core --- core/_content.sass | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/core/_content.sass b/core/_content.sass index 27aba0a..ab055b2 100644 --- a/core/_content.sass +++ b/core/_content.sass @@ -29,14 +29,14 @@ h6, .c-h6, %c-h6 // ----- Utilities ----- // -.c-center, %c-center +%c-center, .c-center text-align: center -.c-condensed, %c-condensed +%c-condensed, .c-condensed font-size: 85% -.c-lead, %c-lead +%c-lead, .c-lead font-size: 125% -.c-shout, %c-shout +%c-shout, .c-shout text-transform: uppercase From d6c109264aeed167ef448f8a61e4e88ff030c390 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Sat, 4 May 2013 09:29:11 -0400 Subject: [PATCH 34/54] Fix typo error in the layout module --- core/_layout.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/_layout.sass b/core/_layout.sass index 6ce89f7..6663106 100644 --- a/core/_layout.sass +++ b/core/_layout.sass @@ -8,7 +8,7 @@ // ----- Cells ----- // -%l-cell, .l.cell +%l-cell, .l-cell margin: 0 auto max-width: em($l-maxWidth) padding: 0 em(60px) From eabc3d5dc2c5dd489128e83ed756361754d07b36 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 8 May 2013 07:30:53 -0400 Subject: [PATCH 35/54] Add new base utilities to the Core Layout module --- core/_layout.sass | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/core/_layout.sass b/core/_layout.sass index 6663106..7710bba 100644 --- a/core/_layout.sass +++ b/core/_layout.sass @@ -32,8 +32,18 @@ %l-block, .l-block display: block +%l-condense, .l-condense + margin-bottom: rem($base-whitespace / 2) + %l-pullLeft, .l-pullLeft float: left %l-pullRight, .l-pullRight float: right + +%l-space, .l-space + margin-bottom: rem($base-whitespace) + +%l-xspace, .l-xspace + margin-bottom: rem($base-whitespace * 2) + From c7c82db1db9edca659bc7e0e51a601e2c8405ca0 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 8 May 2013 08:48:11 -0400 Subject: [PATCH 36/54] Add rem function --- core/_helpers.sass | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/core/_helpers.sass b/core/_helpers.sass index 10dff08..a95876e 100644 --- a/core/_helpers.sass +++ b/core/_helpers.sass @@ -50,6 +50,12 @@ @else @return #{$target / $context}em +// rem() Function +// -- Sizes a pixel value to appropriate ems + +@function rem($size) + @return #{$size / $base-fontSize}rem + // ----- Mixins ----- // // +respond-to() From d5a7d88df995ff7b0b3698b184d5eb14965029fe Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 8 May 2013 16:46:12 -0400 Subject: [PATCH 37/54] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e4d686e..73f84af 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - Add better variable naming conventions - Add more base variables - Add `em()` function +- Add `rem()` function - Add better documentation for **Helper** Core file elements - Add better documentation for **Application** file imports - Add better documentation for variables From f88d2db5d618490ce4e12aae54abafcce6fc1ea7 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 9 May 2013 14:46:24 -0400 Subject: [PATCH 38/54] Update CHANGELOG format --- CHANGELOG.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 73f84af..549ab1a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ -## 3.0.0 (March 26, 2013) +## 3.0.0 - Add new **Helper** Core file - Add new **Content** Core file (replaces **Containers** Module file) @@ -13,14 +13,17 @@ - Add better documentation for **Application** file imports - Add better documentation for variables -## 2.1.0 (March 5, 2013) +## 2.1.0 +**March 5, 2013** - Remove **States** as part of **Core** -## 2.0.1 (March 5, 2013) +## 2.0.1 +**March 5, 2013** - Modify the ellipsis, group, and ir extends -## 2.0.0 (February 22, 2013) +## 2.0.0 +**February 22, 2013** - Initial version applied From 4a725a72393010e3da0662213217ec1d3c3a53ee Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 9 May 2013 15:09:56 -0400 Subject: [PATCH 39/54] Update comment hierarchy in the application --- application.sass | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/application.sass b/application.sass index 63b2bb3..4befc59 100644 --- a/application.sass +++ b/application.sass @@ -39,14 +39,10 @@ @import "core/layout" -//------------------------------------- -// Modules -//------------------------------------- +// ----- Modules ----- // @import "modules/example" -// ----- Module ----- // - // Examples: // ------------------ // .module From 95c27244b9964217f763c95e9ff67dde8c6b44f8 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 9 May 2013 20:35:06 -0300 Subject: [PATCH 40/54] Use rems on the layout cell --- core/_layout.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/_layout.sass b/core/_layout.sass index 7710bba..759af93 100644 --- a/core/_layout.sass +++ b/core/_layout.sass @@ -10,8 +10,8 @@ %l-cell, .l-cell margin: 0 auto - max-width: em($l-maxWidth) - padding: 0 em(60px) + max-width: rem($l-maxWidth) + padding: 0 rem(60px) // ----- Grids ----- // From e37a6b8b1e5b95d640c67a5079045a84716b327b Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 9 May 2013 20:36:32 -0300 Subject: [PATCH 41/54] Adjust comment headers in Core Layout --- core/_layout.sass | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/core/_layout.sass b/core/_layout.sass index 759af93..28d3e40 100644 --- a/core/_layout.sass +++ b/core/_layout.sass @@ -2,28 +2,28 @@ // Layout //------------------------------------- -// ----- Rows ----- // +// ----- Row ----- // .l-row -// ----- Cells ----- // +// ----- Cell ----- // %l-cell, .l-cell margin: 0 auto max-width: rem($l-maxWidth) padding: 0 rem(60px) -// ----- Grids ----- // +// ----- Grid ----- // .l-grid .l-grid-box -// ----- Cards ----- // +// ----- Card ----- // .l-card -// ----- Buckets ----- // +// ----- Bucket ----- // .l-bucket From 908c502f4cf5f93424a0b2ebcc4a1de8de262ca0 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 9 May 2013 20:41:28 -0300 Subject: [PATCH 42/54] Update comments in Core Helpers --- core/_helpers.sass | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/_helpers.sass b/core/_helpers.sass index a95876e..e150627 100644 --- a/core/_helpers.sass +++ b/core/_helpers.sass @@ -41,7 +41,7 @@ // ----- Functions ----- // -// em() Function +// em() // -- Sizes a pixel value to appropriate ems @function em($target, $context: $base-fontSize) @@ -50,8 +50,8 @@ @else @return #{$target / $context}em -// rem() Function -// -- Sizes a pixel value to appropriate ems +// rem() +// -- Sizes a pixel value to appropriate rems @function rem($size) @return #{$size / $base-fontSize}rem From 06cdf704b8b315a5fc706a6d6bbb144d302911bc Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 9 May 2013 20:43:54 -0300 Subject: [PATCH 43/54] Update comments in Application --- application.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/application.sass b/application.sass index 4befc59..6c0e0a6 100644 --- a/application.sass +++ b/application.sass @@ -25,7 +25,7 @@ @import "core/helpers" // Base -// -- Base-level Tags (h1, p, etc.) +// -- Base-level tags (body, p, etc.) @import "core/base" From 016e911ee2c6b3bf47941fb8e0cd327fec6cfafa Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 9 May 2013 20:49:08 -0300 Subject: [PATCH 44/54] Update CHANGELOG.md --- CHANGELOG.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 549ab1a..45f1b0d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,8 @@ ## 3.0.0 +- Remove **Containers** Module file - Add new **Helper** Core file -- Add new **Content** Core file (replaces **Containers** Module file) +- Add new **Content** Core file - Add new **Layout** Core file - Move extends, mixins, animations to new **Helper** core file - Change **Reset** Core file to **Normalize v2.1.0** @@ -10,7 +11,7 @@ - Add `em()` function - Add `rem()` function - Add better documentation for **Helper** Core file elements -- Add better documentation for **Application** file imports +- Add better documentation for **Application** file - Add better documentation for variables ## 2.1.0 From f563bc9726572280c4676681403fc5700e3bf030 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 10 May 2013 08:52:53 -0400 Subject: [PATCH 45/54] Update CHANGELOG formatting --- CHANGELOG.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 45f1b0d..b22561a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,17 +1,16 @@ ## 3.0.0 -- Remove **Containers** Module file -- Add new **Helper** Core file -- Add new **Content** Core file -- Add new **Layout** Core file -- Move extends, mixins, animations to new **Helper** core file -- Change **Reset** Core file to **Normalize v2.1.0** +- Add new **Core - Helper** file +- Add new **Core - Content** file (replaces **Containers** Module file) +- Add new **Core - Layout** file +- Move extends, mixins, animations to new **Core - Helper** file +- Change **Core - Reset** to **Normalize v2.1.1** - Add better variable naming conventions - Add more base variables - Add `em()` function - Add `rem()` function -- Add better documentation for **Helper** Core file elements -- Add better documentation for **Application** file +- Add better documentation for **Core - Helper** file elements +- Add better documentation for **Application** file imports - Add better documentation for variables ## 2.1.0 From 9801ee71b9d29b8b1bfca2079071d765db0fa451 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Fri, 10 May 2013 08:53:05 -0400 Subject: [PATCH 46/54] Update to Normalize v2.1.1 --- core/_reset.scss | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/core/_reset.scss b/core/_reset.scss index a9c6f52..6d24a38 100644 --- a/core/_reset.scss +++ b/core/_reset.scss @@ -1,4 +1,4 @@ -/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ +/*! normalize.css v2.1.1 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions @@ -56,15 +56,21 @@ audio:not([controls]) { ========================================================================== */ /** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling + * 1. Prevent system color scheme's background color being used in Firefox, IE, + * and Opera. + * 2. Prevent system color scheme's text color being used in Firefox, IE, and + * Opera. + * 3. Set default font family to sans-serif. + * 4. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { - font-family: sans-serif; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ + background: #fff; /* 1 */ + color: #000; /* 2 */ + font-family: sans-serif; /* 3 */ + -ms-text-size-adjust: 100%; /* 4 */ + -webkit-text-size-adjust: 100%; /* 4 */ } /** From c5865dcf950b3d3780299565836bc44e6fca6199 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 15 May 2013 06:54:31 -0400 Subject: [PATCH 47/54] Use rems in core - base and core - content --- core/_base.sass | 2 +- core/_content.sass | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/core/_base.sass b/core/_base.sass index 9207d0b..d4f63b9 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -15,7 +15,7 @@ body // ----- Block Content ----- // p - font-size: em($base-fontSize) + font-size: rem($base-fontSize) // ----- Inline Content ----- // diff --git a/core/_content.sass b/core/_content.sass index ab055b2..19b88af 100644 --- a/core/_content.sass +++ b/core/_content.sass @@ -10,22 +10,22 @@ h4, h5, h6 font-weight: bold h1, .c-h1, %c-h1 - font-size: em(40px) + font-size: rem(40px) h2, .c-h2, %c-h2 - font-size: em(35px) + font-size: rem(35px) h3, .c-h3, %c-h3 - font-size: em(30px) + font-size: rem(30px) h4, .c-h4, %c-h4 - font-size: em(25px) + font-size: rem(25px) h5, .c-h5, %c-h5 - font-size: em(20px) + font-size: rem(20px) h6, .c-h6, %c-h6 - font-size: em(16px) + font-size: rem(16px) // ----- Utilities ----- // From e3a803dc7204442b0b896709d9c361b11ca65ae6 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 15 May 2013 06:56:08 -0400 Subject: [PATCH 48/54] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b22561a..f4b3dc8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Add more base variables - Add `em()` function - Add `rem()` function +- Use `rems` as the default typographic unit - Add better documentation for **Core - Helper** file elements - Add better documentation for **Application** file imports - Add better documentation for variables From 11c4ef935b17b350f971154220491257121493ec Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Wed, 15 May 2013 14:42:27 -0400 Subject: [PATCH 49/54] Fix typo with the core - content condensed submodule --- core/_content.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/_content.sass b/core/_content.sass index 19b88af..da84cce 100644 --- a/core/_content.sass +++ b/core/_content.sass @@ -32,7 +32,7 @@ h6, .c-h6, %c-h6 %c-center, .c-center text-align: center -%c-condensed, .c-condensed +%c-condense, .c-condense font-size: 85% %c-lead, .c-lead From a43a26de85ef820b892857c6c4d777d61484e440 Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 27 Jun 2013 08:25:36 -0400 Subject: [PATCH 50/54] New comment hierarchy --- CHANGELOG.md | 4 +++ README.md | 2 +- application.sass | 82 +++++++++++++------------------------------ core/_base.sass | 17 ++++++--- core/_content.sass | 17 ++++++--- core/_helpers.sass | 48 +++++++++++++------------ core/_layout.sass | 43 +++++++++++++++-------- core/_settings.sass | 55 ++++++++++------------------- modules/_example.sass | 38 ++++++++++++++++++-- 9 files changed, 161 insertions(+), 145 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f4b3dc8..ac009ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 3.0.1 + +- Change the comment hierarchy + ## 3.0.0 - Add new **Core - Helper** file diff --git a/README.md b/README.md index 61aee54..119989f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# [MVCSS v3.0.0](http://mvcss.github.com) +# [MVCSS v3.0.1](http://mvcss.github.com) ## License MVCSS is licensed under the MIT License. diff --git a/application.sass b/application.sass index 6c0e0a6..bba5842 100644 --- a/application.sass +++ b/application.sass @@ -1,85 +1,51 @@ -//------------------------------------- -// Application -// MVCSS v3.0.0 -//------------------------------------- +// ************************************* +// +// Application +// -> MVCSS v3.0.1 +// +// ************************************* -// ----- Compass ----- // +// ------------------------------------- +// Compass +// ------------------------------------- // Import Compass here... -// ----- Core ----- // +// ------------------------------------- +// Core +// ------------------------------------- -// Reset -// -- Normalize v2.1.0 (modify for your project) +// ----- Reset ----- // @import "core/reset" -// Settings -// -- Fonts, Variables +// ----- Settings ----- // @import "core/settings" -// Helpers -// -- Extends, Functions, Mixins, Animations +// ----- Helpers ----- // @import "core/helpers" -// Base -// -- Base-level tags (body, p, etc.) +// ----- Base ----- // @import "core/base" -// Content -// -- Typography +// ----- Content ----- // @import "core/content" -// Layout -// -- Margin, Padding, Sizing +// ----- Layout ----- // @import "core/layout" -// ----- Modules ----- // +// ------------------------------------- +// Modules +// ------------------------------------- @import "modules/example" -// Examples: -// ------------------ -// .module -// .moduleName -// ------------------ - -// ----- Submodule ----- // - -// Examples: -// ------------------ -// .module-sub -// .moduleName-sub -// .moduleName-subName -// ------------------ - -// ----- Modifiers ----- // - -// Examples: -// ------------------ -// .module--modifier -// .moduleName--modifier -// .module-sub--modifier -// .moduleName-sub--modifier -// .moduleName-subName--modifer -// ------------------ - -// ----- State Modifiers ----- // - -// Examples: -// ------------------ -// .is-module-action -// .is-moduleName-action -// .is-module-sub-action -// .is-moduleName-subName-action -// ------------------ - -//------------------------------------- -// Inbox -//------------------------------------- +// ------------------------------------- +// Inbox +// ------------------------------------- diff --git a/core/_base.sass b/core/_base.sass index d4f63b9..042a5ea 100644 --- a/core/_base.sass +++ b/core/_base.sass @@ -1,6 +1,9 @@ -//------------------------------------- -// Base -//------------------------------------- +// ************************************* +// +// Base +// -> Base-level tags (body, p, etc.) +// +// ************************************* html font-size: $base-fontSize @@ -12,12 +15,16 @@ body font-size: 100% line-height: $base-lineHeight -// ----- Block Content ----- // +// ------------------------------------- +// Block Content +// ------------------------------------- p font-size: rem($base-fontSize) -// ----- Inline Content ----- // +// ------------------------------------- +// Inline Content +// ------------------------------------- a color: $base-link-color diff --git a/core/_content.sass b/core/_content.sass index da84cce..f957ddb 100644 --- a/core/_content.sass +++ b/core/_content.sass @@ -1,8 +1,13 @@ -//------------------------------------- -// Content -//------------------------------------- +// ************************************* +// +// Content +// -> Typography +// +// ************************************* -// ----- Headings ----- // +// ------------------------------------- +// Headings +// ------------------------------------- h1, h2, h3, h4, h5, h6 @@ -27,7 +32,9 @@ h5, .c-h5, %c-h5 h6, .c-h6, %c-h6 font-size: rem(16px) -// ----- Utilities ----- // +// ------------------------------------- +// Utilities +// ------------------------------------- %c-center, .c-center text-align: center diff --git a/core/_helpers.sass b/core/_helpers.sass index e150627..a0946d4 100644 --- a/core/_helpers.sass +++ b/core/_helpers.sass @@ -1,33 +1,34 @@ -//------------------------------------- -// Helpers -//------------------------------------- +// ************************************* +// +// Helpers +// -> Extends, Functions, Mixins, Animations +// +// ************************************* -// ----- Extends ----- // +// ------------------------------------- +// Extends +// ------------------------------------- -// @extend %debug -// -- Utility for debugging layout issues +// ----- Debug ----- // %debug background-color: pink !important -// @extend %ellipsis -// -- CSS text truncation +// ----- Ellipsis ----- // %ellipsis overflow: hidden text-overflow: ellipsis white-space: nowrap -// @extend %group -// -- Clearfix +// ----- Clearfix ----- // %group:after clear: both content: '' display: table -// @extend %ir -// -- Image replacement +// ----- Image Replacement ----- // %ir background-color: transparent @@ -39,10 +40,11 @@ width: 0 height: 150% -// ----- Functions ----- // +// ------------------------------------- +// Functions +// ------------------------------------- -// em() -// -- Sizes a pixel value to appropriate ems +// ----- em ----- // @function em($target, $context: $base-fontSize) @if ($target == 0) @@ -50,20 +52,22 @@ @else @return #{$target / $context}em -// rem() -// -- Sizes a pixel value to appropriate rems +// ----- rem ----- // @function rem($size) @return #{$size / $base-fontSize}rem -// ----- Mixins ----- // +// ------------------------------------- +// Mixins +// ------------------------------------- -// +respond-to() -// -- Generates a specified media query, which -// defaults to 'min-width' and 'screen' +// ----- Respond-to ----- // =respond-to($val, $query: min-width, $media: screen) @media #{$media} and ($query: $val) @content -// ----- Animations ----- // +// ------------------------------------- +// Animations +// ------------------------------------- + diff --git a/core/_layout.sass b/core/_layout.sass index 28d3e40..66c47f8 100644 --- a/core/_layout.sass +++ b/core/_layout.sass @@ -1,33 +1,48 @@ -//------------------------------------- -// Layout -//------------------------------------- +// ************************************* +// +// Layout +// -> Margin, Padding, Sizing +// +// ************************************* -// ----- Row ----- // +// ------------------------------------- +// Bucket +// ------------------------------------- -.l-row +.l-bucket + +// ------------------------------------- +// Card +// ------------------------------------- + +.l-card -// ----- Cell ----- // +// ------------------------------------- +// Cell +// ------------------------------------- %l-cell, .l-cell margin: 0 auto max-width: rem($l-maxWidth) padding: 0 rem(60px) -// ----- Grid ----- // +// ------------------------------------- +// Grid +// ------------------------------------- .l-grid .l-grid-box -// ----- Card ----- // +// ------------------------------------- +// Row +// ------------------------------------- -.l-card - -// ----- Bucket ----- // - -.l-bucket +.l-row -// ----- Utilities ----- // +// ------------------------------------- +// Utilities +// ------------------------------------- %l-block, .l-block display: block diff --git a/core/_settings.sass b/core/_settings.sass index a684b34..f5c2994 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -1,65 +1,46 @@ -//------------------------------------- -// Settings -//------------------------------------- +// ************************************* +// +// Settings +// -> Fonts, Variables +// +// ************************************* -// ----- @font-face ----- // +// ------------------------------------- +// @font-face +// ------------------------------------- // ... -// ----- Variables ----- // +// ------------------------------------- +// Variables +// ------------------------------------- -// Examples: -// ------------------ -// .module-property -// .moduleName-property -// ------------------ - -// ----- Sub-module ----- // - -// Examples: -// ------------------ -// .module-sub-property -// .moduleName-sub-property -// .moduleName-subName-property -// ------------------ - -// ----- Modifiers ----- // - -// Examples: -// ------------------ -// .module--modifier-property -// .moduleName--modifier-property -// .module-sub--modifier-property -// .moduleName-sub--modifier-property -// .moduleName-subName--modifer-property -// ------------------ - -// Base Colors +// ----- Base Colors ----- // $base-background: #FFF $base-color: #222 $base-link-color: #0053C9 -// Base Borders & Box Shadows +// ----- Base Borders & Box Shadows ----- // $base-border: 1px solid $base-color $base-borderRadius: 3px $base-boxShadow: 0 1px 2px rgba($base-color, 0.25) -// Base Content +// ----- Base Content ----- // $base-fontFamily: sans-serif $base-fontSize: 16px $base-lineHeight: 1.5 -// Base Layout +// ----- Base Layout ----- // $base-whitespace: 20px -// Content +// ----- Content ----- // $c-header-fontFamily: sans-serif -// Layout +// ----- Layout ----- // $l-maxWidth: 980px diff --git a/modules/_example.sass b/modules/_example.sass index a09b7fa..797e7da 100644 --- a/modules/_example.sass +++ b/modules/_example.sass @@ -1,3 +1,35 @@ -//------------------------------------- -// Module Name -//------------------------------------- +// ************************************* +// +// Module +// -> This is an example module +// +// ************************************* + +// .module + +// ------------------------------------- +// Modifiers +// ------------------------------------- + +// .module--modifier + +// ------------------------------------- +// States +// ------------------------------------- + +// .is-module-state + +// ------------------------------------- +// Context +// ------------------------------------- + +// .has-module + +// ------------------------------------- +// Submodules +// ------------------------------------- + +// ----- Submodule ----- // + +// .module-submodule + From b89a48888b9160f65dc6c93f29aa97c759d803de Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 9 Jul 2013 12:11:52 -0400 Subject: [PATCH 51/54] Lowercase the hexidecimal color value --- core/_settings.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/_settings.sass b/core/_settings.sass index f5c2994..10903ae 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -17,7 +17,7 @@ // ----- Base Colors ----- // -$base-background: #FFF +$base-background: #fff $base-color: #222 $base-link-color: #0053C9 From d47c8001c9aefb0503802e1ebf3fcd3ef0aa5ebc Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Tue, 9 Jul 2013 12:12:40 -0400 Subject: [PATCH 52/54] Lowercase the base link color hexidecimal value --- core/_settings.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/_settings.sass b/core/_settings.sass index 10903ae..c719838 100644 --- a/core/_settings.sass +++ b/core/_settings.sass @@ -19,7 +19,7 @@ $base-background: #fff $base-color: #222 -$base-link-color: #0053C9 +$base-link-color: #0053c9 // ----- Base Borders & Box Shadows ----- // From 994910587a8ecbcdc8f37b65566cedde582fb6bc Mon Sep 17 00:00:00 2001 From: Drew Barontini Date: Thu, 12 Sep 2013 06:45:24 -0400 Subject: [PATCH 53/54] Site updated at 2013-09-12 10:45:24 UTC --- .nojekyll | 0 application/index.html | 118 ++++++++++++++++++ assets/images/logo.svg | 31 +++++ assets/stylesheets/application.css | 1 + assets/stylesheets/vendor/github.css | 1 + changelog/index.html | 154 +++++++++++++++++++++++ core/base/index.html | 106 ++++++++++++++++ core/content/index.html | 132 ++++++++++++++++++++ core/helpers/index.html | 125 +++++++++++++++++++ core/index.html | 128 +++++++++++++++++++ core/layout/index.html | 112 +++++++++++++++++ core/reset/index.html | 108 ++++++++++++++++ core/settings/index.html | 113 +++++++++++++++++ favicon.ico | Bin 0 -> 8348 bytes index.html | 128 +++++++++++++++++++ library/index.html | 104 ++++++++++++++++ modules/index.html | 116 ++++++++++++++++++ styleguide/basics/index.html | 114 +++++++++++++++++ styleguide/index.html | 112 +++++++++++++++++ styleguide/naming/index.html | 176 +++++++++++++++++++++++++++ styleguide/sass-specific/index.html | 114 +++++++++++++++++ 21 files changed, 1993 insertions(+) create mode 100644 .nojekyll create mode 100644 application/index.html create mode 100644 assets/images/logo.svg create mode 100644 assets/stylesheets/application.css create mode 100644 assets/stylesheets/vendor/github.css create mode 100644 changelog/index.html create mode 100644 core/base/index.html create mode 100644 core/content/index.html create mode 100644 core/helpers/index.html create mode 100644 core/index.html create mode 100644 core/layout/index.html create mode 100644 core/reset/index.html create mode 100644 core/settings/index.html create mode 100644 favicon.ico create mode 100644 index.html create mode 100644 library/index.html create mode 100644 modules/index.html create mode 100644 styleguide/basics/index.html create mode 100644 styleguide/index.html create mode 100644 styleguide/naming/index.html create mode 100644 styleguide/sass-specific/index.html diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/application/index.html b/application/index.html new file mode 100644 index 0000000..ed59cc1 --- /dev/null +++ b/application/index.html @@ -0,0 +1,118 @@ + + + + + + + Application / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Application

+ +

The application consists of one file, application.sass, and it acts as the loader file for MVCSS. The file consists of imports and the inbox.

+ +

Imports

+ + + +

Note: Compass provides utilities and niceties to make your life easier. We use it, and we recommend that you give it a try.

+ +

Inbox

+ +

The inbox allows developers, and those not actively working on the CSS, to quickly add styles that are easily seen by the maintainer of the file. This section of the Application has worked wonders for us.

+
+ + + + + diff --git a/assets/images/logo.svg b/assets/images/logo.svg new file mode 100644 index 0000000..dbe1c6a --- /dev/null +++ b/assets/images/logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/stylesheets/application.css b/assets/stylesheets/application.css new file mode 100644 index 0000000..5851f94 --- /dev/null +++ b/assets/stylesheets/application.css @@ -0,0 +1 @@ +article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.c-logo:after{clear:both;content:"";display:table}html{font-size:16px}body{background:#ecf0f1;color:#444444;font-family:"Roboto Slab",serif;font-size:100%;line-height:1.6}@media screen and (min-width:768px){body{padding-left:18.75rem}}p{font-size:1rem;margin:0 0 1.25rem}pre,code,blockquote{font-size:90%}pre{margin:0 0 1.25rem;padding:.625rem}pre code{border:0;box-shadow:none;font-size:1rem}blockquote{font-size:100%;font-style:italic;color:#848484;margin:0 0 1.25rem;padding:.625rem .9375rem}blockquote p{margin:0}ul,ol{margin:0 0 1.25rem}ul ul,ul ol,ol ul,ol ol{margin-bottom:0}ul li,ol li{padding-bottom:.625rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul li{list-style-type:square}a{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border-bottom:2px solid #9a9aa8;color:#4e4e5b;text-decoration:none}a:hover,a:focus{background:#dddddd;border-color:#4e4e5b}code{padding:.125rem .3125rem}img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:3px;height:auto;max-width:100%}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;margin:2.5rem 0 .625rem}h1,.c-h1{font-size:2.5rem;margin:0 0 1.25rem}h2,.c-h2{font-size:1.875rem}h3,.c-h3{font-size:1.5625rem}h4,.c-h4{font-size:1.25rem}h5,.c-h5{font-size:1.125rem}.c-center{text-align:center}.c-condensed{font-size:85%}.c-lead{font-size:125%}.c-shout{text-transform:uppercase}.c-logo{font-size:1.875rem;padding:0 .625rem 1.25rem}@media screen and (min-height:875px){.c-logo{margin-bottom:1.25rem;padding-bottom:0}}.c-logo img{float:left}.c-logo b{float:left;font-size:2.5rem;line-height:1.875rem;margin-left:1.25rem;margin-top:2.5rem}.c-logo b span{color:#b5b5c0;display:block;font-size:40%;font-weight:300}.c-tagline{display:none;font-weight:300}@media screen and (min-height:875px){.c-tagline{display:block}}.l-cell{margin:1.25rem auto 2.5rem;max-width:46.875rem;padding:0 1.25rem}@media screen and (min-width:920px){.l-cell{margin:3.75rem auto;padding:0 3.75rem}}pre,code,blockquote,.l-card{background:white;box-shadow:0 2px 0 rgba(0,0,0,0.1);border-radius:3px}.l-block{display:block}.l-pullLeft{float:left}.l-pullRight{float:right}.l-controls{padding:1.25rem}.l-controls p{font-size:85%;margin:.9375rem 0 0;text-align:center}.l-controls p a{color:#666676}@media screen and (min-width:920px){.l-controls{position:absolute;right:0;top:0}}.l-sidebar{display:none;background:#4e4e5b}.is-sidebar-toggled .l-sidebar{display:block}@media screen and (min-width:768px){.l-sidebar{position:absolute;top:0;bottom:0;left:0;right:auto;box-shadow:0 0 0 4px #e0e7e8;display:block;position:fixed;width:18.75rem}}.l-sidebar-toggle{background:#cfd9db;border:0;display:block;margin-top:.625rem;padding:.625rem;text-align:center}@media screen and (min-width:768px){.l-sidebar-toggle{display:none}}.l-header{background:#363640;color:#ecf0f1;display:none;padding-top:1.25rem;text-align:center}.l-header p{background:#2f2f37;margin-bottom:0;padding:.625rem 0}@media screen and (min-width:768px){.l-header{display:block}}.l-nav ul,.l-nav li{list-style-type:none;padding:0}.l-nav a{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;border:0;color:white;display:block;font-size:90%;padding:.625rem 1.25rem}.l-nav a:hover,.l-nav a:focus{background:#363640}.l-nav a.is-active{background:#ecf0f1;box-shadow:-2px 2px 1px rgba(31,31,36,0.35);color:#444444;margin-right:-0.25rem}@media screen and (min-height:875px){.l-nav a{font-size:110%;padding:.625rem 1.25rem}}.l-nav ul li ul a{background:#42424d;font-size:90%;padding:.625rem;padding-left:2.5rem}.l-nav ul li ul{display:none}.l-nav ul li ul.is-section-active{display:block}.l-about{position:absolute;top:auto;bottom:0;left:0;right:0;background:#42424d;color:#b5b5c0;display:none;margin:0;padding:1.25rem 0;text-align:center}@media screen and (min-width:768px){.l-about{display:block}}@media screen and (min-height:875px){.l-about{padding:2.5rem 0}}.l-about b{font-weight:300;display:block}.l-about a{color:#d1d1d7}.l-about a:hover{background:none;color:white}.hll{background-color:#ffffcc}.c{color:#999988;font-style:italic}.err{color:#a61717;background-color:#e3d2d2}.k{color:#000000;font-weight:700}.o{color:#000000;font-weight:700}.cm{color:#999988;font-style:italic}.cp{color:#999999;font-weight:700;font-style:italic}.c1{color:#999988;font-style:italic}.cs{color:#999999;font-weight:700;font-style:italic}.gd{color:#000000;background-color:#ffdddd}.ge{color:#000000;font-style:italic}.gr{color:#aa0000}.gh{color:#999999}.gi{color:#000000;background-color:#ddffdd}.go{color:#888888}.gp{color:#555555}.gs{font-weight:700}.gu{color:#aaaaaa}.gt{color:#aa0000}.kc{color:#000000;font-weight:700}.kd{color:#000000;font-weight:700}.kn{color:#000000;font-weight:700}.kp{color:#000000;font-weight:700}.kr{color:#000000;font-weight:700}.kt{color:#445588;font-weight:700}.m{color:#009999}.s{color:#d01040}.na{color:teal}.nb{color:#0086b3}.nc{color:#445588;font-weight:700}.no{color:teal}.nd{color:#3c5d5d;font-weight:700}.ni{color:purple}.ne{color:#990000;font-weight:700}.nf{color:#990000;font-weight:700}.nl{color:#990000;font-weight:700}.nn{color:#555555}.nt{color:navy}.nv{color:teal}.ow{color:#000000;font-weight:700}.w{color:#bbbbbb}.mf{color:#009999}.mh{color:#009999}.mi{color:#009999}.mo{color:#009999}.sb{color:#d01040}.sc{color:#d01040}.sd{color:#d01040}.s2{color:#d01040}.se{color:#d01040}.sh{color:#d01040}.si{color:#d01040}.sx{color:#d01040}.sr{color:#009926}.s1{color:#d01040}.ss{color:#990073}.bp{color:#999999}.vc{color:teal}.vg{color:teal}.vi{color:teal}.il{color:#009999}.btn--a,.btn--b,.btn{-webkit-transition:background .2s ease-in-out,box-shadow .2s ease-in-out;-moz-transition:background .2s ease-in-out,box-shadow .2s ease-in-out;-o-transition:background .2s ease-in-out,box-shadow .2s ease-in-out;transition:background .2s ease-in-out,box-shadow .2s ease-in-out;border-radius:3px;border:0;color:white;display:block;padding:.3125rem .625rem;text-align:center}.btn--a:active,.btn--b:active,.btn:active{-webkit-transform:translateY(2px);-moz-transform:translateY(2px);-ms-transform:translateY(2px);-o-transform:translateY(2px);transform:translateY(2px)}@media screen and (min-width:920px){.btn--a,.btn--b,.btn{width:12.5rem}}.btn--a{background:#4e4e5b;box-shadow:0 6px 0 #363640}.btn--a:hover,.btn--a:focus{background:#42424d;box-shadow:0 6px 0 #2b2b32}.btn--b{background:#77939a;box-shadow:0 6px 0 #5e7980;margin-top:2.5rem}.btn--b:hover,.btn--b:focus{background:#69878e;box-shadow:0 6px 0 #536b71} \ No newline at end of file diff --git a/assets/stylesheets/vendor/github.css b/assets/stylesheets/vendor/github.css new file mode 100644 index 0000000..dacb8dd --- /dev/null +++ b/assets/stylesheets/vendor/github.css @@ -0,0 +1 @@ +.hll{background-color:#ffffcc}.c{color:#999988;font-style:italic}.err{color:#a61717;background-color:#e3d2d2}.k{color:#000000;font-weight:700}.o{color:#000000;font-weight:700}.cm{color:#999988;font-style:italic}.cp{color:#999999;font-weight:700;font-style:italic}.c1{color:#999988;font-style:italic}.cs{color:#999999;font-weight:700;font-style:italic}.gd{color:#000000;background-color:#ffdddd}.ge{color:#000000;font-style:italic}.gr{color:#aa0000}.gh{color:#999999}.gi{color:#000000;background-color:#ddffdd}.go{color:#888888}.gp{color:#555555}.gs{font-weight:700}.gu{color:#aaaaaa}.gt{color:#aa0000}.kc{color:#000000;font-weight:700}.kd{color:#000000;font-weight:700}.kn{color:#000000;font-weight:700}.kp{color:#000000;font-weight:700}.kr{color:#000000;font-weight:700}.kt{color:#445588;font-weight:700}.m{color:#009999}.s{color:#d01040}.na{color:teal}.nb{color:#0086b3}.nc{color:#445588;font-weight:700}.no{color:teal}.nd{color:#3c5d5d;font-weight:700}.ni{color:purple}.ne{color:#990000;font-weight:700}.nf{color:#990000;font-weight:700}.nl{color:#990000;font-weight:700}.nn{color:#555555}.nt{color:navy}.nv{color:teal}.ow{color:#000000;font-weight:700}.w{color:#bbbbbb}.mf{color:#009999}.mh{color:#009999}.mi{color:#009999}.mo{color:#009999}.sb{color:#d01040}.sc{color:#d01040}.sd{color:#d01040}.s2{color:#d01040}.se{color:#d01040}.sh{color:#d01040}.si{color:#d01040}.sx{color:#d01040}.sr{color:#009926}.s1{color:#d01040}.ss{color:#990073}.bp{color:#999999}.vc{color:teal}.vg{color:teal}.vi{color:teal}.il{color:#009999} \ No newline at end of file diff --git a/changelog/index.html b/changelog/index.html new file mode 100644 index 0000000..8bb28f4 --- /dev/null +++ b/changelog/index.html @@ -0,0 +1,154 @@ + + + + + + + MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Changelog

+ +

v3.0.1

+ +

June 27, 2013

+ +
    +
  • New comment hierarchy
    • +
+ +

v3.0.0

+ +

May 15, 2013

+ +
    +
  • Add new Core - Helper file
    • +
  • Add new Core - Content file (replaces Containers Module file)
    • +
  • Add new Core - Layout file
    • +
  • Move extends, mixins, animations to new Core - Helper file
    • +
  • Change Core - Reset to Normalize v2.1.0
    • +
  • Add better variable naming conventions
    • +
  • Add more base variables
    • +
  • Add em() function
    • +
  • Add rem() function
    • +
  • Use rems as the default typographic unit
    • +
  • Add better documentation for Core - Helper file elements
    • +
  • Add better documentation for Application file imports
    • +
  • Add better documentation for variables
    • +
+ +

v2.1.0

+ +

March 6, 2013

+ +
    +
  • Remove States as part of Core
    • +
+ +

v2.0.1

+ +

March 5, 2013

+ +
    +
  • Modify the ellipsis, group, and ir extends (commit)
    • +
+ +

v2.0.0

+ +

February 22, 2013

+ +
    +
  • Initial version applied
    • +
+
+ + + + + diff --git a/core/base/index.html b/core/base/index.html new file mode 100644 index 0000000..0bf5840 --- /dev/null +++ b/core/base/index.html @@ -0,0 +1,106 @@ + + + + + + + Core - Base / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Base

+ +

Core - Base sets any base-level styles for tags, such as p or blockquote, beyond what's included in the reset or normalize. Text styles set here reflect the most common appearance of that tag in the design.

+ +

Next →

+
+ + + + + diff --git a/core/content/index.html b/core/content/index.html new file mode 100644 index 0000000..06e2c31 --- /dev/null +++ b/core/content/index.html @@ -0,0 +1,132 @@ + + + + + + + Core - Content / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Content

+ +

Core - Content and Core - Layout are the bridge between base-level tags and modules. They give you the ability to set up abstractions that make contextual tweaks easier.

+ +

The difference between Core - Content and Core - Layout is that Core - Content applies mainly to typography (fonts, colors), while Core - Layout applies to just that, layout (margin, padding, sizing, positioning).

+ +

Note: The c- prefix is an implicit module. There is no c base module; it's only used as a prefix for the content modules.

+ +

Headings

+ +

We set the headings in the Core - Content rather than Core - Base, because we want the ability to share heading styles.

+ 
h1, .c-h1, %c-h1
  font-size: 40px
  margin-bottom: 20px
+

Borrowed from OOCSS, sometimes we want an h2 on a page to look like an h3. This gives us the ability to do that:

+ 
%h2.c-h3 Heading
+

Or, using the placeholder selector:

+ 
.tagline
  @extend %c-h3

%h2.tagline This is a tagline for my site.
+

Utilities

+ +

We set default Core - Content utilities. Let's look at an example to show how this works. Here are a couple of the default utilities available to you:

+ 
%c-center, .c-center
  text-align: center

%c-condense, .c-condense
  font-size: 85%
+

And in your markup:

+ 
%form.form-field
  %input(type="text")
  %p.c-condense This is a note.
+

Or, if you prefer to use Sass placeholder selectors as silent classes:

+ 
%form.form-field
  %input(type="text")
  %p.form-field-desc This is a note.
.form-field-desc
  @extend %c-condense
+

Note: You can set your own custom content utility modules for your project.

+ +

Custom Submodules

+ +

You can extend multiple content utilities, or even form another content submodule:

+ 
.c-tagline
  @extend %c-center
  @extend %c-condense
+

Next →

+
+ + + + + diff --git a/core/helpers/index.html b/core/helpers/index.html new file mode 100644 index 0000000..4613625 --- /dev/null +++ b/core/helpers/index.html @@ -0,0 +1,125 @@ + + + + + + + Core - Helpers / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Helpers

+ +

Core - Helpers consists of:

+ +
    +
  1. Extends
    2. +
  2. Functions
    3. +
  3. Mixins
    4. +
  4. Keyframe Animations
    5. +
+ +

A Note About Sizing

+ +

By default, MVCSS sizes all elements (font-size, margin, padding) with rems. We do this through the rem() function, that simply divides the target pixel value by the $base-fontSize. Here's an example:

+ 
h4
  font-size: rem(20px)
+

Note: Be sure to look at your site's browser support to determine if rems are the right option. Take a look at the current browser support for rem.

+ +

If you'd like to use ems, there is an em() function available as well:

+ 
h4
  font-size: em(20px)
+

However, with ems, if you were to alter the context from the default $base-fontSize, you would need to pass the new context in as the second argument:

+ 
h4
  font-size: em(20px)
  padding-bottom: em(10px, 20px)
+

To make adjustments easier, create a local $context variable for the size:

+ 
h4
  $context: 20px
  font-size: em($context)
  padding-bottom: em(10px, $context)
+

Next →

+
+ + + + + diff --git a/core/index.html b/core/index.html new file mode 100644 index 0000000..a53e9e5 --- /dev/null +++ b/core/index.html @@ -0,0 +1,128 @@ + + + + + + + Core / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Core

+ +

The core consists of six components:

+ +

1. Reset

+ +

Standard Normalize.css reset.

+ +

2. Settings

+ +

@font-face and global variables.

+ +

3. Helpers

+ +

Extends, functions, mixins, keyframe animations.

+ +

4. Base

+ +

Base-level tags.

+ +

5. Content

+ +

Base-level typography (colors, fonts).

+ +

6. Layout

+ +

Base-level layout (margin, padding, sizing).

+
+ + + + + diff --git a/core/layout/index.html b/core/layout/index.html new file mode 100644 index 0000000..a766a38 --- /dev/null +++ b/core/layout/index.html @@ -0,0 +1,112 @@ + + + + + + + Core - Layout / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Layout

+ +

Just like Core - Content, the Core - Layout gives you a higher level of abstraction for your modules.

+ +

Note: The l- prefix is an implicit module. There is no l base module; it's only used as a prefix for the layout modules. This is borrowed from SMACSS, which uses the l- convention in its layout section.

+ +

A good example of a Core - Layout submodule is what we call the cell module (l-cell), which gives your site a max-width, centers it, and applies horizontal padding. Let's take a look:

+ 
%l-cell, .l-cell
  margin: 0 auto
  max-width: 900px
  padding: 0 60px
+

Utilities & Custom Submodules

+ +

Just like Core - Content, there are default utilities provided to you, and you can create your own custom submodules as well. Be sure to read through the MVCSS project files to get familiarized.

+
+ + + + + diff --git a/core/reset/index.html b/core/reset/index.html new file mode 100644 index 0000000..62b994e --- /dev/null +++ b/core/reset/index.html @@ -0,0 +1,108 @@ + + + + + + + Core - Reset / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Reset / Normalize

+ +

As long as the project size warrants it, we always get things started with a style reset. Normalize.css is what we use, but alternatives like the infamous Eric Meyer Reset CSS are easily interchangeable.

+ +

With Normalize.css, we recommend that you alter it on a per-project basis, and make the proper overrides in Core - Base.

+ +

Next →

+
+ + + + + diff --git a/core/settings/index.html b/core/settings/index.html new file mode 100644 index 0000000..2d554ea --- /dev/null +++ b/core/settings/index.html @@ -0,0 +1,113 @@ + + + + + + + Core - Settings / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Settings

+ +

Core - Settings centers on two things:

+ +
    +
  1. @font-face declarations
    2. +
  2. Variables
    3. +
+ +

Grouping all the app-wide settings into one file allows newcomers to the project the means to find out what's available to them quickly.

+ +

Next →

+
+ + + + + diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..bcf04ac4ed27b73d7984f2f14c26003495b6cdbb GIT binary patch literal 8348 zcmeI0K?;K~5Ji8B2k;146_4QwT$Ucd19j7lm(__diwd)FF_w}igfSm=;N@qCBi(dY zDY95J^wL98Z*iY@(q#98Y4(Ul8&!|4`T1HIFmMkn@6Vb!JWmuebJuT2d0i(z>!0ZX z_gNG(bK`&Zf8;yY@gMas(*y3aC}!rS{!#xT-?`qp|C|G{jeo-0C$M(G-XZvhKEc`j qdGs;wpF7{c@4F8C+CRtjxN08t578k20SG_<0uX=z1Rwx`Rtaptx<2#( literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..13262da --- /dev/null +++ b/index.html @@ -0,0 +1,128 @@ + + + + + + + MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

About

+ +

MVCSS is a Sass-based CSS architecture for creating predictable and maintainable application style.

+ +

As front-end devs at Envy Labs, we work primarily in medium-to-large-sized Rails applications. Each of these projects has a sizable amount of CSS undergoing normal maintenance and iteration. Depending on complexity and setup, changes to existing style can be difficult or done poorly if the right way is too convoluted.

+ +

What? Another Way to Write CSS?

+ +

We're big fans (and often employ tenets of) well-documented methods like OOCSS, BEM, and SMACSS. This bit of architecture and accompanying Styleguide/Library meshes all of our preferred practices into one place.

+ +

All This for CSS?

+ +

CSS in and of itself is simple to pick up, but difficult to apply maintainably to large applications - hence the popularity of the methods listed above. MVCSS is one such manner to organize styles, and the one that we've had the most success in employing.

+ +

Do I Have to Use Sass?

+ +

Sass is not required to employ this paradigm, but all the project files are written in it, so it's definitely recommended.

+ +

Organizational Overview

+ +

MVCSS is broken down into three primary sections:

+ +
    +
  1. Application
    2. +
  2. Core
    3. +
  3. Modules
    4. +
+
+ + + + + diff --git a/library/index.html b/library/index.html new file mode 100644 index 0000000..8821238 --- /dev/null +++ b/library/index.html @@ -0,0 +1,104 @@ + + + + + + + Library / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Library

+ +

The Library is a collection of Sass modules/helpers and JavaScript (CoffeeScript) components we commonly use. If you're seeking a framework moreso than a methodology, this is your jumping off point for items like grids, tabs, buttons, and forms. You can just plug the modules/components into your base MVCSS project.

+
+ + + + + diff --git a/modules/index.html b/modules/index.html new file mode 100644 index 0000000..9d7c8dd --- /dev/null +++ b/modules/index.html @@ -0,0 +1,116 @@ + + + + + + + Modules / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Modules

+ +

Modules in this context refer to any unit of style that can be found across multiple pages. Most of your styles should be found here. This draws from the OOCSS idea of separating everything into reusable chunks, making it second-nature if you're familiar with that method.

+ +

Examples of Modules

+ +

Here are some commonly occurring examples of modules:

+ +
    +
  • Modals
    • +
  • Buttons
    • +
  • Tooltips
    • +
  • Navigation
    • +
  • Re-appearing chunks of content, like a user info card or sidebar
    • +
+
+ + + + + diff --git a/styleguide/basics/index.html b/styleguide/basics/index.html new file mode 100644 index 0000000..4e9fab4 --- /dev/null +++ b/styleguide/basics/index.html @@ -0,0 +1,114 @@ + + + + + + + Styleguide - Basics / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Basics

+ +
    +
  • Alphabetize properties
    • +
  • Use soft-tabs with two-space indent
    • +
  • Put a space after :
    • +
  • Put a space after the // for comments
    • +
  • Put a space after commas (e.g. rgba(#000, 0.5))
    • +
  • Choose a hexidecimal format and stick to it (e.g. #FFF or #fff)
    • +
  • Do not use ids (only classes)
    • +
+ 
// This is an example!

.module
  background: #fff
  color: #000
  font-size: 1.6em

.module-submodule
  font-size: 2em
  margin-bottom: 1em
+

Next →

+
+ + + + + diff --git a/styleguide/index.html b/styleguide/index.html new file mode 100644 index 0000000..2b73282 --- /dev/null +++ b/styleguide/index.html @@ -0,0 +1,112 @@ + + + + + + + Styleguide / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Styleguide

+ +

Everyone has a favorite way to write CSS and determine how to name modules. Realizing that everyone includes us, here are our compiled standards for stylesheet authoring and module naming.

+ +

The styleguide is broken down into:

+ + +
+ + + + + diff --git a/styleguide/naming/index.html b/styleguide/naming/index.html new file mode 100644 index 0000000..368e354 --- /dev/null +++ b/styleguide/naming/index.html @@ -0,0 +1,176 @@ + + + + + + + Styleguide - Naming Conventions / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Naming Conventions

+ +

Modules

+ +

Note: Module files should be named in the singular, unless your module's name is plural. For example:

+ +
    +
  • modules/_button.sass
    • +
  • modules/_grid.sass
    • +
  • modules/_form.sass
    • +
+ +

Modules are broken down into the base module, submodules, modifiers, and states. If your module or submodule name is two words, use camelCase. For example, .moduleName.

+ +

Submodules

+ +

Submodules use the hyphen - separator to denote that it is a submodule to another module. For example, module-submodule.

+ +

Note: If you have a plural module (e.g. .tabs), you can name your submodule .tab as an exception to this rule. The assumption is made that .tab is a submodule of .tabs.

+ +

Modifiers

+ +

Use -- for a modifier on a module or submodule. For example:

+ +
    +
  • .module--modifier
    • +
  • .module-submodule--modifier.
    • +
+ +

Note: Module and submodule modifier variables contain the same convention. For example:

+ 
$module--modifier-background: #000
+

States

+ +

Use the is-state, is-module-state, is-module-submodule-state pattern for your states. For example:

+ +
    +
  • .is-active
    • +
  • .is-sidebar-toggled
    • +
  • .is-nav-item-active
    • +
+ +

Context

+ +

Use has- for adding a context with specific styles on a module or submodule. For example:

+ 
<div class="nav has-dropdown">
  <!-- ... -->
</div>
.has-dropdown
  position: relative
+

Note: This idea is borrowed from suitcss.

+ +

Note: This is different than a Modifier, which sets custom, alternate styles on the base module.

+ +

Sass Variables

+ +

Variables, as documented in Core - Settings, should follow the same naming conventions as your modules, referenced above. The most global variables (used in multiple places, multiple contexts) are prefixed with $base-. Let's look at some examples:

+ 
$base-background: #eee
$base-color: #444
$base-borderRadius: 3px
$base-fontSize: 16px
$base-lineHeight: 1.6
$base-whitespace: 20px
+

Content and layout variables are prefixed with $c- and $l-, respectively.

+ 
$c-header-color: #999
$c-header-fontFamily: sans-serif
$l-maxWidth: 960px
$l-sidebar-width: 200px
+

You may also create module-specific variables, like so:

+ 
$grid-breakpoint-lap: 480px
$grid-breakpoint-desk: 800px
$grid-gutter: 20px
$form-fontSize: 12px
$form-input-background: #ddd
+

Hierarchy

+ +
    +
  • Do not use .block--left or .block--right
    • +
  • Do use .block--a and .block--b to semantically establish hierarchy
    • +
+ +

Images

+ +

A section about naming images? I know. Let's just get through it.

+ +
    +
  • bg-* for backgrounds
    • +
  • icn-* for icons
    • +
  • logo-* for logos
    • +
  • img-* for generic images
    • +
  • Sub-folders for larger groups
    • +
+
+ + + + + diff --git a/styleguide/sass-specific/index.html b/styleguide/sass-specific/index.html new file mode 100644 index 0000000..136dc7f --- /dev/null +++ b/styleguide/sass-specific/index.html @@ -0,0 +1,114 @@ + + + + + + + Styleguide - Sass-specific / MVCSS + + + + + + +
+ View Code → +

Changelog (v3.0.1)

+
+ Navigation + +
+

Sass-specific (.sass)

+ +
    +
  • Follow the same rules listed in the Basics section
    • +
  • Do not nest deeper than 3 levels (with the exception of pseudo/hover states)
    • +
  • Place mixin(+) and @extend calls at the top of the properties list
    • +
+ +

Comments

+ +

There are four levels of comments:

+ 
// *************************************
//
//   First Level
//   -> Description
//
// *************************************

// -------------------------------------
//   Second Level
// -------------------------------------

// ----- Third Level ----- //

// Fourth Level
+

Next →

+
+ + + + + From e536bcea8d4fbd6dfe55679f975dffaf07c9df61 Mon Sep 17 00:00:00 2001 From: Dave O'Brien Date: Sat, 2 Nov 2013 16:31:47 +0000 Subject: [PATCH 54/54] Renamed title --- application/index.html | 29 +++++--------- changelog/index.html | 47 +++++++++------------- core/base/index.html | 21 +++------- core/content/index.html | 33 ++++++---------- core/helpers/index.html | 27 ++++--------- core/index.html | 43 ++++++++------------ core/layout/index.html | 25 ++++-------- core/reset/index.html | 23 +++-------- core/settings/index.html | 25 ++++-------- index.html | 39 +++++++----------- library/index.html | 19 ++------- modules/index.html | 25 ++++-------- styleguide/basics/index.html | 19 ++------- styleguide/index.html | 23 +++-------- styleguide/naming/index.html | 61 ++++++++++++----------------- styleguide/sass-specific/index.html | 23 +++-------- 16 files changed, 153 insertions(+), 329 deletions(-) diff --git a/application/index.html b/application/index.html index ed59cc1..18f2d39 100644 --- a/application/index.html +++ b/application/index.html @@ -8,17 +8,6 @@ -
@@ -32,7 +21,7 @@ MVCSS MVCSS Version 3.0.1
-

A Sass-based CSS Architecture

+

The Ego Frontend Development Guidelines