Oldie Compiler is a simple, mobile-first solution that reduces time and effort by extracting breakpoint specific styles into Less/Sass mixins. This allows the mixins to be defined at any specified breakpoint and reused for IE7/8 specific styling. This allows the developer to write less while still keeping his/her styles responsive.
Write all global styling as you normally would outside of all breakpoints at the top of your file. As a good practice scope them to the body class to avoid any style-specific scoping issues.
/*
--------------------------
Global Styles
(scoped to the body class)
--------------------------
*/
body.your-body-class {
}
/*
--------------------------
Mobile Specific Styles
--------------------------
*/
.foureighty() {
body.your-body-class {
}
}
Write all tablet-sized styling inside the sevensixtyeight mixin:
/*
--------------------------
768 Breakpoint
--------------------------
*/
.sevensixtyeight() {
body.your-body-class {
}
}
Write all desktop-sized styling inside the ninesixty mixin:
/*
--------------------------
968 Breakpoint
--------------------------
*/
.ninesixty() {
.test {
background-color:green;
position: absolute;
}
}
Write all 1280 wide specific styles inside the tweleveeighty mixin:
/*
--------------------------
1280 Breakpoint
--------------------------
*/
.tweleveeighty() {
body.your-body-class {
}
}
Write all HD 1920 wide specific styles inside the tweleveeighty mixin:
/*
--------------------------
1920 Breakpoint
--------------------------
*/
.nineteentwenty() {
body.your-body-class {
}
}
All 2x high rez image styling can be lest in the retina mixin:
/*
--------------------------
Retina
(Write all retina specific image styling here)
--------------------------
*/
.retina() {
body.your-body-class {
}
}
...because all your styling will be imported into the actual media queries as well as your .oldie styles at the bottom of your file. Simple as that.
/*
--------------------------
Compiler
(Do not write breakpoint specific styles here)
--------------------------
*/
@media (min-width:480px) {
.foureighty();
} @media(min-width:768px) {
.sevensixtyeight();
} @media(min-width:960px) {
.ninesixty();
} @media(min-width:1280px) {
.tweleveeighty();
} @media(min-width:1920) {
.nineteentwenty();
} @media (-webkit-min-device-pixel-ratio : 1.5),
(min-device-pixel-ratio : 1.5) {
.retina();
} .oldie {
.sevensixtyeight();
.ninesixty();
}
The result? All of the media queries you wrote plus auto-compiled IE styling.
body.your-body-class #main {
width:100%;
}
@media (min-width: 768px) {
body.your-body-class #main {
padding:0 20x;
width:748px;
}
}
@media (min-width: 960px) {
body.your-body-class #main {
width:920px;
}
}
@media (min-width: 1260px) {
body.your-body-class #main {
width:1220px;
}
}
@media (min-width: 1920px) {
body.your-body-class #main {
width:1880px;
}
}
@media (-webkit-min-device-pixel-ratio : 1.5),
(min-device-pixel-ratio : 1.5) {
body.your-body-class #main #logo {
background: url('../images/@2x-rez-logo.png') top left no-repeat transparent;
background-size:400px 400px;
}
}
.oldie body.your-body-class #main {
padding:0 20x;
width:748px;
}
.oldie body.your-body-class #main {
width:920px;
}