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.
Basic 12 column grid, includes some shorthands such as
The whole thing has 3 breakpoints, desktop, laptop and mobile.
Read more about how elk handles responsive design in the "Mobile First" section.
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.
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
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.
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 border-radius helper
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)
Set a parent element for the pseduo-element blur-content
Create the pseudo element blur-content
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
Applies a circular border-radius, will be a circle if object has aspect ratio of 1:1
Inline Block, p and a elements are inline by default thus their self margins/paddings aren't valid unless inline-block/block
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!
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.
A number of subtle UI helper classes are included,
Where x is either, l, m, s, for Large, Medium or Small.
Their use is shown below.
|Dave Gamache||26||Male||San Francisco|
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.
Like my work? Consider donatinghere.