bonsaicss

bonsai.css

A Utility Complete CSS Framework for less than 45kb (8kb Gzipped)

sample

Sarah Drake

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.

<figure style="--maxw:400px; --levitate:3; --p:0px --br:5px;">
    <img src="#" alt="sample" style="--m:2rem auto 0; --br:50%">
    <figcaption style="--ta:center">
        <h4>Sarah Drake</h4>
        <p> ... </p>
    </figcaption>
</figure>

Why build with Bonsai

Bonsai CSS is a super lightweight, fully responsive, utlity complete framework. All you need to build beautifully crafted web interfaces with ease.

  • A utility complete CSS framework solution
  • Classless base styling of semantic HTML elements
  • All packed inside a gzipped size of just 8kb
  • Drop n Build - No compiling required

Classless Base Element Styling

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.


Utility Complete CSS

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.

  • Super quick protyping with out leaving your HTML
  • CSS size remains constant as your project grows

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.

Style based utilities
<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>

Responsive design and media queries

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>

Discover limitless possibilites


Aliquam erat volutpat

Nullam malesuada erat

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

Aliquam erat volutpat

Sarah Drake

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.

Aliquam erat volutpat
Aliquam erat volutpat
Aliquam erat volutpat

Donec odio

Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.

Aliquam erat volutpat
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
Aliquam erat volutpat
Jane Doe

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam erat volutpat
Viktor Jones

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam erat volutpat
Marcia Stanley

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam erat volutpat
Giovanni Santana

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Aliquam erat volutpat

Nullam malesuada erat

18 hours ago | Entertainment

Sarah Drake

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.

Aliquam erat volutpat

Be Inspired

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.

Aliquam erat volutpat
Quisque volutpat mattis eros.

New Beginnings

Welcome

Quisque imperdiet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.

Aliquam erat volutpat
Quisque volutpat
€30.00
Aliquam erat volutpat
Lorem ipsum dolor sit amet
€90.00
Aliquam erat volutpat
Consectetuer adipiscing elit
€60.00
Aliquam erat volutpat
Quisque volutpat mattis
€120.00
1
Quisque volutpat

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

2
Nunc dignissim risus

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

3
Cras ornare tristique

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

4
Praesent placerat

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Join us today!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.

Aliquam erat volutpat
Lorem ipsum dolor sit amet

January 18, 2020

Aliquam erat volutpat
Ut enim ad minim veniam

March 24, 2020

Aliquam erat volutpat
Nemo enim ipsam voluptatem

Arpil 04, 2020

Questionaire

Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.

Image
CULTURE

Lorem ipsum dolor

5.0 (48 Reviews)
Aliquam erat volutpat
Aliquam erat volutpat
Aliquam erat volutpat
Aliquam erat volutpat

Our site uses cookies. Learn more about our use of cookies: Cookie policy

Be Creative

Lorem ipsum dolor sit amet

Beautiful Designs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ex fugiat quisquam.

Aliquam erat volutpat

A Perfect Place

bonsaicss

Get creative with Bonsai CSS