[HN Gopher] Learn CSS layout the pedantic way (2015)
___________________________________________________________________
Learn CSS layout the pedantic way (2015)
Author : Tomte
Score : 239 points
Date : 2024-02-28 07:07 UTC (1 days ago)
(HTM) web link (book.mixu.net)
(TXT) w3m dump (book.mixu.net)
| leeoniya wrote:
| written before css grid and css columns?
|
| another z-index one:
|
| https://philipwalton.com/articles/what-no-one-told-you-about...
| Pathogen-David wrote:
| Yeah, according to https://book.mixu.net/ this was written in
| 2015, at nine years old I'd be worried about this not being
| super useful for modern CSS.
| avianlyric wrote:
| The core of CSS, and principles that new CSS features follow,
| haven't really changed in decades. It's just been built upon
| and refined.
|
| Given these articles are looking an underlying principles of
| the CSS layout process, I wouldn't worry about it being out
| of date. Everything it covers certainly hasn't changed
| (because so many websites would be very broken if they had),
| and new CSS will be built on the fundamental principles laid
| out here. So even if it doesn't cover stuff like grid, it
| will definitely provided much need background information to
| help you understand the details of how grid works, generally
| build a better intuition around how both old and new CSS
| features work.
| rchaud wrote:
| The core of CSS absolutely has changed. Unless you're
| building a mobile-only site, you're likely using media
| queries today to target multiple viewport sizes, which
| wasn't on anybody's radar in 2006.
|
| Much of these changes in CSS have simply beeen obscured by
| improvements in cross-browser compatibility and use of
| layout frameworks that hide all the complexity behind
| simple class names.
|
| In the 2000s, sites were built with the <table> element to
| simulate a grid.
|
| In the 2010s, it changed twice, first by using floats and
| CSS reset methods to create responsive columns. Then that
| went away in favour of Flexbox and Grid, which now have
| wide browser support.
|
| If you're building sites for IE6 compatibility, then things
| probably haven't changed much.
| filleduchaos wrote:
| > The core of CSS absolutely has changed. Unless you're
| building a mobile-only site, you're likely using media
| queries today to target multiple viewport sizes, which
| wasn't on anybody's radar in 2006.
|
| These two sentences don't really follow from each other?
| Gaining additional features isn't necessarily the same
| thing as the _core_ of a technology changing. The actual
| core of CSS would be things like its box model, stacking
| contexts, specificity, etc.
|
| And ironically you can in fact achieve responsiveness
| without using media queries. That's arguably the entire
| point of more sophisticated layout algorithms like
| flexbox and grid.
| nailer wrote:
| I worry that focusing on old layout techniques and hacks to
| get them to work, will propagate old layout techniques and
| hacks to get them to work.
| lesser_value wrote:
| What is the best way to learn css in depth? The official
| documentation is a little wierd about what is actual and what is
| not.
| Our_Benefactors wrote:
| Learn flexbox. Learn the box model (especially when to use
| margin vs padding). Learn how style cascading works (and why we
| use SCSS and component development to mostly avoid thinking
| about it). Learn media queries and how to target different
| screen sizes. Most of all, don't ever feel badly about doing a
| web search "how to do x in css", the spec is huge with tons to
| remember and you won't memorize everything without using it
| regularly for an extended period of time.
| uallo wrote:
| What do you mean by "official documentation"? The specification
| [1]? MDN [2]?
|
| [1] https://drafts.csswg.org/
|
| [2] https://developer.mozilla.org/en-US/docs/Web/CSS
|
| The former is not meant as a learning resource for new web
| devs. And the latter (which is neither official nor
| authoritative) usually has information about the "baseline"
| support and browser compatibility tables.
| lesser_value wrote:
| The former, I'm not really new just looking to increase my
| understanding of some concepts and learning from that has not
| been too fun. I don't think MDN goes in depth as much as I'd
| like it to.
| farleykr wrote:
| I've found the best way is to build things over and over again.
| That may reflect a certain learning style but actually
| manipulating styles and layouts really helps hammer home the
| practical aspects of how it works.
|
| I also approach writing CSS with the goal of writing as little
| as possible. Not because I don't like it - I tend to think it
| gets an unfairly bad rap - but because it teaches you how to
| more effectively style layouts without layering too many
| declarations.
| lesser_value wrote:
| I feel like this type of thinking is why 99% of people don't
| understands css though, when you are just building things you
| make up rules that don't exist and ignore the ones that do.
| And its not as straight forward as programming languages are
| so its very hard to tell when something is "wrong".
| farleykr wrote:
| Yeah, maybe my suggestion could've been better stated. I'm
| not suggesting that you can ignore documentation and other
| forms of writing that explore paradigms and methodologies.
| I meant there's only so much you can read before actually
| writing CSS and practicing making layouts becomes a
| necessary part of learning CSS in depth.
|
| And, to play devil's advocate a little: You can't make up a
| rule that doesn't exist. Either your CSS will work or it
| won't. And if it works it's not wrong.
| chrisfinazzo wrote:
| > You can't make up a rule that doesn't exist. Either
| your CSS will work or it won't. And if it works it's not
| wrong.
|
| So much this. Over the course of years, I've gone from
| writing my CV in Word, TeX, and (finally) straight HTML.
| Word processors are fairly straightforward -- and yet --
| for more complex layouts you will eventually encounter
| internal sizing constraints that require messing with the
| global template.
|
| This reality - combined with the fact that MS Office is a
| gigantic monster which is barely tolerable on macOS, led
| me to TeX. Plaintext -- more or less -- and good support
| for integrating with version control systems made it an
| easy choice.
|
| Fast forward a few years and I'm all HTML + a handful of
| CSS rules w/ @print at this point. Cryptic error messages
| and the care and feeding of a BasicTex install just
| became too much work to bother with. At least in HTML,
| save for a showstopping error, your document will render
| something and the errors are usually pretty obvious.
|
| Not so much in TeX...
|
| Modern layout also meant I could ditch floats for nearly
| everything - flexbox will create reasonable page headers
| with much less gnashing of teeth.
| Vinnl wrote:
| > what is actual and what is not
|
| Heh, off-topic, but this is one of my favourite "EU
| English"-isms: using _actual_ to mean _current_.
|
| Completely understandable, given how e.g. the Dutch translation
| of _current_ is _actueel_ (whereas the translation of _actual_
| is _daadwerkelijk_ ).
|
| Anyway, maybe this is even helpful if a native speaker is
| confused :)
| Tomte wrote:
| Yes, first example in
| https://en.m.wikipedia.org/wiki/Euro_English under
| Vocabulary.
| Vinnl wrote:
| Thank you! I've been trying to find [1] again, which I
| encountered ages ago, and this Wikipedia page got me back
| there.
|
| [1] https://www.eca.europa.eu/Other%20publications/EN_TERMI
| NOLOG...
| dzolob wrote:
| In spanish, _current_ translates to _actual_.
| 0x45696e6172 wrote:
| This week I am refreshing my front-end skills, so I did a
| little market research.
|
| The best resource on CSS basics, I have found, is
| https://web.dev/learn/css. It includes flexbox and grid.
|
| For design guidelines I recommend Refactoring UI. It is full of
| actionable advice, which books such as The UX book is lacking.
|
| In my project I use TailwindCSS (by the author of Refacturing
| UI) with Daisy UI components, so I don't actually write raw
| CSS. At first TailwindCSS feels like a step backwards to inline
| CSS, but it is just better than the alternative. I recommend
| giving it a chance.
| ramesh31 wrote:
| >What is the best way to learn css in depth? The official
| documentation is a little wierd about what is actual and what
| is not.
|
| Don't approach it as a programming language to be "learned" by
| reading the docs. Just open an inspector and start fiddling.
| rchaud wrote:
| Best way to learn is to build sites with experimental layouts.
| You'll get stuck and thats when you'd want to look around the
| documentation or Stack Overflow. MDN docs are the incredibly
| dry, so avoid them until absolutely necessary.
| maroonblazer wrote:
| They're not free, but Jen Kramer's CSS courses on Frontend
| Masters are very good, and are pretty recent.
|
| https://frontendmasters.com/teachers/jen-kramer/
|
| I attempted CSS back when you had to float anything/everything
| for positioning and found it extremely confusing. I recently
| picked it back up, and flexbox and grid make it sooo much
| easier. I feel like I'm finally getting it.
| quidgybozo wrote:
| Totally aside, but the article reminded me. Does anyone remember
| when Firefox showed you the stacking context of elements on a web
| page? It had an exploded 3d view of all layers on a web page.
|
| Not sure if any extensions or browsers still have that feature?
| Vinnl wrote:
| I believe Edge has something like that now, though from what
| I've heard it works slightly differently.
| argulane wrote:
| Yeah they removed it sometime ago https://firefox-source-
| docs.mozilla.org/devtools-user/3d_vie...
| rchaud wrote:
| This is cool! I understand why they removed it, but is there
| a browser extension that retains this functionality on modern
| versions of FF?
| url00 wrote:
| I've heard Edge of all browsers has this now.
|
| Disclaimer: I haven't looked myself.
| layer8 wrote:
| It's documented here: https://learn.microsoft.com/en-
| us/microsoft-edge/devtools-gu...
| MyFirstSass wrote:
| Chrome and Safari has the Layers panel in devtools that is
| actually a 3d model you can rotate but it's very simple
| compared.
|
| But yeah i also remember that feature fondly and if anyone has
| a better tool i'd be very interested! Super weird it isn't more
| used, but then again it's weird there isn't more 3d / 2d
| diagramming being standard in programming.
| simlevesque wrote:
| I hate that every time that I want to use it to fix something
| I feel like I wasted my time. And then I remember Firefox's
| implementation and I want it back.
| arcbyte wrote:
| > This is a set of chapters about CSS layout for people who
| already know CSS. Which seems like a small market, I admit.
|
| This was like a gut punch. Is this why software is so terrible?
| So many people just graduated bootcamps and never learned
| anything else?
|
| How can you do web development or even React if you don't
| understand CSS?
| codethief wrote:
| > How can you do web development or even React if you don't
| understand CSS?
|
| I wrote my first line of CSS more than 20 years ago, have dug
| my way through CSS specs and browser quirks a countless number
| of times, write a ton of CSS in my day job, and even I wouldn't
| claim to _really_ understand CSS.
|
| There are just too many hidden rules, too many edge cases, to
| really ever be certain you have now understood everything there
| is to understand.
|
| EDIT: I mean, consider this guy's recent blog post[0] for
| instance. He claims that CSS is logical and, presumably, that
| he understands that logic. Yet his article contains a number of
| factual errors, as mentioned in the HN comments. Nevertheless,
| he writes about CSS on a regular basis, so I'm sure he
| understands a great deal about it. In other words: In the world
| of CSS, even experts and experienced veterans are prone to not
| understand everything in detail.
|
| [0]: https://news.ycombinator.com/item?id=39334685
| ramesh31 wrote:
| >I wrote my first line of CSS more than 20 years ago, have
| dug my way through CSS specs and browser quirks a countless
| number of times, write a ton of CSS in my day job, and even I
| wouldn't claim to really understand CSS. There are just too
| many hidden rules, too many edge cases, to really ever be
| certain you have now understood everything there is to
| understand.
|
| Complete ditto. Been using it daily for a decade plus, and I
| could literally lay out a page perfectly while blindfolded at
| this point. But I would _never_ claim to be a CSS "expert".
| Simply too many gotchas.
| dylan604 wrote:
| > he writes about CSS on a regular basis, so I'm sure he
| understands a great deal about it.
|
| Don't be so sure. The world is full of people that excel at
| the fake it til you make it skill. As long as you say it loud
| and full of confidence, people will just tend to accept
| whatever you're saying. Anyone that comes along and
| challenges will just be dismissed as a hater or similar. In
| software dev, these types tend to migrate upwards into
| management
| cantSpellSober wrote:
| > Floats can be used to position boxes to the left and right
| edges of their container box
|
| No, that's not exactly what float means! Yes you can accomplish
| this using floats, but we haven't since flexbox and grid landed.
| The element is taken out of the normal flow, and this is a
| confusing way to build layouts for those studying CSS.
|
| `float` is more of a typographic tool. If this article calls
| _itself_ pedantic, it needs more pedantry.
| danielvaughn wrote:
| Any introduction to HTML/CSS really should explain the fact
| that when these technologies were created, they were solely
| meant to render documents online. It was basically created to
| be like a Microsoft Word but for files on another person's
| computer. So most of the early properties (like float) were for
| typographic layout.
| yojo wrote:
| It is, after all, _HyperText_ Markup Language. The modern
| app-based web is incredibly far out of scope of the initial
| vision of "text documents that link to other text documents."
|
| CSS and HTML are loaded with legacy warts that can never be
| removed without breaking backward compatibility.
| tdudhhu wrote:
| Float is still relevant.
|
| For example if you have some text that must flow around an
| image that is placed in a corner.
| blowski wrote:
| I think the parent comment agrees with you. It's the use
| of float to, for example, position menus on the page
| which is no longer relevant.
| treflop wrote:
| Old HTML/CSS might be out of scope for a modern web app but
| I'm pretty sure if you were to write a layout engine from
| scratch today, it wouldn't look any different from modern
| HTML/CSS
|
| Honestly layouting an app in code just looks like HTML/CSS
| but with functions.
| velcrovan wrote:
| I'm not sure how I'd position, say, sidenotes/marginal notes
| without using floats. Particularly when the note must align
| with a reference in the middle of a paragraph.
| tdudhhu wrote:
| All elements in a container floats to the top of the container
| and right or left (depending on the text direction ltr or rtl)
| of the previous element. If there is no space left it will move
| below the previous elements.
|
| If an element has `display: block`, it will fill up all
| horizontal space so every element after it will float below
| that element.
|
| That is why it is called `float`. It's how the position of
| elements is calculated.
|
| If you use `float:left|right` it forces the float of that
| element to float left or right before all other elements in the
| same container.
|
| That is what float means.
|
| But of course this does not work anymore if your container uses
| flex or grid.
| ourmandave wrote:
| You can still float elements in a subcontainer inside a flex
| container.
| lovegrenoble wrote:
| And for flexbox layout, this tool streamlines the process,
|
| removing the need to worry about numerous properties:
| https://flexboxcss.com
| sesm wrote:
| The first thing that should be explained about CSS layout, is
| that it has 4 different layout systems:
|
| - table, the oldest one, still used for email
|
| - float, for articles with inline images
|
| - flexbox, most used one today
|
| - grid, modern alternative to table
|
| There is also absolute and fixed positioning as a hack to bypass
| layout.
| nailer wrote:
| grid is also a sensible default. Unless you actually want
| flexing, there is no reason to use flexbox and its more
| complicated syntax.
| dkdbejwi383 wrote:
| Personally I find grid more complex - but perhaps I just
| haven't used it as much compared with flexbox. The vast
| majority of the time, I find that elements within a
| particular component (here meaning chunk of UI, not a
| React/Vue/Svelte etc module) naturally fit along a single
| axis.
| filleduchaos wrote:
| Table is not the oldest CSS layout system. That would be flow
| layout, which oddly enough doesn't appear in this list at all.
| mananaysiempre wrote:
| > CSS layout [...] has 4 different layout systems: table, the
| oldest one, still used for email [...].
|
| Nooot exactly? Literal HTML table markup is indeed probably the
| oldest way of laying parts of webpages side by side and is
| still used for email, but that has little to do with CSS.
|
| In CSS, you have display: table and related values, but IIRC
| they were less usable on old IE versions than floats and
| received fairly limited use; certainly not nearly as much as
| literal non-semantic tables. I haven't noticed them receive
| much use on the modern Web, either, and I don't really know why
| --perhaps the requirements on the surrounding markup are too
| stringent (there's no way to reorder things, for example, and
| if you need multiple rows you'll need to include some sort of
| elements in your HTML to play that role).
| cantSpellSober wrote:
| The first 2 are ersatz "layout systems" that were practiced
| before flexbox and grid. <table>s and the float property can be
| used alongside Grid.
|
| The easiest (and default) layout system (flow) is never
| mentioned
|
| https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
| chatmasta wrote:
| That's a useful MDN page, and it's even the third page of the
| "CSS Layout" section of "Learn Web Development."
|
| And yet, how many people reading these comments have ever
| seen that page? I'll admit that I hadn't seen it!
|
| Sometimes it's nice to read the docs of your tools from the
| top down, rather than relying on whatever local section of
| documentation Google sends you when you're solving a specific
| problem. There are a lot of great docs! (If you use Git every
| day, when was the last time you browsed the Git manual? How
| about JavaScript? CSS?)
| pests wrote:
| When has it became normalized to not read docs and be
| almost proud of it?
|
| I harp on this a lot, but computer engineering will never
| be treated seriously if we continue acting like
| documentaton or manuals are too good for us.
|
| Its like if when designing a bridge no one read the spec
| sheet on the bolts.
|
| If I ever hear a bridge or structural engineer going "huh,
| TIL" about a fact found in the manual of a tool or item he
| uses every day I'm running
| chatmasta wrote:
| Well, it's not so much that people don't read docs, but
| that they don't _keep_ reading them. Most people probably
| read (or at least skim) the manual cover-to-cover when
| learning a new tool. But once you 're actively using it,
| the main interaction with its docs is when you land on a
| specific page to solve your immediate problem. I'm
| advocating for periodically reading the docs of your most
| commonly used tools, as if you were a new user. You'll
| pickup something new nearly every time you do that.
| pests wrote:
| > I'm advocating for periodically reading the docs of
| your most commonly used tools, as if you were a new user.
| You'll pickup something new nearly every time you do
| that.
|
| Strongly agree.
| julianeon wrote:
| You're talking about docs here as if they're like a
| textbook on Calculus. Thorough, constant and
| unquestionably effective.
|
| Online docs are nothing like this.
|
| First, they can change as frequently as every few weeks,
| so there's no point in studying them exhaustively if
| they'll be useless after the next update.
|
| Second, they're often inferior to Google's answers on the
| topic, especially if you're using your question as the
| search query.
|
| Third, even if they are current and the best text
| resource available, they may still be bad. Halfhearted
| explanations or even whole pages saying "content should
| go here." Often worse than simply asking for an
| explanation in a Slack or a Discord.
|
| I don't think that would be true of an engineer with a
| physical tool, but it's often true of software tools.
| CharlesW wrote:
| > _There is also absolute and fixed positioning as a hack to
| bypass layout._
|
| They're not hacks, and they don't "bypass" layout. `absolute`
| and `fixed` are two of five options for positioning that
| dictate how an element is placed and behaves in the flow of the
| document, or within a specific container.
| https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
| johnny22 wrote:
| how is grid an alternative for table? Do you only mean in a
| layout sense only?
| shubhamjain wrote:
| I find articles like this daunting, even when it predates CSS
| Grid which has made CSS Layouting even more complex. I have been
| a web developer for 10 years, and I still feel out of depth about
| CSS. How it all works, obscure edge cases, internals, and the
| sheer number of features in there. I wrote about it recently [1]
|
| > I hadn't even completely caught up with the intricacies of Grid
| Layouting, when subgrid and container queries were shipped.
| Several of the newly added properties handle cases so specific
| that I hardly believe I would ever use them (hanging-punctuation
| and font-palette, for example).
|
| > Here's more: there are at least three properties related to
| hyphenating paragraphs. You might have used the filter property,
| but did you know that it supports an entirely different class of
| filters using SVG? Or that you can tweak the image scaling
| algorithm? Or border-radius support elliptical corners?
|
| Of course, you can say that about any technology, but CSS is
| different. It handles too many things, in too many ways, and
| changes too much, too fast.
|
| [1]: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/
| paulddraper wrote:
| Could be worse.
|
| Could be LaTeX.
| moi2388 wrote:
| Same. I just start using grids everywhere and that works.
|
| But then again I just write plain css and generally don't have
| global stylesheets, which helps a lot
| philsnow wrote:
| My perennial problem with frontend work is that all the
| articles are written for an audience of people who have been
| keeping up with the state of the art for the last 15 years.
|
| The first time I wrote actual frontend things in exchange for
| USD, I was generating "DHTML" (my fingers stumbled over even
| typing the abbreviation because it's flushed so far out of my
| muscle memory cache) directly from perl. I know frontend stuff
| like a six year old knows calculus, and I feel like there's no
| way for me to catch up now.
| dragonwriter wrote:
| There's a whole lot of frontend content written for complete
| newbies, as well as stuff written for people who have been
| keeping up; if you are an experienced programmer who hasn't
| been keeping up with frontend stuff, you'll probably need to
| use a mix of stuff written for people with less programming
| experience than you have and stuff written for people with
| more frontend experience, but catching up isn't making up for
| the intervening time you weren't engaged, because while a
| tiny fraction of the knowledge of frameworks that has come
| and gone went into shaping context for the "always current"
| people learning the new stuff, a large fraction of it is just
| knowledge that is no longer relevant.
| Trufa wrote:
| > I have been a web developer for 10 years, and I still feel
| out of depth about CSS.
|
| What do you mean by this? I've been dealing with CSS for even
| more years than that and can't for the life of me remember if
| its align-items or justify-content cause I won't even try to.
|
| As soon as I do flexbox I open https://css-
| tricks.com/snippets/css/a-guide-to-flexbox/
|
| Grid I remember even less! But I still don't feel out of depth
| because I can get it to do what I want easily enough with a
| couple of scoffs and WTFs here and there.
|
| I've heard this about CSS so many times, but honestly, I find
| it kind of easy to do get the layout I want without too much
| effort most of the times, I just don't remember CSS in the same
| way I remember how to do JS.
| nailer wrote:
| > Chapter 3:
|
| > margin collapsing > negative margins
|
| This article prioritises understanding older layout techniques
| which has some value when dealing with a legacy code base, but
| should be avoided on new projects
| brycewray wrote:
| (2015)
| jonahx wrote:
| (not affiliated, just a happy user)
|
| It's paid, but if you want to deeply learn CSS interactively, I
| can't recommend this course enough:
|
| https://css-for-js.dev/
|
| Not just the best CSS resource I've encountered, but one of the
| best examples of interactive pedagogy _period_ I 've encountered.
|
| The author also has lots of free resources if you want to get a
| flavor of the style:
|
| https://www.joshwcomeau.com/tutorials/css/
| shmde wrote:
| Wish it went on sale more often
| msoad wrote:
| Kind of unrelated but if you want to build nice modern layouts
| and if you are one the 10 people in the planet that doesn't use
| Tailwind take a look at sub grids. It's really underrated given
| how well supported and nice to work with it is.
|
| https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
| Julesman wrote:
| To me, CSS frameworks break the whole point of CSS, generally
| add a lot of bloat, and aren't useful except in some instances
| where rapid prototyping is needed.
|
| Tailwind exists largely because programmers don't like CSS. We
| no longer need frameworks for compatibility. The era of browser
| testing is over. And we don't need them to do things CSS can't
| do, as in the past couple of years nearly all browsers are
| handling the newer features.
|
| My big gripe is simply that it makes a lot of sense to keep
| your structure, styles, and scripts separated. If something
| looks off I don't want to have to wonder whether it's classes,
| CSS, or scripts.
|
| And ultimately, I don't think Tailwind does make things faster.
| I could come up with custom CSS helper classes AS NEEDED, and
| avoid all the problems I mentioned above. And the one I didn't
| mention is that this makes your code look like incomprehensible
| garbage. Tailwind HTML files using BEM are just not OK.
|
| Keeping my html and CSS separate make everything I do faster
| and lighter. Most importantly, CSS is now mature and finally
| does all the things for all the browser that make the
| frameworks just enough less useful that they become bloat.
|
| My two cents. I'm sure Tailwind is helpful for many. But I
| gotta preach the basics.
| stevenicr wrote:
| Appreciate the suggestion, got to the 7th paragraph and re-read
| it- and started to question why learning from the mdn docs is
| not as easy as w3schools (I know much of hn has hate for that,
| and for some legit reasons but that's not the point) -
|
| While thinking about actually understanding how this works and
| why it's good or not good compared to other non-sub-grid
| things, I decided to see if youtube kevin css guy had done an
| explainer, found
| https://www.youtube.com/@KevinPowell/search?query=sub-grid
|
| So I will be diving into those.
|
| Started a new website project just writing css / html last
| week, so I'm one of the 10.. I've done a couple projects with
| tailwind, it's fine, but it's not perfect.. I can see why/how
| it's kind of the new bootstrap for people who don't want to
| learn css.. If I had to use a pre-canned thing today it would
| be Bulma or Skeleton maybe.. I was poking about the search
| engines a couple weeks ago to look for any new 'lightest weight
| css frameworks' / minimal resets..
|
| The search engine results for these are meh for me, it's like
| finding a bunch of recipe sites.
|
| A nice grid chart showing the names, dates and mb/kb and
| pageload / time to interaction delay / JS required or not for
| base things - would be nice, but rather than wasting too much
| time searching I just started building from scratch with no
| package needed, just html and grid css.
|
| Seems to me that more / better css grid template examples would
| be nice, maybe they exist but my ggl / ddg just keeps finding
| that same old stuff that is meh.
| jibbit wrote:
| you're saying that Subgrid is an alternative to Tailwind? Or,
| you can't use Subgrid as well as Tailwind?
| msoad wrote:
| if you buy into Tailwind you probably won't think of using
| sub grids. But it is really nice to use sub grids and css
| variables to achieve amazing results
| temporallobe wrote:
| I develop a lot UI apps (mostly Angular) and these days I just
| use a framework like Bootstrap or Foundation. The myriad of
| layout options in pure CSS is overwhelming and mind boggling,
| especially when it comes to responsive design. I have tried using
| pure CSS but find myself writing lots of boilerplate code and
| coming up with amounts to a mini framework. Unless you're
| designing a custom bespoke designer web site, I don't personally
| see the need for constantly reinventing the wheel.
| rzmmm wrote:
| Newer CSS features like flexbox, grid and media queries were
| added to reduce the need for frameworks like bootstrap.
| chiefalchemist wrote:
| Yes and no. The key selling point of Bootstrap (and similar)
| was that a design-blind (so to speak) backend dev/eng could
| use it and would have to work very hard to "design" something
| that was ugly, hard to look at, hard to use, etc.
|
| Sure there are a bunch of helper classes, and such, but the
| key is an end product that does look like a backend dev/eng
| built it.
| chrysoprace wrote:
| There's still some boilerplate, but I'm a big fan of Open
| Props[0] because it takes a hybrid approach. CSS isn't
| necessarily reinventing the wheel, but allowing for easier /
| more powerful approaches to difficult layouts or things that
| would otherwise require JS. Bootstrap is fine but
| troubleshooting advanced layout issues involves a lot of
| inspecting elements to see what styles are actually being
| applied (at least in my experience, YMMV) so I'd personally
| always bet on CSS.
|
| A new feature that I'm excited about is the `@scope` rule which
| is going to make scoped styles a lot easier.
|
| [0] https://open-props.style/
|
| [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
| nayuki wrote:
| There's an HTTPS version of this URL; please change it.
___________________________________________________________________
(page generated 2024-02-29 23:00 UTC)