Bonkr is a normalized CSS boilerplate with a focus on style-agnostic usability, a simple layout system, and responsive flexibility. It's created as a starter-template with default component proportions & weight and some basic styling that won't conflict with yours, + some nice (and independant) features like dialogs and a loader.
You won't find any colours, embedded fonts, or navigation here — just a beautiful blank-slate for your content.
Font-sizing is rem based, relative to html { font-size: 17px; line-height: 1.6 }. No font-family is chosen, other than sans-serif, for simplicity — just copy the Open Sans, Proxima Nova, & Roboto link tags from your other projects...
I am a blockquote, and adding .quote will display this nifty quote on the right.
<blockquote class='quote'><p>
I am a <strong>blockquote</strong>, and adding <code>.quote</code> will display this nifty quote on the right.
</p></blockquote>
Structural basics in BONKR are focused on <main> content. Each section on this page lies within a (you guessed it)<section>, which are centered, with padding, & max width.
<header>, <nav>, <footer>, & <aside> are left alone to avoid "Bootstrapping" your styles. When adding these, you can use the flex helper classes below for layout; or just write custom styling.
You can obv overwrite the above styling with your preferred max-width, or use the .w-mx-# helper classes below.
An <article> is used to make a full-width bar like this. This is helpful when you want a background-colour, background-image, or width: 100% content. Since the <section> is a centered container, you can nest one inside to hold your content.
<article><section><p>
I am an article
</p></section></article>
Why?
This is done to avoid unecessary classes, using divs like .bar & .inner and such. Yes it's opinionated, and yes it's 3 lines of code you can remove if you so choose.
No, there aren't .filled, .knockout, .ghost, .simple classes in a variety of MaterialTM pallettes — yes, :focus, :hover, :active, :disabled, :focus:hover, & :active:hover are taken care of.
Buttons have no margin or spacing if they're butt-to-butt, but you can add margin classes or group into a flex container for separation.
<br>
Helper class .btn actually has all of the same styles as <button>, if you'd like to style a link.
Each button below has dialog-btn-open class and a data-dialog-id attribute that corresponds to a dialog modal's unique #dialog-<<id>>
Basic setup would be:
<button class='dialog-btn-open' data-dialog-id='hello'>Open Dialog!<button><div class='dialog' id='dialog-hello><div class='dialog-outer'> // Overlay to cover content & close via click
<div class='dialog-inner'> // Container for dialog content
<button class='dialog-btn-close'>Close Dialog</button>
Why hello there, I am a dialog...
</div></div></div>
Usability Notes
The open button adds a keydown listener that will close the dialog on ESC
This will also remove the listener (so ESC doesn't hide every dialog)
The close button and overlay-div function the same way
On dialog open - focus is given to the close button
On dialog close - focus is given back to the open button
The small script bonkr-loader.js looks for an element with #bonkr-loader if it exists. Onload, its show class will be removed and it will be hidden. Class loader will style it as a fullscreen overlay.
