| 'use strict'; | |
| define([], function() | |
| { | |
| /** | |
| * Loops through each event type, attaches the listener, and creates a | |
| * fallback with `attachEvent`. | |
| * @param {object} el The element on which to attach the listener. | |
| * @param {array} type A array containing the event type(s) to | |
| * listen for. |
| // For JavaScript | |
| @if $has-media-query == true { | |
| head { | |
| font-family: 'xxsmall'; | |
| @include breakpoint(xsmall) { font-family: 'xsmall'; } | |
| @include breakpoint(small) { font-family: 'small'; } | |
| @include breakpoint-custom('(min-width: #{ems(686px, $breakpoint-context)})') { font-family: 'small_custom'; } | |
| @include breakpoint(medium) { font-family: 'medium'; } |
Uses a map to store breakpoint values for screen, component and anything else you can think of.
Has a layout indicator to show you the type of breakpoint (screen, component, etc.), the name (s, m, l, etc.) and the pixel value of the break.
This demo uses Bourbon Neat for generating media queries, but of course, use whatever you want.
Usage:
.foo {
| <html> | |
| <head> | |
| <title>Sass Breakpoints</title> | |
| </head> | |
| <body> | |
| <div></div> | |
| </body> | |
| </html> |
| $.validator.addMethod('notEqualTo', function(value, element, param) { | |
| return this.optional(element) || value !== param; | |
| }, 'Value cannot be equal to ' + param + '.'); |
| +1-{{ phoneNumber|trim|replace({'(': '', ')': '', ' ': '-', '.': '-'}) }} |
| {% extends '_layouts/default' %} | |
| {% set meta = { | |
| title: entry.title, | |
| url: entry.url, | |
| description: entry.description|default(entry.body), | |
| keywords: entry.keywords, | |
| image: entry.image.first().url | |
| } %} |
| .pop-out-icon { | |
| display: block; | |
| position: relative; | |
| &:after { | |
| @include pop-out; | |
| bottom: 1.5rem; | |
| content: ""; | |
| position: absolute; | |
| right: 1.5rem; |
| /// Clamps, aka truncates, multi-line text. Note that non-webkit browsers will | |
| /// not see the ellipsis ¯\_(ツ)_/¯ | |
| /// @param {Value} $font-size - Font size of the text | |
| /// @param {Unitless Value} $line-height - Line height of the text; **must be a unitless value** | |
| /// @param {Number} $lines-to-show - Number of lines to show | |
| /// @example scss | |
| /// p { | |
| /// @include line-clamp($font-size: 16px, $line-height: 1.5, $lines-to-show: 3); | |
| /// } | |
| @mixin line-clamp( |