Before you even start adding class or style attributes, Bonsai CSS applies a base styling to your semantic HTML elements. Simply load Bonsai CSS in to your project and your base HTML elements will be beautifully styled with zero effort.
In terms of CSS frameworks, utilities commonly refer to a CSS class which applies a single CSS property to an element. For example a class name of .bg-green
would apply background-color: green
to that element. A Utility Complete framework provide a complete set of utilites for the majority of CSS properties.
There is nothing new about the concept of utility complete CSS and today you will find any number of utility first frameworks to pick from. What is unique about Bonsai however, is how these utilities are implemented. Traditionally utility complete frameworks include a rule for every common CSS property/value combination. Not only does this result in an incredibly large CSS filesize it also means you are restricted to a set number of property/value combinations as defined by the framework developers. Bonsai CSS uses a different approach. Instead utilities are defined by just the property and you the developer define the value. Not only is the resulting CSS a fraction of the size, you also have full access to the CSS spec for each property.
<div style="--bg:var(--dark)"><div>
<div style="--bg:#2A2A2A"><div>
<div style="--bg:rgb(42,42,42)"><div>
<div style="--bg:rgba(0,0,0,.8)"><div>
Where relavent utilities can be applied conditionally to each screensize. This allows you to apply utilities to specific screen size making responsive design a walk in the park.
By default there are four breakpoints set in correspondance with the most common device resolutions.
/* Small '-sm' */
@media (min-width: 640px) { ... }
/* Medium '-md' */
@media (min-width: 768px) { ... }
/* Large '-lg' */
@media (min-width: 1024px) { ... }
/* Extra Large '-xl' */
@media (min-width: 1280px) { ... }
To assign a utility to a set screensize breakpoint simply prepend with a -
followed by the breakpoint shorthand name. Media queries by default use a mobile-first approach, which as it sounds is designing for the smallest screen and working your way up.
Consider the following example where --d
is the Bonsai utility for the display
CSS property. Button is disply:block
by default. display:none
from medium size screens up.
<button style="--d:block; --d-md:none">Only visible on small screens</button>
Author: bonsaicss
Demo: https://www.bonsaicss.com/
Source Code: https://github.com/bonsaicss/bonsai.css
#css #programming