Merge branch 'master' of https://github.com/mikefrancis/barebones
This commit is contained in:
parent
fe9771f0c6
commit
eff0fcae54
12 changed files with 0 additions and 0 deletions
57
scss/generic/_mixins.scss
Executable file
57
scss/generic/_mixins.scss
Executable file
|
@ -0,0 +1,57 @@
|
|||
@mixin breakpoint($point) {
|
||||
@if $point == mobile {
|
||||
@media screen and (max-width: 640px) { @content; }
|
||||
}
|
||||
@else if $point == tablet-portrait {
|
||||
@media screen and (max-width: 768px) { @content; }
|
||||
}
|
||||
@else if $point == tablet-landscape {
|
||||
@media screen and (max-width: 1024px) { @content; }
|
||||
}
|
||||
@else if $point == desktop {
|
||||
@media screen and (max-width: 1200px) { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-radius ($radius: 5px) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-o-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin box-sizing ($box-model: 'border-box') {
|
||||
-webkit-box-sizing: $box-model;
|
||||
-moz-box-sizing: $box-model;
|
||||
box-sizing: $box-model;
|
||||
}
|
||||
|
||||
@mixin box-shadow($x-axis: 0, $y-axis: 2px, $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);
|
||||
}
|
||||
|
||||
@mixin transition($duration:0.2s, $ease:ease-out) {
|
||||
-webkit-transition: all $duration $ease;
|
||||
-moz-transition: all $duration $ease;
|
||||
transition: all $duration $ease;
|
||||
}
|
||||
|
||||
@mixin gradient($from, $to) {
|
||||
background-color: $from;
|
||||
background-image: -webkit-linear-gradient($from, $to);
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
|
||||
background-image: -moz-linear-gradient($from, $to);
|
||||
background-image: -o-linear-gradient($from, $to);
|
||||
}
|
||||
|
||||
@function calculate-rem($size) {
|
||||
$remSize: $size / 10;
|
||||
@return #{$remSize}rem;
|
||||
}
|
||||
|
||||
@mixin font-size($size) {
|
||||
font-size: $size + px; //Fallback in px
|
||||
font-size: calculate-rem($size);
|
||||
}
|
59
scss/generic/_normalise.scss
Executable file
59
scss/generic/_normalise.scss
Executable file
|
@ -0,0 +1,59 @@
|
|||
html {
|
||||
background-color: $base-background-colour;
|
||||
color: $base-colour;
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
|
||||
margin-bottom: $base-margin-bottom * 1px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font-size($h1-font-size);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: ($h2-font-size / $base-font-size) * 1em;
|
||||
line-height: ($base-margin-bottom / $h2-font-size ) * 1em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: ($h3-font-size / $base-font-size) * 1em;
|
||||
line-height: ($base-margin-bottom / $h3-font-size ) * 1em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: ($h4-font-size / $base-font-size) * 1em;
|
||||
line-height: ($base-margin-bottom / $h4-font-size ) * 1em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: ($h5-font-size / $base-font-size) * 1em;
|
||||
line-height: ($base-margin-bottom / $h5-font-size ) * 1em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: ($h6-font-size / $base-font-size) * 1em;
|
||||
line-height: ($base-margin-bottom / $h6-font-size ) * 1em;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-left: $list-margin-left * 1px;
|
||||
}
|
||||
|
||||
ul ul, ol ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
35
scss/generic/_reset.scss
Executable file
35
scss/generic/_reset.scss
Executable 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;
|
||||
}
|
33
scss/generic/_utilities.scss
Executable file
33
scss/generic/_utilities.scss
Executable file
|
@ -0,0 +1,33 @@
|
|||
.alignleft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
img.alignleft {
|
||||
margin-right: $column-gutter * 1px;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.alignright {
|
||||
margin-left : $column-gutter * 1px;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom:1;
|
||||
&:before,
|
||||
&:after{
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after{
|
||||
clear: both;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue