Droppin' Bars

A simple CSS grid system

by @antoniocapelo

"I came

to bring the pain

hardcore from

the brain

Let’s go inside

my astral plane”

"One for the money, yes sir, two for the show

A couple of years ago on Headland and Delowe

Was the start of something good

Where me and my nigga rode the Marta, through the hood"

"I'm a fuckin' walkin' paradox

no I'm not

Threesomes with a f*ckin' triceratops"

"I get mad frustrated when I rhyme

Thinkin' of all the kids that try to do this for all the wrong reasons"

"Yeah nigga what, what a surprise / Get ya sumn', make a nigga close both of your eyes

All my niggas gettin' money capitalize / Die little small guy, we on the rise / Everything a nigga touch platinumize / Fully equipped, you know we come wit' all the supplies"

"Thinkin’ of a master plan,

‘Cause ain’t nothin’ but sweat inside my hand"

"Well it's the taking of the Pelham 1, 2, 3 If you want a doody rhyme, then come see me"

Images

are responsive too

Samples

.bar-1

.bar-2

.bar-3

.bar-4

.bar-6

.bar-7

.bar-5

.bar-4

.bar-8

.bar-9

.bar-3

.bar-2

.bar-10

.bar-11

.bar-1

Usage

General

This grid follows a 12-column (bars) rule. So, for each row there needs to be a total of 12 bars for it to be filled.

12 || 6 + 6 || 5 + 7 || 4 + 8 || 3 + 9 || 2 + 10 || 1 + 11 || 3 + 3 + 3 + 3 || 4 + 4 + 4 || 1 + 1 + 1 + 1 + 1 + ....

Each bar can be used as a class or by @extending it on another CSS class.

<div class="myclass bar-6"\>
// or
.myclass {
    @extend .bar-6;
}

Responsiveness

The Droppin' Bars grid responds to 3 (it's the magic number) types of sizes: desktop, tablet and mobile.

For this, 3 breakpoints are used, stored on the $mobile-break, $tablet-break and $desktop-break SASS variables.

Utils

Use .hide-desktop, .hide-tablet and .hide-mobile classes to hide an element on a specific device.

Use .bar-center class as a shortcut to text-align: center on an element.

Use .bar-img on an image element to make it responsive while maintaining its ratio.

.bar classes are rounded to 100% width on mobile, but you can use .bar-1-mobile ... .bar-12-mobile to control the width percentage on mobile devices.

Lyrics reference (by order of appearance) :

Method Man - Bring The Pain

Outkast - Elevators (Me & You)

Tyler The Creator - Yonkers

The Fugees - How Many Mics

Busta Rhymes - Gimme Some More

Eric B. & Rakim - Paid in Full

Beastie Boys - Sure Shot