Skip to content

Instantly share code, notes, and snippets.

@PauliusKrutkis
Created March 13, 2017 18:54
Show Gist options
  • Save PauliusKrutkis/396e08f926fe539bda30f2b25aaa1dfd to your computer and use it in GitHub Desktop.
Save PauliusKrutkis/396e08f926fe539bda30f2b25aaa1dfd to your computer and use it in GitHub Desktop.
Various css (sass) examples
/*------------------------------------*\
#RESPONSIVE STICKY FOOTER
/*------------------------------------*/
html,
body
display: table
height: 100%
width: 100%
footer
display: table-row
height: 1px
/*------------------------------------*\
#SIDE MENU
/*------------------------------------*/
.page-nav
position: fixed
background-color: gray
transition: transform .3s
width: 300px
height: 100vh
overflow-x: hidden
overflow-y: auto
z-index: 2
transform: translateX(-300px)
.mask
position: fixed
top: 0
left: 0
overflow: hidden
width: 0
height: 0
background-color: #000
opacity: 0
transition: opacity .3s, width 0s .3s, height 0s .3s
z-index: 1
body
transition: transform .3s
&.menu-active
transform: translateX(300px)
overflow: hidden
.mask
width: 100%
height: 100%
opacity: 0.7
transition: opacity .3s
/*------------------------------------*\
#GALLERY IMG COVER
/*------------------------------------*/
.gallery
margin-left: -15px
margin-right: -15px
text-align: center
font-size: 0
.item
width: calc(33.3% - 30px)
margin: 0 15px 15px
display: inline-block
overflow: hidden
position: relative
&:before
content: ''
display: block
padding-top: 100%
img
max-width: none
width: auto
height: 100%
min-height: 100%
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
/*------------------------------------*\
#SELECTOR EXAMPLES
/*------------------------------------*/
// "default" link styling example
// :not, currentColor examples
a[href]:not([class])
text-decoration: none
position: relative
&:after
transition: all .2s ease-in-out
background-color: currentColor
content: ''
width: 0
height: 1px
position: absolute
bottom: 0
left: 0
right: 0
margin: 0 auto
&:hover &:after
width: 100%
// attribute value selector example
a[href*="facebook"]
background-color: blue
color: white
/*------------------------------------*\
#RESPONSIVE TABLE
/*------------------------------------*/
// more info: http://allthingssmitty.com/2016/10/03/responsive-table-layout/
@media(max-width: 768px)
table
border: 0
thead
border: 0
clip: rect(0 0 0 0)
height: 1px
margin: -1px
overflow: hidden
position: absolute
padding: 0
width: 1px
tr
display: block
border-bottom: 3px solid blue
margin-bottom: 10px
td
display: block
text-align: right
border-bottom: 1px solid blue
&:before
content: attr(data-label)
float: left
font-weight: bold
text-transform: uppercase
&:last-child
border-bottom: 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment