+++ /dev/null
-Bootstap Media Breakpoints:
-
-@include media-breakpoint-up(xs) { ... }
-@include media-breakpoint-up(sm) { ... }
-@include media-breakpoint-up(md) { ... }
-@include media-breakpoint-up(lg) { ... }
-@include media-breakpoint-up(xl) { ... }
-
-// Example usage:
-@include media-breakpoint-up(sm) {
- .some-class {
- display: block;
- }
-}
-
-@include media-breakpoint-down(xs) { ... }
-@include media-breakpoint-down(sm) { ... }
-@include media-breakpoint-down(md) { ... }
-@include media-breakpoint-down(lg) { ... }
-
-@include media-breakpoint-only(xs) { ... }
-@include media-breakpoint-only(sm) { ... }
-@include media-breakpoint-only(md) { ... }
-@include media-breakpoint-only(lg) { ... }
-@include media-breakpoint-only(xl) { ... }
-
-
-
-GRID
-
-$grid-columns: 12;
-$grid-gutter-width-base: 30px;
-
-$grid-gutter-widths: (
- xs: $grid-gutter-width-base, // 30px
- sm: $grid-gutter-width-base, // 30px
- md: $grid-gutter-width-base, // 30px
- lg: $grid-gutter-width-base, // 30px
- xl: $grid-gutter-width-base // 30px
-)
-
-$grid-breakpoints: (
- // Extra small screen / phone
- xs: 0,
- // Small screen / phone
- sm: 576px,
- // Medium screen / tablet
- md: 768px,
- // Large screen / desktop
- lg: 992px,
- // Extra large screen / wide desktop
- xl: 1200px
-);
-
-$container-max-widths: (
- sm: 540px,
- md: 720px,
- lg: 960px,
- xl: 1140px
-);
-
-// Creates a wrapper for a series of columns
-@mixin make-row($gutters: $grid-gutter-widths) {
- display: flex;
- flex-wrap: wrap;
-
- @each $breakpoint in map-keys($gutters) {
- @include media-breakpoint-up($breakpoint) {
- $gutter: map-get($gutters, $breakpoint);
- margin-right: ($gutter / -2);
- margin-left: ($gutter / -2);
- }
- }
-}
-
-// Make the element grid-ready (applying everything but the width)
-@mixin make-col-ready($gutters: $grid-gutter-widths) {
- position: relative;
- // Prevent columns from becoming too narrow when at smaller grid tiers by
- // always setting `width: 100%;`. This works because we use `flex` values
- // later on to override this initial width.
- width: 100%;
- min-height: 1px; // Prevent collapsing
-
- @each $breakpoint in map-keys($gutters) {
- @include media-breakpoint-up($breakpoint) {
- $gutter: map-get($gutters, $breakpoint);
- padding-right: ($gutter / 2);
- padding-left: ($gutter / 2);
- }
- }
-}
-
-@mixin make-col($size, $columns: $grid-columns) {
- flex: 0 0 percentage($size / $columns);
- width: percentage($size / $columns);
- // Add a `max-width` to ensure content within each column does not blow out
- // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
- // do not appear to require this.
- max-width: percentage($size / $columns);
-}
-
-// Get fancy by offsetting, or changing the sort order
-@mixin make-col-offset($size, $columns: $grid-columns) {
- margin-left: percentage($size / $columns);
-}
-
-@mixin make-col-push($size, $columns: $grid-columns) {
- left: if($size > 0, percentage($size / $columns), auto);
-}
-
-@mixin make-col-pull($size, $columns: $grid-columns) {
- right: if($size > 0, percentage($size / $columns), auto);
-}
-
-.container {
- max-width: 60em;
- @include make-container();
-}
-.row {
- @include make-row();
-}
-.content-main {
- @include make-col-ready();
-
- @media (max-width: 32em) {
- @include make-col(6);
- }
- @media (min-width: 32.1em) {
- @include make-col(8);
- }
-}
-.content-secondary {
- @include make-col-ready();
-
- @media (max-width: 32em) {
- @include make-col(6);
- }
- @media (min-width: 32.1em) {
- @include make-col(4);
- }
-}
-
-// NAVBAR
-
-<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
- <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <a class="navbar-brand" href="#">Navbar</a>
-
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item active">
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Link</a>
- </li>
- <li class="nav-item">
- <a class="nav-link disabled" href="#">Disabled</a>
- </li>
- </ul>
- <form class="form-inline my-2 my-lg-0">
- <input class="form-control mr-sm-2" type="text" placeholder="Search">
- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
- </form>
- </div>
-</nav>
\ No newline at end of file