[HN Gopher] Show HN: Bolt.css - Another classless CSS library
___________________________________________________________________
Show HN: Bolt.css - Another classless CSS library
Author : tbolt
Score : 75 points
Date : 2022-10-24 15:37 UTC (7 hours ago)
(HTM) web link (boltcss.com)
(TXT) w3m dump (boltcss.com)
| nawgz wrote:
| Looks decent, pretty minimalistic.
|
| The form / input styles should use :focus-within instead of
| :hover to apply styles, using "power-user" keyboard navigation
| with tab and such doesn't correctly show what you have focused. I
| was pretty surprised by this - it's sloppy to add new input
| styles that give less information than the default browser styles
| about what is focused
|
| Textarea removing the little "resize" widget in the bottom left
| is also pretty disappointing, being able to resize textareas so
| they're massive when you're typing in them and small when you're
| done with them is very convenient. For instance check out the
| comment box on HN, the small angled lines in the bottom right let
| you resize the box. I understand it can sometimes break layouts
| but it's not a good reason to remove it.
|
| It's good you have used CSS vars for lots of configuration but I
| find the choices of 7px and 11px for (highlight-)border-radius to
| be strange, usually powers of 2 are all the rage these days
|
| Inline text blocks look clean, I like those a lot
| tbolt wrote:
| These are all great points and I will plan to address them
| alehlopeh wrote:
| This looks great on mobile Safari. Overflow-y scrolling inside
| the code block is a great touch. In fact the only real issue I
| see is the very last element, the range slider, for which the
| handles don't fully reach either edge. Awesome job.
| rutierut wrote:
| These keep popping up again and again but are "generally" a
| terrible idea. At some point you'll need something that you
| imagined would for sure have an HTML tag and then the misery
| begins.
| jaywalk wrote:
| What misery? It's not like using something like this means you
| can _only_ use these styles. It would be very easy to build on
| this.
| joshmn wrote:
| I have been writing HTML for... 20 years? And I just learned
| there is a `meter` element that supports `high`, `low`, and
| `optimum`.
|
| https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me...
|
| I knew about the other weird ones though.
| hobofan wrote:
| A "classless CSS library" is just a stylesheet, isn't it?
| thaunatos wrote:
| Classless as in the library only uses element and pseudo
| selectors, no `.class` selectors.
| teen wrote:
| But it's not really a library... just a stylesheet?
| [deleted]
| codazoda wrote:
| I like it, nice work!
| tbolt wrote:
| After seeing so many classless css libraries pop up over the past
| few years I decided to make my own. Nothing too fancy with it but
| I like the style and will be using it on some other small
| projects. Open to feedback or opinions.
| brunno wrote:
| From a quick look it's nice but I think the grey background
| color for the inputs is not a good choice, it gives the
| impression that they are disabled.
| Tagbert wrote:
| What is the value of a classless CSS system?
| WorldMaker wrote:
| Extremely simple static site generation (like Grandma used to
| bake in the 90s web). Either by hand with minimalist HTML or
| just taking the output directly from almost any
| Markdown/reStructuredText/Asciidoc/etc processor and
| generally only needing to add a single LINK tag at the top to
| one of these CSS files.
| TheGoodBarn wrote:
| Places where you want to auto-generate html reports or do
| simple data processing into html and not fuss over basic
| inline styles.
|
| I have a few internal tools that use https://newcss.net/ and
| it is just a nice tool to have in your quiver.
| dec0dedab0de wrote:
| you can switch between them without altering the html
| [deleted]
| tobr wrote:
| Your styles for <mark> and <code> don't look good when the
| element breaks across multiple lines. Thankfully there's an easy
| fix, the relatively unknown {box-decoration-break: clone;}
| doerig wrote:
| Here is small list of other "classless" CSS libraries I have
| found over the years
|
| - https://github.com/andybrewer/mvp
|
| - https://github.com/kognise/water.css
|
| - https://github.com/xz/new.css
|
| - https://github.com/vladocar/Basic.css
|
| - https://github.com/oxalorg/sakura
|
| - https://github.com/igoradamenko/awsm.css
|
| - https://github.com/hawkz/gdcss
|
| - https://github.com/emareg/classlesscss
|
| - https://github.com/vincentdoerig/latex-css (disclaimer: I am
| the author)
| baruchel wrote:
| Also https://github.com/dbohdan/classless-css
|
| By the way, why not mention the very well tuned Pico.css?
| https://picocss.com/examples/preview/
| clarkdale wrote:
| - https://github.com/kevquirk/simple.css
| cantSpellSober wrote:
| Overwriting blue links with...blue links that fail WCAG2 and have
| no pseudo-classes.
|
| Replacing the default down arrow in <details> with...a down arrow
| SVG.
|
| Delete it from the page and the main changes are 1. no rounded
| corners 2. content can possibly be larger than 800px
|
| What's the point of this "library?"
|
| > Use it in other projects
|
| That's the place _not_ to use this. This is just "I think
| browser defaults should look like _this_. " Use it in any other
| project and all these element-based rules have a different
| specificity than the class-based ones. Have fun!
| tbolt wrote:
| The links have a contrast ratio of 5.58:1. Perhaps that isn't
| the highest but it's AA and doesn't completely fail.
| dmitriid wrote:
| Additionally: form fields are styled to look disabled.
| samaybhavsar wrote:
| This is pretty neat. I loved it.
___________________________________________________________________
(page generated 2022-10-24 23:01 UTC)