bonsaicss / bonsai.css Goto Github PK
View Code? Open in Web Editor NEWA Utility Complete CSS Framework for less than 45kb (8kB Gzipped) -
Home Page: https://www.bonsaicss.com/
License: MIT License
A Utility Complete CSS Framework for less than 45kb (8kB Gzipped) -
Home Page: https://www.bonsaicss.com/
License: MIT License
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
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.
I think users of bonsai.css would stand to gain a lot from setting up purgecss with their build tool.
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!
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
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?
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.
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!
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
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?
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?
How about adding some accessibility classes (like .sr-only mostly) to bonsai.css?
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
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?
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) {
...
}
Is it possible to add multiple utilities per class, for example:
.myClasss{
--bg:blue;
--p:1em;
}
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!
Hello,
The docs lists flex-basis --fb
but it is not implemented. Please add it. Thank you in advance.
I couldn't find pseudo-class support.
Please give a little example if it's implemented.
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;
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
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?
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
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
Hi, just wondering if this repo is still maintained?
Some issues using the blockquote:
blockquote {
border-left: 4px solid var(--primary);
background-color: #fff;
margin: 1.5rem 0;
padding: 1rem 1.5rem;
font-style: italic;
}
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.
Safari are gradually starting to add more support for logical CSS properties, which will assist with RTL.
You can also add support for:
in https://github.com/bonsaicss/bonsai.css/blob/master/src/utilities/_border.css
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.