From d13cd4b1907802708a1e40e61a531bca5d409405 Mon Sep 17 00:00:00 2001 From: Scott Kellum Date: Tue, 6 Mar 2012 13:56:13 -0500 Subject: [PATCH] Initial push --- .gitignore | 2 + html/_/css/lib/styleguide/links.css | 0 html/_/css/style.css | 651 ++++++++++++++++++++++ html/index.html | 158 ++++++ readme.md | 20 + sass/lib/_grid.sass | 79 +++ sass/lib/_normalize.scss | 528 ++++++++++++++++++ sass/lib/_reset.sass | 187 +++++++ sass/lib/_styleguide.sass | 35 ++ sass/lib/_tools.sass | 11 + sass/lib/plugin/_normalize-pixel.sass | 19 + sass/lib/plugin/_transition-all.sass | 2 + sass/lib/styleguide/_breadcrumbs.sass | 0 sass/lib/styleguide/_buttons.sass | 0 sass/lib/styleguide/_forms.sass | 0 sass/lib/styleguide/_links.sass | 19 + sass/lib/styleguide/_pagination.sass | 0 sass/lib/styleguide/_reset.sass | 17 + sass/lib/styleguide/_structured-list.sass | 25 + sass/lib/styleguide/_table.sass | 15 + sass/lib/styleguide/_typography.sass | 58 ++ sass/lib/tools/_backgrounds.sass | 5 + sass/lib/tools/_clearfix.sass | 17 + sass/lib/tools/_color-schemer.sass | 174 ++++++ sass/lib/tools/_css3.sass | 553 ++++++++++++++++++ sass/lib/tools/_debug.sass | 33 ++ sass/lib/tools/_font-face.sass | 7 + sass/lib/tools/_hide-text.sass | 7 + sass/lib/tools/_modular-scale.sass | 313 +++++++++++ sass/lib/tools/_pixel-normalize.sass | 24 + sass/lib/tools/_relative-pixels.sass | 36 ++ sass/lib/tools/_sprites.sass | 17 + sass/lib/tools/_typography.sass | 15 + sass/skin/_default.sass | 15 + sass/skin/default/_article.sass | 5 + sass/skin/default/_aside.sass | 4 + sass/skin/default/_footer.sass | 12 + sass/skin/default/_foundation.sass | 8 + sass/skin/default/_header.sass | 20 + sass/skin/default/_media.sass | 13 + sass/skin/default/_nav.sass | 31 ++ sass/skin/default/_print.sass | 1 + sass/style.sass | 33 ++ 43 files changed, 3169 insertions(+) create mode 100644 .gitignore create mode 100644 html/_/css/lib/styleguide/links.css create mode 100644 html/_/css/style.css create mode 100644 html/index.html create mode 100644 readme.md create mode 100644 sass/lib/_grid.sass create mode 100644 sass/lib/_normalize.scss create mode 100644 sass/lib/_reset.sass create mode 100644 sass/lib/_styleguide.sass create mode 100644 sass/lib/_tools.sass create mode 100644 sass/lib/plugin/_normalize-pixel.sass create mode 100644 sass/lib/plugin/_transition-all.sass create mode 100644 sass/lib/styleguide/_breadcrumbs.sass create mode 100644 sass/lib/styleguide/_buttons.sass create mode 100644 sass/lib/styleguide/_forms.sass create mode 100644 sass/lib/styleguide/_links.sass create mode 100644 sass/lib/styleguide/_pagination.sass create mode 100644 sass/lib/styleguide/_reset.sass create mode 100644 sass/lib/styleguide/_structured-list.sass create mode 100644 sass/lib/styleguide/_table.sass create mode 100644 sass/lib/styleguide/_typography.sass create mode 100644 sass/lib/tools/_backgrounds.sass create mode 100644 sass/lib/tools/_clearfix.sass create mode 100644 sass/lib/tools/_color-schemer.sass create mode 100644 sass/lib/tools/_css3.sass create mode 100644 sass/lib/tools/_debug.sass create mode 100644 sass/lib/tools/_font-face.sass create mode 100644 sass/lib/tools/_hide-text.sass create mode 100644 sass/lib/tools/_modular-scale.sass create mode 100644 sass/lib/tools/_pixel-normalize.sass create mode 100644 sass/lib/tools/_relative-pixels.sass create mode 100644 sass/lib/tools/_sprites.sass create mode 100644 sass/lib/tools/_typography.sass create mode 100644 sass/skin/_default.sass create mode 100644 sass/skin/default/_article.sass create mode 100644 sass/skin/default/_aside.sass create mode 100644 sass/skin/default/_footer.sass create mode 100644 sass/skin/default/_foundation.sass create mode 100644 sass/skin/default/_header.sass create mode 100644 sass/skin/default/_media.sass create mode 100644 sass/skin/default/_nav.sass create mode 100644 sass/skin/default/_print.sass create mode 100644 sass/style.sass diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c095c4c --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +*.sassc \ No newline at end of file diff --git a/html/_/css/lib/styleguide/links.css b/html/_/css/lib/styleguide/links.css new file mode 100644 index 0000000..e69de29 diff --git a/html/_/css/style.css b/html/_/css/style.css new file mode 100644 index 0000000..137d473 --- /dev/null +++ b/html/_/css/style.css @@ -0,0 +1,651 @@ +/* normalize.css 2012-02-07T12:37 UTC - http://github.com/necolas/normalize.css */ +/* ============================================================================= + HTML5 display definitions + ========================================================================== */ +/* + * Corrects block display not defined in IE6/7/8/9 & FF3 + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; } + +/* + * Corrects inline-block display not defined in IE6/7/8/9 & FF3 + */ +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; } + +/* + * Prevents modern browsers from displaying 'audio' without controls + */ +audio:not([controls]) { + display: none; } + +/* + * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 + * Known issue: no IE6 support + */ +[hidden] { + display: none; } + +/* ============================================================================= + Base + ========================================================================== */ +/* + * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units + * http://clagnut.com/blog/348/#c790 + * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ +html { + font-size: 100%; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -ms-text-size-adjust: 100%; + /* 2 */ } + +/* + * Addresses font-family inconsistency between 'textarea' and other form elements. + */ +html, +button, +input, +select, +textarea { + font-family: sans-serif; } + +/* + * Addresses margins handled incorrectly in IE6/7 + */ +body { + margin: 0; } + +/* ============================================================================= + Links + ========================================================================== */ +/* + * Addresses outline displayed oddly in Chrome + */ +a:focus { + outline: thin dotted; } + +/* + * Improves readability when focused and also mouse hovered in all browsers + * people.opera.com/patrickl/experiments/keyboard/test + */ +a:hover, +a:active { + outline: 0; } + +/* ============================================================================= + Typography + ========================================================================== */ +/* + * Addresses font sizes and margins set differently in IE6/7 + * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +h2 { + font-size: 1.5em; + margin: 0.83em 0; } + +h3 { + font-size: 1.17em; + margin: 1em 0; } + +h4 { + font-size: 1em; + margin: 1.33em 0; } + +h5 { + font-size: 0.83em; + margin: 1.67em 0; } + +h6 { + font-size: 0.75em; + margin: 2.33em 0; } + +/* + * Addresses styling not present in IE7/8/9, S5, Chrome + */ +abbr[title] { + border-bottom: 1px dotted; } + +/* + * Addresses style set to 'bolder' in FF3+, S4/5, Chrome +*/ +b, +strong { + font-weight: bold; } + +blockquote { + margin: 1em 40px; } + +/* + * Addresses styling not present in S5, Chrome + */ +dfn { + font-style: italic; } + +/* + * Addresses styling not present in IE6/7/8/9 + */ +mark { + background: #ff0; + color: #000; } + +/* + * Addresses margins set differently in IE6/7 + */ +p, +pre { + margin: 1em 0; } + +/* + * Corrects font family set oddly in IE6, S4/5, Chrome + * en.wikipedia.org/wiki/User:Davidgothberg/Test59 + */ +pre, +code, +kbd, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; } + +/* + * Improves readability of pre-formatted text in all browsers + */ +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; } + +/* + * 1. Addresses CSS quotes not supported in IE6/7 + * 2. Addresses quote property not supported in S4 + */ +/* 1 */ +q { + quotes: none; } + +/* 2 */ +q:before, +q:after { + content: ''; + content: none; } + +small { + font-size: 75%; } + +/* + * Prevents sub and sup affecting line-height in all browsers + * gist.github.com/413930 + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* ============================================================================= + Lists + ========================================================================== */ +/* + * Addresses margins set differently in IE6/7 + */ +dl, +menu, +ol, +ul { + margin: 1em 0; } + +dd { + margin: 0 0 0 40px; } + +/* + * Addresses paddings set differently in IE6/7 + */ +menu, +ol, +ul { + padding: 0 0 0 40px; } + +/* + * Corrects list images handled incorrectly in IE7 + */ +nav ul, +nav ol { + list-style: none; + list-style-image: none; } + +/* ============================================================================= + Embedded content + ========================================================================== */ +/* + * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 + * 2. Improves image quality when scaled in IE7 + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ +img { + border: 0; + /* 1 */ + -ms-interpolation-mode: bicubic; + /* 2 */ } + +/* + * Corrects overflow displayed oddly in IE9 + */ +svg:not(:root) { + overflow: hidden; } + +/* ============================================================================= + Figures + ========================================================================== */ +/* + * Addresses margin not present in IE6/7/8/9, S5, O11 + */ +figure { + margin: 0; } + +/* ============================================================================= + Forms + ========================================================================== */ +/* + * Corrects margin displayed oddly in IE6/7 + */ +form { + margin: 0; } + +/* + * Define consistent border, margin, and padding + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/* + * 1. Corrects color not being inherited in IE6/7/8/9 + * 2. Corrects text not wrapping in FF3 + * 3. Corrects alignment displayed oddly in IE6/7 + */ +legend { + border: 0; + /* 1 */ + padding: 0; + white-space: normal; + /* 2 */ + *margin-left: -7px; + /* 3 */ } + +/* + * 1. Corrects font size not being inherited in all browsers + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome + * 3. Improves appearance and consistency in all browsers + */ +button, +input, +select, +textarea { + font-size: 100%; + /* 1 */ + margin: 0; + /* 2 */ + vertical-align: baseline; + /* 3 */ + *vertical-align: middle; + /* 3 */ } + +/* + * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet + */ +button, +input { + line-height: normal; + /* 1 */ } + +/* + * 1. Improves usability and consistency of cursor style between image-type 'input' and others + * 2. Corrects inability to style clickable 'input' types in iOS + * 3. Removes inner spacing in IE7 without affecting normal text inputs + * Known issue: inner spacing remains in IE6 + */ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + /* 1 */ + -webkit-appearance: button; + /* 2 */ + *overflow: visible; + /* 3 */ } + +/* + * Re-set default cursor for disabled elements + */ +button[disabled], +input[disabled] { + cursor: default; } + +/* + * 1. Addresses box sizing set to content-box in IE8/9 + * 2. Removes excess padding in IE8/9 + * 3. Removes excess padding in IE7 + Known issue: excess padding remains in IE6 + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ + *height: 13px; + /* 3 */ + *width: 13px; + /* 3 */ } + +/* + * 1. Addresses appearance set to searchfield in S5, Chrome + * 2. Addresses box-sizing set to border-box in S5, 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; } + +/* + * Removes inner padding and search cancel button in S5, Chrome on OS X + */ +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; } + +/* + * Removes inner padding and border in FF3+ + * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/* + * 1. Removes default vertical scrollbar in IE6/7/8/9 + * 2. Improves 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; } + +html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + vertical-align: baseline; + background: transparent; } + +html { + font-size: 16px; + line-height: 1.3em; } + +.wrapper { + width: 90%; + max-width: 87.5em; + position: relative; + margin-left: auto; + margin-right: auto; } + +aside { + margin-left: 2%; + float: left; } + +aside { + width: 23.5%; } + +article { + width: 74.5%; } + +aside ul { + margin: 0; + padding: 0; } +aside li { + list-style: none; + margin-bottom: 1px; } + aside li a, aside li a:hover, aside li li { + display: block; + border: none; + background-color: #688cbc; } + aside li a { + padding: 0.15em 0.75em; + color: white; } + aside li a:hover { + color: white; + background-color: #4a72a7; } + +a { + text-decoration: none; + color: #834e08; + border-bottom: 1px dotted #834e08; } + a:hover { + color: #e3870e; + border-bottom: 1px solid #e3870e; } + +table { + width: 100%; + margin-bottom: 1.3em; } + +td { + border: 1px solid #777777; + padding: 0.2em 0.5em; } + +tr:nth-child(even) { + background-color: #f6f6f6; } + +tr:hover { + background-color: #dddddd; } + +p { + text-indent: 1.5em; + font-family: serif; } + +.no-indent { + text-indent: 0; } + +h1, h2, h3, h4, h5, h6 { + font-family: sans-serif; + line-height: 1.3em; } + +article h1 { + font-size: 3em; + margin-top: 0; } +article h2, article h3, article h4 { + border-top: 1px solid #f29f32; + margin-top: 1em; } +article h2 { + font-size: 2em; + border-top-width: 3px; } +article h3 { + font-size: 1.6em; } +article h4 { + font-size: 1.2em; + text-transform: uppercase; + letter-spacing: 0.1em; } +article h5 { + font-size: 1.2em; + text-transform: uppercase; + letter-spacing: 0.1em; } +article h6 { + font-size: 1em; } + +ul, ol { + padding-left: 1.3em; } + +pre, code { + font-family: monospace; } + +section { + border-top: 1px solid #f29f32; + border-bottom: 1px solid #f29f32; + margin: 0.65em 0; + padding: 0.65em 1.5em; } + +small { + font-size: 0.75em; + opacity: 0.75; + font-weight: bold; } + +html { + background-color: white; + color: #333333; } + +body { + margin-top: 2.2em; } + +article { + background-color: white; + float: left; + margin-bottom: 2em; } + +footer { + background-color: #e3870e; + clear: both; + color: white; + text-align: center; + padding: 1em; } + footer li { + display: inline; + list-style: none; } + footer a, footer a:hover { + color: white; + border: none; } + +.header.container { + background-color: #e3870e; } + +header { + background-color: #ea9220; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f29f32', endColorstr='#e3870e'); + -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f29f32', endColorstr='#e3870e'); + background-image: -webkit-gradient(linear, top left, bottom left, from(#f29f32), to(#e3870e)); + background-image: -webkit-linear-gradient(top, #f29f32, #e3870e); + background-image: -moz-linear-gradient(top, #f29f32, #e3870e); + background-image: -ms-linear-gradient(top, #f29f32, #e3870e); + background-image: -o-linear-gradient(top, #f29f32, #e3870e); + background-image: linear-gradient(top, #f29f32, #e3870e); } + header h1, header h2 { + padding: 16px; + text-shadow: 0 -1px 0 #9b5c0a, 0 1px 0 #f4aa4a; } + header h1 { + font-family: sans-serif; + font-size: 3em; + color: white; } + header h2 { + padding-top: 0; + margin-top: -16px; + font-size: 1.5em; + color: #f8e1c2; } + header a, header a:hover { + color: inherit; + border: none; } + +nav { + background-color: #4a72a7; + -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); + -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); + -ms-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); + -o-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); + box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); + position: fixed; + top: 0; + height: 2.2em; + width: 100%; } + nav ol { + padding: 0; + height: 2.2em; + list-style: none; } + nav li { + float: left; + margin-right: 1px; } + nav a { + display: block; + height: 2.2em; + padding: 0 0.6em; + font-family: sans-serif; + color: white; + background-color: #3b5a83; + line-height: 2.2em; + border-top: 0px solid #f29f32; + text-shadow: 0 -1px 0 #334e72, 0 1px 0 #7a9ac4; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; + border-bottom: none; } + nav a:hover { + border-top: 0.3em solid #f29f32; + border-bottom: none; + color: white; + height: 1.9em; } + +@media all and (max-width: 40em) { + body { + margin-top: 4.4em; } + + article { + width: 100%; } + + aside { + margin-left: 0; + width: 100%; } + + nav { + height: 4.4em; } } +@media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (orientation: portrait) { + html { + font-size: 19.2px; } } +@media screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait) { + html { + font-size: 12.8px; } } diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..bb1fd8e --- /dev/null +++ b/html/index.html @@ -0,0 +1,158 @@ + + + + + + + + + + + + + + + + + + + + + + Title + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Page Title

+

Page description or some other relevant text.

+
+
+
+
+

Header One

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Header Two

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Header Three

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Header Four

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
Header Five
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
Header Six
+ + + + + + + + +
Header 1 + Header 2 + Header 3 + Header 4 + Header 5 + Header 6 +
row 1, cell 1 + row 1, cell 2 + row 1, cell 3 + row 1, cell 4 + row 1, cell 5 + row 1, cell 6 +
row 2, cell 1 + row 2, cell 2 + row 2, cell 3 + row 2, cell 4 + row 2, cell 5 + row 2, cell 6 +
row 3, cell 1 + row 3, cell 2 + row 3, cell 3 + row 3, cell 4 + row 3, cell 5 + row 3, cell 6 +
row 4, cell 1 + row 4, cell 2 + row 4, cell 3 + row 4, cell 4 + row 4, cell 5 + row 4, cell 6 +
row 5, cell 1 + row 5, cell 2 + row 5, cell 3 + row 5, cell 4 + row 5, cell 5 + row 5, cell 6 +
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ +
+ + + + + diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..a5749aa --- /dev/null +++ b/readme.md @@ -0,0 +1,20 @@ +# Universal Grid • ALPHA +### [Preview the latest build](http://lab.scottkellum.com/universal-grid/) + +### This project is in development and no where near finished, however please feel free to contribute. + +## Project Ideals: + +* Make tools simple to use. +* Modularize everything. +* Remain aware of events up the cascade. +* Create a robust set of default styles. +* Never rely on default styles. +* Think big, code small. +* Embrace choice. + +## Project Goals: + +* Create robust grid functions. +* Combine fixed and responsive design languages. +* Build useful default styles. \ No newline at end of file diff --git a/sass/lib/_grid.sass b/sass/lib/_grid.sass new file mode 100644 index 0000000..b806f1e --- /dev/null +++ b/sass/lib/_grid.sass @@ -0,0 +1,79 @@ +// MEASUREMENTS + +$base-size: 16px !default +$line-height: 1.3em !default + +$grid-width: 90% !default +$columns: 12 !default +$wrapper-align: center !default +$gutter: 2% !default +$padding: 0 1em !default + +$max-width: dp(1400) + +// DEFATULTS TO OOSASS WITH @EXTEND +$oocss-grid: false !default + + +// convert values to percentages +$calculated-gutter: $gutter +@if unit($gutter) != "%" + $calculated-gutter: percentage($gutter / $grid-width) + +$calculated-column: (100% - ($calculated-gutter * ($columns - 1))) / $columns + +html + font-size: $base-size + line-height: $line-height + +@function grid($units: 1) + @return ($calculated-column * $units) + ($calculated-gutter * ($units - 1)) + +.wrapper + width: $grid-width + max-width: $max-width + position: relative + @if $wrapper-align == "center" + margin-left: auto + margin-right: auto + @if $wrapper-align == "right" + margin-left: auto + margin-right: 0 + + +// BUILD GRID OBJECTS +$object-type: "%" !default +@if $oocss-grid + $grid-placeholder: "." !default +$width-prefix: "w-" !default +$column-prefix: "c-" !default + + +// For the next column in a series. It floats and spaces to sit on the grid next to the one before it. +#{$object-type}next-col + margin-left: $calculated-gutter + float: left + +// Grid widths +@for $i from 1 through $columns + // Writes classes or placeholders depending on the $object-type variable. + // You may also like a more semantic prefix, like "width-". You can chage it by changing the $width-prefix variable. + #{$object-type}#{$width-prefix+$i} + width: grid($i) + +// Column locations in absolute positions. Use next-col in a series. +@for $i from 0 through $columns + // Writes classes or placeholders depending on the $object-type variable. + // You may also like a more semantic prefix, like "column-". You can chage it by changing the $column-prefix variable. + #{$object-type}#{$column-prefix+$i} + position: absolute + left: grid($i) + $calculated-gutter + +// Add padding to items on the grid. +#{$object-type}padded + padding: $padding + // box sizing to make sure padding doesn't effect grid. + +prefix(box-sizing, border-box, -webkit- -moz-) + .html.no-box-sizing & + // Remove padding if box-sizing isn't supported via modernizer + padding: 0 diff --git a/sass/lib/_normalize.scss b/sass/lib/_normalize.scss new file mode 100644 index 0000000..53c8cfa --- /dev/null +++ b/sass/lib/_normalize.scss @@ -0,0 +1,528 @@ +/*! normalize.css 2012-02-07T12:37 UTC - http://github.com/necolas/normalize.css */ + +/* ============================================================================= + HTML5 display definitions + ========================================================================== */ + +// Margin reset + +@mixin margin-reset($add-selectors: false) { + @if $add-selectors == false { + html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + vertical-align: baseline; + background: transparent; + } + } + @else { + html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video, #{$add-selectors} { + margin: 0; + padding: 0; + border: 0; + outline: 0; + vertical-align: baseline; + background: transparent; + } + } + } + + +/* + * Corrects block display not defined in IE6/7/8/9 & FF3 + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects inline-block display not defined in IE6/7/8/9 & FF3 + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* + * Prevents modern browsers from displaying 'audio' without controls + */ + +audio:not([controls]) { + display: none; +} + +/* + * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 + * Known issue: no IE6 support + */ + +[hidden] { + display: none; +} + + +/* ============================================================================= + Base + ========================================================================== */ + +/* + * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units + * http://clagnut.com/blog/348/#c790 + * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ + +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Addresses font-family inconsistency between 'textarea' and other form elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/* + * Addresses margins handled incorrectly in IE6/7 + */ + +body { + margin: 0; +} + + +/* ============================================================================= + Links + ========================================================================== */ + +/* + * Addresses outline displayed oddly in Chrome + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers + * people.opera.com/patrickl/experiments/keyboard/test + */ + +a:hover, +a:active { + outline: 0; +} + + +/* ============================================================================= + Typography + ========================================================================== */ + +/* + * Addresses font sizes and margins set differently in IE6/7 + * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.75em; + margin: 2.33em 0; +} + +/* + * Addresses styling not present in IE7/8/9, S5, Chrome + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to 'bolder' in FF3+, S4/5, Chrome +*/ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/* + * Addresses styling not present in S5, Chrome + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE6/7/8/9 + */ + +mark { + background: #ff0; + color: #000; +} + +/* + * Addresses margins set differently in IE6/7 + */ + +p, +pre { + margin: 1em 0; +} + +/* + * Corrects font family set oddly in IE6, S4/5, Chrome + * en.wikipedia.org/wiki/User:Davidgothberg/Test59 + */ + +pre, +code, +kbd, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * 1. Addresses CSS quotes not supported in IE6/7 + * 2. Addresses quote property not supported in S4 + */ + +/* 1 */ + +q { + quotes: none; +} + +/* 2 */ + +q:before, +q:after { + content: ''; + content: none; +} + +small { + font-size: 75%; +} + +/* + * Prevents sub and sup affecting line-height in all browsers + * gist.github.com/413930 + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + + +/* ============================================================================= + Lists + ========================================================================== */ + +/* + * Addresses margins set differently in IE6/7 + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* + * Addresses paddings set differently in IE6/7 + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/* + * Corrects list images handled incorrectly in IE7 + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + + +/* ============================================================================= + Embedded content + ========================================================================== */ + +/* + * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 + * 2. Improves image quality when scaled in IE7 + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/* + * Corrects overflow displayed oddly in IE9 + */ + +svg:not(:root) { + overflow: hidden; +} + + +/* ============================================================================= + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE6/7/8/9, S5, O11 + */ + +figure { + margin: 0; +} + + +/* ============================================================================= + Forms + ========================================================================== */ + +/* + * Corrects margin displayed oddly in IE6/7 + */ + +form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE6/7/8/9 + * 2. Corrects text not wrapping in FF3 + * 3. Corrects alignment displayed oddly in IE6/7 + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome + * 3. Improves appearance and consistency in all browsers + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/* + * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet + */ + +button, +input { + line-height: normal; /* 1 */ +} + +/* + * 1. Improves usability and consistency of cursor style between image-type 'input' and others + * 2. Corrects inability to style clickable 'input' types in iOS + * 3. Removes inner spacing in IE7 without affecting normal text inputs + * Known issue: inner spacing remains in IE6 + */ + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; /* 1 */ + -webkit-appearance: button; /* 2 */ + *overflow: visible; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE8/9 + * 2. Removes excess padding in IE8/9 + * 3. Removes excess padding in IE7 + Known issue: excess padding remains in IE6 + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/* + * 1. Addresses appearance set to searchfield in S5, Chrome + * 2. Addresses box-sizing set to border-box in S5, 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; +} + +/* + * Removes inner padding and search cancel button in S5, Chrome on OS X + */ + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in FF3+ + * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE6/7/8/9 + * 2. Improves 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; +} \ No newline at end of file diff --git a/sass/lib/_reset.sass b/sass/lib/_reset.sass new file mode 100644 index 0000000..b078716 --- /dev/null +++ b/sass/lib/_reset.sass @@ -0,0 +1,187 @@ +$reset: true !default +@if $reset + // RESET MOSTLY LIFTED FROM THE HTML5RESET :: http://html5reset.org + + // HTML5 RESET....................http://html5reset.org + // Eric Meyer.....................http://ericmeyer.com + // HTML5 Doctor...................http://html5doctor.com + // and the HTML5 Boilerplate......http://html5boilerplate.com + + html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video + margin: 0 + padding: 0 + border: 0 + outline: 0 + vertical-align: baseline + background: transparent + cursor: default + + article, aside, figure, footer, header, hgroup, nav, section + display: block + + blockquote, q + quotes: none + + blockquote:before, blockquote:after, q:before, q:after + content: '' + content: none + + a + margin: 0 + padding: 0 + font-size: 1em + vertical-align: baseline + background: transparent + color: inherit + text-decoration: inherit + + del + text-decoration: line-through + + abbr[title], dfn[title] + border-bottom: 1px dotted #000 + cursor: help + + .zoomable, .zoomable * + cursor: -webkit-zoom-in + cursor: -moz-zoom-in + cursor: -ms-zoom-in + cursor: -o-zoom-in + cursor: zoom-in + + .lightbox, .lightbox * + cursor: -webkit-zoom-out + cursor: -moz-zoom-out + cursor: -ms-zoom-out + cursor: -o-zoom-out + cursor: zoom-out + + + // tables still need cellspacing="0" in the markup + + table + border-collapse: collapse + border-spacing: 0 + th + font-weight: bold + vertical-align: bottom + td + font-weight: normal + vertical-align: top + + hr + display: block + height: 1px + border: 0 + margin: 1em 0 + padding: 0 + + input, select + vertical-align: middle + + pre + white-space: pre /* CSS2 */ + white-space: pre-wrap /* CSS 2.1 */ + white-space: pre-line /* CSS 3 (and 2.1 as well, actually) */ + word-wrap: break-word /* IE */ + + + input[type="radio"] + vertical-align: text-bottom + input[type="checkbox"] + vertical-align: bottom + *vertical-align: baseline + .ie6 input + vertical-align: text-bottom + + select, input, textarea + font: .99em sans-serif + + table + font-size: inherit + font: 1em + + + // Accessible focus treatment + // people.opera.com/patrickl/experiments/keyboard/test + + a:hover, a:active + outline: none + + small + font-size: .75em + + strong, th + font-weight: bold + + td, td img + vertical-align: top + + + // Make sure sup and sub don't screw with your line-heights + // gist.github.com/413930 + + sub, sup + font-size: .75em + line-height: 0 + position: relative + sup + top: -0.5em + sub + bottom: -0.25em + + + // standardize any monospaced elements + + pre, code, kbd, samp + font-family: monospace, sans-serif + + // hand cursor on clickable elements, text on editable text only, default on everything else. + input + cursor: auto + textarea + cursor: text + a, a *, .clickable, label, input[type=button], input[type=submit], input[type=reset], button, #nextPage, #previousPage, #nextPage *, #previousPage * + cursor: pointer + + + // Webkit browsers add a 2px margin outside the chrome of form elements + + button, input, select, textarea + margin: 0 + + + // make buttons play nice in IE + + button + width: auto + overflow: visible + + + // scale images in IE7 more attractively + + .ie7 img + -ms-interpolation-mode: bicubic + + + // prevent BG image flicker upon hover + + .ie6 html + filter: expression(document.execCommand("BackgroundImageCache", false, true)) + + + // clearfix + @if $clearfix-loaded + .clearfix + +clearfix + + + ins + background-color: #fcd700 + color: #000 + text-decoration: none + mark + background-color: #fcd700 + color: #000 + font-style: italic + font-weight: bold \ No newline at end of file diff --git a/sass/lib/_styleguide.sass b/sass/lib/_styleguide.sass new file mode 100644 index 0000000..4a6461a --- /dev/null +++ b/sass/lib/_styleguide.sass @@ -0,0 +1,35 @@ +$primary: color-schemer(primary) !default +$secondary: color-schemer(secondary) !default +$tertiary: color-schemer(tertiary) !default +$quadrary: color-schemer(quadrary) !default + +$affirm: #4CDB18 !default +$notify: #FFD900 !default +$warn: #00C2ED !default +$error: #ED3300 !default + +$body-color: #fff !default +$article-color: #fff !default +$aside-color: $tertiary !default +$header-color: $primary !default +$nav-color: desaturate($secondary, 50) !default +$footer-color: $primary !default +$text-color: #333 !default +$link-color: $primary + +// FONTS +$text: serif !default +$hed: sans-serif !default +$subhed: $hed !default + +$text-indent: 1.5em !default + +@import styleguide/breadcrumbs +@import styleguide/buttons +@import styleguide/forms +@import styleguide/links +@import styleguide/pagination +@import styleguide/structured-list +@import styleguide/table +@import styleguide/typography +//@import styleguide/reset \ No newline at end of file diff --git a/sass/lib/_tools.sass b/sass/lib/_tools.sass new file mode 100644 index 0000000..d57e71b --- /dev/null +++ b/sass/lib/_tools.sass @@ -0,0 +1,11 @@ +@import tools/backgrounds +@import tools/clearfix +@import tools/color-schemer +@import tools/css3 +@import tools/debug +@import tools/font-face +@import tools/hide-text +@import tools/modular-scale +@import tools/relative-pixels +@import tools/sprites +@import tools/typography \ No newline at end of file diff --git a/sass/lib/plugin/_normalize-pixel.sass b/sass/lib/plugin/_normalize-pixel.sass new file mode 100644 index 0000000..3565c4b --- /dev/null +++ b/sass/lib/plugin/_normalize-pixel.sass @@ -0,0 +1,19 @@ +// Normalize pixels to the W3C refrence pixel on problem devices. +// THIS SCALES EMS, PIXELS WILL NOT BE NORMALIZED + +$normalize-pixel: true !default + +// 7" tablets +$tab7-pixel-ratio: (6/5) !default + +@if $normalize-pixel + // 7" 1024x600 tablet with no pixel scaling. + @media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (orientation: portrait) + html + font-size: $base-size * $tab7-pixel-ratio + // 7" 1024x600 tablet with pixel ratio of 1.5 (Original Galaxy Tab) + @media screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait) + html + font-size: $base-size * (2/3) * $tab7-pixel-ratio + +$normalize-pixel-loaded: true \ No newline at end of file diff --git a/sass/lib/plugin/_transition-all.sass b/sass/lib/plugin/_transition-all.sass new file mode 100644 index 0000000..19b8949 --- /dev/null +++ b/sass/lib/plugin/_transition-all.sass @@ -0,0 +1,2 @@ +* + +transition(all .5s ease-in-out) \ No newline at end of file diff --git a/sass/lib/styleguide/_breadcrumbs.sass b/sass/lib/styleguide/_breadcrumbs.sass new file mode 100644 index 0000000..e69de29 diff --git a/sass/lib/styleguide/_buttons.sass b/sass/lib/styleguide/_buttons.sass new file mode 100644 index 0000000..e69de29 diff --git a/sass/lib/styleguide/_forms.sass b/sass/lib/styleguide/_forms.sass new file mode 100644 index 0000000..e69de29 diff --git a/sass/lib/styleguide/_links.sass b/sass/lib/styleguide/_links.sass new file mode 100644 index 0000000..53c5d2f --- /dev/null +++ b/sass/lib/styleguide/_links.sass @@ -0,0 +1,19 @@ +$color: #00f !default + +=styleguide-links($color: $color, $transition: darken) + @if $transition == darken + a + text-decoration: none + color: darken($color, 20%) + border-bottom: 1px dotted darken($color, 20%) + &:hover + color: $primary + border-bottom: 1px solid $color + @if $transition == lighten + a + text-decoration: none + color: lighten($color, 20%) + border-bottom: 1px dotted lighten($color, 20%) + &:hover + color: $primary + border-bottom: 1px solid $color diff --git a/sass/lib/styleguide/_pagination.sass b/sass/lib/styleguide/_pagination.sass new file mode 100644 index 0000000..e69de29 diff --git a/sass/lib/styleguide/_reset.sass b/sass/lib/styleguide/_reset.sass new file mode 100644 index 0000000..175a9dd --- /dev/null +++ b/sass/lib/styleguide/_reset.sass @@ -0,0 +1,17 @@ +=margin-reset($add-selectors: false) + @if $add-selectors == false + html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video + margin: 0 + padding: 0 + border: 0 + outline: 0 + vertical-align: baseline + background: transparent + @else + html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video, #{$add-selectors} + margin: 0 + padding: 0 + border: 0 + outline: 0 + vertical-align: baseline + background: transparent diff --git a/sass/lib/styleguide/_structured-list.sass b/sass/lib/styleguide/_structured-list.sass new file mode 100644 index 0000000..8840c27 --- /dev/null +++ b/sass/lib/styleguide/_structured-list.sass @@ -0,0 +1,25 @@ +%structured-list + ul + margin: 0 + padding: 0 + li + list-style: none + margin-bottom: 1px + a, a:hover, li + display: block + border: none + background-color: lighten($nav-color, 10%) + a + padding: .15em .75em + color: #fff + &:hover + color: #fff + background-color: $nav-color + +=structured-list($color: $primary) + @extend %structured-list + @if $color != $primary + li + border-top: 1px solid $color + &:last-child + border-bottom: 1px solid $color diff --git a/sass/lib/styleguide/_table.sass b/sass/lib/styleguide/_table.sass new file mode 100644 index 0000000..ec05283 --- /dev/null +++ b/sass/lib/styleguide/_table.sass @@ -0,0 +1,15 @@ +=styleguide-table($color: $secondary, $highlight: false) + table + width: 100% + margin-bottom: $line-height + td + border: 1px solid $color + padding: .2em .5em + tr:nth-child(even) + background-color: lighten($color, 50%) + @if $highlight == false + tr:hover + background-color: lighten($color, 40%) + @else + tr:hover + background-color: lighten($highlight, 40%) diff --git a/sass/lib/styleguide/_typography.sass b/sass/lib/styleguide/_typography.sass new file mode 100644 index 0000000..ff75656 --- /dev/null +++ b/sass/lib/styleguide/_typography.sass @@ -0,0 +1,58 @@ +=typography + p + text-indent: $text-indent + font-family: $text + + .no-indent + text-indent: 0 + + h1, h2, h3, h4, h5, h6 + font-family: $subhed + line-height: $line-height + + article + h1 + font-size: 3em + margin-top: 0 + h2, h3, h4 + border-top: 1px solid $tertiary + margin-top: 1em + h2 + font-size: 2em + border-top-width: 3px + h3 + font-size: 1.6em + h4 + font-size: 1.2em + +caps + h5 + font-size: 1.2em + +caps + h6 + font-size: 1em + + ul, ol + padding-left: $line-height + + ul + + li + + pre, code + font-family: monospace + + + quote + + blockquote, q + + section + border-top: 1px solid $tertiary + border-bottom: 1px solid $tertiary + margin: $line-height/2 0 + padding: $line-height/2 $text-indent + + small + font-size: .75em + opacity: .75 + font-weight: bold diff --git a/sass/lib/tools/_backgrounds.sass b/sass/lib/tools/_backgrounds.sass new file mode 100644 index 0000000..2a2c9bb --- /dev/null +++ b/sass/lib/tools/_backgrounds.sass @@ -0,0 +1,5 @@ +// CENTER AND FILL BACKGROUND +=background-fill + background-repeat: no-repeat + background-position: center center fixed + +prefix(background-size, cover) \ No newline at end of file diff --git a/sass/lib/tools/_clearfix.sass b/sass/lib/tools/_clearfix.sass new file mode 100644 index 0000000..6811bc4 --- /dev/null +++ b/sass/lib/tools/_clearfix.sass @@ -0,0 +1,17 @@ +// CLEARFIX +=clearfix + &:before, &:after + content: "\0020" + display: block + height: 0 + overflow: hidden + &:after + content: "\0020" + display: block + height: 0 + overflow: hidden + clear: both + & + zoom: 1 + +$clearfix-loaded: true \ No newline at end of file diff --git a/sass/lib/tools/_color-schemer.sass b/sass/lib/tools/_color-schemer.sass new file mode 100644 index 0000000..485f7a9 --- /dev/null +++ b/sass/lib/tools/_color-schemer.sass @@ -0,0 +1,174 @@ +// Define color schemes quickly + +// Color schemes to choose from +// mono +// complement +// triad +// tetrad +// analogic +// accented-analogic + +$color-location: primary !default +$base-color: #f00 !default +$color-scheme: mono !default +$hue-offset: 20 !default +$brightness-offset: 10% !default +$color-theory: rgb !default +$equalize: false !default + +// Normalizer credit to Mason Wendell: https://github.com/canarymason/The-Coding-Designers-Survival-Kit/blob/master/sass/partials/lib/variables/_color_schemes.sass +@function equalize($color) + @return hsl(hue($color), 100%, 50%) + +// Complement based on a traditional color wheel (green is oposite red) +@function traditional-complement($color) + $hue: round(hue($color)/ 10) // find and round hue + // Manually adjusted values until these can be mathmatically explained. + @if $hue == 0 + @return adjust-hue(invert($color), -60) // Start with red + @if $hue == 1 + @return adjust-hue(invert($color), -50) + @if $hue == 2 + @return adjust-hue(invert($color), -40) + @if $hue == 3 + @return adjust-hue(invert($color), -25) + @if $hue == 4 + @return adjust-hue(invert($color), 0) + @if $hue == 5 + @return adjust-hue(invert($color), 25) + @if $hue == 6 + @return adjust-hue(invert($color), 38) + @if $hue == 7 + @return adjust-hue(invert($color), 44) + @if $hue == 8 + @return adjust-hue(invert($color), 52) + @if $hue == 9 + @return adjust-hue(invert($color), 58) + @if $hue == 10 + @return adjust-hue(invert($color), 59) + @if $hue == 11 + @return adjust-hue(invert($color), 60) + @if $hue == 12 + @return adjust-hue(invert($color), 60) // Green is halfway through the traditional scale. + @if $hue == 13 + @return adjust-hue(invert($color), 55) + @if $hue == 14 + @return adjust-hue(invert($color), 50) + @if $hue == 15 + @return adjust-hue(invert($color), 45) + @if $hue == 16 + @return adjust-hue(invert($color), 40) + @if $hue == 17 + @return adjust-hue(invert($color), 35) + @if $hue == 18 + @return adjust-hue(invert($color), 30) + @if $hue == 19 + @return adjust-hue(invert($color), 25) + @if $hue == 20 + @return adjust-hue(invert($color), 20) + @if $hue == 21 + @return adjust-hue(invert($color), 15) + @if $hue == 22 + @return adjust-hue(invert($color), -5) + @if $hue == 23 + @return adjust-hue(invert($color), -8) + @if $hue == 24 + @return adjust-hue(invert($color), -17) + @if $hue == 25 + @return adjust-hue(invert($color), -25) + @if $hue == 26 + @return adjust-hue(invert($color), -30) + @if $hue == 27 + @return adjust-hue(invert($color), -35) + @if $hue == 28 + @return adjust-hue(invert($color), -40) + @if $hue == 29 + @return adjust-hue(invert($color), -43) + @if $hue == 30 + @return adjust-hue(invert($color), -46) + @if $hue == 31 + @return adjust-hue(invert($color), -49) + @if $hue == 32 + @return adjust-hue(invert($color), -52) + @if $hue == 33 + @return adjust-hue(invert($color), -54) + @if $hue == 34 + @return adjust-hue(invert($color), -57) + @if $hue == 35 + @return adjust-hue(invert($color), -60) + +// Add percentage of white to a color +@function tint($color, $percent) + @return mix(white, $color, $percent) + +// Add percentage of black to a color +@function shade($color, $percent) + @return mix(black, $color, $percent) + +@function color-schemer($color-location, $base-color, $color-scheme, $hue-offset) + // Primary, just return the base-color. + @if $equalize + $base-color: equalize($base-color) + @if $color-location == primary + @return $base-color + // Secondary colors + @if $color-location == secondary + @if $color-scheme == mono + @return lighten($base-color, $brightness-offset) + @if $color-scheme == complement + @if $color-theory == traditional + @return traditional-complement($base-color) + @return complement($base-color) + @if $color-scheme == triad + @if $color-theory == traditional + @return adjust-hue(traditional-complement($base-color), $hue-offset) + @return adjust-hue(complement($base-color), $hue-offset) + @if $color-scheme == tetrad + @return adjust-hue($base-color, $hue-offset) + @if $color-scheme == analogic + @return adjust-hue($base-color, $hue-offset) + @if $color-scheme == accented-analogic + @return adjust-hue($base-color, $hue-offset) + @warn "Oops! You didn’t properly define $color-scheme (complement, triad...)" + // Tertiary colors + @if $color-location == tertiary + @if $color-scheme == mono + @return lighten($base-color, $brightness-offset * 2) + @if $color-scheme == complement + @return lighten($base-color, $brightness-offset) + @if $color-scheme == triad + @if $color-theory == traditional + @return adjust-hue(traditional-complement($base-color), -$hue-offset) + @return adjust-hue(complement($base-color), -$hue-offset) + @if $color-scheme == tetrad + @if $color-theory == traditional + @return traditional-complement($base-color) + @return complement($base-color) + @if $color-scheme == analogic + @return adjust-hue($base-color, -$hue-offset) + @if $color-scheme == accented-analogic + @return adjust-hue($base-color, -$hue-offset) + @warn "Oops! You didn’t properly define $color-scheme (complement, triad...)" + // Quadrary colors + @if $color-location == quadrary + @if $color-scheme == mono + @return darken($base-color, $brightness-offset) + @if $color-scheme == complement + @return darken($base-color, $brightness-offset) + @if $color-scheme == triad + @return darken($base-color, $brightness-offset) + @if $color-scheme == tetrad + @if $color-theory == traditional + @return adjust-hue(traditional-complement($base-color), $hue-offset) + @return adjust-hue(complement($base-color), $hue-offset) + @if $color-scheme == analogic + @return darken($base-color, $brightness-offset) + @if $color-scheme == accented-analogic + @if $color-theory == traditional + @return traditional-complement($base-color) + @return complement($base-color) + @warn "Oops! You didn’t properly define $color-scheme (complement, triad...)" + @warn "Oops! You didn’t properly define $color-location (primary, secondary...)" + +// Tell other files that this is loaded. +$color-schemer-loaded: true \ No newline at end of file diff --git a/sass/lib/tools/_css3.sass b/sass/lib/tools/_css3.sass new file mode 100644 index 0000000..e591e01 --- /dev/null +++ b/sass/lib/tools/_css3.sass @@ -0,0 +1,553 @@ +// VENDOR PREFIXR +$prefixes: -webkit- -moz- -ms- -o- + +=prefix($property, $value, $prefixes) + @each $prefix in $prefixes + #{$prefix}#{$property}: $value + #{$property}: $value + + +// STANDARDIZE VENDOR-SPECIFIC PROPERTIES +=animation($value) + +prefix(animation, $value) + +=animation-delay($value) + +prefix(animation-delay, $value) + +=animation-direction($value) + +prefix(animation-direction, $value) + +=animation-duration($value) + +prefix(animation-duration, $value) + +=animation-fill-mode($value) + +prefix(animation-fill-mode, $value) + +=animation-iteration-count($value) + +prefix(animation-iteration-count, $value) + +=animation-name($value) + +prefix(animation-name, $value) + +=animation-play-state($value) + +prefix(animation-play-state, $value) + +=animation-timing-function($value) + +prefix(animation-timing-function, $value) + +=appearance($value) + +prefix(appearance, $value) + +=backface-visibility($value) + +prefix(backface-visibility, $value) + +=background-clip($value) + +prefix(background-clip, $value) + +=background-composite($value) + +prefix(background-composite, $value) + +=background-origin($value) + +prefix(background-origin, $value) + +=background-size($value) + +prefix(background-size, $value) + +=border-after($value) + +prefix(border-after, $value) + +=border-after-color($value) + +prefix(border-after-color, $value) + +=border-after-style($value) + +prefix(border-after-style, $value) + +=border-after-width($value) + +prefix(border-after-width, $value) + +=border-before($value) + +prefix(border-before, $value) + +=border-before-color($value) + +prefix(border-before-color, $value) + +=border-before-style($value) + +prefix(border-before-style, $value) + +=border-before-width($value) + +prefix(border-before-width, $value) + +=border-bottom-left-radius($value) + +prefix(border-bottom-left-radius, $value) + +=border-bottom-right-radius($value) + +prefix(border-bottom-right-radius, $value) + +=border-end($value) + +prefix(border-end, $value) + +=border-end-color($value) + +prefix(border-end-color, $value) + +=border-end-style($value) + +prefix(border-end-style, $value) + +=border-end-width($value) + +prefix(border-end-width, $value) + +=border-fit($value) + +prefix(border-fit, $value) + +=border-horizontal-spacing($value) + +prefix(border-horizontal-spacing, $value) + +=border-image($value) + +prefix(border-image, $value) + +=border-radius($value) + +prefix(border-radius, $value) + +=border-start($value) + +prefix(border-start, $value) + +=border-start-color($value) + +prefix(border-start-color, $value) + +=border-start-style($value) + +prefix(border-start-style, $value) + +=border-start-width($value) + +prefix(border-start-width, $value) + +=border-top-left-radius($value) + +prefix(border-top-left-radius, $value) + +=border-top-right-radius($value) + +prefix(border-top-right-radius, $value) + +=border-vertical-spacing($value) + +prefix(border-vertical-spacing, $value) + +=box-align($value) + +prefix(box-align, $value) + +=box-direction($value) + +prefix(box-direction, $value) + +=box-flex($value) + +prefix(box-flex, $value) + +=box-flex-group($value) + +prefix(box-flex-group, $value) + +=box-lines($value) + +prefix(box-lines, $value) + +=box-ordinal-group($value) + +prefix(box-ordinal-group, $value) + +=box-orient($value) + +prefix(box-orient, $value) + +=box-pack($value) + +prefix(box-pack, $value) + +=box-reflect($value) + +prefix(box-reflect, $value) + +=box-shadow($value) + +prefix(box-shadow, $value) + +=box-sizing($value) + +prefix(box-sizing, $value) + +=color-correction($value) + +prefix(color-correction, $value) + +=column-break-after($value) + +prefix(column-break-after, $value) + +=column-break-before($value) + +prefix(column-break-before, $value) + +=column-break-inside($value) + +prefix(column-break-inside, $value) + +=column-count($value) + +prefix(column-count, $value) + +=column-gap($value) + +prefix(column-gap, $value) + +=column-rule($value) + +prefix(column-rule, $value) + +=column-rule-color($value) + +prefix(column-rule-color, $value) + +=column-rule-style($value) + +prefix(column-rule-style, $value) + +=column-rule-width($value) + +prefix(column-rule-width, $value) + +=column-span($value) + +prefix(column-span, $value) + +=column-width($value) + +prefix(column-width, $value) + +=columns($value) + +prefix(columns, $value) + +=content-order($value) + +prefix(content-order, $value) + +=dashboard-region($value) + +prefix(dashboard-region, $value) + +=flex-order($value) + +prefix(flex-order, $value) + +=flex-pack($value) + +prefix(flex-pack, $value) + +=flow($value) + +prefix(flow, $value) + +=font-feature-settings($value) + +prefix(font-feature-settings, $value) + +=font-size-delta($value) + +prefix(font-size-delta, $value) + +=font-smoothing($value) + +prefix(font-smoothing, $value) + +=highlight($value) + +prefix(highlight, $value) + +=hyphens($value) + +prefix(hyphens, $value) + +=hyphenate-character($value) + +prefix(hyphenate-character, $value) + +=hyphenate-limit-after($value) + +prefix(hyphenate-limit-after, $value) + +=hyphenate-limit-before($value) + +prefix(hyphenate-limit-before, $value) + +=line-box-contain($value) + +prefix(line-box-contain, $value) + +=line-break($value) + +prefix(line-break, $value) + +=line-clamp($value) + +prefix(line-clamp, $value) + +=locale($value) + +prefix(locale, $value) + +=logical-height($value) + +prefix(logical-height, $value) + +=logical-width($value) + +prefix(logical-width, $value) + +=margin-after($value) + +prefix(margin-after, $value) + +=margin-after-collapse($value) + +prefix(margin-after-collapse, $value) + +=margin-before($value) + +prefix(margin-before, $value) + +=margin-before-collapse($value) + +prefix(margin-before-collapse, $value) + +=margin-bottom-collapse($value) + +prefix(margin-bottom-collapse, $value) + +=margin-collapse($value) + +prefix(margin-collapse, $value) + +=margin-end($value) + +prefix(margin-end, $value) + +=margin-start($value) + +prefix(margin-start, $value) + +=margin-top-collapse($value) + +prefix(margin-top-collapse, $value) + +=marquee($value) + +prefix(marquee, $value) + +=marquee-direction($value) + +prefix(marquee-direction, $value) + +=marquee-increment($value) + +prefix(marquee-increment, $value) + +=marquee-repetition($value) + +prefix(marquee-repetition, $value) + +=marquee-speed($value) + +prefix(marquee-speed, $value) + +=marquee-style($value) + +prefix(marquee-style, $value) + +=mask($value) + +prefix(mask, $value) + +=mask-attachment($value) + +prefix(mask-attachment, $value) + +=mask-box-image($value) + +prefix(mask-box-image, $value) + +=mask-clip($value) + +prefix(mask-clip, $value) + +=mask-composite($value) + +prefix(mask-composite, $value) + +=mask-image($value) + +prefix(mask-image, $value) + +=mask-origin($value) + +prefix(mask-origin, $value) + +=mask-position($value) + +prefix(mask-position, $value) + +=mask-position-x($value) + +prefix(mask-position-x, $value) + +=mask-position-y($value) + +prefix(mask-position-y, $value) + +=mask-repeat($value) + +prefix(mask-repeat, $value) + +=mask-repeat-x($value) + +prefix(mask-repeat-x, $value) + +=mask-repeat-y($value) + +prefix(mask-repeat-y, $value) + +=mask-size($value) + +prefix(mask-size, $value) + +=match-nearest-mail-blockquote-color($value) + +prefix(match-nearest-mail-blockquote-color, $value) + +=max-logical-height($value) + +prefix(max-logical-height, $value) + +=max-logical-width($value) + +prefix(max-logical-width, $value) + +=min-logical-height($value) + +prefix(min-logical-height, $value) + +=min-logical-width($value) + +prefix(min-logical-width, $value) + +=nbsp-mode($value) + +prefix(nbsp-mode, $value) + +=opacity($value) + +prefix(opacity, $value) + +=padding-after($value) + +prefix(padding-after, $value) + +=padding-before($value) + +prefix(padding-before, $value) + +=padding-end($value) + +prefix(padding-end, $value) + +=padding-start($value) + +prefix(padding-start, $value) + +=perspective($value) + +prefix(perspective, $value) + +=perspective-origin($value) + +prefix(perspective-origin, $value) + +=perspective-origin-x($value) + +prefix(perspective-origin-x, $value) + +=perspective-origin-y($value) + +prefix(perspective-origin-y, $value) + +=region-break-after($value) + +prefix(region-break-after, $value) + +=region-break-before($value) + +prefix(region-break-before, $value) + +=region-break-inside($value) + +prefix(region-break-inside, $value) + +=region-overflow($value) + +prefix(region-overflow, $value) + +=rtl-ordering($value) + +prefix(rtl-ordering, $value) + +=svg-shadow($value) + +prefix(svg-shadow, $value) + +=tap-highlight-color($value) + +prefix(tap-highlight-color, $value) + +=text-decorations-in-effect($value) + +prefix(text-decorations-in-effect, $value) + +=text-emphasis-position($value) + +prefix(text-emphasis-position, $value) + +=text-fill-color($value) + +prefix(text-fill-color, $value) + +=text-security($value) + +prefix(text-security, $value) + +=text-size-adjust($value) + +prefix(text-size-adjust, $value) + +=text-stroke($value) + +prefix(text-stroke, $value) + +=text-stroke-color($value) + +prefix(text-stroke-color, $value) + +=text-stroke-width($value) + +prefix(text-stroke-width, $value) + +=touch-callout($value) + +prefix(touch-callout, $value) + +=transform($value) + +prefix(transform, $value) + +=transform-origin($value) + +prefix(transform-origin, $value) + +=transform-origin-x($value) + +prefix(transform-origin-x, $value) + +=transform-origin-y($value) + +prefix(transform-origin-y, $value) + +=transform-origin-z($value) + +prefix(transform-origin-z, $value) + +=transform-style($value) + +prefix(transform-style, $value) + +=transition($value: all 1s) + +prefix(transition, $value) + +=transition-delay($value) + +prefix(transition-delay, $value) + +=transition-duration($value) + +prefix(transition-duration, $value) + +=transition-property($value) + +prefix(transition-property, $value) + +=transition-timing-function($value) + +prefix(transition-timing-function, $value) + +=user-drag($value) + +prefix(user-drag, $value) + +=user-modify($value) + +prefix(user-modify, $value) + +=user-select($value) + +prefix(user-select, $value) + +=wrap-shape($value) + +prefix(wrap-shape, $value) + + +// OTHER CSS3 TOOLS +=corner-radius($top, $left, $borderradius) + -moz-border-radius-#{$top}#{$left}: $borderradius + -webkit-border-#{$top}-#{$left}-radius: $borderradius + -o-border-#{$top}-#{$left}-radius: $borderradius + border-#{$top}-#{$left}-radius: $borderradius + +=gradient($startcolor, $endcolor, $startpos: top) + background-color: $startcolor / 2 + $endcolor / 2 + @if $startpos == "top" + filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')") + -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')") + background-image: -webkit-gradient(linear, top left, bottom left, from($startcolor), to($endcolor)) + @if $startpos == "left" + filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')") + -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')") + background-image: -webkit-gradient(linear, top left, top right, from($startcolor), to($endcolor)) + @if $startpos == "bottom" + background-image: -webkit-gradient(linear, bottom left, top left, from($startcolor), to($endcolor)) + @if $startpos == "right" + background-image: -webkit-gradient(linear, top right, top left, from($startcolor), to($endcolor)) + @if $startpos == "top left" + background-image: -webkit-gradient(linear, $startpos, bottom right, from($startcolor), to($endcolor)) + @if $startpos == "top right" + background-image: -webkit-gradient(linear, $startpos, bottom left, from($startcolor), to($endcolor)) + @if $startpos == "bottom left" + background-image: -webkit-gradient(linear, $startpos, top right, from($startcolor), to($endcolor)) + @if $startpos == "bottom right" + background-image: -webkit-gradient(linear, $startpos, top left, from($startcolor), to($endcolor)) + background-image: -webkit-linear-gradient($startpos, $startcolor, $endcolor) + background-image: -moz-linear-gradient($startpos, $startcolor, $endcolor) + background-image: -ms-linear-gradient($startpos, $startcolor, $endcolor) + background-image: -o-linear-gradient($startpos, $startcolor, $endcolor) + background-image: linear-gradient($startpos, $startcolor, $endcolor) + +=hgradient($left, $right) + @warn "@mixin hgradient will be depruciated in 0.9.3.beta4 and later." + background-color: $left / 2 + $right / 2 + filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='")#{$left}unquote("', endColorstr='")#{$right}unquote("')") + -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#{$left}', endColorstr='#{$right}')") + background-image: -webkit-gradient(linear, left top, right top, from($left), to($right)) + background-image: -webkit-linear-gradient(left, $left, $right) + background-image: -moz-linear-gradient(left, $left, $right) + background-image: -ms-linear-gradient(left, $left, $right) + background-image: -o-linear-gradient(left, $left, $right) + background-image: linear-gradient(left, $left, $right) + +=gloss($color) + background-color: $color + filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")#{lighten($color, 5%)}unquote("', endColorstr='")#{darken($color, 5%)}unquote("')") + -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{lighten($color, 5%)}', endColorstr='#{darken($color, 5%)}')") + background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, lighten($color, 15%)), color-stop(0.5, $color), color-stop(0.49, darken($color, 5%))) + background-image: -webkit-linear-gradient(top, lighten($color, 15%) 0%, $color 50%, darken($color, 5%) 51%, darken($color, 5%) 100%) + background-image: -moz-linear-gradient(top, lighten($color, 15%) 0%, $color 50%, darken($color, 5%) 51%, darken($color, 5%) 100%) + background-image: linear-gradient(top, lighten($color, 15%) 0%, $color 50%, darken($color, 5%) 51%, darken($color, 5%) 100%) + +// ROTATION +=rotate($deg, $origin: 0% 100%) + display: block + +transform-origin($origin) + .no-csstransforms & + @if $deg == 90 + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1) + @if $deg == 180 + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) + @if $deg == 270 + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3) + +prefix(transform, rotate($deg+deg)) \ No newline at end of file diff --git a/sass/lib/tools/_debug.sass b/sass/lib/tools/_debug.sass new file mode 100644 index 0000000..a43b795 --- /dev/null +++ b/sass/lib/tools/_debug.sass @@ -0,0 +1,33 @@ +// DEBUG TOOLS + +=r + background: #ff9999 !important +=g + background: #99ff99 !important +=b + background: #9999ff !important +=c + background: #99ffff !important +=m + background: #ff99ff !important +=y + background: #ffff99 !important + + +// WRITE DEBUG CLASSES + +$debug: false !default + +@if $debug + .r + +r + .g + +g + .b + +b + .c + +c + .m + +m + .y + +y diff --git a/sass/lib/tools/_font-face.sass b/sass/lib/tools/_font-face.sass new file mode 100644 index 0000000..1077013 --- /dev/null +++ b/sass/lib/tools/_font-face.sass @@ -0,0 +1,7 @@ +// @FONT-FACE (FONTSPRING SYNTAX) +=font($name, $url, $weight: normal, $style: normal) + @font-face + font-family: '$name' + font-weight: $weight + font-style: $style + src: url('#{$url}.eot?') format('eot'), url('#{$url}.woff') format('woff'), url('#{$url}.ttf') format('truetype') \ No newline at end of file diff --git a/sass/lib/tools/_hide-text.sass b/sass/lib/tools/_hide-text.sass new file mode 100644 index 0000000..9c170e4 --- /dev/null +++ b/sass/lib/tools/_hide-text.sass @@ -0,0 +1,7 @@ +%hide-text + text-indent: 100% + white-space: nowrap + overflow: hidden + +=hide-text + @extend %hide-text \ No newline at end of file diff --git a/sass/lib/tools/_modular-scale.sass b/sass/lib/tools/_modular-scale.sass new file mode 100644 index 0000000..712800b --- /dev/null +++ b/sass/lib/tools/_modular-scale.sass @@ -0,0 +1,313 @@ +// SASSY MODULAR-SCALE +// https://github.com/scottkellum/modular-scale + +// Ratios +$golden: 1.618 +$gold: $golden +$octave: (2 / 1) +$major-seventh: (15 / 8) +$minor-seventh: (16 / 9) +$major-sixth: (5 / 3) +$minor-sixth: (8 / 5) +$fifth: (3 / 2) +$fourth: (4 / 3) +$major-third: (5 / 4) +$minor-third: (6 / 5) +$major-second: (9 / 8) +$minor-second: (16 / 15) + +// Defaults +$ratio: $golden !default +$base-size: 16px !default +$property: font-size !default +$class-slug: ms !default + +// Modular Scale function +@function modular-scale($multiple, $base-size, $ratio) + // return the $base-size if $multiple is zero + @if $multiple == 0 + @if type-of($base-size) == 'list' + $base-size: sort-list($base-size) + @return nth($base-size, 1) + // return just the simple $base-size value if it's not a list + @return $base-size + + // if multiple base-sizes are passed in as a list + // and multiple ratios are passed in as a list + // calculate values in using each base-size / ratio combination + @if type-of($base-size) == 'list' and type-of($ratio) == 'list' + @if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px' + @return round(ms-multibase-multiratio($multiple, $base-size, $ratio)) + @return ms-multibase-multiratio($multiple, $base-size, $ratio) + + // if multiple base-sizes are passed in as a list + // calculate values in using each base-size + @if type-of($base-size) == 'list' and type-of($ratio) == 'number' + @if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px' + @return round(ms-multibase($multiple, $base-size, $ratio)) + @return ms-multibase($multiple, $base-size, $ratio) + + // if multiple ratios are passed in as a list + // calculate values in using each ratio + @if type-of($base-size) == 'number' and type-of($ratio) == 'list' + @if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px' + @return round(ms-multiratio($multiple, $base-size, $ratio)) + @return ms-multiratio($multiple, $base-size, $ratio) + + // If there are no lists just run the simple function + @if unit(exponent($ratio, $multiple) * $base-size) == 'px' + @return round(exponent($ratio, $multiple) * $base-size) + @return exponent($ratio, $multiple) * $base-size + + +// calculate values in using each base-size / ratio combination +@function ms-multibase-multiratio($multiple, $base-size, $ratio) + // start with an empty list to place all values in + $scale-values: () + // make sure base sizes are in ascending order + $base-size: sort-list($base-size) + // take each base-size in turn + $k: 1 + @while $k <= length($base-size) + // add each $base-size to the list except the first + @if $k > 1 + $scale-values: append($scale-values, nth($base-size, $k)) + // take each ratio in turn + $j: 1 + @while $j <= length($ratio) + // reset $modular-scale for each set + $modular-scale: nth($base-size, $k) + // do the scale for each base-size using this ratio + @if $multiple > 0 + // up $multiple times + // and add the result to $scale-values + @for $i from 1 through $multiple + $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k) + $scale-values: append($scale-values, $modular-scale) + // and down until the value is lower than the lowest $base-size + // and add the result to $scale-values + $i: -1 + $modular-scale: nth($base-size, $k) + @while $modular-scale >= nth($base-size, 1) + $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k) + $scale-values: append($scale-values, $modular-scale) + $i: $i - 1 + @if $multiple < 0 + // do the scale down for each set to below 1px + $i: -1 + $modular-scale: nth($base-size, $k) + @while $modular-scale > 1 + $modular-scale: exponent(nth($ratio, $j), $i) * nth($base-size, $k) + $scale-values: append($scale-values, $modular-scale) + $i: $i - 1 + $j: $j + 1 + $k: $k + 1 + // return trimmed and sorted final list + @return trim-sort($multiple, $scale-values, $base-size) + + +// calculate values in using each base-size +@function ms-multibase($multiple, $base-size, $ratio) + // start with an empty list to place all values in + $scale-values: () + // make sure base sizes are in ascending order + $base-size: sort-list($base-size) + // take each base-size in turn + $k: 1 + @while $k <= length($base-size) + // add each $base-size to the list except the first + @if $k > 1 + $scale-values: append($scale-values, nth($base-size, $k)) + // reset $modular-scale for each set + $modular-scale: nth($base-size, $k) + // do the scale for each base-size using this ratio + @if $multiple > 0 + // up $multiple times + // and add the result to $scale-values + @for $i from 1 through $multiple + $modular-scale: exponent($ratio, $i) * nth($base-size, $k) + $scale-values: append($scale-values, $modular-scale) + // and down until the value is lower than the lowest $base-size + // and add the result to $scale-values + $i: -1 + $modular-scale: nth($base-size, $k) + @while $modular-scale >= nth($base-size, 1) + $modular-scale: exponent($ratio, $i) * nth($base-size, $k) + $scale-values: append($scale-values, $modular-scale) + $i: $i - 1 + @if $multiple < 0 + // do the scale down for each set to below 1px + $i: -1 + $modular-scale: nth($base-size, $k) + @while $modular-scale > 1 + $modular-scale: exponent($ratio, $i) * nth($base-size, $k) + $scale-values: append($scale-values, $modular-scale) + $i: $i - 1 + $k: $k + 1 + // return trimmed and sorted final list + @return trim-sort($multiple, $scale-values, $base-size) + + +// calculate values in using each ratio +@function ms-multiratio($multiple, $base-size, $ratio) + // start with an empty list to place all values in + $scale-values: () + // If $multiple is a positive integer (up the scale) + @if $multiple > 0 + // take each ratio in turn + $j: 1 + @while $j <= length($ratio) + // reset $modular-scale for each set + $modular-scale: $base-size + // do the scale using this ratio thru the multiple, and add the result to $scale-values + @for $i from 1 through $multiple + $modular-scale: exponent(nth($ratio, $j), $i) * $base-size + $scale-values: append($scale-values, $modular-scale) + $j: $j + 1 + // sort acsending + $scale-values: sort-list($scale-values) + // return the final value using the laced list + @return nth($scale-values, $multiple) + // If $multiple is a negative integer (down the scale) + @if $multiple < 0 + // take each ratio in turn + $j: 1 + @while $j <= length($ratio) + // reset $modular-scale for each set + $modular-scale: $base-size + // do the scale using this ratio thru the multiple, and add the result to $scale-values + @for $i from 1 through ($multiple * -1) + $modular-scale: exponent(nth($ratio, $j), -$i) * $base-size + $scale-values: append($scale-values, $modular-scale) + $j: $j + 1 + // sort decending + $scale-values: sort-list($scale-values, 'dec') + // return the final value using the laced list + @return nth($scale-values, $multiple * -1) + + +// trim and sort the final list +@function trim-sort($multiple, $scale-values, $base-size) + @if $multiple > 0 + // trim list so we can count from the lowest $base-size + $scale-values: trim-list($scale-values, nth($base-size, 1)) + // sort acsending + $scale-values: sort-list($scale-values) + // return the final value using the laced list + @return nth($scale-values, $multiple) + @else + // trim list so we can count from the lowest $base-size + $scale-values: trim-list($scale-values, nth($base-size, 1), 'dec') + // sort acsending + $scale-values: sort-list($scale-values, 'dec') + // return the final value using the laced list + @return nth($scale-values, -$multiple) + + +///////////////////////////////////////////////////////////////////////// + +// Shortcut +@function ms($multiple, $base-size, $ratio) + // Return the value from the Modular Scale function + @return modular-scale($multiple, $base-size, $ratio) + +// Mixin +// Deprecated. Use the modular-scale() function instead +=modular-scale($property, $multiple, $base-size, $ratio) + // Print the $property and return the value from the Modular Scale function + @warn "The modular-scale mixin is deprecated. Instead use the function: width: modular-scale(3)" + #{$property}: modular-scale($multiple, $base-size, $ratio) + +// Classes Mixin +=modular-scale-classes($multiple, $property, $class-slug, $base-size, $ratio) + // Loop from 0 through the value of $multiple and generate a range of classes + @for $i from 0 through $multiple + .#{$class-slug}-#{$i} + // Print the $property and return the value from the Modular Scale function + #{$property}: modular-scale($i, $base-size, $ratio) + + +///////////////////////////////////////////////////////////////////////// + + +// Sass exponent support +@function exponent($base, $exponent) + // reset value + $value: $base + // positive intergers get multiplied + @if $exponent > 1 + @for $i from 2 through $exponent + $value: $value * $base + // negitive intergers get divided. A number divided by itself is 1 + @if $exponent < 1 + @for $i from 0 through -$exponent + $value: $value / $base + // return the last value written + @return $value + + +// Sass list sorting support +@function sort-list($list, $dir: 'asc') + // built-in list sorting in Sass would make this go away. + // declare some empty lists to put our new order and temporary values + $new-order: () + $temp: () + // fill $temp with the contents of $list + $temp: join($temp, $list) + // if sorting ascending + @if $dir == 'asc' + // loop through all values in $list + @for $i from 1 through length($list) + // impossibly high starter value to compare + $low: 1000000 + // check for lowest value in $temp + @for $j from 1 through length($temp) + @if nth($temp, $j) < $low + $low: nth($temp, $j) + // add lowest value to $new-order + $new-order: append($new-order, $low) + // empty $temp for the next comparison + $temp: () + // re-populate $temp with remaining values to sort + @for $k from 1 through length($list) + @if nth($list, $k) > $low + $temp: append($temp, nth($list, $k)) + @if $dir == 'dec' + // loop through all values in $list + @for $i from 1 through length($list) + // 0 starter value + $high: 0 + // check for highest value in $temp + @for $j from 1 through length($temp) + @if nth($temp, $j) > $high + $high: nth($temp, $j) + $new-order: append($new-order, $high) + // empty $temp for the next comparison + $temp: () + // re-populate $temp with remaining values to sort + @for $k from 1 through length($list) + @if nth($list, $k) < $high + $temp: append($temp, nth($list, $k)) + @return $new-order + + +// Sass list trimming support +@function trim-list($list, $start, $dir: 'asc') + // built-in list trimming in Sass would make this go away. + // declare some empty lists to put our trimmed values + $trimmed: () + // if sorting ascending + @if $dir == 'asc' + // loop through all values in $list + @for $i from 1 through length($list) + @if nth($list, $i) >= $start + $trimmed: append($trimmed, nth($list, $i)) + @if $dir == 'dec' + // loop through all values in $list + @for $i from 1 through length($list) + @if nth($list, $i) <= $start + $trimmed: append($trimmed, nth($list, $i)) + @return $trimmed + +// Other libraries can easily query if this function is avalible +$modular-scale-loaded: true \ No newline at end of file diff --git a/sass/lib/tools/_pixel-normalize.sass b/sass/lib/tools/_pixel-normalize.sass new file mode 100644 index 0000000..b5e5e49 --- /dev/null +++ b/sass/lib/tools/_pixel-normalize.sass @@ -0,0 +1,24 @@ +/* Normalize pixels to the W3C refrence pixel on problem devices. */ +/* THIS SCALES EMS, PIXELS WILL NOT BE NORMALIZED */ + +// allows developer to toggle from outside file. +$pixel-normalize: true !default +$base-size: 16 !default + + + +// 7" tablets +$tab7-pixel-ratio: (6/5) !default + +@if $pixel-normalize + // 7" 1024x600 tablet with no pixel scaling (Kindle Fire) + @media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait), screen and (-o-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), screen and (-o-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait), screen and (device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), screen and (device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait) + html + font-size: $base-size * $tab7-pixel-ratio + // 7" 1024x600 tablet with pixel ratio of 1.5 (Original Galaxy Tab) + @media screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait), screen and (-o-device-pixel-ratio: 3/2) and (device-width: 683px) and (orientation: landscape), screen and (-o-device-pixel-ratio: 3/2) and (device-width: 400px) and (orientation: portrait), screen and (device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape), screen and (device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait), screen and (device-pixel-ratio: 3/2) and (device-width: 683px) and (orientation: landscape), screen and (device-pixel-ratio: 3/2) and (device-width: 400px) and (orientation: portrait) + html + font-size: $base-size * (2/3) * $tab7-pixel-ratio + + +$pixel-normalize-loaded: true \ No newline at end of file diff --git a/sass/lib/tools/_relative-pixels.sass b/sass/lib/tools/_relative-pixels.sass new file mode 100644 index 0000000..4fd4eb3 --- /dev/null +++ b/sass/lib/tools/_relative-pixels.sass @@ -0,0 +1,36 @@ +// Android uses Density Independent Pixels (dip or dp) as the units defined in the W3C spec for pixels and pixels (px) as hardware defined units. +// This project aims to bring these two units to CSS using Sass functions and mixins. + +// Base size should be the em height on the html element +$base-size: 16px !default + +// Convert dips to em, rem, or px +$dip-conversion: em !default + +// Context offset +$em-offset: 1 !default + +// Convert dips to em or rem (px will not work because the W3C spec considers px to be density independent pixels) +$px-conversion: em !default + +@function dip($number, $em-offset, $dip-conversion) + $unitless-em-offset: $em-offset / 1em + @if unitless($em-offset) + $unitless-em-offset: $em-offset + @if $dip-conversion == px + @return $number * 1px + @if $dip-conversion == em + @return ($number / ($base-size / 1px)) * (1 / $unitless-em-offset) * 1em + @if $dip-conversion == rem + @return $number / ($base-size / 1px) * 1rem + +@function dp($number, $em-offset, $dip-conversion) + @return dip($number, $em-offset, $dip-conversion) + +// Simple px => em conversion +@function em($number, $em-offset) + @return dip($number, $em-offset, em) + +// Simple px => rem conversion +@function em($number, $em-offset) + @return dip($number, $em-offset, rem) \ No newline at end of file diff --git a/sass/lib/tools/_sprites.sass b/sass/lib/tools/_sprites.sass new file mode 100644 index 0000000..4bd6e3d --- /dev/null +++ b/sass/lib/tools/_sprites.sass @@ -0,0 +1,17 @@ +$sprite-file: '../img/sprites.png' !default + +%sprite + display: block + overflow: hidden + text-indent: 100% + white-space: nowrap + background-image: url(#{$sprite-file}) + background-repeat: no-repeat + padding: 0 + +// SOME BASIC SPRITE STYLING +=sprite($width, $height, $offset-x, $offset-y) + @extend %sprite + background-position: ($offset-x * -1) ($offset-y * -1) + width: $width + height: $height diff --git a/sass/lib/tools/_typography.sass b/sass/lib/tools/_typography.sass new file mode 100644 index 0000000..d4a46aa --- /dev/null +++ b/sass/lib/tools/_typography.sass @@ -0,0 +1,15 @@ +// TYPOGRAPHIC TOOLS +=type($size, $line-height) + font-size: $size + line-height: $line-height + +=solid($lineheight) + font-size: $lineheight + line-height: 1em + +=caps($letterspace: 0.1em) + text-transform: uppercase + letter-spacing: $letterspace + +=letterpress($color) + text-shadow: 0 -1px 0 darken($color, 15%), 0 1px 0 lighten($color, 15%) \ No newline at end of file diff --git a/sass/skin/_default.sass b/sass/skin/_default.sass new file mode 100644 index 0000000..592c889 --- /dev/null +++ b/sass/skin/_default.sass @@ -0,0 +1,15 @@ +$nav-height: 2.2em + ++styleguide-links($primary) ++styleguide-table(#777) ++typography + +@import default/foundation +@import default/article +@import default/aside +@import default/footer +@import default/header +@import default/nav + +@import default/media +@import default/print \ No newline at end of file diff --git a/sass/skin/default/_article.sass b/sass/skin/default/_article.sass new file mode 100644 index 0000000..6d530bb --- /dev/null +++ b/sass/skin/default/_article.sass @@ -0,0 +1,5 @@ +article + @extend %w-9 + background-color: $article-color + float: left + margin-bottom: 2em diff --git a/sass/skin/default/_aside.sass b/sass/skin/default/_aside.sass new file mode 100644 index 0000000..d982c18 --- /dev/null +++ b/sass/skin/default/_aside.sass @@ -0,0 +1,4 @@ +aside + @extend %w-3 + @extend %next-col + +structured-list diff --git a/sass/skin/default/_footer.sass b/sass/skin/default/_footer.sass new file mode 100644 index 0000000..650a786 --- /dev/null +++ b/sass/skin/default/_footer.sass @@ -0,0 +1,12 @@ +footer + background-color: $footer-color + clear: both + color: $body-color + text-align: center + padding: 1em + li + display: inline + list-style: none + a, a:hover + color: $body-color + border: none diff --git a/sass/skin/default/_foundation.sass b/sass/skin/default/_foundation.sass new file mode 100644 index 0000000..1557396 --- /dev/null +++ b/sass/skin/default/_foundation.sass @@ -0,0 +1,8 @@ +// FOUNDATION // + +html + background-color: $body-color + color: $text-color + +body + margin-top: $nav-height diff --git a/sass/skin/default/_header.sass b/sass/skin/default/_header.sass new file mode 100644 index 0000000..00f5851 --- /dev/null +++ b/sass/skin/default/_header.sass @@ -0,0 +1,20 @@ +.header.container + background-color: $header-color + +header + +gradient(lighten($header-color, 10%), $header-color) + h1, h2 + padding: $base-size + +letterpress($header-color) + h1 + font-family: $hed + font-size: 3em + color: $article-color + h2 + padding-top: 0 + margin-top: -$base-size + font-size: 1.5em + color: mix($article-color, mix($article-color, $header-color)) + a, a:hover + color: inherit + border: none diff --git a/sass/skin/default/_media.sass b/sass/skin/default/_media.sass new file mode 100644 index 0000000..68b9c23 --- /dev/null +++ b/sass/skin/default/_media.sass @@ -0,0 +1,13 @@ +// detect if the site is responsive or not +@if unit($grid-width) == "%" + // everything should be indented to sit under this if statement. + @media all and (max-width: 40em) + body + margin-top: $nav-height * 2 + article + width: grid(12) + aside + margin-left: 0 + width: grid(12) + nav + height: $nav-height * 2 diff --git a/sass/skin/default/_nav.sass b/sass/skin/default/_nav.sass new file mode 100644 index 0000000..873c275 --- /dev/null +++ b/sass/skin/default/_nav.sass @@ -0,0 +1,31 @@ +nav + background-color: $nav-color + +box-shadow(0 0 4px rgba(#000, .7)) + position: fixed + top: 0 + height: $nav-height + width: 100% + ol + padding: 0 + height: $nav-height + list-style: none + li + float: left + margin-right: 1px + a + display: block + height: $nav-height + padding: 0 .6em + font-family: $subhed + color: $body-color + background-color: darken($nav-color, 10%) + line-height: $nav-height + border-top: 0px solid $tertiary + +letterpress($nav-color) + +transition(all .2s) + border-bottom: none + &:hover + border-top: .3em solid $tertiary + border-bottom: none + color: $body-color + height: $nav-height - .3em diff --git a/sass/skin/default/_print.sass b/sass/skin/default/_print.sass new file mode 100644 index 0000000..8cbea47 --- /dev/null +++ b/sass/skin/default/_print.sass @@ -0,0 +1 @@ +// PRINT // \ No newline at end of file diff --git a/sass/style.sass b/sass/style.sass new file mode 100644 index 0000000..879008f --- /dev/null +++ b/sass/style.sass @@ -0,0 +1,33 @@ +// FRAMEWORK +@import lib/tools +@import lib/normalize ++margin-reset +@import lib/grid + +// VARIABLES + +$base-size: 16px +//$line-height: 1.3em + +$base-color: #E3870E +$color-scheme: complement // mono, complement, triad, tetrad, analogic, accented-analogic + + +$grid-width: 90% +//$columns: 12 +//$wrapper-align: center // left, center or right +//$gutter: 2% + + +// WRITE DEBUG CLASSES +$debug: false + +// STYLEGUIDE +@import lib/styleguide + +// SKIN +@import skin/default + +// PLUGNINS +@import lib/plugin/normalize-pixel +//@import lib/plugin/transition-all