Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS: My sass reset file
/*Reset file*/
/* ===== Colors ===== */
/*Design, layout*/
$green: #18bc9c;
$green-darker: darken(#11866f, 2%);
$orange: #ffa800;
$orange-light: #ffb629;
$orange-medium: darken($orange, 5%);
$orange-dark: darken($orange, 10%);
/*Text*/
$grey: #626161;
$grey-light: lighten($grey, 10%);
/* ===== Typography ===== */
$font-sans: 'Lato', Helvetica, Arial, sans-serif;
$font-serif: 'Merriweather', 'Times New Roman', serif;
$fz-base: 16;
@mixin lowercase{ text-transform: lowercase; }
@mixin uppercase{ text-transform: uppercase; }
@mixin font-size($size: 16){
font-size: $size +px;
font-size: $size/10 +rem;
}
@mixin light{ font-weight: 300; }
@mixin regular{ font-weight: 400; }
@mixin semibold{ font-weight: 600; }
@mixin semibold-italic{ font-weight: 600; font-style: italic; }
@mixin bold{ font-weight: 700; }
/* ===== Spacing ===== */
$spacing-m: 38px;
$spacing-l: 52px;
/* ===== Animations ===== */
/*transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]*/
@mixin transition($trans: all, $sec: 0.1s, $timing: linear, $delay: 0s){
-webkit-transition: $arguments;
-moz-transition: $arguments;
-o-transition: $arguments;
transition: $arguments;
}
@mixin translateY($height: -4px){
-webkit-transform: translateY($height);
-moz-transform: translateY($height);
-ms-transform: translateY($height);
-o-transform: translateY($height);
transform: translateY($height);
}
/* ===== RESETS & BASIC PAGE SETUP =====*/
* { margin: 0; padding: 0; vertical-align: baseline; }
html { overflow-y: scroll; font-size: 62.5%; /* set font-size to 62,5% in html to use rem */ }
body {
color: $grey;
font-family: $font-sans;
@include font-size(22);
font-weight: 400;
line-height: 140%;
}
article, aside, figure, footer, header, hgroup, menu, nav, section, button{ display: block; }
ol, ul{ list-style: none; }
/* ===== SELECTION & HIGHLIGHTS COLORS ===== */
::selection{ background: darken($orange, 2%); color: white;}
::-moz-selection{ background: darken($orange, 2%); color: white; }
/* ===== USEFUL CLASSES ===== */
.float-left{ float: left; }
.float-right{ float: right; }
.text-align-left{ text-align: left; }
.text-align-center{ text-align: center; }
.text-align-right{ text-align: right; }
.clear{ clear: both; }
.outline{ border: 1px solid black;}
.nothing{ padding: 0; margin: 0;}
.left-clear{ margin-left: 0; padding-left: 0;}
.right-clear{ margin-right: 0; }
@mixin border-radius($radius: 4px){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
/* ===== LINKS ===== */
a{ text-decoration: none; }
a:link, a:visited{ color: $orange; }
a:hover, a:active{ color: $orange-dark; }
a img { border: 0; } /*border: 0 is better then border: none, less character*/
/* ===== HEADINGS =====*/
h1, h2, h3, h4, h5, h6 {
font-family: $font-sans;
font-style: normal;
line-height: 150%;
}
h1 { @include font-size(26); font-weight: 700; }
h2 { @include font-size(32); font-weight: 700; @include uppercase; }
h3 { @include font-size(22); font-weight: 600; }
h4 { @include font-size(20); font-weight: 400; }
h5 { @include font-size(18); font-weight: 400; }
h6 { @include font-size(16); font-weight: 400; }
hr{
border-top: 4px solid #ebeaea;
margin: 0;
}
/* ===== MEDIA QUERIES BREAKPOINTS =====*/
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.