Bellmaker

• Project page at herereadthis.com/code/bellmaker/
• Demo page at bellmaker.herereadthis.com

The Bellmaker is a library of device-agnostic and device-specific media queries that will complement your exisiting CSS.

• It will help you make responsive websites, especially if you are using grid layouts.
• It is free to use and modify as you please.
• Both LESS (.less) and SASS (.scss) versions are available.
• Can currently complement Bootstrap 3.2.x

Build and view the Demo

# install SASS in order to run its compiler
$ gem install sass
# get the repo
$ git clone https://github.com/herereadthis/bellmaker.git
$ cd bellmaker/
$ npm install
$ npm run bower
$ npm run grunt
$ npm run server

Site will load at http://localhost:9000/

Setup

The Bellmaker assumes you have basic terminal skills and knowledge of Git. Additionally, your project is using LESS/SASS and Grunt.

But what if my project is old school?

Maybe you write your novels on a typewriter. Maybe you develop your Tri-X in Rodinal. In which case, there is supplemental documentation for using the Bellmaker as straight CSS.

CSS importing

Recommended: Add the Bellmaker as a Bower dependency

$ bower install --save bellmaker

Alternative: Add the Bellmaker as a submodule

$ cd my_repo
$ git submodule add https://github.com/herereadthis/bellmaker.git
$ git add bellmaker .gitmodules
$ git commit -m "adds Bellmaker submodule"

Importing

/* Import LESS file */
@import "/PATH_TO_BOWER/bellmaker/src/less/bellmaker.less";
/* Import SASS file */
@import "/PATH_TO_BOWER/bellmaker/src/sass/bellmaker.scss";

Configuration

Reset page styling to make 10px = 1REM

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* existing attributes */
}
body {
    font-size: 100%;
    font-size: 1em;
    /* existing attributes */
}

(For more useful global CSS resets and utilities, check out out the companion Mossflower repository on the herereadthis Github.)

$ bower install --save mossflower

Add vital stuff to your index.html file

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Concepts

Media queries in Bellmaker bubble up from smallest to largest, in sequence. For resolutions that would mostly likely occur on handheld devices, the Bellmaker will fill the container it is given. The resolutions covered are 320, 360, 480, 568, 640, and 720.

Media queries in the Bellmaker create a pseudo-liquid snapping layout. That is, as the screen gets larger, the elements on the page go to higher fixed widths. Each of the fixed widths was selected because they are divisible by 2, 3, 4, 6, 12, 16, and 24, which makes grid layouts easier. Resolution ranges were selected because the breakpoints are a best-fit for commonly-occurring screen resolutions.

| Breakpoint | Fixed Width | 3 Cols | 4 Cols | 12 Cols | 16 Cols | 24 Cols | | ---- | ---- | ---- | ---- | ---- | ---- | ---- | | 768 - 1024 | 768px | 256px | 192px | 64px | 48px | 32px | | 1024 - 1280 | 960px | 320px | 240px | 80px | 60px | 40px | | 1280 - 1440 | 1152px | 384px | 288px | 96px | 72px | 48px | | 1440 and up | 1344px | 448px | 336px | 112px | 84px | 56px |

Usage

Device-agnostic output as LESS

.bellmaker_container {
    @media @da_baseline {
        width: @pw_baseline;
    }
    @media @da_2x_small {
        width: @pw_2x_small;
    }
    @media @da_x_small {
        width: @pw_x_small;
    }
    @media @da_small {
        width: @pw_small;
    }
    @media @da_medium {
        width: @pw_medium;
    }
    @media @da_large {
        width: @pw_large;
    }
    @media @da_x_large {
        width: @pw_x_large;
    }
}

Device-agnostic output as SASS

.bellmaker_container {
    @media #{$da_baseline} {
        width: $pw_baseline;
    }
    @media #{$da_2x_small} {
        width: $pw_2x_small;
    }
    @media #{$da_x_small} {
        width: $pw_x_small;
    }
    @media #{$da_small} {
        width: $pw_small;
    }
    @media #{$da_medium} {
        width: $pw_medium;
    }
    @media #{$da_large} {
        width: $pw_large;
    }
    @media #{$da_x_large} {
        width: $pw_x_large;
    }
}

Note: the abbreviation "da" stands for "device-agnostic," and "pw" stands for "page width."

Compiled as CSS

@media only screen and (min-width: 320px) {
    .bellmaker_container {
        width: 100%;
    }
}
@media only screen and (min-width: 480px) {
    .bellmaker_container {
        width: 100%;
    }
}
@media only screen and (min-width: 640px) {
    .bellmaker_container {
        width: 100%;
    }
}
@media only screen and (min-width: 768px) {
    .bellmaker_container {
        width: 76.8rem;
    }
}
@media only screen and (min-width: 1024px) {
    .bellmaker_container {
        width: 96rem;
    }
}
@media only screen and (min-width: 1280px) {
    .bellmaker_container {
        width: 115.2rem;
    }
}
@media only screen and (min-width: 1440px) {
    .bellmaker_container {
        width: 134.4rem;
    }
}

To speed up development, there is always the option of skipping or omitting breakpoints. In the above code, there is no need to declare breakpoints at 480px or 640px because #container_id {} would still be 100% width. Also, if you don't feel like (or would rather delay) designing for very large screens, then there is no need to specify @media @da_x_large {...} As such, even though the Bellmaker does provide 7 breakpoints, you can use just 4 as a bare minimum.

As LESS

.bellmaker_container {
    @media @da_baseline {   width: @pw_baseline;}
    @media @da_small {      width: @pw_small;}
    @media @da_medium {     width: @pw_medium;}
    @media @da_large {      width: @pw_large;}
}

As SASS

.bellmaker_container {
    @media #{$da_baseline} {    width: $pw_baseline;}
    @media #{$da_small} {       width: $pw_small;}
    @media #{$da_medium} {      width: $pw_medium;}
    @media #{$da_large} {       width: $pw_large;}
}

Notice how the LESS/SASS variable names of the media queries just became very easy to remember?

@media only screen and (min-width: 320px) {
    .bellmaker_container {width: 100%;}
}
@media only screen and (min-width: 768px) {
    .bellmaker_container {width: 76.8rem;}
}
@media only screen and (min-width: 1024px) {
    .bellmaker_container {width: 96rem;}
}
@media only screen and (min-width: 1280px) {
    .bellmaker_container {width: 115.2rem;}
}

Device-Specific Output

| Name | Actual Resolution | Pixel Ratio | Display Resolution | Aspect Ratio | Known Devices | | ---- | ---- | ---- | ---- | ---- | ---- | | 720 HD:2 | 720×1280 | 2| 360:640 | 9:16 | Blackberry Z30; Motorola Droid Maxx, Moto G, Moto X(1), Razr HD; Samsung GN2; Sony Xperia S | | 768 WXGA:2 | 768×1280 | 2| 384×640 | 3:5 | Google Nexus 4 | | 768 WXGA:2.4 | 768×1280 | 2.4 | 320×533 | 3:5 | Nokia Lumia 920, 925, 928 | | 800 WXGA:2 | 800×1280 | 2 | 400×640 | 5:8 | Samsung GN1 | | 1080 HD:3 | 1080×1920 | 3 | 360×640 | 9:16 | Google Nexus 5; HTC Hero M7+; Motorola Moto X(2); LG G2; Nokia Lumia Icon; Samsung GS4, GS5, GN3; Sony Xperia Z(1-3) | | WQHD:4 | 1440×2560 | 4 | 360×640 | 9:16 | LG G3, Samsung GN4 | | early iPhone | 320×480 | 1 | 320×480 | 2:3 | iPhone 1-3 | | iPhone 4 | 640×960 | 2 | 320×480 | 2:3 | iPhone 4(s) | | iPhone 5 | 640×1136 | 2 | 320×568 | 40:71 | iPhone 5(s)(c) | | iPhone 6 | 750×1334 | 2 | 375×667 | 375:667 | iPhone 6 | | iPhone 6 Plus | 1242×2208 | 3 | 414×736 | 9:16 | iPhone 6 Plus | | early iPad | 768×1024 | 1 | 768×1024 | 3:4 | iPad 1-2; iPad Mini 1 | | retina iPad | 1536×2056 | 2 | 768×1024 | 3:4 | iPad 3, 4; iPad Air 1-2; iPad Mini 2-3 |

Notice how at first glance, there seems to be too many different screen resolutions of which to keep track, most actually share the same 360×640 resolution? They are all using a 9:16 aspect ratio. Use the ds_ratio_9_16 variable. ("ds" stands for device-specific). Also, regardless of orientation, the formulat is always lowest ratio : highest ratio.

Target all 9:16 phones (LESS)

@media @ds_ratio_9_16 {
    #container_id   {width: 100%;}
}

Target all 9:16 phones (SASS)

@media #{ds_ratio_9_16} {
    #container_id   {width: 100%;}
}

Compiled as CSS

@media only screen and (device-aspect-ratio: 9/16) {
    #container_id   {width: 100%;}
}

Here is the complete listing of how to target phones by aspect ratio:

| Aspect Ratio | Brand | Models | | ---- | ---- | ----| | 9:16 | Blackberry | Z30 | | 9:16 | Google | Nexus 5 | | 9:16 | HTC | Hero M7/M8 | | 9:16 | LG | G2/G3 | | 9:16 | Motorola | Droid Maxx, Moto G, Moto X(1)/X(2), Razr HD | | 9:16 | Nokia | Lumia Icon | | 9:16 | Samsung | GN2/GN3/GN4, GS4/GS5 | | 9:16 | Sony | Xperia S/Z1/Z2/Z3 | | 3:5 | Nokia | Lumia 920/925/928 | | 5:8 | Samsung | GN1 | | 2:3 | Apple | iPhone 1/2/3/4 | | 3:4 | Apple | iPad 1/2/3/4, Air 1-2, Mini 1-3 |

Orientation

There are two ways to target orientation, depending on your personal preference. Declare the orientation as a variable (orientation_landscape vs. orientation_portrait) or use the pre-assigned variable (_landscape vs. _portrait).

LESS

@media @ds_ratio_9_16 @orientation_landscape {}
@media @ds_ratio_9_16_landscape {}

@media @ds_ratio_9_16 @orientation_portrait {}
@media @ds_ratio_9_16_landscape {}

SASS

@media #{ds_ratio_9_16} #{orientation_landscape} {}
@media #{ds_ratio_9_16_landscape} {}

@media #{ds_ratio_9_16} #{orientation_portrait} {}
@media #{ds_ratio_9_16_landscape} {}

Compiled as CSS

@media only screen and (device-aspect-ratio: 9/16) and (orientation : landscape) {
}
@media only screen and (device-aspect-ratio: 9/16) and (orientation : portrait) {
}

Math Operators

Box-model dimensions and offsets can use mixins, which will range from breakpoints da_small to da_x_large. Breakpoints da_baseline, da_2x_small, and da_x_small are not part of the math operators because sizing for them is done as percentages.

Use these mixins especially for moving columns around. Remember that offsets and factors will be calculated as REM units.

// LESS: Offset mixin:
.bellmaker_offset(@attribute,@offset) {};
// LESS Factor mixin:
.bellmaker_factor(@attribute,@factor) {};

// SASS: Offset mixin:
@include bellmaker_offset($attribute,$offset) {};
// SASS Factor mixin:
@include bellmaker_factor($attribute,$factor) {};

Example: offset left padding

// As LESS: section will now always be 30rem width less than parent
// container, so that a 30rem sidebar can floated right
section {
    float: left;
    .bellmaker_offset(width, -30);
}
aside {
    float: right;
    width: 30rem;
}

// As SASS
section {
    float: left;
    @include bellmaker_offset(width, -30);
}
aside {
    float: right;
    width: 30rem;
}

/* output */
section {
    float: left;
}
@media only screen and (min-width: 768px) {
    section {width: 448px;}
}
@media only screen and (min-width: 1024px) {
    section {width: 660px;}
}
@media only screen and (min-width: 1280px) {
    section {width: 852px;}
}
@media only screen and (min-width: 1440px) {
    section {width: 1044px;}
}
aside {
    float: right;
    width: 30rem;
}

Available attributes are width, height, padding-top, padding-right, padding-bottom, padding-left, padding-top, padding-right, padding-bottom, padding-left, margin-top, margin-right, margin-bottom, and margin-left.

Integrate the Bellmaker to your existing frameworks

LESS integration with Twitter Bootstrap (add bootstrap_integration.less)

@import "/PATH_TO/../bootstrap/less/bootstrap.less";
@import "/PATH_TO/../bellmaker/src/less/bellmaker.less";
@import "/PATH_TO/../bellmaker/src/less/bootstrap_integration.less";

Now you will have 7 breakpoints in Bootstrap

.col-bl-##
.col-ss-##
.col-xs-##
.col-sm-##
.col-md-##
.col-lg-##
.col-bl-##