Intro
elkCSS is a bare bones CSS boilerplate designed for making simple sites rapidly. It does very little to effect the style of elements and instead focuses on giving the user a solid grid system to work off to create their designs.
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.
Responsive grid
Basic 12 column grid, includes some shorthands such as half, third, twothirds and full.
There are three 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"
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. This way complexity is reduced when moving down in resolution as opposed to introducing it.
Consider,
Which produces,
Laptop or smaller... I disappear.
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 breakpoint. Hide and Show can also not be used on the same element at the same time.
Classes
.container
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/svs
Large/Medium/Small vertical space, applies to top and bottom of self
.l/m/shs
Large/Medium/Small horizontal space, applies to left and right of self
.l/m/sp
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)
.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
.ib
Inline Block, p and a elements are inline by deult thus their self margins/paddings aren't valid unless inline-block/block
Exemplar
With this simple set of classes you can create complex layouts in a condensed fashion without writing a single line of CSS yourself.
A simple and responsive CSS boilerplate.
Hide all three images below on mobile ↓
Image Caption
Elements
| Name | Age | Sex | Location |
|---|---|---|---|
| Dave Gamache | 26 | Male | San Francisco |
| Dwayne Johnson | 42 | Male | Hayward |
- Eggs
- Milk
- Chocolate
- Sweets
Pray that your loneliness may spur you into finding something to live for, great enough to die for.
Heading 1
5rem
Heading 2
4.2rem
Heading 3
3.6rem
Heading 4
3.0rem
Heading 5
2.4rem
Heading 6
1.5rem
elkCSS 1.2.0
Created by cxss