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

Dropped IE7

This commit is contained in:
Mike Francis 2014-02-03 22:10:54 +00:00
parent 06a3717c3b
commit aa573e574c
12 changed files with 60 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
.sass-cache/*
node_modules/*
css/example.css

2
Gruntfile.js
View File

@ -21,7 +21,7 @@ module.exports = function(grunt) {
},
watch: {
css: {
files: ['css/*.scss'],
files: ['css/*.scss', 'css/*/*.scss'],
tasks: ['sass']
}
}

14
css/_vars.scss
View File

@ -1,12 +1,12 @@
// Base
$base-colour: #333;
$base-colour: #444;
$base-background-colour: #fff;
$base-font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$base-font-size: 14;
$base-font-size: 16;
$base-line-height: 1.5;
$base-margin-bottom: ($base-font-size * $base-line-height);
$base-margin-bottom: $base-font-size * $base-line-height;
$h1-font-size: 28;
$h2-font-size: 24;
@ -19,20 +19,12 @@ $h6-font-size: 16;
$mobile: 640px;
// Lists
$list-margin-left: 24;
// Scaffolding
$container-max-width: 960;
$column-count: 12;
$column-gutter: 20;
// Tables
$table-border-colour: #ddd;
// Forms
$input-border: solid 1px #ccc;
$input-background: #fff;

16
css/generic/_mixins.scss
View File

@ -1,13 +1,15 @@
@mixin media($size) {
@media screen and (max-width: $size) { @content; }
@media screen and (max-width: $size) {
@content;
}
}
@function calculate-rem($size) {
$remSize: $size / $base-font-size;
@return #{$remSize}rem;
@function calculate-rem($px, $base: $base-font-size) {
$rem: $px / $base;
@return #{$rem}rem;
}
@mixin font-size($size) {
font-size: $size + px;
font-size: calculate-rem($size);
@mixin font-size($px) {
font-size: $px + px;
font-size: calculate-rem($px);
}

29
css/generic/_normalise.scss
View File

@ -1,17 +1,15 @@
html {
background-color: $base-background-colour;
color: $base-colour;
font-size: 62.5%;
font: #{($base-font-size * 6.25) * 1%}/#{$base-line-height} $base-font-stack;
}
body {
//font: #{(($base-font-size / 16) * 1em)}/#{$base-line-height} $base-font-stack;
font-family: $base-font-stack;
@include font-size($base-font-size);
line-height: $base-line-height;
a {
color: $base-colour;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
h1, h2, h3, h4, h5, h6, p, ul, ol {
margin-bottom: $base-margin-bottom * 1px;
}
@ -20,32 +18,27 @@ h1 {
}
h2 {
font-size: ($h2-font-size / $base-font-size) * 1em;
line-height: ($base-margin-bottom / $h2-font-size ) * 1em;
@include font-size($h2-font-size);
}
h3 {
font-size: ($h3-font-size / $base-font-size) * 1em;
line-height: ($base-margin-bottom / $h3-font-size ) * 1em;
@include font-size($h3-font-size);
}
h4 {
font-size: ($h4-font-size / $base-font-size) * 1em;
line-height: ($base-margin-bottom / $h4-font-size ) * 1em;
@include font-size($h4-font-size);
}
h5 {
font-size: ($h5-font-size / $base-font-size) * 1em;
line-height: ($base-margin-bottom / $h5-font-size ) * 1em;
@include font-size($h5-font-size);
}
h6 {
font-size: ($h6-font-size / $base-font-size) * 1em;
line-height: ($base-margin-bottom / $h6-font-size ) * 1em;
@include font-size($h6-font-size);
}
ul, ol {
margin-left: $list-margin-left * 1px;
margin-left: $base-margin-bottom * 1px;
}
ul ul, ol ol {

19
css/generic/_reset.scss
View File

@ -1,4 +1,8 @@
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{
* {
border: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
@ -8,8 +12,9 @@ table {
border-spacing: 0;
}
fieldset, img {
border: 0;
th {
font-weight: bold;
text-align: left;
}
address, caption, cite, dfn, th, var {
@ -17,10 +22,6 @@ address, caption, cite, dfn, th, var {
font-weight: normal;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: bold;
@ -29,7 +30,3 @@ h1, h2, h3, h4, h5, h6 {
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}

39
css/objects/_forms.scss
View File

@ -1,45 +1,48 @@
input, select, textarea {
display: inline-block;
font: inherit;
line-height: $base-margin-bottom + px;
padding: 4px 8px;
color: $base-colour;
input,
select,
textarea {
background: $input-background;
border: $input-border;
color: $base-colour;
display: inline-block;
font: inherit;
line-height: $base-margin-bottom * 1px;
padding: ($base-margin-bottom / 4) ($base-margin-bottom / 2);
width: 208px;
}
input[type="checkbox"],
input[type="radio"] {
background: transparent;
border: 0;
width: auto;
}
textarea {
min-height: ($base-margin-bottom * 4) + px;
min-height: ($base-margin-bottom * 4) * 1px;
}
.form__group {
margin-bottom: $base-margin-bottom + px;
margin-bottom: $base-margin-bottom * 1px;
}
.form__label {
float: left;
width: 140px;
font-weight: bold;
}
.form__controls {
margin-left: 160px;
@extend .clearfix;
}
.checkbox input {
width: auto;
}
.btn {
background: $btn-background;
border: $btn-border;
color: $btn-color;
cursor: pointer;
display: inline-block;
line-height: ($base-margin-bottom * 2) + px;
height: ($base-margin-bottom * 2) + px;
padding: 0 20px;
line-height: ($base-margin-bottom * 2) * 1px;
height: ($base-margin-bottom * 2) * 1px;
padding: 0 $base-margin-bottom;
width: auto;
&:hover {
background: $btn-background-hover;

3
css/objects/_nav.scss
View File

@ -1,9 +1,8 @@
.nav {
list-style: none;
margin-left: 0;
margin: 0;
>li {
display: inline-block;
*display: inline;
>a {
display: block;
}

2
css/objects/_scaffolding.scss
View File

@ -33,7 +33,7 @@
}
@for $i from 1 through $column-count {
.column-span-#{$i} {
.col-span-#{$i} {
width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) * 1%;
*width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) - .02 * 1%;
}

21
css/objects/_tables.scss
View File

@ -1,21 +0,0 @@
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
text-align: left;
vertical-align: top;
border-top: 1px solid $table-border-colour;
padding: ($base-margin-bottom / 2) * 1px 10px;
}
.table th {
font-weight: bold;
border-top: 0;
}
.table thead th {
vertical-align: bottom;
}

2
css/style.scss
View File

@ -19,5 +19,5 @@ Author: Mike Francis
@import 'objects/forms';
@import 'objects/scaffolding';
@import 'objects/scaffolding';
@import 'objects/nav';
@import 'objects/tables';

2
style.css
View File

File diff suppressed because one or more lines are too long