elkCSS

A sickeningly simple and responsive CSS boilerplate.





Intro


elkCSS is a result of the DRY principle and irritation with other frameworks, time and time again I've had to remake the same things for websites, often taking valuable time to remind myself of documentation and properties. Other frameworks also have their annoying niggles, ranging from long-winded class names to convoluted media queries and grid systems.


elk does away with all of that, staying as simple as possible.

As a result elk is well suited for rapid development, small websites (a mere 1.8KiB when gzipped), or those who don't want to hook in large frameworks.

Star
Fork

Responsive grid


Basic 12 column grid, includes some shorthands such as

half, third, twothirds and full.

The whole thing has 3 breakpoints, desktop, laptop and mobile.

Read more about how elk handles responsive design in the "Mobile First" section.

col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-12
half
half
third
two-thirds
full


"Mobile First"


Fuck


That


Shit.


Mobile First has to be the worst paradigm ever. It's complicated and difficult to visualise elements popping in as screen size expands. It only makes sense you'd reduce, rather than introduce complexity with smaller screen sizes.

Instead, elk uses a unique system of removing elements as the screen size gets smaller, a sort of "Mobile Last".

For example, hiding an element when on a Laptop resolution will also mean the element is hidden on a Mobile resolution also.

Consider,

Which produces,

I'm getting outta here when you're on a Laptop or smaller

I'm here to stay, forever.

The first element inside the row will disappear on a Laptop, but it also won't be present on a Mobile either.

Similarly you can use

.sod/l/m

to show elements when the user is on a certain device.

A caveat of this approach is that elements can not specifically be hidden or shown only on one resolution. Hide and Show can also not be used on the same element at the same time.



Classes


.container
.row

Aligns items in a row

.column

Aligns content in a column

.half

Half parent width

.third

Third parent width

.twothirds

Two thirds of parent width

.col-1...12

Child ratio of parent width, in increments of 12th's

.hod

Hide On Desktop, hides content on desktop resolution

.hol

Hide On Laptop

.hom

Hide On Mobile

.sod

Show On Desktop, show content on desktop resolution

.sol

Show On Laptop

.som

Show on Mobile

.vcenter

Vertically center contents of self

.hcenter

Horizontally center contents of self

.l/m/s_round

Large/Medium/Small border-radius helper

.l/m/s_shadow

Large/Medium/Small box-shadow

.l/m/s_vs

Large/Medium/Small vertical space, applies to top and bottom of self

.l/m/s_hs

Large/Medium/Small horizontal space, applies to left and right of self

.l/m/s_p

Large/Medium/Small padding

.nm

self has No Margin

.np

self has No Padding

.nr

self is Not Responsive (will not react to change in screen size)

.blur-container

Set a parent element for the pseduo-element blur-content

.blur-content

Create the pseudo element blur-content

.pull-left

Pull self to left of parent

.pull-right

Pull self to right of parent

.b

Bold text

.i

Italic text

.u

Underline text

.lt

LineThrough text

.bl

Use flex baseline to align items to bottom of text

.fh

Fill Height, (only works in flex-flow: column)

.pop-out

Allows content to fill full width of container, ignoring the container padding.

.aw

Auto Width, used on pop-out with col's to fully span container width

.circle

Applies a circular border-radius, will be a circle if object has aspect ratio of 1:1

.ib

Inline Block, p and a elements are inline by default thus their self margins/paddings aren't valid unless inline-block/block



Exemplar


With this simple set of classes you can create complex layouts without writing a single line of CSS yourself in a condensed fashion.

Hello World! My name is elkCSS and I'm a slick CSS boilerplate made for the cool minimalist kids.

These three imposters below thee, begone on mobile!

Image Caption

Simple blur

Blurring an image is a nice effect, but can be pretty painful to implement since the usual way of doing it also blurs the content.


elkCSS supplies numerous subtle helpers to polish up your site.

Misc. UI

A number of subtle UI helper classes are included,

.x_round, .x_shadow., x_p., x_vs., x_hs

 and,

.blur_container, .blur_content

Where x is either, l, m, s, for Large, Medium or Small.



Their use is shown below.


Elements


NameAgeSexLocation
Dave Gamache26MaleSan Francisco
Dwayne Johnson42MaleHayward
  • Eggs
  • Milk
    • Chocolate
    • Sweets
Pray that your loneliness may spur you into finding something to live for, great enough to die for.

By default Helvetica is used for text and Inconsolata for code, served by Google Fonts.

Heading 1

5rem

Heading 2

4.2rem

Heading 3

3.6rem

Heading 4

3.0rem
Heading 5
2.4rem
Heading 6
1.5rem


Credits


elkCSS 2.0

Created by 

ttxi

Like my work? Consider donating 

here.
Sites built with elkCSS