Last active
July 17, 2019 13:01
-
-
Save niktariy/b252ae042189e5cabde7cf1259856489 to your computer and use it in GitHub Desktop.
style guide CSS example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* single-line comment */ | |
.block { | |
--block-box-shadow: rgba(160, 20, 88, 0.2); | |
--block-inner-shadow: rgba(189, 20, 90, 1); | |
display: flex; | |
align-items: baseline; | |
justify-content: space-between; | |
position: relative; | |
top: 0; | |
left: calc(calc(1em * 2) / 3); | |
height: 100px; | |
margin: -16px auto; | |
padding: 8px 16px; | |
/* comment empty-line before */ | |
box-shadow: 0 2px 16px 0 var(--block-box-shadow); | |
opacity: 0.5; | |
font-family: 'Avenir Next', sans-serif; | |
font-weight: 600; | |
line-height: 1.4; | |
text-align: left; | |
transition: box-shadow 0.12s ease-in; | |
z-index: 2; | |
} | |
/* selector and value lists comma */ | |
.block:hover, | |
.block:focus { | |
box-shadow: | |
0 2px 16px 0 var(--block-box-shadow), | |
inset 0 -2px 0 4px var(--block-inner-shadow); | |
} | |
/* selector attribute brackets space inside */ | |
[target='_blank'] { | |
font-size: 16px; | |
font-size: 1rem; | |
text-decoration: underline; | |
} | |
[class*='col'] { | |
/* block no empty, ignore comments */ | |
} | |
/* at-rule name space after */ | |
@charset 'UTF-8'; | |
@import url(x.css); | |
@import url(y.css); | |
@font-face { | |
font-family: 'foo'; | |
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | |
url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); | |
font-style: normal; | |
font-display: swap; | |
} | |
@keyframes name { | |
from { | |
top: 10px; | |
} | |
to { | |
top: 20px; | |
} | |
} | |
@keyframes name2 { | |
0% { | |
top: 10px; | |
} | |
100% { | |
top: 20px; | |
} | |
} | |
@media screen and (min-width: 700px) { | |
.class { | |
property: value; | |
} | |
} | |
@media screen and (min-width: 700px) { | |
.class { | |
property: value; | |
} | |
} | |
@supports { | |
@media {} | |
@media {} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment