https://htmx.org logo
Join DiscordCommunities
Powered by
# missing_dot_css
  • g
    That's odd,,,
  • g
    Looks like you're using an older version where the class names don't have the angle brackets
  • e
    I grabbed it from the 
    link
    in the docs a day or two ago. You've been working fast! Last I checked, the docs use a link tag to version 0.2
  • g
    Nah, I've just forgot that that link doesn't update itself
  • g
    another possibility for grid syntax:
    Copy code
    html
<div class="grid">
  <!-- spans first two columns, except only the first one on small screens -->
  <div data-col="1 2" data-col@s="1" data-row="1">
  <!-- letting the column be implicit for this one -->
  <div data-row="1">
</div>
  • g
    with reckless use of attribute selectors, this might just work
  • g
    @User sorry for the frequent @s but we're near 1.0. any objections/feedback/recommendations to the grid syntax above?
  • g
    Copy code
    html
<div class="box margin grid">
    <div class="box info" data-col="1"   data-row="1 2">Sidebar  </div>
    <div class="box info" data-col="2 4" data-row="1 3">Main     </div>
    <div class="box info" data-col="5 6" data-row="2"  >Auxiliary</div>
</div>
  • g
    here's some of the css making it work:
  • s
    Looks neat! I assume you don't want the extra character, but just in case, had you considered using "data-cols" and "data-rows" (plural)? They read more naturally, but may not be worth the extra verbosity.
  • g
    I was just thinking the same thing actually
  • s
    Btw what does it mean for the column to be implicit? It spans all available columns?
  • g
    Next available cell
  • g
    We just leave it up to the CSS grid algorithm
  • s
    makes sense 👍
  • g
    @User first draft of grid is done, docs here: https://deploy-preview-24--missing-style.netlify.app/docs/grid/
  • s
    by "uneven rows" you mean "auto-sized rows", or more precisely, "rows whose height fit to the content", right?
  • g
    auto
  • s
    It might be good to make that clearer. "Uneven" seems to refer to something off-balance, incorrect, or intentionally non-uniform
  • s
    (not just for the documentation, but for the class names as well)
  • s
    On a separate note: it may be worth adding a quick mention that the column/row specification differs slightly (and deliberately, for ease of use) from CSS's native properties. A brief mention of this with a link to the MDN (or some other resource) on grid syntax should be sufficient IMO
  • s
    Also: might be good to spell out that s and l stand for "small" and "large" (a small thing, but saves the reader a mental cycle or two)
  • g
    all good criticisms
  • m
    Why use data attribute instead of classes for some things?
  • g
    12 * 3 attribute selectors instead of 144 * 3 classes
  • g
    You can do stuff like "starts with/ends with" with attribute selectors that makes it easier to support a large range of values
  • m
    oh, I didn't know that
  • m
    interesting
  • g
  • g
    @brainy-ice-92385 @swift-translator-13366 @early-camera-41285 I'd like to add links to your websites to the missing.css homepage, is that ok?
1...353637...44Latest