bonsaicss/bonsai.css

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

bonsai.css's Issues

--text-c on other elements

Hey @ciar4n and @C-Lodder,

you can currently set the heading (h1-h6) color with the color class helpers (.white, .blue etc.), but not on other elements. What do you think about extending the list slightly with some inline elements?

At least for me span / b / i and maybe code / mark could make sense, for example <span class="green">Green Text</span>

span, i, /*..*/ {
  color: var(--text-c, inherit);
}

Or how about another class combination like (.accent.primary) for text color (.color.primary)?

Thank you!

The flex-basis utility is documented but not impleneted.

Hello,
The docs lists flex-basis --fb but it is not implemented. Please add it. Thank you in advance.

[Idea] Support size better, like small?

Hey @ciar4n,

I know you want to keep it as lightweight as possible, but there are multiple cases where helpers for sizing may be useful (to keep it consistent through multiple elements). For example currently the button spacing is quite "hardcoded":

  padding-right: 28px;
  padding-left: 28px;
  margin: .5rem .5rem .5rem 0;
  padding: 10px 12px;

Do you see a way to make this more dynamic (like moving the spacing stuff to variables)?

Or maybe (that's a big maybe), better supporting constructions like:

<small><button>..</button></small>

small button {
   /* lower spacing etc. */
}

An alternate would be classes, like .btn-small, .btn-lg - But this wouldn't be as dynamic and only focused on button elements :-/

What do you think?

Thanks,
Yves

[Issue] -xl is not overwriting -lg / -md

Hey @ciar4n,

not sure if this is intended, but -xl is not overriding -md or -lg elements.

"Worst case" sample:
https://codepen.io/yvesh-the-sans/pen/XWKPRXg

It's related to the ordering and !important, either it needs a max-width on the media queries (like bootstrap is doing in certain cases) or change the ordering (and remove !important -- ?).

What do you suggest?

Thank you!

Dark mode

What would be the most idiomatic way to add a dark mode switch in Bonsai? It's easy to add a dark-mode class, overwrite some variables from src/variables.css and toggle it on body with e.g. a checkbox. However that approach does not allow for css transitions. Any hints?

Trying Bonsaicss

Hi.

I want to start using Bonsai but I have some problem:

<div style="--fx --fd:row --jc:center --ai:center;"></div>

<div id="container"></div>

where:

#container {
    display: flex;
    /* establish flex container */
    flex-direction: row;
    /* make main axis horizontal (default value) */
    justify-content: center;
    /* center items horizontally, in this case */
    align-items: center;
    /* center items vertically, in this case */
}

for my understanding must have the same meaning, but is not working.

Because an internal div with id="box" and style:

.box {
     width: 300px;
     margin: 5px;
    text-align: center;
}

Is not centered horizontally with Bonsai

What I'm doing wrong?

.button class

Hey @ciar4n,
can we have a .button (or .btn whatever) class, just like we have with .tag? (Would make it easier to style links etc. as buttons) or is this too much? ;)
Thanks!

Docs mention something called bedrock

In https://www.bonsaicss.com/docs/getting-started/installation/:

"Extract and include the ./dist/bedrock.min.css"

Old project name perhaps? The code snippet underneath has bonsai.min.css so I wanted to check what the right one is :) Thanks!

[Idea] Architecture: Atoms + Molecules

I am really enjoying using Bonsai in Svelte with my own custom helper classes to style molecules. That's where I got this idea. It fits nicely with Atomic design methodology.

Atoms (Vars) + Molecules (Classes) = ⚡

Atoms: At this level Bonsai has a lot to offer (base, helpers, and utility complete CSS).
Molecules: Little to offer. There are helper classes (.group) which style at molecule level. It would be great to offer more helper classes to set more than one property or to unset or override styles without repeating vars. This would become a separate module (i.e., molecule.css).

We can also borrow ideas from other frameworks.
Atomizer uses Atoms with a few helper classes:
https://github.com/acss-io/atomizer

--fg (flex-grow) not implemented?

Hey @ciar4n,
flex-grow seems not to be implemented (at least when i check the dist version of bonsai.css) - it's mentioned in the documentation (utilities section) though.

Missing code:

[style*="--fg:"] {
    flex-grow: var(--fg) !important;
}

Thanks,
Yves

docs?

Is there a repo for the docs?

I spotted a few references to bedrock in the docs and a lot of errors in the headers

Several Improvements

Hi, I like the concept of bonsai.css very much. Thank you for developing it.

If anyone is interested, I fixed some issues, and added a few things.
https://markusgritsch.github.io/bonsai.css/myindex.html
https://markusgritsch.github.io/bonsai.css/dist/mybonsai.css

The switch is an <input type="checkbox" role="switch">

The progress and (continuously spinning) busy indicator are new, the input range is a bit tweaked.

The descender cropping and the height of the <select> is fixed.

Despite being disabled="", buttons still reacted to hover and clicking. This is now fixed.

Radio buttons properly display the focus border now and check boxes use an SVG check mark because the tick glyph was rendered black on my iPhone 6.

The grid layout can now be used without class="grid" and I added the grid-auto-flow property to be able to have a responsive auto flow direction.

I added the bullet styling from the markdown book.css.

The @media rule now also affects printing, since printing a page styled for a phone does not look appealing.

The basic grid layouting was missing the xl @media rule.

Some other minor fixes.

Feel free to add some or all changes to your excellent bonsai.css framework.

Redundant styles cursor and cursor:hover

Hi, I don't understand when the 2nd rule would be useful
in case we define --cur and we hover this element we will see the defined cursor

AFIK defined cursor is only shown while we hover the element.
What is the reason for defining cursor property for :hover?

[style*="--cur:"] {
cursor: var(--cur) !important;
}
[style*="--cur:"]:hover {
cursor: var(--cur, var(--cursor));
}

I see there is a fallback value in the second rule.
But It has not any effect:
if the attr style has --cur defined It will show --cur
otherwise the rule does not match and var(--cursor) is not used

Thanks

[Issue] block-quote issues (collection)

Some issues using the blockquote:

• Currently block quote styles are not easily overridable ("only" by changing the border-left property, some --color helper would be nice).
• Top and bottom padding is too much (half or 10px instead of 16px would be better) -> imho
• Background color is fixed to #fff; (Is there any reason to set it at all?)
• Maybe make it usable with size helper (--x), not sure

blockquote {
  border-left: 4px solid var(--primary);
  background-color: #fff;
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  font-style: italic;
}

Default font-size, weight and line-height as CSS variables

Hey @ciar4n,

i feel the basic font-size, line-height and weight in _body.css should be CSS variables too. Would fit into the general scheme and makes overriding them easier, especially because other elements with rem are related to it.

  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;

to

  font-size: var(--text-size, 15px);
  line-height: var(--text-line-height, 1.6);
  font-weight: var(--text-weight, 400);

You used --text as prefix for the other font related settings, so I used it in this example too.

What do you think?

--shadow is not really box-shadow

Hey @ciar4n,

in the documentation (Utilities) --shadow is described as box-shadow. But it's more a helper for a shadow without any customizations.

What do you think about adding a separate helper for box-shadow? --bs is already taken.

Sample usage:

--box: 0 0 0 2px var(--primary) inset;

or

--boxs: 0 0 0 2px var(--primary) inset;

Adding multiple utilities for a class

Is it possible to add multiple utilities per class, for example:

.myClasss{
    --bg:blue;
    --p:1em;
}

Mention/document use of purgecss or equivalent

I think users of bonsai.css would stand to gain a lot from setting up purgecss with their build tool.

Is this CSS framework still maintained?

Hi, just wondering if this repo is still maintained?

Accessibility helpers

How about adding some accessibility classes (like .sr-only mostly) to bonsai.css?

[Bug] .accent is setting overflow:hidden

Is there any reason .accent is setting an overflow:hidden property?

As accent is about styling imho it shouldn't be there.

https://github.com/bonsaicss/bonsai.css/blob/master/src/base/_utilities.css#L74

[Feature] Add class to unstyle default styling

Hi,

Every now and then there's need to add classes for unstyling elements.
Like this:

.button-icon {
  border: unset;
  box-shadow: unset;
}

If we add support for .unstyle class there'll be no need to unset/override styles and it'll come handy.
For example:

.button:not(.unstyle), button:not(.unstyle) {
  ...
}

Descenders of characters (bottom of 'g', 'y', 'j', 'p') is chopped off in <select> elements

Using Chrome:

I've worked around this by adding the following to my custom.css:

select { line-height: inherit; }

Although there may be nicer ways in the source e.g. remove select from the following?

.button, button, input[type=button], input[type=checkbox], input[type=radio], input[type=range], input[type=submit], select { line-height: 1em; cursor: pointer; white-space: nowrap; }

Great project btw, many thanks.

--background-body clearification

in the _body.css on line 14 (https://github.com/bonsaicss/bonsai.css/blob/master/src/base/_body.css#L14) the background for the html tag is set with the variable --background-body without a fallback.

But this one is defined nowhere and is not listed in variables.css. Is there a reason for this?
--background is defined, but not used at this location.

Non intiutive utility naming

I nice to have one utility for each css to use it with different responsive prefixes,
When I want to use bonsai.css utilities I can't guess whats the utility name for the property I want to use.
I think it'd be better to have utilities with the same name as each property

For example if have this a div with this style in the clasic way I'd VSC autocomplete and copy&paste compatibility from stackoverflow

border: 1px solid black;
box-shadow: 2px 2px 0px red;

Then if I'd like to make something more especific for responsive

border: 1px solid black;
box-shadow: 2px 2px 0px red;
--border-md: 4px solid black;
--box-shadow-md: 4px 4px 0px red

I've implemented this change

│ bonsai-utilities.min.css │ 30.83 kB │ 4.96 kB │ Original
│ bonsai-utilities.min.css │ 30.50 kB │ 4.34 kB │ Utilities renamed and removed non resposive

│ bonsai.min.css │ 47.92 kB │ 8.09 kB │ Original
│ bonsai.min.css │ 47.07 kB │ 7.96 kB │ Utilities renamed and removed non resposive

[Question] Pseudo-classes: Undocumented or Missing?

I couldn't find pseudo-class support.
Please give a little example if it's implemented.

Logical properties

Safari are gradually starting to add more support for logical CSS properties, which will assist with RTL.

You can also add support for:

• border-inline-start
• border-inline-end

in https://github.com/bonsaicss/bonsai.css/blob/master/src/utilities/_border.css

[Issue] PayPal Button

Maybe the .input and input settings are too generic?

Just tried integrating a PayPal Button (Type doesn't matter) with bonsai.css enabled. Especially because the official paypal markup is weird (to keep it polite).

    <input type="image" name="submit"
    src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif"
    alt="Donate">

This results in a 100% width unreadable image with a border etc. What do you think does that need fixing from bonsai side?

Special cases aren't special enough to break the rules?

Buttons had lost the color

As you can see in the demo page buttons have not colors. It was not the case with version from september

Question

Hello, I'm here to ask someone to tell me how/why to use this library. I want to give it a try but I can't figure out the advantages 😕.

After some test I ended up with something like this to make a card

<div style="--maxw:400px; --p:0; --br:5px;">...</div>

but how this this can be considered different from classic inline style which doesn't require any lib?

<div style="max-width:400px; padding:0; border-radius:5px">...</div>

Each time I have a card I have to copy/paste the whole style attribute over and over, and if I have to change the style of the card I have to do a find/replace and change all the occurrence :(. Also i have to create a class anyway when I need to handle pseudo elements and pseudo selectors.

Can some explain me the difference/advantages?