Last active
August 19, 2021 00:54
-
-
Save MrJackdaw/0fd49364aadc69acb2aade6485d1beb9 to your computer and use it in GitHub Desktop.
CSS Quick-Start
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
/****************************************** | |
* File : Animations.scss | |
*******************************************/ | |
@keyframes beacon { | |
0% { | |
transform: scale(1, 1); | |
opacity: 1; | |
} | |
100% { | |
transform: scale(4, 4); | |
opacity: 0; | |
} | |
} | |
@keyframes bounce { | |
0% { | |
transform: translateY(4px); | |
} | |
50% { | |
transform: translateY(-16px); | |
} | |
100% { | |
transform: translateY(4px); | |
} | |
} | |
@keyframes bounce-in-left { | |
0% { | |
transform: translate(-10%, 0); | |
opacity: 0.25; | |
} | |
25% { | |
transform: translate(8%, 0); | |
opacity: 0.65; | |
} | |
50% { | |
transform: translate(-4%, 0); | |
opacity: 0.75; | |
} | |
75% { | |
transform: translate(2%, 0); | |
opacity: 0.95; | |
} | |
100% { | |
transform: translate(0, 0); | |
opacity: 1; | |
} | |
} | |
@keyframes collapse-horizontal { | |
from { | |
transform: scaleX(1); | |
} | |
to { | |
transform: scaleX(0); | |
} | |
} | |
@keyframes collapse-vertical { | |
from { | |
transform: scaleY(1); | |
} | |
to { | |
transform: scaleY(0); | |
} | |
} | |
@keyframes fade-in { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
@keyframes pulse { | |
0% { | |
transform: scale(1, 1); | |
} | |
50% { | |
transform: scale(2, 2); | |
} | |
100% { | |
transform: scale(1, 1); | |
} | |
} | |
@keyframes scale-in { | |
0% { | |
transform: scale(0, 0); | |
opacity: 0.25; | |
} | |
100% { | |
transform: scale(1, 1); | |
opacity: 1; | |
} | |
} | |
@keyframes slide-down { | |
from { | |
transform: translate(0, -10%); | |
} | |
to { | |
transform: translate(0, 0); | |
} | |
} | |
@keyframes slide-in-bottom-right { | |
from { | |
transform: translate(10%, 10%); | |
opacity: 0.25; | |
} | |
to { | |
transform: translate(0, 0); | |
opacity: 1; | |
} | |
} | |
@keyframes slide-right { | |
from { | |
transform: translate(0%, 0); | |
} | |
to { | |
transform: translate(10%, 0); | |
} | |
} | |
@keyframes slide-left { | |
from { | |
transform: translate(0%, 0); | |
} | |
to { | |
transform: translate(-10%, 0); | |
} | |
} | |
@keyframes slide-up { | |
from { | |
transform: translate(0, 0); | |
} | |
to { | |
transform: translate(0, -10%); | |
} | |
} | |
@keyframes spin { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(360deg); | |
} | |
} | |
/* Animation Mixins */ | |
@mixin collapse($horizontal: true, $duration: 180ms) { | |
@if $horizontal { | |
animation: collapse-horizontal $duration ease-out; | |
} @else { | |
animation: collapse-vertical $duration ease-out; | |
} | |
} | |
@mixin expand($horizontal: true, $duration: 180ms) { | |
@if $horizontal { | |
animation: expand-horizontal 180ms ease-out; | |
} @else { | |
animation: expand-horizontal 180ms ease-out; | |
} | |
} | |
@mixin fade($out: true, $duration: 180ms) { | |
animation: fade $duration ease-out; | |
@if $out { | |
animation-direction: reverse; | |
} | |
} | |
@mixin merge-animations($a1, $a2, $duration: 180ms) { | |
animation: $a1 $a2 $duration ease-out; | |
animation-fill-mode: forwards; | |
} | |
@mixin spin { | |
animation: spin 180ms ease-out; | |
} | |
@mixin spinner($size: 1rem) { | |
animation: spin 0.8s linear infinite; | |
border-radius: 50%; | |
border: 0.3rem solid; | |
border-top-color: transparent; | |
content: ""; | |
display: inline-block; | |
height: $size; | |
left: 48%; | |
top: 40%; | |
transform-origin: center; | |
width: $size; | |
} | |
/* Classes */ | |
.after-spinner::after, | |
.before-spinner::before { | |
@include spinner; | |
} | |
.beacon { | |
animation: beacon 180ms ease-out; | |
animation-iteration-count: infinite; | |
} | |
.bounce { | |
animation: bounce 180ms ease-in-out; | |
} | |
.bounce-in-left { | |
animation: bounce-in-left 180ms ease-out; | |
} | |
.collapse-horizontal { | |
@include collapse($horizontal: true); | |
} | |
.collapse-vertical { | |
@include collapse($horizontal: false); | |
} | |
.expand-horizontal { | |
@include collapse($horizontal: true); | |
animation-direction: reverse; | |
} | |
.expand-vertical { | |
@include collapse($horizontal: false); | |
animation-direction: reverse; | |
} | |
.fade-in { | |
@include fade($out: false); | |
} | |
.fade-out { | |
@include fade($out: true); | |
} | |
.pulse { | |
animation: pulse 180ms ease-out; | |
} | |
.scale-in { | |
animation: scale-in 180ms ease-out; | |
} | |
.scale-in-bounce { | |
@include merge-animations(scale-in, bounce, 180ms); | |
} | |
.slide-down-fade-in { | |
@include merge-animations(slide-down, fade-in); | |
} | |
.slide-in-bottom-right { | |
animation: slide-in-bottom-right 180ms ease-out; | |
} | |
.slide-in-left { | |
@include merge-animations(slide-right, fade-in); | |
} | |
.slide-in-right { | |
@include merge-animations(slide-left, fade-in); | |
} | |
.slide-out-left { | |
@include merge-animations(slide-left, fade-out); | |
} | |
.slide-out-right { | |
@include merge-animations(slide-left, fade-¬out); | |
} | |
.slide-up-fade-in { | |
@include merge-animations(slide-up, fade-in, 180ms); | |
} | |
.slide-up-fade-out { | |
@include merge-animations(slide-up, fade-out, 180ms); | |
} | |
.spin { | |
@include spin; | |
} |
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
/****************************************************** | |
* Color classes: See mixins.scss for definitions | |
******************************************************/ | |
@mixin colorize($clr: $accent, $text-color: white) { | |
background-color: $clr; | |
&:is(a, button) { | |
color: $text-color; | |
&:hover { | |
background-color: darken($color: $clr, $amount: 5); | |
} | |
} | |
&--text { | |
@extend .white--text; | |
} | |
} | |
.accent { | |
@include colorize($accent); | |
} | |
.error { | |
@include colorize($error); | |
} | |
.error-dark { | |
@include colorize($error-dark); | |
} | |
.error-light { | |
@include colorize($error-light); | |
} | |
.primary { | |
@include colorize($primary); | |
} | |
.primary-dark { | |
@include colorize($primary-dark); | |
} | |
.primary-light { | |
@include colorize($primary-light); | |
} | |
.grey { | |
@include colorize($grey); | |
} | |
.grey-dark { | |
@include colorize($grey-dark); | |
} | |
.grey-light { | |
@include colorize($grey-light); | |
} | |
.success { | |
@include colorize($success); | |
} | |
.success-dark { | |
@include colorize($success-dark); | |
} | |
.success-light { | |
@include colorize($success-light); | |
} | |
.warning { | |
@include colorize($warning); | |
} | |
.warning-dark { | |
@include colorize($warning-dark); | |
} | |
.warning-light { | |
@include colorize($warning-light); | |
} | |
.white { | |
background-color: #fff; | |
&--text { | |
color: #fff; | |
} | |
} |
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
/****************************************** | |
* Created On : Wed Apr 25 2018 | |
* File : Dividers.css | |
*******************************************/ | |
.divider, | |
[class^="divider--"] { | |
border: 0; | |
margin: 0; | |
} | |
.divider:not(.divider--vertical), | |
[class^="divider--"]:not(.divider--vertical) { | |
height: $xtiny; | |
width: $parent; | |
} | |
.divider { | |
&--condensed { | |
width: 75px; | |
} | |
&--dark { | |
background: $primary-dark; | |
} | |
&--lg { | |
margin: $lg 0; | |
} | |
&--light { | |
background: $primary-light; | |
} | |
&--md { | |
margin: $md 0; | |
} | |
&--no-margin { | |
margin: 0; | |
} | |
&--tiny { | |
margin: $xxs 0; | |
} | |
&--translucent { | |
opacity: 0.3; | |
} | |
&--transparent { | |
background: $transparent; | |
} | |
} | |
.divider--vertical { | |
height: $parent; | |
width: $xtiny; | |
} |
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
/****************************************** | |
* File : Flex.scss | |
*******************************************/ | |
[class$="--centered"], | |
[class^="centered"], | |
.flex, | |
[class^="flex--"], | |
.inline, | |
[class^="inline--"], | |
.justify, | |
[class$="--justify"], | |
[class$="--row"] { | |
@include flex(row); | |
} | |
[class$="--centered"], | |
[class^="centered--"] { | |
@include center-content; | |
} | |
[class^="centered--"], | |
.column, | |
[class$="--column"] { | |
@include flex(column); | |
} | |
.grow, | |
[class$="--grow"] { | |
flex-grow: 1; | |
} | |
.inline, | |
[class$="--inline"], | |
[class^="inline--"] { | |
display: inline-flex; | |
} | |
.inline { | |
&--end { | |
align-self: end; | |
} | |
&--start { | |
align-self: start; | |
} | |
} | |
.justify, | |
[class$="--justify"] { | |
justify-content: space-between; | |
} | |
.start, | |
[class$="--start"] { | |
place-content: flex-start; | |
} | |
.stretch, | |
[class$="--stretch"] { | |
align-self: stretch; | |
} | |
.no-grow, | |
[class$="--no-grow"] { | |
flex-grow: 0; | |
} | |
.no-shrink, | |
[class$="--no-shrink"] { | |
flex-shrink: 0; | |
} | |
.no-wrap, | |
[class$="--no-wrap"] { | |
flex-wrap: nowrap; | |
} | |
.wrap, | |
[class$="--wrap"] { | |
flex-wrap: wrap; | |
} | |
*.align-start { | |
align-items: flex-start; | |
} |
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
/* Form, Form Input styles: see variables.scss for SCSS vars */ | |
button, | |
input[type="submit"], | |
.button { | |
@include button; | |
&.md { | |
@include button-sized($md); | |
} | |
&.sm { | |
@include button-sized($sm); | |
} | |
} | |
input[type="email"], | |
input[type="password"], | |
input[type="number"], | |
input[type="search"], | |
input[type="text"], | |
select, | |
textarea { | |
&:first-of-type { | |
border-top-left-radius: $border-radius; | |
border-top-right-radius: $border-radius; | |
} | |
&:last-of-type { | |
border-bottom-left-radius: $border-radius; | |
border-bottom-right-radius: $border-radius; | |
} | |
border: 1px solid $grey-light; | |
} | |
input[type="email"], | |
input[type="password"], | |
input[type="number"], | |
input[type="search"], | |
input[type="text"], | |
select { | |
height: $xlg; | |
line-height: $xlg; | |
padding: $sm; | |
} |
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
// Primary importer of files (recommended cascading order). Add any | |
// new files here and import into your application [CSS] entry point | |
/* Application Styles */ | |
@import "./mixins.scss"; | |
@import "./reset.scss"; | |
@import "./animations.scss"; | |
@import "./colors.scss"; | |
@import "./divider.scss"; | |
@import "./flex.scss"; | |
@import "./forms.scss"; | |
@import "./lists.scss"; |
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
/****************************************** | |
* Created On : Sat Feb 10 2018 | |
* File : Lists.css | |
*******************************************/ | |
/* MIXINS (depends on mixins.scss) */ | |
@mixin list($direction: column) { | |
&--bordered { | |
border-bottom: 1px solid $grey-light; | |
} | |
&--centered { | |
align-content: center; | |
justify-content: center; | |
} | |
&.inactive, | |
&--inactive { | |
pointer-events: none; | |
background: #f7f7f7; | |
} | |
&--selectable { | |
cursor: pointer; | |
} | |
&--rounded { | |
@include rounded(); | |
overflow: hidden; | |
} | |
&--row { | |
@include flex(row); | |
> * { | |
width: initial; | |
} | |
} | |
/* Elements */ | |
> .footer, | |
> .title { | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
} | |
/* LISTS */ | |
.list, | |
.list-item{ | |
@include list(); | |
@include flex-wrapper(); | |
list-style: none; | |
} | |
.list-item { | |
padding: 0 $xs; | |
} |
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
/* Sizes (all) */ | |
$xxxlg: 5.25rem; | |
$xxlg: 3.2rem; | |
$xlg: 2.8rem; | |
$lg: 2.4rem; | |
$md: 1.4rem; | |
$sm: 0.9rem; | |
$xs: 0.8rem; | |
$xxs: 0.5rem; | |
$xxxs: 0.25rem; | |
$tiny: 0.12rem; | |
$xtiny: 0.05rem; | |
/* Widths */ | |
$parent: 100%; | |
$border-radius: 4px; | |
$header-height: $xxxlg; | |
.col-10 { | |
width: 10%; | |
flex-shrink: 0; | |
} | |
.col-100 { | |
width: $parent; | |
flex-shrink: 0; | |
} | |
.col-25 { | |
width: 25%; | |
flex-shrink: 0; | |
} | |
.col-33 { | |
width: 33.3333%; | |
flex-shrink: 0; | |
} | |
.col-50 { | |
width: 50%; | |
flex-shrink: 0; | |
} | |
.col-66 { | |
width: 66.6666%; | |
flex-shrink: 0; | |
} | |
.wide { | |
width: $parent; | |
} | |
/* Colors */ | |
/* Application Color Theme */ | |
$accent: #fbb03b; | |
$error: rgb(143, 21, 21); | |
$grey: #456; | |
$primary: #3c7294; | |
$success: #349e1c; | |
$translucent-dark: #0000004d; | |
$translucent-light: #ffffff4d; | |
$transparent: #00000000; | |
$warning: #eeb232; | |
/* Core Color variations */ | |
$error-dark: darken( | |
$color: $error, | |
$amount: 15, | |
); | |
$error-light: lighten( | |
$color: $error, | |
$amount: 25, | |
); | |
$grey-dark: darken( | |
$color: $grey, | |
$amount: 15, | |
); | |
$grey-light: lighten( | |
$color: $grey, | |
$amount: 25, | |
); | |
$primary-dark: darken( | |
$color: $primary, | |
$amount: 15, | |
); | |
$primary-light: lighten( | |
$color: $primary, | |
$amount: 15, | |
); | |
$success-light: lighten( | |
$color: $success, | |
$amount: 15, | |
); | |
$success-dark: darken( | |
$color: $success, | |
$amount: 15, | |
); | |
$warning-dark: darken( | |
$color: $warning, | |
$amount: 12, | |
); | |
$warning-light: lighten( | |
$color: $warning, | |
$amount: 32, | |
); | |
/* form */ | |
@mixin button-base { | |
outline: none; | |
transition: background-color 150ms linear; | |
text-decoration: none; | |
&, | |
&:hover { | |
cursor: pointer; | |
font-size: $sm; | |
padding-left: $sm; | |
padding-right: $sm; | |
pointer-events: all; | |
} | |
} | |
@mixin button { | |
@include button-base(); | |
@include heading-font(); | |
margin: $sm 0; | |
text-transform: uppercase; | |
} | |
@mixin button-sized($size: $sm) { | |
@include button(); | |
height: $size; | |
line-height: $size; | |
} | |
@mixin button-outline { | |
@include button-base(); | |
background-color: transparent; | |
border: 1px solid; | |
&:hover { | |
opacity: 0.95; | |
} | |
} | |
@mixin button-disabled { | |
@include button-outline(); | |
&, | |
&:hover, | |
&:visited { | |
cursor: default !important; | |
opacity: 0.8; | |
pointer-events: none; | |
} | |
} | |
/* mixins */ | |
@mixin after-spinner($border-color: $grey-light, $bounds-width: $xxlg) { | |
animation: spin 0.8s linear infinite; | |
border-radius: 50%; | |
border: 0.3rem solid $border-color; | |
border-top-color: transparent; | |
content: ""; | |
display: block; | |
height: $bounds-width; | |
left: 48%; | |
top: 40%; | |
transform-origin: center; | |
width: $bounds-width; | |
} | |
@mixin primary-gradient { | |
background: linear-gradient(180deg, $primary-dark 0%, $primary 100%); | |
} | |
/* GENERAL */ | |
@mixin elevated($elevation: 4px) { | |
box-shadow: $translucent-dark 0px 0px $elevation 0px; | |
} | |
@mixin rounded { | |
border-radius: $border-radius; | |
} | |
@mixin fill-parent { | |
height: $parent; | |
width: $parent; | |
} | |
@mixin fill-screen { | |
height: 100vh; | |
width: 100vw; | |
} | |
@mixin full-border($border-color) { | |
border: 1px solid $border-color; | |
} | |
@mixin ellipsis { | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
width: $parent; | |
} | |
@mixin app-font { | |
font-family: "Open Sans", sans-serif; | |
letter-spacing: 0.04rem; | |
} | |
@mixin heading-font() { | |
font-family: "Open Sans", sans-serif; | |
} | |
@mixin h1 { | |
@include heading(3.5rem); | |
} | |
@mixin h2 { | |
@include heading(2.6rem); | |
} | |
@mixin h3 { | |
@include heading(1.8rem); | |
} | |
@mixin h4 { | |
@include heading(1.4rem); | |
} | |
@mixin h5 { | |
@include heading(1.2rem); | |
} | |
@mixin h6 { | |
@include heading(0.995rem); | |
font-weight: bolder; | |
line-height: 1.125rem; | |
} | |
@mixin line-clamp($lines) { | |
-webkit-line-clamp: $lines; | |
-webkit-box-orient: vertical; | |
display: -webkit-box; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
} | |
@mixin sticky($top: 0) { | |
position: sticky; | |
top: $top; | |
z-index: 999; | |
} | |
@mixin heading($font-size: 1.2rem) { | |
@include heading-font(); | |
font-weight: 600; | |
font-size: $font-size; | |
line-height: $font-size; | |
} | |
/* FLEX */ | |
@mixin flex($direction: row, $content-align: flex-start) { | |
align-items: center; | |
display: flex; | |
flex-direction: $direction; | |
place-content: $content-align; | |
} | |
@mixin flex-center { | |
@include flex($content-align: center); | |
@include center-text(); | |
} | |
/* FLEX: Justify text (stretch to fill alignment space) */ | |
@mixin flex-justify { | |
@include flex($content-align: space-between); | |
} | |
/* FLEX: stretch children to fill parent */ | |
@mixin flex-wrapper($align: flex-start) { | |
@include flex($direction: column, $content-align: $align); | |
&, | |
> * { | |
width: $parent; | |
} | |
} | |
@mixin hide-scrollbar { | |
-ms-overflow-style: none; | |
scrollbar-width: none; | |
&::-webkit-scrollbar { | |
display: none; | |
} | |
} | |
/* FLEX: Align items to element center (may exclude text) */ | |
@mixin center-content { | |
align-content: center; | |
justify-content: center; | |
} | |
/* GLOBAL: Align items to center (including text) */ | |
@mixin center-text { | |
text-align: center; | |
} |
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
/* | |
* CSS reset based on meyer reset: modified to pull in | |
* rules and theming from sibling 'mixins.scss' file. | |
(See Meyer reset here: http://meyerweb.com/eric/tools/css/reset/) | |
------- | |
License: none (public domain) | |
*/ | |
html{ | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
font-size: 18px; | |
height: 100vh; | |
overflow: hidden; | |
* { | |
box-sizing: border-box; | |
} | |
} | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, input, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-family: inherit; | |
font-size: inherit; | |
line-height: 1.6; | |
position: relative; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
body { | |
@include app-font(); | |
color: $primary; | |
font-size: $sm; | |
height: 100%; | |
margin: 0; | |
overflow-y: auto; | |
padding: 0; | |
/* Smooth scrolling haxx -- need this for Glory™ on iOS devices */ | |
-webkit-overflow-scrolling: touch; | |
} | |
a { | |
color: #36b4c7; | |
text-decoration: none; | |
} | |
h1, .h1 { | |
@include h1(); | |
} | |
h2, .h2 { | |
@include h2(); | |
} | |
h3, .h3 { | |
@include h3(); | |
} | |
h4, .h4 { | |
@include h4(); | |
} | |
h5, .h5 { | |
@include h5(); | |
} | |
h6, .h6 { | |
@include h6(); | |
} | |
blockquote, | |
q { | |
quotes: none; | |
} | |
blockquote:before, | |
blockquote:after, | |
q:before, | |
q:after { | |
content: ''; | |
content: none; | |
} | |
input[type=text] { | |
border-bottom: 1px solid; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
@media screen and (max-width: 800px) { | |
html{ | |
font-size: 14px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment