A Sass/Stylus mixin enabling swift, maintainable and performant implementation of responsive design mockups.
- Copy the source code of the Sass or the Stylus implementation
- Paste it in a file in your repo
- Import the
scaleLinearlyBase()
mixin in a stylesheet where you want to use it. - Preferably wrap it with a new mixin called
scale()
initialised with your defaults, as shown in the example below - That's it, you're ready to scale!
In a global, or shared (one per UI module) file, import scaleLinearlyBase()
and wrap it with the defaults of the mockups you're given by your designer. Here I assume I was given a small mockup of 320px width and a large mockup of 1440px width.
I usually try to keep most of my global or shared "magic" CSS values organised in separate files like
lengths.scss
andcolors.scss
, but for simplicity's sake I'll just inlined them in this example.
/* homepage.scss */
@import 'path/to/global/mixins/scaleLinearlyBase.scss';
$lengths-mockup-viewport-min: 320px;
$lengths-mockup-viewport-max: 1440px;
@mixin scale(
$property,
$lengthAtViewportSm,
$lengthAtViewportLg,
$capMaximum: true,
$useImportant: false
) {
@include scaleLinearlyBase(
$property,
$lengthAtViewportSm,
$lengthAtViewportLg,
$capMaximum,
$useImportant,
$lengths-mockup-viewport-min,
$lengths-mockup-viewport-max,
);
}
Then in your Sass stylesheet:
/* hero.scss */
@import '../homepage.scss';
h1 {
@include scale(font-size, 26px, 48px);
}
Or with Stylus:
/* hero.styl */
@import '../homepage.styl';
h1 {
scale(font-size, 26px, 48px);
}
I've setup a minimal live demo app implemented with the help of scaleLinearly()
.
Resize your browser window and watch the design flow in response.
You can also check-out the source code of the demo app.
Check the the announcement article on Medium for all the juicy details.
There's no NPM module to import at this time, since I prefer to keep it a simple copypasta file.
If enough people think it would be useful, sure, I'd be happy to! Just open an issue.
Distributed under the MIT license. See LICENSE.md
for more information.
- Fork it (https://github.com/maninak/scaleLinearly/fork)
- Create your feature branch (
git checkout -b feature/fooBar
) - Commit your changes (
git commit -am 'Add some fooBar'
) - Push to the branch (
git push origin feature/fooBar
) - Create a new Pull Request