public
Last active

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

  • Download Gist
_mediaQueries.scss
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;
}
*/

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.