[kyoo-bit] noun
- an ancient linear unit based on the length of the forearm, from elbow to the tip of the middle finger.
- a JavaScript library that helps to abstract media queries (concrete measurements) out of your stylesheets.
- Style using arbitrary classes like
.lg
instead of@media
.getComputedStyle
magic allows media queries still power when the class updates. - Declare your breakpoints once the page loads, and update them in realtime whenever you like (i.e. per page optimzations). A dynamic stylesheet is generated and updated as breakpoints are configured.
- Keep concrete breakpoint values out of your stylesheets. And truly so, meaning without a preprocessor!
Include cubit.js
anywhere in your <head>
and specify your desired breakpoints using data-cubit
like so:
<script src="cubit.js" data-cubit='
{
"xl" : "(min-width: 1401px)",
"lg" : "(min-width: 1001px) and (max-width: 1400px)",
"md" : "(min-width: 701px) and (max-width: 1000px)",
"sm" : "(min-width: 481px) and (max-width: 700px)",
"xs" : "(max-width: 480px)"
}
'></script>
Note that the included example.html
file provides a minified inline version elimiating the extra http request.
data-cubit
should contain a JSON object with name/value pairs of CSS class names that correlate to a desired breakpoint. Using the example above, the class xl
would be applied to the <html>
element when the user's viewport is at least 1401px
wide. Once Cubit is running you no longer need to write concrete media queries within your stylesheets, allowing you to change this:
.el {
font-size: 1rem;
}
@media (min-width: 1401px) {
.el {
font-size: 1.5rem;
}
}
To this:
.el {
font-size: 1rem;
}
.xl .el {
font-size: 1.5rem;
}
Adding the data-cubit-expose-api
attribute to your script
tag will expose the setBreakpoints
function to the window
.
<script src="cubit.js" data-cubit='initial json' data-cubit-expose-api></script>
Calling setBreakpoints
with a javascript object formatted similar to the initial JSON will update the breakpoints used to determine when classes switch:
setBreakpoints({
xl: "(min-width: 1801px)",
lg: "(min-width: 1201px) and (max-width: 1800px)",
md: "(min-width: 1001px) and (max-width: 1200px)",
sm: "(min-width: 481px) and (max-width: 1000px)",
xs: "(max-width: 480px)"
})
- Blog Post – For a more in-depth rundown on why we made Cubit.
- Playground – Be a kid again, have some fun!
We would love to hear your thoughts on Cubit! If you have any questions or ideas on how to improve the codebase, don't hesitate to jump in and wrangle some code with us.