Congegni
/
barebones
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactoring base SASS

This commit is contained in:
Mike Francis 2013-01-01 18:57:43 +00:00
parent b1534b9a0d
commit a50d913cc4
5 changed files with 53 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
_/scss/_base.scss
View File

@ -1,93 +0,0 @@
// Yaho YUI Reset
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, dfn, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: bold;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
// Normalisation
html {
background-color: $bodyBackgroundColour;
color: $color;
font-family: $baseFontStack;
font-size: ($baseFontSize / 16) * 1em;
line-height: $baseLineHeight;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
margin-bottom: $marginBottom * 1px;
}
ul ul, ol ol {
margin-bottom: 0;
}
h1 {
font-size: ($h1FontSize / $baseFontSize) * 1em;
line-height: ($marginBottom / $h1FontSize ) * 1em;
}
h2 {
font-size: ($h2FontSize / $baseFontSize) * 1em;
line-height: ($marginBottom / $h2FontSize ) * 1em;
}
h3 {
font-size: ($h3FontSize / $baseFontSize) * 1em;
line-height: ($marginBottom / $h3FontSize ) * 1em;
}
h4 {
font-size: ($h4FontSize / $baseFontSize) * 1em;
line-height: ($marginBottom / $h4FontSize ) * 1em;
}
h5 {
font-size: ($h5FontSize / $baseFontSize) * 1em;
line-height: ($marginBottom / $h5FontSize ) * 1em;
}
h6 {
font-size: ($h6FontSize / $baseFontSize) * 1em;
line-height: ($marginBottom / $h6FontSize ) * 1em;
}
ul, ol {
margin-left: $listMarginLeft * 1px;
}
a {
text-decoration: none;
}

35
_/scss/_reset.scss Normal file
View File

@ -0,0 +1,35 @@
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, dfn, th, var {
font-style: normal;
font-weight: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: bold;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}

4
_/scss/_variables.scss
View File

@ -1,6 +1,6 @@
// Base // Base
$color: #222; $color: #333;
$bodyBackgroundColour: #fff; $bodyBackgroundColour: #fff;
$baseFontStack: 'Helvetica Neue', Helvetica, Arial, sans-serif; $baseFontStack: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@ -21,7 +21,7 @@ $listMarginLeft: 24;
// Scaffolding // Scaffolding
$containerWidth: 1200; $containerWidth: 940;
$containerPadding: 40; $containerPadding: 40;
$columnGutter: 20; $columnGutter: 20;
$columnCount: 12; $columnCount: 12;

3
_/scss/style.scss
View File

@ -11,7 +11,8 @@ Author: Mike Francis
// Base // Base
@import "base"; @import "reset";
@import "normalise";
// Main // Main

30
style.css
View File

@ -19,7 +19,7 @@ q:before, q:after { content: ''; }
abbr, acronym { border: 0; } abbr, acronym { border: 0; }
html { background-color: white; color: #222222; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.875em; line-height: 1.5; } html { background-color: white; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.875em; line-height: 1.5; }
h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset { margin-bottom: 21px; } h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset { margin-bottom: 21px; }
@ -39,8 +39,6 @@ h6 { font-size: 1.14286em; line-height: 1.3125em; }
ul, ol { margin-left: 24px; } ul, ol { margin-left: 24px; }
a { text-decoration: none; }
.alignleft { float: left; } .alignleft { float: left; }
img.alignleft { margin-right: 20px; } img.alignleft { margin-right: 20px; }
@ -51,7 +49,7 @@ img.alignright { margin-left: 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; } .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.container { width: 1200px; margin-left: auto; margin-right: auto; padding: 0 40px; } .container { width: 940px; margin-left: auto; margin-right: auto; padding: 0 40px; }
@media (max-width: 767px) { .container { width: auto; } } @media (max-width: 767px) { .container { width: auto; } }
@media (max-width: 767px) { .container-fluid { padding: 0; } } @media (max-width: 767px) { .container-fluid { padding: 0; } }
@ -69,29 +67,29 @@ img.alignright { margin-left: 20px; }
.col img { width: 100%; } .col img { width: 100%; }
@media (max-width: 767px) { .col { display: block; float: none; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } } @media (max-width: 767px) { .col { display: block; float: none; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }
.col1 { width: 81.66667px; } .col1 { width: 60px; }
.col2 { width: 183.33333px; } .col2 { width: 140px; }
.col3 { width: 285px; } .col3 { width: 220px; }
.col4 { width: 386.66667px; } .col4 { width: 300px; }
.col5 { width: 488.33333px; } .col5 { width: 380px; }
.col6 { width: 590px; } .col6 { width: 460px; }
.col7 { width: 691.66667px; } .col7 { width: 540px; }
.col8 { width: 793.33333px; } .col8 { width: 620px; }
.col9 { width: 895px; } .col9 { width: 700px; }
.col10 { width: 996.66667px; } .col10 { width: 780px; }
.col11 { width: 1098.33333px; } .col11 { width: 860px; }
.col12 { width: 1200px; } .col12 { width: 940px; }
.nav { list-style: none; margin-left: 0; } .nav { list-style: none; margin-left: 0; }