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.
Basic 12 column grid, includes some shorthands such as
There are three breakpoints; desktop, laptop and mobile.
Read more about how elk handles responsive design in the "Mobile First" section.
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.
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.
Aligns items in a row
Aligns content in a column
Half parent width
Third parent width
Two thirds of parent width
Child ratio of parent width, in increments of 12th's
Hide On Desktop, hides content on desktop resolution
Hide On Laptop
Hide On Mobile
Show On Desktop, show content on desktop resolution
Show On Laptop
Show on Mobile
Vertically center contents of self
Horizontally center contents of self
Large/Medium/Small vertical space, applies to top and bottom of self
Large/Medium/Small horizontal space, applies to left and right of self
self has No Margin
self has No Padding
self is Not Responsive (will not react to change in screen size)
Pull self to left of parent
Pull self to right of parent
Use flex baseline to align items to bottom of text
Fill Height, (only works in flex-flow: column)
Allows content to fill full width of container, ignoring the container padding.
Auto Width, used on pop-out with col's to fully span container width
Inline Block, p and a elements are inline by deult thus their self margins/paddings aren't valid unless inline-block/block
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 ↓
|Dave Gamache||26||Male||San Francisco|
Pray that your loneliness may spur you into finding something to live for, great enough to die for.
Created by cxss