From 276fb377a97f0a850bc02bffe2e4b06e338b005c Mon Sep 17 00:00:00 2001 From: Jairus Khan Date: Mon, 7 May 2012 15:03:11 -0400 Subject: [PATCH 1/3] SCSS versions of LESS --- sass/1382.scss | 24 ++ sass/2x.scss | 20 ++ sass/320andup.scss | 106 ++++++++ sass/480.scss | 20 ++ sass/600.scss | 20 ++ sass/768.scss | 47 ++++ sass/992.scss | 20 ++ sass/buttons.scss | 180 +++++++++++++ sass/colour.scss | 159 +++++++++++ sass/elements.scss | 65 +++++ sass/font-awesome.scss | 240 +++++++++++++++++ sass/forms.scss | 282 ++++++++++++++++++++ sass/mixins.scss | 69 +++++ sass/modernizr.scss | 51 ++++ sass/page.scss | 69 +++++ sass/print.scss | 71 +++++ sass/reset.scss | 15 ++ sass/site.scss | 39 +++ sass/tables.scss | 90 +++++++ sass/texture.scss | 194 ++++++++++++++ sass/typography.scss | 212 +++++++++++++++ sass/upstarts/320andup-modules/example.html | 167 ++++++++++++ sass/upstarts/320andup-modules/index.html | 138 ++++++++++ sass/upstarts/320andup-modules/upstart.scss | 128 +++++++++ sass/upstarts/320andup-panels/index.html | 218 +++++++++++++++ sass/upstarts/320andup-panels/upstart.scss | 70 +++++ sass/variables.scss | 148 ++++++++++ 27 files changed, 2862 insertions(+) create mode 100644 sass/1382.scss create mode 100644 sass/2x.scss create mode 100644 sass/320andup.scss create mode 100644 sass/480.scss create mode 100644 sass/600.scss create mode 100644 sass/768.scss create mode 100644 sass/992.scss create mode 100644 sass/buttons.scss create mode 100644 sass/colour.scss create mode 100644 sass/elements.scss create mode 100644 sass/font-awesome.scss create mode 100644 sass/forms.scss create mode 100644 sass/mixins.scss create mode 100644 sass/modernizr.scss create mode 100644 sass/page.scss create mode 100644 sass/print.scss create mode 100644 sass/reset.scss create mode 100644 sass/site.scss create mode 100644 sass/tables.scss create mode 100644 sass/texture.scss create mode 100644 sass/typography.scss create mode 100644 sass/upstarts/320andup-modules/example.html create mode 100644 sass/upstarts/320andup-modules/index.html create mode 100644 sass/upstarts/320andup-modules/upstart.scss create mode 100644 sass/upstarts/320andup-panels/index.html create mode 100644 sass/upstarts/320andup-panels/upstart.scss create mode 100644 sass/variables.scss diff --git a/sass/1382.scss b/sass/1382.scss new file mode 100644 index 0000000..86b0fd8 --- /dev/null +++ b/sass/1382.scss @@ -0,0 +1,24 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* 1382 =================================================== */ + +// 1. ROOT ============================== + +body { +max-width : 1440px; } + +// 2. TYPOGRAPHY ============================== +// 3. COLOUR ============================== +// 4. TEXTURE ============================== +// 5. ELEMENTS ============================== +// 6. LAYOUT ============================== +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/2x.scss b/sass/2x.scss new file mode 100644 index 0000000..da3d729 --- /dev/null +++ b/sass/2x.scss @@ -0,0 +1,20 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* 2x =================================================== */ + +// 1. ROOT ============================== +// 2. TYPOGRAPHY ============================== +// 3. COLOUR ============================== +// 4. TEXTURE ============================== +// 5. ELEMENTS ============================== +// 6. LAYOUT ============================== +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/320andup.scss b/sass/320andup.scss new file mode 100644 index 0000000..5e442a0 --- /dev/null +++ b/sass/320andup.scss @@ -0,0 +1,106 @@ +/* ============================================================ + +320 and Up by Andy Clarke +Version: 3.0 +URL: http://stuffandnonsense.co.uk/projects/320andup/ +Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +============================================================ */ + +// 1. ROOT ============================== + +// CSS reset +@import "reset.scss"; + +// Variables and mixins +@import "variables.scss"; +@import "mixins.scss"; + +// Site wide styles (html, body) +@import "site.scss"; + +// 2. TYPOGRAPHY ============================== + +// Block level (h1, p) and text-level (em, strong) type +@import "typography.scss"; + +// 3. COLOUR ============================== + +// Colour interaction semantics +@import "colour.scss"; + +// 4. TEXTURE ============================== + +// Alerts, badges, boxes and gradients +@import "texture.scss"; + +// Font Awesome icon fonts (optional) +@import "font-awesome.scss"; + +// 5. ELEMENTS ============================== + +// Figures, images and other elements +@import "elements.scss"; + +// Standard form controls +@import "forms.scss"; + +// Button styles (optional) +@import "buttons.scss"; + +// Tables +@import "tables.scss"; + +// 6. LAYOUT ============================== + +// Page level layout styles (banner, navigation, content, contentinfo) +@import "page.scss"; + +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== + +@import "modernizr.scss"; + +// 9. TEMPLATE SPECIFICS ============================== +// 10. MEDIA QUERIES ============================== + +@media print { +@import "print.scss"; +} + +// 480px +@media only screen and (min-width: 480px) { +@import "480.scss"; +} + +// 600px +@media only screen and (min-width: 600px) { +@import "600.scss"; +} + +// 768px +@media only screen and (min-width: 768px) { +@import "768.scss"; +} + +// 992px +@media only screen and (min-width: 992px) { +@import "992.scss"; +} + +// 1382px +@media only screen and (min-width: 1382px) { +@import "1382.scss"; +} + +// 2x +@media +only screen and (-webkit-min-device-pixel-ratio: 1.5), +only screen and (min--moz-device-pixel-ratio: 1.5), +only screen and (min-device-pixel-ratio: 1.5) { +@import "2x.scss"; } + +// 11. UPSTARTS ============================== + +@import "upstarts/320andup-modules/upstart.scss"; +@import "upstarts/320andup-panels/upstart.scss"; \ No newline at end of file diff --git a/sass/480.scss b/sass/480.scss new file mode 100644 index 0000000..e4ec055 --- /dev/null +++ b/sass/480.scss @@ -0,0 +1,20 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* 480 =================================================== */ + +// 1. ROOT ============================== +// 2. TYPOGRAPHY ============================== +// 3. COLOUR ============================== +// 4. TEXTURE ============================== +// 5. ELEMENTS ============================== +// 6. LAYOUT ============================== +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/600.scss b/sass/600.scss new file mode 100644 index 0000000..0ad8e66 --- /dev/null +++ b/sass/600.scss @@ -0,0 +1,20 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* 600 =================================================== */ + +// 1. ROOT ============================== +// 2. TYPOGRAPHY ============================== +// 3. COLOUR ============================== +// 4. TEXTURE ============================== +// 5. ELEMENTS ============================== +// 6. LAYOUT ============================== +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/768.scss b/sass/768.scss new file mode 100644 index 0000000..442d1ca --- /dev/null +++ b/sass/768.scss @@ -0,0 +1,47 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* 768 =================================================== */ + +// 1. ROOT ============================== + +body { +display : table; +border-collapse : collapse; } + +// 2. TYPOGRAPHY ============================== +// 3. COLOUR ============================== +// 4. TEXTURE ============================== +// 5. ELEMENTS ============================== +// 6. LAYOUT ============================== + +// BANNER ============================== + +[role="banner"] a[href="#navigation"] { +display : none !important; +visibility : hidden; } + +// NAVIGATION ============================== + +[role="navigation"] { +display : table-header-group; + +p { +margin : 0 auto; +width : 90%; } +} + +// CONTENT ============================== +// 11 MAIN ============================== +// COMPLEMENTARY ============================== +// CONTENTINFO ============================== + +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/992.scss b/sass/992.scss new file mode 100644 index 0000000..9a45c64 --- /dev/null +++ b/sass/992.scss @@ -0,0 +1,20 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* 992 =================================================== */ + +// 1. ROOT ============================== +// 2. TYPOGRAPHY ============================== +// 3. COLOUR ============================== +// 4. TEXTURE ============================== +// 5. ELEMENTS ============================== +// 6. LAYOUT ============================== +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/buttons.scss b/sass/buttons.scss new file mode 100644 index 0000000..83d2cea --- /dev/null +++ b/sass/buttons.scss @@ -0,0 +1,180 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Buttons =================================================== */ + +.btn { +display : inline-block; +*display : inline; +/* IE7 inline-block hack */ +*zoom : 1; +padding : 6px 11px 6px; +margin-bottom : 0; +font-family : $basefont; +@include font-size(12); +font-weight : bold; +line-height : $baselineheight; +color : $buttoncolor; +text-align : center; +vertical-align : middle; +background-color : $buttonbackground; +// .greygrad; HOW DOES IT WORK + + +@include background-image(linear-gradient($white, darken($lightergrey, 5%))); + +border : $buttonborderwidth $buttonborderstyle $buttonbordercolor; +border-bottom-color : $buttonbottombordercolor; +@include border-radius(4px); +cursor : pointer; +*margin-left : .3em; + +&:visited, +&:hover { +color : $buttoncolor; +text-decoration : none; } +} + +input[type="submit"].btn:hover { +border-color : $buttonbordercolor; } + +.btn:first-child { +*margin-left : 0; } + +// disabled + +.btn-disabled { +@include opacity(.5); +cursor : default; } + +// info + +.btn-info { +// .infograd; +@include background-image(linear-gradient($infocolor, darken($infocolor, 10%))); + +border-color : darken($infocolor, 15%); +border-bottom-color : darken($infocolor, 20%); +color : darken($infocolor, 50%); + +&:visited, +&:hover { +color : darken($infocolor, 50%); } +} + +// inverse + +.btn-inverse { +//.inversegrad; +@include background-image(linear-gradient($inverscolor, darken($inverscolor, 10%))); + +border-color : darken($inverscolor, 15%); +border-bottom-color : darken($inverscolor, 20%); +color : $white; + +&:visited, +&:hover { +color : $white; } +} + +// primary + +.btn-primary { +//.basegrad; +@include background-image(linear-gradient($basecolor, darken($basecolor, 10%))); + +border-color : darken($basecolor, 15%); +border-bottom-color : darken($basecolor, 20%); +color : $white; + +&:visited, +&:hover { +color : $white; } +} + +// success + +.btn-success { +//.successgrad; +@include background-image(linear-gradient($successcolor, darken($successcolor, 10%))); + +border-color : darken($successcolor, 15%); +border-bottom-color : darken($successcolor, 20%); } + +// warning + +.btn-warning { +//.warninggrad; +@include background-image(linear-gradient($warningcolor, darken($warningcolor, 10%))); + +border-color : darken($warningcolor, 15%); +border-bottom-color : darken($warningcolor, 20%); } + +// sizes + +.btn-extlarge { +padding : 11px 22px; +@include font-size(21); +@include border-radius(4px); } + +.btn.btn-large { +*padding-top : 7px; +*padding-bottom : 7px; } + +.btn-large { +padding : 11px 22px; +@include font-size(14); +line-height : normal; +@include border-radius(4px); } + +.btn-small { +padding : 6px 10px; +@include font-size(11); +line-height : 16px; } + +.btn-mini { +padding : 3px 5px; +@include font-size(11); +line-height : 14px; } + +.btn-group { +position : relative; +*zoom : 1; +*margin-left : .3em; +margin-bottom : $baseline; } + +.btn-group .btn { +position : relative; +float : left; +margin-left : -1px; +@include border-radius(0); } + +.btn-group .btn:first-child { +margin-left : 0; +@include border-radius(2px, 0); } + +.btn-group .btn:last-child { +@include border-radius(0, 2px); } + +.btn-group .btn.large:first-child { +margin-left : 0; +@include border-radius(4px, 0); } + +.btn-group .btn.large:last-child { +@include border-radius(0, 4px); } + +.btn-toolbar { +clear : both; +margin-top : $baselineheight / 2; +margin-bottom : $baselineheight / 2; } + +.btn-toolbar .btn-group { +display : inline-block; +*display : inline; +*zoom : 1; } \ No newline at end of file diff --git a/sass/colour.scss b/sass/colour.scss new file mode 100644 index 0000000..2930fd5 --- /dev/null +++ b/sass/colour.scss @@ -0,0 +1,159 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Colour =================================================== */ + +// 1. ROOT ============================== +// 2. TYPOGRAPHY ============================== +// 3. COLOUR ============================== + +a { +text-decoration : none; +color : $linkcolor; + +&:visited { +color : $linkcolorvisited; } + +&:hover { +text-decoration : underline; +color : $linkcolorhover; } + +&:focus { +outline : thin dotted; +color : $linkcolorfocus; } + +&:hover, +&:active { +outline : 0; } +} + +::-moz-selection { +background-color : lighten($basecolor, 65%); +color : $basecolor; +text-shadow : none; } + +::selection { +background-color : lighten($basecolor, 65%); +color : $basecolor; +text-shadow : none; } + +// swatches + +.swatch { +margin : 0 0 $baselineheight 0; +padding : 0; } + +.swatch-row { +display : block; +margin : 0; +padding : 0; +width : 200px; } + +.swatch-row-one { +background-color : $black; } + +.swatch-row-two { +background-color : $white; } + +.swatch-row span { +display : block; +float : left; +width : 50px; +height : 50px; } + +// base + +.swatch-base span:nth-child(1) { +@include background-alpha($basecolor, .9); } + +.swatch-base span:nth-child(2) { +@include background-alpha($basecolor, .8); } + +.swatch-base span:nth-child(3) { +@include background-alpha($basecolor, .7); } + +.swatch-base span:nth-child(4) { +@include background-alpha($basecolor, .6); } + +// alert + +.swatch-alert span:nth-child(1) { +@include background-alpha($alertcolor, .9); } + +.swatch-alert span:nth-child(2) { +@include background-alpha($alertcolor, .8); } + +.swatch-alert span:nth-child(3) { +@include background-alpha($alertcolor, .7); } + +.swatch-alert span:nth-child(4) { +@include background-alpha($alertcolor, .6); } + +// error + +.swatch-error span:nth-child(1) { +@include background-alpha($errorcolor, .9); } + +.swatch-error span:nth-child(2) { +@include background-alpha($errorcolor, .8); } + +.swatch-error span:nth-child(3) { +@include background-alpha($errorcolor, .7); } + +.swatch-error span:nth-child(4) { +@include background-alpha($errorcolor, .6); } + +// info + +.swatch-info span:nth-child(1) { +@include background-alpha($infocolor, .9); } + +.swatch-info span:nth-child(2) { +@include background-alpha($infocolor, .8); } + +.swatch-info span:nth-child(3) { +@include background-alpha($infocolor, .7); } + +.swatch-info span:nth-child(4) { +@include background-alpha($infocolor, .6); } + +// success + +.swatch-success span:nth-child(1) { +@include background-alpha($successcolor, .9); } + +.swatch-success span:nth-child(2) { +@include background-alpha($successcolor, .8); } + +.swatch-success span:nth-child(3) { +@include background-alpha($successcolor, .7); } + +.swatch-success span:nth-child(4) { +@include background-alpha($successcolor, .6); } + +// warning + +.swatch-warning span:nth-child(1) { +@include background-alpha($warningcolor, .9); } + +.swatch-warning span:nth-child(2) { +@include background-alpha($warningcolor, .8); } + +.swatch-warning span:nth-child(3) { +@include background-alpha($warningcolor, .7); } + +.swatch-warning span:nth-child(4) { +@include background-alpha($warningcolor, .6); } + +// 4. TEXTURE ============================== +// 5. ELEMENTS ============================== +// 6. LAYOUT ============================== +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/elements.scss b/sass/elements.scss new file mode 100644 index 0000000..a13fcfd --- /dev/null +++ b/sass/elements.scss @@ -0,0 +1,65 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Elements =================================================== */ + +// FIGURES & IMAGES ============================================================================= + +hr { +display : block; +margin : 1em 0; +padding : 0; +height : 1px; +border : 0; +border-top : 1px solid $bordercolor; +border-bottom : 1px solid $white; } + +// img + +img { +max-width : 100%; +border-width : 0; +vertical-align : middle; +-ms-interpolation-mode : bicubic; } + +svg:not(:root) { +overflow : hidden; } + +// figure + +figure { +margin-bottom : $baselineheight; + +img { +margin-bottom : $baselineheight / 4; } + +figcaption { +display : block; +font-weight : normal; +@include font-size(14); +color : $grey; } +} + +// list-bordered + +.list-bordered { +list-style-type : none; +margin : 0 0 $baselineheight 0; +padding : 0; + +li { +margin-bottom : $baselineheight / 4; +padding-bottom : $baselineheight / 4; +border-bottom : 1px dashed $bordercolor; } + +li:last-child { +margin-bottom : 0; +padding-bottom : 0; +border-bottom-width : 0; } +} \ No newline at end of file diff --git a/sass/font-awesome.scss b/sass/font-awesome.scss new file mode 100644 index 0000000..3ec2687 --- /dev/null +++ b/sass/font-awesome.scss @@ -0,0 +1,240 @@ +// ========================================================== + +/* Font Awesome: http://fortawesome.github.com/Font-Awesome/ + +License +------------------------------------------------------- +The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0: +http://creativecommons.org/licenses/by/3.0/ A mention of +'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable +source code is considered acceptable attribution (most common on the web). +If human readable source code is not available to the end user, a mention in +an 'About' or 'Credits' screen is considered acceptable (most common in desktop +or mobile software). */ + +// ========================================================== + +@font-face { +font-family: 'FontAwesome'; +src: url('../fonts/fontawesome-webfont.eot'); +src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), +url('../fonts/fontawesome-webfont.woff') format('woff'), +url('../fonts/fontawesome-webfont.ttf') format('truetype'), +url('../fonts/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), +url('../fonts/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); +font-weight : normal; +font-style : normal; } + +[class^="icon-"], +[class*=" icon-"] { +display : inline; +width : auto; +height : auto; +line-height : inherit; +vertical-align : baseline; +background-image : none; +background-position : 0 0; +background-repeat : repeat; } + +li[class^="icon-"], +li[class*=" icon-"] { +display : block; } + +[class^="icon-"]:before, +[class*=" icon-"]:before { +font-family : FontAwesome; +font-weight : normal; +font-style : normal; +display : inline-block; +text-decoration : inherit; } + +a [class^="icon-"], +a [class*=" icon-"] { +display : inline-block; +text-decoration : inherit; } + +/* makes the font 33% larger relative to the icon container */ +.icon-large:before { +vertical-align : top; +font-size : 4/3em; } + +.btn { +[class^="icon-"], +[class*=" icon-"] { +/* keeps button heights with and without icons the same */ +line-height : .9em; } +} + +li { +[class^="icon-"], +[class*=" icon-"] { +display : inline-block; +width : 1.25em; +text-align : center; } + +.icon-large[class^="icon-"], +.icon-large[class*=" icon-"] { +/* 1.5 increased font size for icon-large * 1.25 width */ +width : 1.5*1.25em; } +} + +li[class^="icon-"], +li[class*=" icon-"] { +margin-left: 0; +list-style-type: none; + +&:before { +text-indent: -2em; +text-align: center; +} +&.icon-large:before { +text-indent: -4/3em; +} +} + +/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen + readers do not read off random characters that represent icons */ + +.icon-glass:before { content: "\f000"; } +.icon-music:before { content: "\f001"; } +.icon-search:before { content: "\f002"; } +.icon-envelope:before { content: "\f003"; } +.icon-heart:before { content: "\f004"; } +.icon-star:before { content: "\f005"; } +.icon-star-empty:before { content: "\f006"; } +.icon-user:before { content: "\f007"; } +.icon-film:before { content: "\f008"; } +.icon-th-large:before { content: "\f009"; } +.icon-th:before { content: "\f00a"; } +.icon-th-list:before { content: "\f00b"; } +.icon-ok:before { content: "\f00c"; } +.icon-remove:before { content: "\f00d"; } +.icon-zoom-in:before { content: "\f00e"; } +.icon-zoom-out:before { content: "\f010"; } +.icon-off:before { content: "\f011"; } +.icon-signal:before { content: "\f012"; } +.icon-cog:before { content: "\f013"; } +.icon-trash:before { content: "\f014"; } +.icon-home:before { content: "\f015"; } +.icon-file:before { content: "\f016"; } +.icon-time:before { content: "\f017"; } +.icon-road:before { content: "\f018"; } +.icon-download-alt:before { content: "\f019"; } +.icon-download:before { content: "\f01a"; } +.icon-upload:before { content: "\f01b"; } +.icon-inbox:before { content: "\f01c"; } +.icon-play-circle:before { content: "\f01d"; } +.icon-repeat:before { content: "\f01e"; } +/* \f020 is not a valid unicode character. all shifted one down */ +.icon-refresh:before { content: "\f021"; } +.icon-list-alt:before { content: "\f022"; } +.icon-lock:before { content: "\f023"; } +.icon-flag:before { content: "\f024"; } +.icon-headphones:before { content: "\f025"; } +.icon-volume-off:before { content: "\f026"; } +.icon-volume-down:before { content: "\f027"; } +.icon-volume-up:before { content: "\f028"; } +.icon-qrcode:before { content: "\f029"; } +.icon-barcode:before { content: "\f02a"; } +.icon-tag:before { content: "\f02b"; } +.icon-tags:before { content: "\f02c"; } +.icon-book:before { content: "\f02d"; } +.icon-bookmark:before { content: "\f02e"; } +.icon-print:before { content: "\f02f"; } +.icon-camera:before { content: "\f030"; } +.icon-font:before { content: "\f031"; } +.icon-bold:before { content: "\f032"; } +.icon-italic:before { content: "\f033"; } +.icon-text-height:before { content: "\f034"; } +.icon-text-width:before { content: "\f035"; } +.icon-align-left:before { content: "\f036"; } +.icon-align-center:before { content: "\f037"; } +.icon-align-right:before { content: "\f038"; } +.icon-align-justify:before { content: "\f039"; } +.icon-list:before { content: "\f03a"; } +.icon-indent-left:before { content: "\f03b"; } +.icon-indent-right:before { content: "\f03c"; } +.icon-facetime-video:before { content: "\f03d"; } +.icon-picture:before { content: "\f03e"; } +.icon-pencil:before { content: "\f040"; } +.icon-map-marker:before { content: "\f041"; } +.icon-adjust:before { content: "\f042"; } +.icon-tint:before { content: "\f043"; } +.icon-edit:before { content: "\f044"; } +.icon-share:before { content: "\f045"; } +.icon-check:before { content: "\f046"; } +.icon-move:before { content: "\f047"; } +.icon-step-backward:before { content: "\f048"; } +.icon-fast-backward:before { content: "\f049"; } +.icon-backward:before { content: "\f04a"; } +.icon-play:before { content: "\f04b"; } +.icon-pause:before { content: "\f04c"; } +.icon-stop:before { content: "\f04d"; } +.icon-forward:before { content: "\f04e"; } + +.icon-fast-forward:before { content: "\f050"; } +.icon-step-forward:before { content: "\f051"; } +.icon-eject:before { content: "\f052"; } +.icon-chevron-left:before { content: "\f053"; } +.icon-chevron-right:before { content: "\f054"; } +.icon-plus-sign:before { content: "\f055"; } +.icon-minus-sign:before { content: "\f056"; } +.icon-remove-sign:before { content: "\f057"; } +.icon-ok-sign:before { content: "\f058"; } +.icon-question-sign:before { content: "\f059"; } +.icon-info-sign:before { content: "\f05a"; } +.icon-screenshot:before { content: "\f05b"; } +.icon-remove-circle:before { content: "\f05c"; } +.icon-ok-circle:before { content: "\f05d"; } +.icon-ban-circle:before { content: "\f05e"; } + +.icon-arrow-left:before { content: "\f060"; } +.icon-arrow-right:before { content: "\f061"; } +.icon-arrow-up:before { content: "\f062"; } +.icon-arrow-down:before { content: "\f063"; } +.icon-share-alt:before { content: "\f064"; } +.icon-resize-full:before { content: "\f065"; } +.icon-resize-small:before { content: "\f066"; } +.icon-plus:before { content: "\f067"; } +.icon-minus:before { content: "\f068"; } +.icon-asterisk:before { content: "\f069"; } +.icon-exclamation-sign:before { content: "\f06a"; } +.icon-gift:before { content: "\f06b"; } +.icon-leaf:before { content: "\f06c"; } +.icon-fire:before { content: "\f06d"; } +.icon-eye-open:before { content: "\f06e"; } +.icon-eye-close:before { content: "\f070"; } +.icon-warning-sign:before { content: "\f071"; } +.icon-plane:before { content: "\f072"; } +.icon-calendar:before { content: "\f073"; } +.icon-random:before { content: "\f074"; } +.icon-comment:before { content: "\f075"; } +.icon-magnet:before { content: "\f076"; } +.icon-chevron-up:before { content: "\f077"; } +.icon-chevron-down:before { content: "\f078"; } +.icon-retweet:before { content: "\f079"; } +.icon-shopping-cart:before { content: "\f07a"; } +.icon-folder-close:before { content: "\f07b"; } +.icon-folder-open:before { content: "\f07c"; } +.icon-resize-vertical:before { content: "\f07d"; } +.icon-resize-horizontal:before { content: "\f07e"; } +.icon-bar-chart:before { content: "\f080"; } +.icon-twitter-sign:before { content: "\f081"; } +.icon-facebook-sign:before { content: "\f082"; } +.icon-camera-retro:before { content: "\f083"; } +.icon-key:before { content: "\f084"; } +.icon-cogs:before { content: "\f085"; } +.icon-comments:before { content: "\f086"; } +.icon-thumbs-up:before { content: "\f087"; } +.icon-thumbs-down:before { content: "\f088"; } +.icon-star-half:before { content: "\f089"; } +.icon-heart-empty:before { content: "\f08a"; } +.icon-signout:before { content: "\f08b"; } +.icon-linkedin-sign:before { content: "\f08c"; } +.icon-pushpin:before { content: "\f08d"; } +.icon-external-link:before { content: "\f08e"; } +.icon-signin:before { content: "\f090"; } +.icon-trophy:before { content: "\f091"; } +.icon-github-sign:before { content: "\f092"; } +.icon-upload-alt:before { content: "\f093"; } +.icon-lemon:before { content: "\f094"; } \ No newline at end of file diff --git a/sass/forms.scss b/sass/forms.scss new file mode 100644 index 0000000..767dfc9 --- /dev/null +++ b/sass/forms.scss @@ -0,0 +1,282 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Forms =================================================== */ + +form { +margin : 0 0 $baselineheight 0; + +fieldset { +margin-bottom : $baselineheight; +padding : 0; +border-width : 0; } + +legend { +display : block; +width : 100%; +margin-bottom : $baselineheight * 2; +*margin-left : -7px; +padding : 0; +color : $textcolor; +border : 0; +border-bottom : $inputborderwidth $inputborderstyle $inputborder; +white-space : normal; + +small { +@include font-size(14); +color : $lightgrey; } +} + +p { +margin-bottom : $baselineheight / 2; } + +ul { +list-style-type : none; +margin : 0 0 $baselineheight 0; +padding : 0; } + +br { +display : none; } +} + +label, +input, +button, +select, +textarea { +@include font-size(14); +vertical-align : baseline; +*vertical-align : middle; } + +input, +button, +select, +textarea { +font-family : $basefont; +@include box-sizing(border-box); } + +label { +display : block; +margin-bottom : $baseline / 8; +font-weight : bold; +color : $textcolor; +cursor : pointer; + +input, +textarea, +select { +display : block; } +} + +input, +textarea, +select { +display : inline-block; +width : 100%; +padding : 4px; +margin-bottom : $baselineheight / 4; +background-color : $inputbackground; +border : $inputborderwidth $inputborderstyle $inputborder; +color : $textcolor; + +&:hover { +border-color : $inputhover; } +} + +.input-mini { +width : 60px; } + +.input-small { +width : 90px; } + +input[type="image"], +input[type="checkbox"], +input[type="radio"] { +width : auto; +height : auto; +padding : 0; +margin : 3px 0; +*margin-top : 0; +line-height : normal; +cursor : pointer; +@include border-radius(0); +border : 0 \9; } + +input[type="checkbox"], +input[type="radio"] { +@include box-sizing(border-box); +padding : 0; +*width : 13px; +*height : 13px; } + +input[type="image"] { +border : 0; +@include box-shadow(none); } + +input[type="file"] { +width : auto; +padding : initial; +line-height : initial; +border : initial; +background-color : transparent; +background-color : initial; +@include box-shadow(none); } + +input[type="button"], +input[type="reset"], +input[type="submit"] { +width : auto; +height : auto; +cursor : pointer; +*overflow : visible; } + +select, +input[type="file"] { +height : 28px; +*margin-top : 4px; +line-height : 28px; } + +select { +width : auto; +background-color : $inputbackground; +@include font-size(13); } + +select[multiple], +select[size] { +height : auto; } + +textarea { +@include resize(vertical); +height : auto; +overflow : auto; +vertical-align : top; } + +input[type="hidden"] { +display : none; } + +.radio, +.checkbox { +padding-left : 18px; +font-weight : normal; } + +.radio input[type="radio"], +.checkbox input[type="checkbox"] { +float : left; +margin-left : -18px; } + +.radio.inline, +.checkbox.inline { +display : inline-block; +padding-top : 5px; +margin-bottom : 0; +vertical-align : middle; } + +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { +margin-left : 10px; } + +// disabled + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { +@include opacity(.5); +cursor : not-allowed; } + +// focus and active + +input:focus, +textarea:focus { +border-color : $inputfocus; +outline : 0; +outline : thin dotted \9; } + +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus, +select:focus { +@include box-shadow(none); } + +::-webkit-input-placeholder { +@include font-size(14); } + +input:-moz-placeholder { +@include font-size(14); } + +// help text + +.help-block, +.help-inline { +color : $grey; } + +.help-block { +display : block; +margin-bottom : $baselineheight / 2; } + +.help-inline { +display : inline-block; +vertical-align : middle; +padding-left : 5px; } + +// .form-inline + +.form-inline input, +.form-inline textarea, +.form-inline select { +display : inline-block; +margin-bottom : 0; } + +.form-inline label { +display : inline-block; } + +.form-inline .radio, +.form-inline .checkbox, +.form-inline .radio { +padding-left : 0; +margin-bottom : 0; +vertical-align : middle; } + +.form-inline .radio input[type="radio"], +.form-inline .checkbox input[type="checkbox"] { +float : left; +margin-left : 0; +margin-right : 3px; } + +// .form-search + +.form-search input, +.form-search textarea, +.form-search select { +display : inline-block; +margin-bottom : 0; } + +.form-search .search-query { +padding-left : 14px; +padding-right : 14px; +margin-bottom : 0; +@include border-radius(14px); } + +.form-search label { +display : inline-block; } + +.form-search .radio, +.form-search .checkbox, +.form-inline .radio { +padding-left : 0; +margin-bottom : 0; +vertical-align : middle; } + +.form-search .radio input[type="radio"], +.form-search .checkbox input[type="checkbox"] { +float : left; +margin-left : 0; +margin-right : 3px; } \ No newline at end of file diff --git a/sass/mixins.scss b/sass/mixins.scss new file mode 100644 index 0000000..ca99e59 --- /dev/null +++ b/sass/mixins.scss @@ -0,0 +1,69 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Mixins =================================================== */ + +// 1. ROOT ============================== +// 2. TYPOGRAPHY ============================== + +@mixin font-size($font-size:16){ +// $font-size : $font-size * $basefontsize; + $rem: ($font-size / 10); + font-size : $font-size * 1px; + font-size : #{$rem}rem; +} + + +// 3. COLOUR ============================== +// 4. TEXTURE ============================== + + +@mixin transition($transition) { +-webkit-transition : $transition; +-moz-transition : $transition; +-ms-transition : $transition; +-o-transition : $transition; +transition : $transition; } + + +// 5. ELEMENTS ============================== + +@mixin background-alpha($color: $white, $alpha: 1) { +background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); } + +// .resize(VALUE) (none, both, horizontal, vertical, inherit) + +@mixin resize($direction: both) { +resize : $direction; +overflow : auto; } + +// For image replacement + +@mixin hide-text() { +text-indent : 100%; +white-space : nowrap; +overflow : hidden; } + +// Hide from visual and speaking browsers + +@mixin hidden() { +display : none !important; +visibility : hidden; } + +// Hide but maintain layout + +@mixin invisible() { +visibility : hidden; } + + + +// 6. LAYOUT ============================== +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/modernizr.scss b/sass/modernizr.scss new file mode 100644 index 0000000..e0d11f8 --- /dev/null +++ b/sass/modernizr.scss @@ -0,0 +1,51 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Modernizr =================================================== */ + +/* audio */ +/* applicationcache */ +/* backgroundsize */ +/* borderimage */ +/* borderradius */ +/* boxshadow */ +/* canvas */ +/* canvastext */ +/* cssanimations */ +/* csscolumns */ +/* cssgradients */ +/* cssreflections */ +/* csstransforms */ +/* csstransforms3d */ +/* csstransitions */ +/* draganddrop */ +/* flexbox */ +/* fontface */ +/* geolocation */ +/* hashchange */ +/* history */ +/* hsla */ +/* indexeddb */ +/* inlinesvg */ +/* localstorage */ +/* multiplebgs */ +/* opacity */ +/* postmessage */ +/* rgba */ +/* sessionstorage */ +/* smil */ +/* svg */ +/* svgclippaths */ +/* textshadow */ +/* touch */ +/* video */ +/* webgl */ +/* websqldatabase */ +/* websockets */ +/* webworkers */ \ No newline at end of file diff --git a/sass/page.scss b/sass/page.scss new file mode 100644 index 0000000..c7d6c51 --- /dev/null +++ b/sass/page.scss @@ -0,0 +1,69 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Banner =================================================== */ + +[role="banner"] { +margin : 0 auto; +padding-top : $baselineheight; +width : 90%; + +a[href="#navigation"] { +display : block; +position : absolute; +top : 11px; +right : 22px; +width : 43px; +height : 43px; +white-space : nowrap; +overflow : hidden; +background-color : lighten($basecolor, 20%); +border : 1px solid lighten($basecolor, 15%); +@include border-radius(4px); +color : lighten($basecolor, 75%); +@include font-size(32); +line-height : 42px; +text-align : center; +text-decoration : none; } +} + +/* Navigation =================================================== */ + +[role="navigation"] { +margin : 0 auto $baselineheight; +width : 90%; +background-color : lighten($basecolor, 20%); +border : 1px solid lighten($basecolor, 15%); + +p { +margin-bottom : 0; +padding : 6px 11px; +color : $white; } + +a { +color : $white; } +} + +/* Content =================================================== */ + +.content { +margin : 0 auto; +width : 90%; } + +/* contentinfo =================================================== */ + +[role="contentinfo"] { +padding : $baselineheight 0; +border-top : 3px solid lighten($basecolor, 60%); + +small { +display : block; +margin : 0 auto $baselineheight; +width : 90%; } +} \ No newline at end of file diff --git a/sass/print.scss b/sass/print.scss new file mode 100644 index 0000000..e8544ac --- /dev/null +++ b/sass/print.scss @@ -0,0 +1,71 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Print =================================================== */ + +// 1. ROOT ============================== + +* { +background : transparent !important; +color : black !important; +box-shadow : none !important; +text-shadow : none !important; +filter : none !important; +-ms-filter : none !important; } + +@page { +margin : 0.5cm; } + +// 2. TYPOGRAPHY ============================== + +h2, h3 { +orphans : 3; +widows : 3; +page-break-after : avoid; } + +p { +orphans : 3; +widows : 3; } + +pre, blockquote { +border : 1px solid $grey; +page-break-inside : avoid; } + +abbr[title]:after { +content: " (" attr(title) ")"; } + +// 3. COLOUR ============================== + +a, a:visited { +text-decoration : underline; } + +a[href]:after { +content : " (" attr(href) ")"; } + +a[href^="javascript:"]:after, +a[href^="#"]:after { +content : ""; } + +// 4. TEXTURE ============================== + +img { +max-width : 100% !important; +page-break-inside : avoid; } + +thead { +display : table-header-group; } + +tr { +page-break-inside : avoid; } + +// 5. ELEMENTS ============================== +// 6. LAYOUT ============================== +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/reset.scss b/sass/reset.scss new file mode 100644 index 0000000..251119a --- /dev/null +++ b/sass/reset.scss @@ -0,0 +1,15 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Reset =================================================== */ + +html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin : 0; padding : 0; border : 0; outline : 0; font-size : 100%; +vertical-align : baseline; background : transparent; } + +article, aside, figure, footer, header, hgroup, nav, section { display : block; } \ No newline at end of file diff --git a/sass/site.scss b/sass/site.scss new file mode 100644 index 0000000..7c79568 --- /dev/null +++ b/sass/site.scss @@ -0,0 +1,39 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Page =================================================== */ + +// 1. ROOT ============================== + +html { +background : $bodycolor; +font-size : 62.5%; +-webkit-overflow-scrolling : touch; +-webkit-tap-highlight-color : lighten($basecolor, 75%); +-webkit-text-size-adjust : 100%; +-ms-text-size-adjust : 100%; } + +body { +margin : 0; +padding : 0; +width : 100%; +background-color : transparent; +font-family : $basefont; +@include font-size(); +line-height : $baselineheight; +color : $textcolor; } + +// 2. TYPOGRAPHY ============================== +// 3. COLOUR ============================== +// 4. TEXTURE ============================== +// 5. ELEMENTS ============================== +// 6. LAYOUT ============================== +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/tables.scss b/sass/tables.scss new file mode 100644 index 0000000..b550152 --- /dev/null +++ b/sass/tables.scss @@ -0,0 +1,90 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Tables =================================================== */ + +table { +width : 100%; +max-width : 100%; +margin-bottom : $baselineheight; +border-collapse : collapse; +border-spacing : 0; +background-color : $tablebackground; + +th, +td { +padding : 8px; +vertical-align : top; +border-top : $tableborderwidth $tableborderstyle $tableborder; +@include font-size(14); +line-height : $baselineheight; +text-align : left; } + +th { +font-weight : bold; } + +thead th { +vertical-align : bottom; } + +colgroup + thead tr:first-child th, +colgroup + thead tr:first-child td, +thead:first-child tr:first-child th, +thead:first-child tr:first-child td { +border-top : 0; } + +tbody + tbody { +border-top : $tableborderwidth * 2 $tableborderstyle $tableborder; } + +tbody tr td, +tbody tr th { +@include transition(background-color .25s 0 linear); } + +tbody tr:hover td, +tbody tr:hover th { +background-color : $tablehover; } +} + +// CONDENSED ==================================================== + +.table-condensed { + +th, +td { +padding : 4px 5px; } +} + +// BORDERED ==================================================== + +.table-bordered { +border : $tableborderwidth $tableborderstyle $tableborder; +border-left : 0; +border-collapse : separate; +*border-collapse : collapsed; + +th, +td { +border-left : $tableborderwidth $tableborderstyle $tableborder; } + +thead:first-child tr:first-child th, +tbody:first-child tr:first-child th, +tbody:first-child tr:first-child td { +border-top : 0; } +} + +// STRIPED ==================================================== + +.table-striped { + +tbody tr:nth-child(odd) td, +tbody tr:nth-child(odd) th { +background-color : $tablestripe; } +} + + + diff --git a/sass/texture.scss b/sass/texture.scss new file mode 100644 index 0000000..255d6d7 --- /dev/null +++ b/sass/texture.scss @@ -0,0 +1,194 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Texture =================================================== */ + +// ALERT ==================================================== + +// For more alert styles: +// http://twitter.github.com/bootstrap/components.html#alerts" +// https://github.com/twitter/bootstrap/blob/master/less/alerts.less" + + + + +.alert { +margin-bottom : $baselineheight; +padding : 8px 35px 8px 14px; +background-color : $alertcolor; +border : $alertborderwidth $alertborderstyle $alertbordercolor; +@include border-radius(2px); +font-family : $basefont; +@include font-size(14); +color : $alerttext; + +.alert-heading { +color : inherit; } + +.close { +position : relative; +top : -2px; +right : -21px; +float : right; +@include font-size(21); +font-weight : bold; +line-height : 18px; +color : inherit; } +} + +.alert-success { +background-color : $alertsuccesscolor; +border-color : $alertsuccessborder; +color : $alertsuccesstext; } + +.alert-warning { +background-color : $alertwarningcolor; +border-color : $alertwarningborder; +color : $alertwarningtext; } + +.alert-error { +background-color : $alerterrorcolor; +border-color : $alerterrorborder; +color : $alerterrortext; } + +.alert-inverse { +background-color : $alertinversecolor; +border-color : $alertinverseborder; +color : $alertinversetext; } + +// alert block + +.alert-block { +padding-top : 14px; +padding-bottom : 14px; + +.alert-heading { +margin-bottom : $baselineheight / 8; +font-size : inherit; +font-weight : bold; } + +> p, +> ul { +margin-bottom : 0; } + +p + p { +margin-top : 5px; } +} + +// BADGES ==================================================== + +.badge { +padding : 1px 9px 2px; +@include font-size(12); +font-weight : bold; +white-space : nowrap; +color : $badgecolor; +background-color : $badgebackground; +@include border-radius(9px); +@include transition(background-color .25s 0 linear); + +&:hover { +color : $badgecolor; +text-decoration : none; +cursor : pointer; } +} + +.badge-error { +background-color : $errorcolor; +color : $white; + +&:hover { +background-color : darken($errorcolor, 20%); +color : $white; } +} + +.badge-warning { +background-color : $warningcolor; +color : $white; + +&:hover { +background-color : darken($warningcolor, 20%); +color : $white; } +} + +.badge-success { +background-color : $successcolor; +color : $white; + +&:hover { +background-color : darken($successcolor, 20%); +color : $white; } +} + +.badge-info { +background-color : $infocolor; +color : darken($infocolor, 50%); + +&:hover { +background-color : darken($infocolor, 20%); } +} + +.badge-inverse { +background-color : $inverscolor; +color : $white; + +&:hover { +background-color : darken($inverscolor, 20%); +color : $white; } +} + +// GRADIENTS ==================================================== + +.greygrad { +@include background-image(linear-gradient($white, darken($lightergrey, 5%))); + } + +.basegrad { +@include background-image(linear-gradient($basecolor, darken($basecolor, 10%))); + } + +.infograd { +@include background-image(linear-gradient($infocolor, darken($infocolor, 10%))); +} + +.inversegrad { +@include background-image(linear-gradient($inverscolor, darken($inverscolor, 10%))); + } + +.successgrad { +@include background-image(linear-gradient($successcolor, darken($successcolor, 10%))); + } + +.warninggrad { +@include background-image(linear-gradient($warningcolor, darken($warningcolor, 10%))); + } + +// For additional gradients see: https://github.com/twitter/bootstrap/blob/master/less/mixins.less + +// WELL ==================================================== + +.well { +min-height : 21px; +padding : 11px; +margin-bottom : $baselineheight; +background-color : $wellbackground; +border : $wellborderwidth $wellborderstyle $wellbordercolor; +@include border-radius(4px); +@include box-shadow(inset 0 1px $wellshadowblur $wellshadow); + +p:last-child { +margin-bottom : 0; } +} + +.well-large { +padding : 22px; } + +.well-small { +padding : 6px; +@include border-radius(2px); } \ No newline at end of file diff --git a/sass/typography.scss b/sass/typography.scss new file mode 100644 index 0000000..52f98d0 --- /dev/null +++ b/sass/typography.scss @@ -0,0 +1,212 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Typography =================================================== */ + +// HEADINGS ==================================================== + +h1, +h2, +h3, +h4, +h5, +h6 { +margin : 0; +font-family : $baseheadingfont; +font-weight : $baseheadingfontweight; +color : $baseheadingfontcolor; +text-rendering : optimizelegibility; } + +h1 small, +h2 small { +font-weight : normal; +color : $lightgrey; } + +h1, +.h1 { +margin-bottom : $baselineheight / 2; +@include font-size(32); +line-height : 1.2; } + +h2, +.h2 { +margin-bottom : $baselineheight / 2; +@include font-size(24); +line-height : 1.2; } + +h3, +.h3 { +margin-bottom : $baselineheight / 1.5; +@include font-size(21); +line-height : 1.3; } + +h4, +.h4 { +margin-bottom : $baselineheight; +@include font-size(18); +line-height : 1.25; } + +h5, +.h5 { +@include font-size(16); +margin-bottom : $baselineheight; } + +h6, +.h6 { +margin-bottom : $baselineheight; +@include font-size(14); +font-weight : normal; +letter-spacing : 1px; +text-transform : uppercase; } + +// header + +.header h1, +.header h2, +.header h3 { +float : left; +margin-right : $gutterwidth; + +a { +display : block; +position : relative; +top : 6px; +float : right; +padding : 4px 12px; +@include font-size(14); +background-color : lighten($basecolor, 75%); } + +&:hover { +background-color : lighten($basecolor, 75%); } +} + +.header .a-rss, +.header .a-rss:hover { +float : left; +width : 16px; +height : 16px; +padding : 0; +background : transparent url(../img/a-rss.png) no-repeat 0 0; +@include hide-text; } + +// TYPOGRAPHY ==================================================== + +p, +ol, +ul, +dl, +address { +margin-bottom : $baselineheight; +@include font-size(14); +line-height : $baselineheight; } + +small { +@include font-size(14); } + +ul, +ol { +margin : 0 0 $baselineheight -$gutterwidth; +padding : 0 0 0 $gutterwidth; } + +li ul, +li ol { +margin : 0; +@include font-size(16); } + +// blockquote + +blockquote { +margin : 0 0 $baselineheight -$gutterwidth; +padding-left : $gutterwidth; +border-left : 2px solid $bordercolor; +font-family : $altfont; +font-style : normal; } + +q { +quotes : none; } + +blockquote:before, +blockquote:after, +q:before, +q:after { +content : ''; +content : none; } + +cite { +font-style : normal; } + +// definition lists + +dl, +dd { +margin-bottom : $baselineheight; } + +dt { +font-weight : bold; } + +.dl-horizontal { + +dt { +float : left; +clear : left; +width : 20.25%; +text-align : right; } + +dd { +margin-left : 22.78%; } +} + +// text-level + +abbr[title] { +border-bottom : 1px dotted $bordercolor; +cursor : help; } + +b, strong { +font-weight : bold; } + +dfn { +font-style : italic; } + +ins { +background-color : lighten($basecolor, 75%); +color : $textcolor; +text-decoration : none; } + +mark { +background-color : lighten($basecolor, 75%); +color : $textcolor; +font-style : italic; +font-weight : bold; } + +pre, +code, +kbd, +samp { +font-family : $codefont; +@include font-size(14); +line-height : $baselineheight; } + +pre { +white-space : pre; +white-space : pre-wrap; +word-wrap : break-word; } + +sub, +sup { +position : relative; +@include font-size(12); +line-height : 0; +vertical-align : baselineheight; } + +sup { +top : -.5em; } + +sub { +bottom : -.25em; } \ No newline at end of file diff --git a/sass/upstarts/320andup-modules/example.html b/sass/upstarts/320andup-modules/example.html new file mode 100644 index 0000000..87abbb7 --- /dev/null +++ b/sass/upstarts/320andup-modules/example.html @@ -0,0 +1,167 @@ + + + + + + + + + + + + + + + + + +Modules example | Upstart | 320 and Up + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Modules

+ + +
+

Two

+ +
+
+ +
Figcaption
+
+

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.

+
+ +
+
+ +
Figcaption
+
+

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.

+
+
+ + + +
+

Three

+ +
+
+ +
Figcaption
+
+

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.

+
+ +
+
+ +
Figcaption
+
+

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.

+
+
+
+ +
Figcaption
+
+

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.

+
+
+ + +
+

Four

+ +
+
+ +
Figcaption
+
+

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.

+
+ +
+
+ +
Figcaption
+
+

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.

+
+ +
+
+ +
Figcaption
+
+

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.

+
+ +
+
+ +
Figcaption
+
+

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.

+
+
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/sass/upstarts/320andup-modules/index.html b/sass/upstarts/320andup-modules/index.html new file mode 100644 index 0000000..8c2a79a --- /dev/null +++ b/sass/upstarts/320andup-modules/index.html @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + +Modules | Upstart | 320 and Up + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+

Two columns

+ +
+

ALorem ipsum dolor sit amet, consectetur adipisicing elit.

+

BLorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+ +
+

ALorem ipsum dolor sit amet, consectetur adipisicing elit.

+

BLorem ipsum dolor sit amet, consectetur adipisicing elit.

+
+
+ + + +
+

Three columns

+ +
+

ALorem ipsum dolor sit amet, consectetur adipisicing elit.

+

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

+
+ +
+

ALorem ipsum dolor sit amet, consectetur adipisicing elit.

+

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

+
+ +
+

ALorem ipsum dolor sit amet, consectetur adipisicing elit.

+

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

+
+
+ + +
+

Four columns

+ +
+

ALorem ipsum dolor sit amet.

+

BLorem ipsum dolor sit amet.

+
+ +
+

ALorem ipsum dolor sit amet.

+

BLorem ipsum dolor sit amet.

+
+ +
+

ALorem ipsum dolor sit amet.

+

BLorem ipsum dolor sit amet.

+
+ +
+

ALorem ipsum dolor sit amet.

+

BLorem ipsum dolor sit amet.

+
+
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/sass/upstarts/320andup-modules/upstart.scss b/sass/upstarts/320andup-modules/upstart.scss new file mode 100644 index 0000000..8834882 --- /dev/null +++ b/sass/upstarts/320andup-modules/upstart.scss @@ -0,0 +1,128 @@ +// ========================================================== + +/* 320 and Up */ +/* Modules upstart */ +/* Version: 1.0 */ +/* Author: Andy Clarke */ +/* URL: http://stuffandnonsense.co.uk/projects/320andup */ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +.grid { +margin-bottom : $baseline; +border-bottom : 1px dashed lighten($basecolor, 60%); } + +.grid:last-child { +margin-bottom : 0; +border-bottom-width : 0; } + +.furniture-letter { +overflow : hidden; } + +.furniture-letter span { +display : block; +float : left; +margin : 0 12px 0 0; +height : 44px; +width : 44px; +background-color : $basecolor; +color : $white; +@include font-size(32); +font-weight : bold; +line-height : 44px; +text-align : center; } + +// 480px +@media only screen and (min-width: 480px) { +/* Styles */ +} + +// 600px +@media only screen and (min-width: 600px) { +/* Styles */ +} + +// 768px +@media only screen and (min-width: 768px) { + +// .grids-two + +.grids-two .grid { +width : 43.03%; +margin-bottom : 0; +border-bottom-width : 0; } + +.grids-two .grid-1 { +float : left; } + +.grids-two .grid-2 { +float : right; } + +// grids-three + +.grids-three .grid-a { +float : left; +width : 31.64%; +margin-right : 2.53%; } + +// grids-four + +.grids-four .grid-a { +float : left; +width : 31.64%; +margin-right : 2.53%; } + +} + +// 992px +@media only screen and (min-width: 992px) { + +// grids-three + +.grids-three .grid { +float : left; +width : 31.64%; +margin : 0 2.53% 0 0; +border-bottom-width : 0; } + +.grids-three .grid-3 { +float : right; +margin-right : 0; } + +.grids-three .grid .grid-a { +float : none; +width : 100%; +margin-right : 0; +margin-bottom : $baseline / 2; } + +// grids-four + +.grids-four .grid { +float : left; +width : 20.25%; +margin : 0 6.32% 0 0; +border-bottom-width : 0; } + +.grids-four .grid-4 { +float : right; +margin-right : 0; } + +.grids-four .grid .grid-a { +float : none; +width : 100%; +margin-right : 0; } + +} + +// 1382px +@media only screen and (min-width: 1382px) { +/* Styles */ +} + +// 2x +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), +only screen and (min--moz-device-pixel-ratio: 1.5), +only screen and (min-device-pixel-ratio: 1.5) { +/* Styles */ +} \ No newline at end of file diff --git a/sass/upstarts/320andup-panels/index.html b/sass/upstarts/320andup-panels/index.html new file mode 100644 index 0000000..0e7b377 --- /dev/null +++ b/sass/upstarts/320andup-panels/index.html @@ -0,0 +1,218 @@ + + + + + + + + + + + + + + + + + +Panels Upstart | 320 and Up + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+

Heading

+Link +
+ +
+

+

Lorem ipsum dolor

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+

+

Lorem ipsum dolor

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+

+

Lorem ipsum dolor

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+ + + +
+ +
+ +
+
+ +
Figcaption
+
+

Entry title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+ +
Figcaption
+
+

Entry title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+ +
Figcaption
+
+

Entry title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+ +
+
+ + + +
+ +
+ +
+

Heading

+Link +
+ +
+

+

Lorem ipsum dolor

+ +
+ +
+

+

Lorem ipsum dolor

+ +
+ +
+

+

Lorem ipsum dolor

+ +
+ +
+

+

Lorem ipsum dolor

+ +
+ +
+
+ + + +
+ +
+ +
+

Heading

+Link +
+ +
+

+

Entry title

+ +
+ +
+

+

Entry title

+ +
+ +
+

+

Entry title

+ +
+ +
+

+

Entry title

+ +
+ +
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/sass/upstarts/320andup-panels/upstart.scss b/sass/upstarts/320andup-panels/upstart.scss new file mode 100644 index 0000000..654a1fa --- /dev/null +++ b/sass/upstarts/320andup-panels/upstart.scss @@ -0,0 +1,70 @@ +// ========================================================== + +/* 320 and Up */ +/* Panels Upstart */ +/* Version: 1.0 */ +/* Author: Andy Clarke */ +/* URL: http://stuffandnonsense.co.uk/projects/320andup */ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// HEADS UP: 320 and Up Panels Upstart is dependent on +// grid styles from Modules Upstart. If you’re importing it +// you’re ready to go. Otherwise, import it or copy and paste +// its styles here. + +// ========================================================== + +// Full width panel containers + +.full { +margin-bottom : $baseline; +padding : $baseline; +background-color : lighten($basecolor, 75%); +border-top : 2px solid lighten($basecolor, 60%); +border-bottom : 2px solid lighten($basecolor, 60%); } + +.full .grids { +width : 90%; +margin : 0 auto; +padding : $baseline 0; } + +// 480px +@media only screen and (min-width: 480px) { +/* Styles */ +} + +// 600px +@media only screen and (min-width: 600px) { +/* Styles */ +} + +// 768px +@media only screen and (min-width: 768px) { + +// Extra wide grid units +.special .grids-three .grid-a, +.special .grids-four .grid-a { +width : 43.03%; } + +} + +// 992px +@media only screen and (min-width: 992px) { + +// Extra wide grid units +.special .grids-three .grid-a, +.special .grids-four .grid-a { +width : 100%; } +} + +// 1382px +@media only screen and (min-width: 1382px) { +/* Styles */ +} + +// 2x +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), +only screen and (min--moz-device-pixel-ratio: 1.5), +only screen and (min-device-pixel-ratio: 1.5) { +/* Styles */ +} \ No newline at end of file diff --git a/sass/variables.scss b/sass/variables.scss new file mode 100644 index 0000000..0138b36 --- /dev/null +++ b/sass/variables.scss @@ -0,0 +1,148 @@ +// ========================================================== + +// 320 and Up by Andy Clarke +// Version: 3.0 +// URL: http://stuffandnonsense.co.uk/projects/320andup/ +// Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 + +// ========================================================== + +/* Variables =================================================== */ + +// 1. ROOT ============================== + +$black : rgb(0,0,0); +$white : rgb(255,255,255); + +$bodycolor : $white; +$textcolor : black; + +// 2. TYPOGRAPHY ============================== + +$basefont : "Helvetica Neue", Helvetica, Arial, sans-serif; +$basefontsize : 16; +$baselineheight : 1.5em; +$baseheadingfont : inherit; +$baseheadingfontweight : bold; +$baseheadingfontcolor : inherit; + +$altfont : Cambria, Georgia, Times, "Times New Roman"; +$altlineheight : 1.35em; + +$codefont : Monaco, Courier New, monospace; + +// 3. COLOUR ============================== + +$basecolor : rgb(45,53,62); +$compcolor : spin($basecolor, 180); +$bordercolor : lighten($basecolor, 60%); + +// Links + +$linkcolor : rgb(1,53,104); +$linkcolorhover : darken($linkcolor, 10); +$linkcolorvisited : darken($linkcolorhover, 10); +$linkcolorfocus : darken($linkcolorvisited, 10); + +// greyscale + +$black : rgb(0,0,0); +$darkgrey : lighten($black, 25%); +$grey : lighten($black, 50%); +$lightgrey : lighten($black, 75%); +$lightergrey : lighten($black, 90%); +$white : rgb(255,255,255); + +// colour palettes + +$alertcolor : rgb(252,248,227); +$errorcolor : rgb(218,79,73); +$infocolor : rgb(217,237,247); +$inverscolor : rgb(65,65,65); +$successcolor : rgb(91,183,91); +$warningcolor : rgb(250,167,50); + +// 4. TEXTURE ============================== + +// alert + +$alertbordercolor : darken($alertcolor, 20%); +$alertborderwidth : 1px; +$alertborderstyle : solid; +$alerttext : darken($alertcolor, 60%); + +// alert-error +$alerterrorcolor : lighten($errorcolor, 30%); +$alerterrorborder : lighten($errorcolor, 20%); +$alerterrortext : $errorcolor; + +// alert-info +$alertinfocolor : $infocolor; +$alertinfoborder : lighten($infocolor, 20%); +$alertinfotext : darken($infocolor, 50%); + +// alert-inverse +$alertinversecolor : $inverscolor; +$alertinverseborder : $black; +$alertinversetext : $white; + +// alert-success +$alertsuccesscolor : lighten($successcolor, 30%); +$alertsuccessborder : lighten($successcolor, 20%); +$alertsuccesstext : darken($successcolor, 20%); + +// alert-warning +$alertwarningcolor : lighten($warningcolor, 30%); +$alertwarningborder : lighten($warningcolor, 20%); +$alertwarningtext : darken($warningcolor, 20%); + +// badges + +$badgebackground : $lightergrey; +$badgecolor : $grey; + +// buttons + +$buttonbackground : $lightergrey; +$buttonbordercolor : darken($buttonbackground, 10%); +$buttonbottombordercolor : darken($buttonbordercolor, 10%); +$buttoncolor : $darkgrey; +$buttonborderwidth : 1px; +$buttonborderstyle : solid; + +// boxes (well) + +$wellbackground : lighten($basecolor, 75%); +$wellbordercolor : darken($wellbackground, 20%); +$wellborderwidth : 1px; +$wellborderstyle : solid; +$wellshadow : darken($wellbackground, 10%); +$wellshadowblur : 10px; + +// tables + +$tablebackground : transparent; +$tablestripe : lighten($basecolor, 60%); +$tablehover : lighten($basecolor, 50%); +$tableborder : lighten($basecolor, 40%); +$tableborderwidth : 1px; +$tableborderstyle : solid; + +// forms + +$inputbackground : $white; +$inputborder : lighten($basecolor, 40%); +$inputborderwidth : 1px; +$inputborderstyle : solid; +$inputhover : lighten($basecolor, 20%); +$inputfocus : $basecolor, 40%; +$placeholdercolor : $lightgrey; + +// 6. LAYOUT ============================== + +$baseline : $baselineheight; +$gutterwidth : 24px; + +// 7. VENDOR-SPECIFIC ============================== +// 8. MODERNIZR ============================== +// 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file From 089f0f3f933fe11cba91116622e7bae8ce3e7465 Mon Sep 17 00:00:00 2001 From: Jairus Khan Date: Tue, 8 May 2012 11:02:46 -0400 Subject: [PATCH 2/3] updated mixins --- sass/320andup.scss | 7 ++- sass/mixins.scss | 138 +++++++++++++++++++++++++++++++++++-------- sass/typography.scss | 4 +- 3 files changed, 121 insertions(+), 28 deletions(-) diff --git a/sass/320andup.scss b/sass/320andup.scss index 5e442a0..ede851e 100644 --- a/sass/320andup.scss +++ b/sass/320andup.scss @@ -10,7 +10,10 @@ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 // 1. ROOT ============================== // CSS reset -@import "reset.scss"; +@import "reset.scss"; + +// Compass +@import "compass"; // Variables and mixins @import "variables.scss"; @@ -60,7 +63,7 @@ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 // 8. MODERNIZR ============================== @import "modernizr.scss"; - + // 9. TEMPLATE SPECIFICS ============================== // 10. MEDIA QUERIES ============================== diff --git a/sass/mixins.scss b/sass/mixins.scss index ca99e59..27dbd8a 100644 --- a/sass/mixins.scss +++ b/sass/mixins.scss @@ -7,63 +7,153 @@ // ========================================================== +// Many of the 320 and up LESS mixins have been deprecated because they duplicate existing Compass mixins. + /* Mixins =================================================== */ // 1. ROOT ============================== // 2. TYPOGRAPHY ============================== @mixin font-size($font-size:16){ -// $font-size : $font-size * $basefontsize; - $rem: ($font-size / 10); - font-size : $font-size * 1px; - font-size : #{$rem}rem; +$rem: ($font-size / 10); +font-size : $font-size * 1px; +font-size : #{$rem}rem; } +// .text-overflow deprecated for @include ellipsis(); // 3. COLOUR ============================== // 4. TEXTURE ============================== +// gradients + +// .horizontal deprecated for @include background-image(linear-gradient(left, $startColor, $endColor)); + +// .vertical deprecated for @include background-image(linear-gradient(top, $startColor, $endColor)); + +// .directional deprecated for @include background-image(linear-gradient($deg, $startColor, $endColor)); + +// @include bordered(COLOR, COLOR, COLOR, COLOR); + +@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) { +border-top : solid 1px $top-color; +border-left : solid 1px $left-color; +border-right : solid 1px $right-color; +border-bottom : solid 1px $bottom-color; } + +// .rounded deprecated for @include border-radius(); + +// .border-radius deprecated for @include border-radius(); + +// @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) -@mixin transition($transition) { --webkit-transition : $transition; --moz-transition : $transition; --ms-transition : $transition; --o-transition : $transition; -transition : $transition; } +@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { +-webkit-box-shadow : $shadow; +-moz-box-shadow : $shadow; +box-shadow : $shadow; } +// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); + +@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) { +-webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); +-moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); +box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); } + +// .opacity deprecated for @include opacity(); + +// .rotate deprecated for @include rotate(); + +// .scale deprecated for @include scale(); + +// .skew deprecated for @include skew(); + +// .transition deprecated for @include single-transition(): + +// .translate deprecated for @include translate(); + +// .translate3d deprecated for @include translate3d(); // 5. ELEMENTS ============================== +// @include background-alpha(VALUE VALUE); + @mixin background-alpha($color: $white, $alpha: 1) { background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); } -// .resize(VALUE) (none, both, horizontal, vertical, inherit) +// .background-size deprecated for @include background-size(); + +// .background-clip deprecated for @include background-clip(); + +// .box-sizing deprecated for @include box-sixing(); + +// Chrome Frame + +@mixin chromeframe() { +margin : .2em 0; +background : $lightgrey; +color : $black; +padding : .2em 0; } + +// Contain floats + +// .clearfix deprecated for @include clearfix; mixin included here for compatibility with 320andup template elements with 'clearfix' class + +div.clearfix { +@include clearfix; + } + +// For image replacement + +// .hide-text deprecated for @include hide-text; + +// @include resize(VALUE) (none, both, horizontal, vertical, inherit) @mixin resize($direction: both) { resize : $direction; overflow : auto; } -// For image replacement +// .userselect deprecated for @include user-select(); -@mixin hide-text() { -text-indent : 100%; -white-space : nowrap; -overflow : hidden; } +// Hidden but available to speaking browsers -// Hide from visual and speaking browsers +@mixin visuallyhidden { +overflow : hidden; +position : absolute; +clip : rect(0 0 0 0); +height : 1px; +width : 1px; +margin : -1px; +padding : 0; +border : 0; } -@mixin hidden() { -display : none !important; -visibility : hidden; } +.visuallyhidden { @include visuallyhidden; } -// Hide but maintain layout +// Make visuallyhidden focusable with a keyboard -@mixin invisible() { -visibility : hidden; } +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { +position : static; +clip : auto; +height : auto; +width : auto; +margin : 0; +overflow: visible; } +// 6. LAYOUT ============================== +// @include columns(250px, 0, 24px, COLOR, solid, 1px) + +@mixin columns($colwidth: 250px, $colcount: 0, $colgap: 50px, $columnRuleColor: #eee, $columnRuleStyle: solid, $columnRuleWidth: 1px) { + +@include column-width($colwidth); +@include column-count ($colcount); +@include column-gap($colgap); +@include column-rule-color($columnRuleColor); +@include column-rule-style($columnRuleStyle); +@include column-rule-width($columnRuleWidth); + +} -// 6. LAYOUT ============================== // 7. VENDOR-SPECIFIC ============================== // 8. MODERNIZR ============================== // 9. TEMPLATE SPECIFICS ============================== \ No newline at end of file diff --git a/sass/typography.scss b/sass/typography.scss index 52f98d0..6b2a0eb 100644 --- a/sass/typography.scss +++ b/sass/typography.scss @@ -111,7 +111,7 @@ small { ul, ol { -margin : 0 0 $baselineheight -$gutterwidth; +margin : 0 0 $baselineheight -#{$gutterwidth}; padding : 0 0 0 $gutterwidth; } li ul, @@ -122,7 +122,7 @@ margin : 0; // blockquote blockquote { -margin : 0 0 $baselineheight -$gutterwidth; +margin : 0 0 $baselineheight -#{$gutterwidth}; padding-left : $gutterwidth; border-left : 2px solid $bordercolor; font-family : $altfont; From 2a095541a417fbf320199bef136e9e3ff9798d4b Mon Sep 17 00:00:00 2001 From: Jairus Khan Date: Tue, 8 May 2012 11:08:36 -0400 Subject: [PATCH 3/3] updated mixins --- sass/320andup.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/320andup.scss b/sass/320andup.scss index ede851e..febc069 100644 --- a/sass/320andup.scss +++ b/sass/320andup.scss @@ -12,7 +12,7 @@ Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 // CSS reset @import "reset.scss"; -// Compass +// Import Compass Core Framework (http://compass-style.org) @import "compass"; // Variables and mixins