https://htmx.org logo
Join Discord
Powered by
# missing_dot_css
  • m
    I would be interested in someone who has used tailwinds a lot: what are the top 10 most useful classes/ideas from it if we were to offer them in a stripped down version?
  • m
    refining the language around the facets of untitled.css: * Classless CSS - It renders well out of the box with Vanilla HTML, like a classless CSS library such as pico * Semantic Power Structure - It takes advantage of semantic, lesser used tags such as 
    nav
    , 
    main
    and 
    section
    to allow for more elaborate layouts in pure HTML * Aria-Driven Components - It offers "High Power" arias that capture high level components on, as much as is possible, a single CSS element * Utility Classes - It offers a set of [utility classes](https://cube.fyi/utility.html) that captures the 80/20 of libraries like tailwinds
  • m
    @User turned me on to the Aria-Driven components idea and I like it
  • m
    Again the goal here is to provide a css library that "looks right" out of the box, then allows you to do some styling/layout with some opinionated semantic HTML, then add some components via an aria system, then do a bit of tweaking with utility classes. It is not intended to be a complete design system for a full, final, commercial project, but rather get you going and say 50% of the way there.
  • m
    and let you scale in to how much you want to move beyond vanilla HTML in much the same way htmx lets you scale in to AJAX
  • g
    CSS variables also seem like a big part of the solution
  • m
    yes
  • b
    So in my view, Tailwind is super low-level. It feels like there's close to a 1-2-1 mapping of a CSS property and a Tailwind class. I think that the reason it's so popular is that the JS frontends are all about components, so you can use it in a component and then use that component whever you want. LoB and all that. I think that the best ideas from it are: 1. massive coverage: a lot of CSS is included. 2. learnable syntax. 
    ml-1
    for 
    margin-left: ???
    but also then 
    hover:ml-1
    for the hover version.
  • b
  • g
    Copy code
    html
<div class="margin:1 :hover{margin:1}">
  • g
    most learnable syntax i can think of
  • m
    perhaps 
    margin:1
    is a relative designation?
  • m
    Is that what that means?
  • m
    I am old school so that reads "margin is 1px" to me
  • g
    my unit of choice would be 1 line height
  • m
    yes 👑
  • m
    @User do you have this book: https://every-layout.dev/
  • m
    ?
  • g
    vertical rhythm
  • g
    no
  • m
    May I buy it for you?
  • b
    Personally, I've found that Tachyons is good enough for replacing Tailwind - a small set of classes that do most of what I want from Tailwind. With Tailwind you really have to purge. No one uses all of it.
  • m
    yes, I'd like to get the 80/20 or tailwinds or more like the 95/5 because, if you want tailwinds, just use tailwinds
  • b
    have you thought about a tailwind plugin?
  • m
    otoh, I think a small and controlled ability to tweak would keep untitled.css in play longer
  • m
    no
  • b
    their form plugin adds nice default styling to form inputs for example
  • b
  • m
    that sounds like a good approach, but they are coming from another direction
  • m
    I want this to start like a classeless library, progress through some opinionated pure semantic HTML, then helper classes/arias (willing to discuss this) and then finally some small tweaks
12345...44Latest