mmuchin · May 29, 2018 12:35 · Sep 25, 2017 · Sep 25, 2017 · Sep 25, 2017 · Sep 25, 2017
diff --git a/bootstrap-4-sass-mixins-cheat-sheet.scss b/bootstrap-4-sass-mixins-cheat-sheet.scss
@@ -1,5 +1,6 @@
 /* -------------------------------------------------------------------------- */
 // All Bootstrap 4 Sass Mixins [Cheat sheet]
+// @author http://anschaef.de
 // @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
 /* -------------------------------------------------------------------------- */
 

diff --git a/bootstrap-4-sass-mixins-cheat-sheet.scss b/bootstrap-4-sass-mixins-cheat-sheet.scss
@@ -40,13 +40,13 @@ lg: 960px
 @include media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
 
 // Example usage
-@include media-breakpoint-up(sm) {
-    .some-class {
-        display: block;
+.some-class {
+    @include media-breakpoint-up(sm) {
+        // Larger than sm: 480px
+        display: inline;
     }
-}
-@include media-breakpoint-up(xs) {
-    .some-class {
+    @include media-breakpoint-down(md) {
+        // Smaller than md: 768px
         display: block;
     }
 }

diff --git a/bootstrap-4-sass-mixins-cheat-sheet.scss b/bootstrap-4-sass-mixins-cheat-sheet.scss
@@ -3,6 +3,107 @@
 // @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
 /* -------------------------------------------------------------------------- */
 
+// Grid variables
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+
+$grid-breakpoints: (
+xs: 0,
+sm: 480px,
+md: 768px,
+lg: 1024px
+);
+
+$container-max-widths: (
+sm: 420px,
+md: 720px,
+lg: 960px
+);
+
+/* -------------------------------------------------------------------------- */
+
+// Breakpoint viewport sizes and media queries.
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@include media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@include media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@include media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@include media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
+
+// Example usage
+@include media-breakpoint-up(sm) {
+    .some-class {
+        display: block;
+    }
+}
+@include media-breakpoint-up(xs) {
+    .some-class {
+        display: block;
+    }
+}
+
+/* -------------------------------------------------------------------------- */
+
+// Grid system
+// @see https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
+// Generate semantic grid columns with these mixins.
+@include make-container()
+// For each breakpoint, define the maximum width of the container in a media query
+@include make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
+// Creates a wrapper for a series of columns
+@include make-row()
+// Make the element grid-ready (applying everything but the width)
+@include make-col-ready()
+@include make-col($size, $columns: $grid-columns)
+
+// Example usage
+/*
+<div class="example-container">
+  <div class="example-row">
+    <div class="example-content-main">Main content</div>
+    <div class="example-content-secondary">Secondary content</div>
+  </div>
+</div>
+*/
+.example-container {
+    width: 800px;
+    @include make-container();
+}
+.example-row {
+    @include make-row();
+}
+.example-content-main {
+    @include make-col-ready();
+
+    @include media-breakpoint-up(sm) {
+        @include make-col(6);
+    }
+    @include media-breakpoint-up(lg) {
+        @include make-col(8);
+    }
+}
+.example-content-secondary {
+    @include make-col-ready();
+
+    @include media-breakpoint-up(sm) {
+        @include make-col(6);
+    }
+    @include media-breakpoint-up(lg) {
+        @include make-col(4);
+    }
+}
+
+/* -------------------------------------------------------------------------- */
+
 // Alerts
 @include alert-variant($background, $border, $color)
 
@@ -18,9 +119,8 @@
 
 /* -------------------------------------------------------------------------- */
 
-// Border-radius
-@include border-radius($radius: $border-radius)
 // Single side border-radius
+@include border-radius($radius: $border-radius)
 @include border-top-radius($radius)
 @include border-right-radius($radius)
 @include border-bottom-radius($radius)
@@ -33,25 +133,6 @@
 
 /* -------------------------------------------------------------------------- */
 
-// Breakpoint viewport sizes and media queries.
-// Breakpoints are defined as a map of (name: minimum width), order from small to large:
-//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@include media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@include media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@include media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@include media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
-
-/* -------------------------------------------------------------------------- */
-
 // Button variants
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
@@ -106,18 +187,6 @@
 
 /* -------------------------------------------------------------------------- */
 
-/// Grid system
-// @see https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
-// Generate semantic grid columns with these mixins.
-@include make-container()
-// For each breakpoint, define the maximum width of the container in a media query
-@include make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
-@include make-row()
-@include make-col-ready()
-@include make-col($size, $columns: $grid-columns)
-
-/* -------------------------------------------------------------------------- */
-
 // Hover state
 @include hover()
 @include hover-focus()

diff --git a/bootstrap-4-sass-mixins-cheat-sheet.scss b/bootstrap-4-sass-mixins-cheat-sheet.scss
@@ -18,8 +18,9 @@
 
 /* -------------------------------------------------------------------------- */
 
-// Single side border-radius
+// Border-radius
 @include border-radius($radius: $border-radius)
+// Single side border-radius
 @include border-top-radius($radius)
 @include border-right-radius($radius)
 @include border-bottom-radius($radius)

diff --git a/bootstrap-4-sass-mixins-cheat-sheet.scss b/bootstrap-4-sass-mixins-cheat-sheet.scss
@@ -62,11 +62,13 @@
 /* -------------------------------------------------------------------------- */
 
 // Clearfix
+// @see https://getbootstrap.com/docs/4.0/utilities/clearfix/
 @include clearfix()
 
 /* -------------------------------------------------------------------------- */
 
 // Float
+// @see https://getbootstrap.com/docs/4.0/utilities/float/
 @include float-left()
 @include float-right()
 @include float-none()
@@ -104,6 +106,7 @@
 /* -------------------------------------------------------------------------- */
 
 /// Grid system
+// @see https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
 // Generate semantic grid columns with these mixins.
 @include make-container()
 // For each breakpoint, define the maximum width of the container in a media query
@@ -172,13 +175,10 @@
 /* -------------------------------------------------------------------------- */
 
 // Only display content to screen readers
-// See: http://a11yproject.com/posts/how-to-hide-content
-// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+// @see https://getbootstrap.com/docs/4.0/utilities/screenreaders/
 @include sr-only()
-
 // Use in conjunction with .sr-only to only display content when it's focused.
 // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
-// Credit: HTML5 Boilerplate
 @include sr-only-focusable()
 
 /* -------------------------------------------------------------------------- */
@@ -199,6 +199,7 @@
 /* -------------------------------------------------------------------------- */
 
 // CSS image replacement
+// @see https://getbootstrap.com/docs/4.0/utilities/image-replacement/
 @include text-hide()
 
 /* -------------------------------------------------------------------------- */
@@ -215,4 +216,5 @@
 /* -------------------------------------------------------------------------- */
 
 // Visibility
+// @see https://getbootstrap.com/docs/4.0/utilities/visibility/
 @include invisible($visibility) // Options: collapse, hidden, visible
diff --git a/gistfile1.scss → bootstrap-4-sass-mixins-cheat-sheet.scss b/gistfile1.scss → bootstrap-4-sass-mixins-cheat-sheet.scss
diff --git a/gistfile1.txt → gistfile1.scss b/gistfile1.txt → gistfile1.scss
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,218 @@
+/* -------------------------------------------------------------------------- */
+// All Bootstrap 4 Sass Mixins [Cheat sheet]
+// @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
+/* -------------------------------------------------------------------------- */
+
+// Alerts
+@include alert-variant($background, $border, $color)
+
+/* -------------------------------------------------------------------------- */
+
+// Contextual backgrounds
+@include bg-variant($parent, $color)
+
+/* -------------------------------------------------------------------------- */
+
+// Badges
+@include badge-variant($bg)
+
+/* -------------------------------------------------------------------------- */
+
+// Single side border-radius
+@include border-radius($radius: $border-radius)
+@include border-top-radius($radius)
+@include border-right-radius($radius)
+@include border-bottom-radius($radius)
+@include border-left-radius($radius)
+
+/* -------------------------------------------------------------------------- */
+
+// Shadows
+@include box-shadow($shadow...)
+
+/* -------------------------------------------------------------------------- */
+
+// Breakpoint viewport sizes and media queries.
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@include media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@include media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@include media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@include media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
+
+/* -------------------------------------------------------------------------- */
+
+// Button variants
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+@include button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%))
+@include button-outline-variant($color, $color-hover: #fff)
+// Button sizes
+@include button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius)
+
+/* -------------------------------------------------------------------------- */
+
+// Clearfix
+@include clearfix()
+
+/* -------------------------------------------------------------------------- */
+
+// Float
+@include float-left()
+@include float-right()
+@include float-none()
+
+/* -------------------------------------------------------------------------- */
+
+// Form control focus state
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `@input-border-color-focus` variable.
+@include form-control-focus()
+@include form-validation-state($state, $color)
+
+/* -------------------------------------------------------------------------- */
+
+// Gradients
+// Horizontal gradient, from left to right
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+@include gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%)
+// Vertical gradient, from top to bottom
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+@include gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%)
+@include gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg)
+@include gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) 
+@include gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f)
+@include gradient-radial($inner-color: #555, $outer-color: #333)
+@include gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg)
+
+/* -------------------------------------------------------------------------- */
+
+// Framework grid generation
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+@include make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints)
+
+/* -------------------------------------------------------------------------- */
+
+/// Grid system
+// Generate semantic grid columns with these mixins.
+@include make-container()
+// For each breakpoint, define the maximum width of the container in a media query
+@include make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
+@include make-row()
+@include make-col-ready()
+@include make-col($size, $columns: $grid-columns)
+
+/* -------------------------------------------------------------------------- */
+
+// Hover state
+@include hover()
+@include hover-focus()
+@include plain-hover-focus()
+@include hover-focus-active()
+
+/* -------------------------------------------------------------------------- */
+
+// Responsive image
+// Keep images from scaling beyond the width of their parents.
+@include img-fluid()
+
+// Retina image
+// Short retina mixin for setting background-image and -size.
+@include img-retina($file-1x, $file-2x, $width-1x, $height-1x)
+
+/* -------------------------------------------------------------------------- */
+
+// List Groups
+@include list-group-item-variant($state, $background, $color)
+
+/* -------------------------------------------------------------------------- */
+
+// Lists
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+@include list-unstyled()
+
+/* -------------------------------------------------------------------------- */
+
+// Horizontal dividers
+// Dividers (basically an hr) within dropdowns and nav lists
+@include nav-divider($color: #e5e5e5)
+
+/* -------------------------------------------------------------------------- */
+
+// Navbar vertical align
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
+// @include navbar-vertical-align($element-height)
+
+/* -------------------------------------------------------------------------- */
+
+// Pagination
+@include pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius)
+
+/* -------------------------------------------------------------------------- */
+
+// Text reset
+@include reset-text()
+
+/* -------------------------------------------------------------------------- */
+
+// Resize anything
+@include resizable($direction) // Options: horizontal, vertical, both
+
+/* -------------------------------------------------------------------------- */
+
+// Only display content to screen readers
+// See: http://a11yproject.com/posts/how-to-hide-content
+// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+@include sr-only()
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Credit: HTML5 Boilerplate
+@include sr-only-focusable()
+
+/* -------------------------------------------------------------------------- */
+
+// Sizing shortcuts
+@include size($width, $height: $width)
+
+/* -------------------------------------------------------------------------- */
+
+// Tables
+@include table-row-variant($state, $background)
+
+/* -------------------------------------------------------------------------- */
+
+// Typography
+@include text-emphasis-variant($parent, $color)
+
+/* -------------------------------------------------------------------------- */
+
+// CSS image replacement
+@include text-hide()
+
+/* -------------------------------------------------------------------------- */
+
+// Text truncate
+// Requires inline-block or block for proper styling
+@include text-truncate()
+
+/* -------------------------------------------------------------------------- */
+
+// Transitions
+@include transition($transition...)
+
+/* -------------------------------------------------------------------------- */
+
+// Visibility
+@include invisible($visibility) // Options: collapse, hidden, visible