_____ _ _ _
| __ |___ ___ ___| |_ ___ ___|_|___| |_
| __ -| _| -_| .'| '_| . | . | | | _|
|_____|_| |___|__,|_,_| _|___|_|_|_|_|
|_| _____ ___
_.====.._ | __|_ _ ___| _|___ ___
,:._ ~-_ |__ | | | _| _| -_| _|
`\ ~-_ |_____|___|_| |_| |___|_|
| `. Version 0.0.1
,/ ~-_
-..__..-'' ~~--..__)`'-.,_)`'-.,)`'-
Breakpoint Surfer
Tool for faster responsive SCSS coding.
This tool will help with the following:
- You can define all responsive breakpoints and base font sizes in one json file
- New
media
mixin helps with faster coding - SCSS compiler that will produce optimized code
Installation
npm install -save-dev breakpoint-surfer
Create breakpoints.json
file to define your resolutions
{
"mobile": {
"breakpointStart": "200px",
"baseFontSize": "14px",
"fluidWidth": "true"
},
"phablet": {
"breakpointStart": "500px",
"baseFontSize": "14px",
"fluidWidth": "true"
},
"tablet": {
"breakpointStart": "700px",
"baseFontSize": "16px",
"fluidWidth": "true"
},
"desktop": {
"breakpointStart": "1000px",
"baseFontSize": "16px",
"fluidWidth": "false"
},
"desktop2": {
"breakpointStart": "1200px",
"baseFontSize": "16px",
"fluidWidth": "false"
},
"desktop3": {
"breakpointStart": "1400px",
"baseFontSize": "18px",
"fluidWidth": "false"
}
}
Create file breakpointSurfer.js
and inside paste the following code:
const surf = require('breakpoint-surfer')
surf({
breakpointsJson: './breakpoints.json',
input: 'style.scss',
output: './output/style.css'
})
Lastly, create your style.scss
file and paste the following:
@import 'breakpoint-surfer';
$baseline-ratio: 1.618 !global;
@include media(desktop) {
div {
padding: 10px;
}
}
To start the compilation, type node breakpointSurfer.js
and that's it. :)
How it works
We will start from the style.scss
file. Line @import 'breakpoint-surfer'
defines that we are loading all the necessary breakpoints, mixins and functions for media
mixin to work. This import works only with included SCSS compiler, which is defined in breakpointSurfer.js
.
To use this mixin, you can call any resolution defined in this file. For example, you can write something like this:
@include media(mobile, phablet, tablet) {
div {
padding: 10px;
}
}
Once compiled, appropriate media declarations will be made in final css file.
If you want to use all resolutions, you don't have to type every resolution name. Instead type this:
@include media(all) {
div {
padding: 10px;
}
}
Responsive variables
There are several variables that you can use only within your media
mixins:
$base-font-size // Returns base font size for current breakpoint
$base-px // Return baseline height in PX units for current breakpoint
$base-rem // Returns baseline height in REM units for current breakpoint
You can use these variables for example like this:
@include media(all) {
div {
font-size: $base-font-size;
line-height: $base-px;
}
}