Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

A file I have in my helpers that makes doing inline media queries pretty good :) extra-small, small, medium, large, larger, huge, massive

View _mediaQueries.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
/* ==========================================================================
Media Queries:
How to get inline media querey
Order from small to big.
extra-small, small, medium, large, larger, huge, massive.
Should be noted when using min-width your styles outside any mediaqueries are the smallest and global.
For best pratices media queries should be in em's, they shouldnt be relative to the design and not the popular devices.
You may use pixels and swap them out at the end.
You can call the below queries like below:
e.g @include breakpoint(small) { width: 60%; }
These breakpoints use min-width for mobile first approach to webdesign.
Max-width: Is usually not the best practice for a responsive site as it requires lots of overide code.
Obviously customise this to your design.
** If you need to add any more break points I currently suggest using number increaments like the following:**
massive-01
massive
huge-02
huge-01
huge
larger
large-01
large
medium
small
extra-small
========================================================================== */
@mixin breakpoint($point) {
@if $point == massive {
@media (min-width: 120em) { @content; }
}
@else if $point == huge {
@media (min-width: 100em) { @content; }
}
@else if $point == larger {
@media (min-width: 75em) { @content; }
}
@else if $point == large {
@media (min-width: 60em) { @content; }
}
@else if $point == medium {
@media (min-width: 54em) { @content; }
}
@else if $point == small {
@media (min-width: 30em) { @content; }
}
@else if $point == extra-small {
@media (min-width: 20em) { @content; }
}
}
 
/* Example of all of the above
@include breakpoint(massive) {
font-size: 1.4em;
}
@include breakpoint(huge) {
font-size: 1.4em;
}
@include breakpoint(larger) {
font-size: 1.4em;
}
@include breakpoint(large) {
font-size: 1.4em;
}
@include breakpoint(medium) {
font-size: 1.4em;
}
@include breakpoint(small) {
font-size: 1.4em;
}
@include breakpoint(extra-small) {
font-size: 1.4em;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.