Reminds me of a German designer proverb: „fällt dem Gestalter nichts mehr ein baut er ein paar Linien ein“. As in: when the designer has no idea how to clearly separate content he starts adding lines.
great quote. swiss german designer perhaps?
Minding the gaps: A new way to draw separators in CSS
61–70 of 99 posts
Re: Minding the gaps: A new way to draw separators in CSS
#62I wish they took the use-case of resizable panels into account. Even if the implementation is fully user-land, a styleable separator that can also receive events would be so useful.
It's absolutely crazy that the only way to get a native splitter in HTML is to use iframes.
I don't think that's true. The `resize` rule in CSS can do this.
Re: Minding the gaps: A new way to draw separators in CSS
#63Re: Minding the gaps: A new way to draw separators in CSS
#64> Adding a border changes the size of the items, which might not be desirable This issue has been addressed for well over a decade. Is the first line of everyone's css files not just: * { box-sizing: border-box; } That makes borders figure on the inside of the width rather than the outside. It's far more sane to reason about.
That does not solve the problem in the article. Consider this layout: If you start out with equally spaced columns, and then you add borders to content2 and content3 to end up with this visually: The DOM actually looks like this: Now content2 and content3 are smaller than content1, because the borders are part of their width. Borders are the wrong tool for this job no matter the value of box-sizing.
You just add padding to the items with borders so they visually consume the same space, then increase the width of everything except :first-child to account for the new padding/border. Easy!
That’s sarcasm, obviously. But man, I’ve spent so many hours over the years hacking little lines between HTML boxes.
Re: Minding the gaps: A new way to draw separators in CSS
#65Earlier quoted context omitted.
That does not solve the problem in the article. Consider this layout: If you start out with equally spaced columns, and then you add borders to content2 and content3 to end up with this visually: The DOM actually looks like this: Now content2 and content3 are smaller than content1, because the borders are part of their width. Borders are the wrong tool for this job no matter the value of box-sizing.
You just add padding to the items with borders so they visually consume the same space, then increase the width of everything except :first-child to account for the new padding/border. Easy! That’s sarcasm, obviously. But man, I’ve spent so many hours over the years hacking little lines between HTML boxes.
Oh, and don’t forget to update the styles or class name via JavaScript if you want to support drag and drop without it looking incredibly janky.
Re: Minding the gaps: A new way to draw separators in CSS
#66Reminds me of a German designer proverb: „fällt dem Gestalter nichts mehr ein baut er ein paar Linien ein“. As in: when the designer has no idea how to clearly separate content he starts adding lines.
great quote. swiss german designer perhaps?
Sadly don‘t know the original source. A design teacher of mine said it out load when he judged a design from a student.
Re: Minding the gaps: A new way to draw separators in CSS
#67I wish they took the use-case of resizable panels into account. Even if the implementation is fully user-land, a styleable separator that can also receive events would be so useful.
It's absolutely crazy that the only way to get a native splitter in HTML is to use iframes.
Front end web isn’t my specialty, but I really don’t know why framesets were deprecated. Having resizable panes as a primitive is crazy useful and applicable to several use cases (documentation with a nested tree sidebar comes to mind, for example).
Yeah they were ugly and looked like they came straight out of the Netscape 2.0 era (because they did) but that’s nothing CSS couldn’t have fixed.
Re: Minding the gaps: A new way to draw separators in CSS
#68Earlier quoted context omitted.
While that may be true, I’ll say that as a native English speaker that reading is not the most obvious reading of “row rule”, which to me would be “A determinate method prescribed for performing any operation and producing a certain result.” Indeed a “CSS rule” is already a thing and it has nothing to do with lines.
> Indeed a “CSS rule” is already a thing and it has nothing to do with lines. Shouldn't make a difference; we had the element ` ` (horizontal rule) since before CSS, after all.
honestly didn't know hr actually stood for that, huh
Re: Minding the gaps: A new way to draw separators in CSS
#69Earlier quoted context omitted.
But here the meaning of "rule" is not "straightedge", but rather the derived meaning "a thin printed line or dash". So "ruler" would be improper because that word doesn't have the typographical meaning.
Wait, so the "ruler guides" are misnamed, they are just "rules"? In any case, the things they added could very well have been called "column-divider" and "row-divider" with much less ambiguity because not everyone who has to wrangle with CSS is a designer by profession or by choice.
If I understand what you’re referring to, then I suspect you’re mistaken about the names you’re referring to.
I presume you’re talking about a feature like this: https://tagboard.com/product/guides-and-remote-refresh-capab...
In page layout software, the thin UI elements bordering the left side and top side of the page, with the little tick marks, is called a ruler. The tick marks on the ruler are called rules (just like the rules on a physical ruler used for measuring things). When you click/drag on the ruler elements, you create guides (or guidelines).
I’ve never seen “ruler guides” verbatim, but I would take that to be shorthand for “guides one could create using the ruler” (which would be a mouthful) to disambiguate the word “guide” when there isn’t sufficient context for the reader to likely understand what was meant.
The guides themselves are not rulers.
Re: Minding the gaps: A new way to draw separators in CSS
#70Note this was written by a "software engineer". A designer would have used white space for separation, not a line.
The designers behind practically every newspaper (including the New York Times) would disagree with you:
https://store.nytimes.com/cdn/shop/products/new-york-times-f...
If you’re against established, commonly accepted best practices for design, then I can’t argue with you — everyone is entitled to their own opinions, as unpopular as they may be.