CSS

File structure

sass/
|
|– abstracts/
| |– _variables.scss // Sass Variables
| |– _functions.scss // Sass Functions
| |– _mixins.scss // Sass Mixins
|
|– base/
| |– _reset.scss // Reset/normalize
| |– _color.scss // Color declarations
| |– _fonts.scss // @font-face declarations
| |– _media.scss // Image/Video rules
| |– _typography.scss // Typography rules
|
|– components/
| |– _buttons.scss // Buttons
| |– _cards.scss // Cards
| |– _hero.scss // Hero
| |– _forms.scss // Forms
|
|– layout/
| |– _navigation.scss // Navigation
| |– _grid.scss // Grid system
| |– _header.scss // Header
| |– _footer.scss // Footer
| |– _sidebar.scss // Sidebar
| |– _forms.scss // Forms
|
|– pages/
| |– _home.scss // Home specific styles
| |– _about.scss // About specific styles
|
|– themes/
| |– _light.scss // Lightt theme
| |– _dark.scss // Dark theme
|
|– vendors/
| |– _normalize.scss // Normalize
| |– _jquery-ui.scss // jQuery UI
|
`– main.scss // Main Sass file

Mixins

Size

@mixin size($width: null, $height: null) {
width: $width;
height: $height;
}
@mixin sizeMax($width: null, $height: null) {
max-width: $width;
max-height: $height;
}
@mixin sizeMin($width: null, $height: null) {
min-width: $width;
min-height: $height;
}

Flexbox

@mixin flexBox($direction, $justify, $align) {
display: flex;
flex-direction: $direction;
justify-content: $justify;
align-items: $align;
}
@mixin flexSelf($align) {
align-self: $align;
}

Absolute position

@mixin absolute($top, $right, $bottom, $left) {
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}

Margin

@mixin centerMargin() {
margin: 0 auto;
}
@mixin marginAll($margin) {
margin: $margin;
}
@mixin margin($top, $right, $bottom, $left) {
margin-top: $top;
margin-right: $right;
margin-bottom: $bottom;
margin-left: $left;
}

Padding

@mixin paddingAll($padding) {
padding: $padding;
}
@mixin padding($top, $right, $bottom, $left) {
padding-top: $top;
padding-right: $right;
padding-bottom: $bottom;
padding-left: $left;
}

Typography

@mixin textColor($color) {
@if $color == light {
color: $color-text-dark;
} @else if $color == dark {
color: $color-text-dark;
}
}
@mixin textStyle($color, $decoration: null) {
@include textColor($color);
@if $decoration == ul {
text-decoration: underline;
}
}

Shadows

@mixin box-shadow($top, $right, $bottom, $blur, $color) {
-webkit-box-shadow: $top $right $bottom $blur $color;
-moz-box-shadow: $top $right $bottom $blur $color;
box-shadow: $top $right $bottom $blur $color;
}

Here's a mixin similiar to Stripe's article shadows.

@mixin article-shadow() {
box-shadow: 0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3),0 -12px 36px -8px rgba(0,0,0,.025);
&:hover {
transform: translateY(-3px);
box-shadow: 0 18px 35px rgba(50,50,93,.1),0 8px 15px rgba(0,0,0,.07);
}
}
Stripe's article shadows (stripe.com/newsroom)

And another mixin similiar to the inset shadows on Stripe's forms.

@mixin form-shadow() {
box-shadow: rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px
}
Stripe's form shadows (dashboard.stripe.com/login)

Corners

For most projects, I use a border-radius of 4px. It's the perfect balance between sharp and subtle.

@mixin rounded($radius: 4px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
}
@mixin rounded-bottom() {
border-radius: 0 0 4px 4px;
}

Media Queries

// Screen size variables
$screen-xs-min: 425px; // Tiny phones
$screen-sm-min: 576px; // Small tablets and large smartphones (landscape view)
$screen-md-min: 768px; // Small tablets (portrait view)
$screen-lg-min: 992px; // Tablets and small desktops
$screen-xl-min: 1200px; // Large tablets and desktops
// Tiny devices
@mixin xs {
@media (min-width: #{$screen-xs-min}) {
@content;
}
}
// Tiny devices (max)
@mixin sm-max {
@media (max-width: #{$screen-xs-min}) {
@content;
}
}
// Small devices
@mixin sm {
@media (min-width: #{$screen-sm-min}) {
@content;
}
}
// Small devices (max)
@mixin sm-max {
@media (max-width: #{$screen-sm-min}) {
@content;
}
}
// Medium devices
@mixin md {
@media (min-width: #{$screen-md-min}) {
@content;
}
}
// Medium devices (max)
@mixin md-max {
@media (max-width: #{$screen-md-min}) {
@content;
}
}
// Large devices
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
// Large devices (max)
@mixin lg-max {
@media (max-width: #{$screen-lg-min}) {
@content;
}
}
// Extra large devices
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}

Links

Guides

Tools

  • Clippy - CSS clip-path maker.

  • Sassmeister - Convert SCSS to CSS.

  • BackgroundCheck - Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

  • CSS Grid Generator - Builds CSS for any grid layout