Skip to content

Instantly share code, notes, and snippets.

@AndrewSepic
Created May 29, 2018 19:57
Show Gist options
  • Save AndrewSepic/05e263defbfb0ac6a8184673be61ac73 to your computer and use it in GitHub Desktop.
Save AndrewSepic/05e263defbfb0ac6a8184673be61ac73 to your computer and use it in GitHub Desktop.
SASS BoilerPlate
/*********************
/* COLORS MIXINS
/*********************
@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,700,900')
$font-stack: 'Lato', Helvetica, Arial, sans-serif
/* Color */
$orange: #EF7A23
$lightorange: #f7b836
$lightgray: #FAF8F5
$blue: #016499
=bluebutton
background: rgba(1,100,153,0.79)
font-size: 1.5rem
color: #FFFFFF
border: 2px solid rgb(1,100,153)
border: 2px solid rgba(1,100,153,0.79)
-webkit-background-clip: padding-box
/* for Safari */
background-clip: padding-box
&:hover
background: transparent
border: 2px solid rgb(1,100,153)
border: 2px solid rgba(1,100,153,0.79)
-webkit-background-clip: padding-box
/* for Safari */
background-clip: padding-box
color: $blue
=whitebutton
background: rgba(255,255,255,0.98)
color: $orange
font-size: 1.5rem
border: 2px solid #fff
&:hover
background: transparent
border: 2px solid #fff
color: #fff
=hollowbutton
background-color: transparent
border: 1px solid $orange
padding: .85rem 1rem
color: #494949
&:hover
background-color: rgba(239, 122, 35, 0.41)
color: #fff
=cssTransition($secs)
-webkit-transition: all $secs ease-in-out
-moz-transition: all $secs ease-in-out
-o-transition: all $secs ease-in-out
-ms-transition: all $secs ease-in-out
transition: all $secs ease-in-out
=arrow($size, $color)
border-top: $size solid transparent
border-bottom: $size solid transparent
border-left: $size solid $color
display: inline-block
height: 0
width: 0
/*********************
/* GENERAL STYLES
/*********************
// Sets REM root size to 16px
html
font-size: 100%
body
font-family: $font-stack
color: $bodyColor
/*********************
/* LINK STYLES
/*********************
a, a:visited
// Mobile tap color
&:link
//Highlight links on iOS, Similar to :hover for mobile devices.
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3)
&:hover
color: rgba(1, 86, 132, 0.7)
// Default Button
.button
+bluebutton
.arrow
+arrow(8px, #fff)
&:hover
.arrow
+arrow(8px, $blue)
/*********************
/* H1, H2, H3, H4, H5 P STYLES
/*********************
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5
font-family: $font-stack
font-weight: bold
color: $HeadlineColor
// Removing text decoration from all headline links
a
text-decoration: none
h1, .h1
line-height: 2.8rem
h2, .h2
h3, .h3
h4, .h4
h5, .h5
p
line-height: 1.5rem
ul.check
list-style: none
margin-left: 0
li
padding-left: 35px
background: url(../images/greencheck.png) no-repeat 0px 2px
background-size: 27px
font-weight: bold
margin-bottom: .25rem
blockquote
font-size: 1.2rem
font-weight: 300
font-style: italic
margin: 0 0 2rem
position: relative
&:after
content: "\0022"
position: absolute
top: -6px
left: -4px
font-size: 3rem
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment