[HN Gopher] 1-Line CSS Layouts
___________________________________________________________________
1-Line CSS Layouts
Author : sysadm1n
Score : 157 points
Date : 2021-11-21 12:51 UTC (10 hours ago)
(HTM) web link (1linelayouts.glitch.me)
(TXT) w3m dump (1linelayouts.glitch.me)
| butz wrote:
| My favorite CSS one liner is "gap" property in flexbox layouts.
| anschwa wrote:
| Agreed! I spent way too long doing flexbox layouts before I
| discovered 'gap'.
| infensus wrote:
| Well, gap for flexbox is fairly new
| https://caniuse.com/flexbox-gap
| cosmotic wrote:
| All the examples are more than one line.
| ggoo wrote:
| The "1-line" is referring to the one line doing most/all the
| hard work in each example. Though I do agree - seems like they
| wrote the title before the article here.
| laGrenouille wrote:
| The text makes it fairly clear that there is one particular
| line of code that each slightly longer example is showing off.
| The one line of interest is highlighted at the top of each
| example.
| username91 wrote:
| These are great.
|
| I've been using CSS since it first [barely] appeared in IE3, but
| I've been behind on fully getting to know flex and grid. Didn't
| know about aspect-ratio at all.
|
| Maybe that says more about the amount of attention I've been
| paying, but I learned a lot from these examples.
| tommek4077 wrote:
| Wow, CSS examples and all you see with JS disabled are white
| boxes. o_O
| system2 wrote:
| I don't want to sound cocky but why is this even fascinating?
| Literally CSS Basics 101 and the first thing to learn about boxes
| and grids.
| wvh wrote:
| Because some of us started out in the nineties and like to get
| a quick update on what is possible in case we need it somewhere
| and web design isn't our main responsibility.
|
| In fact, the single most important resource I wish for of this
| kind, would be a reference page that shows all common layouts
| and tech-stack agnostic examples of popups, overlays, off-
| canvas sidebars and such using the most up-to-date
| implementation so we wouldn't have to include a huge CSS
| framework for something that's a few lines of modern CSS
| supported by evergreen browsers.
| rocky1138 wrote:
| Many people learned CSS before these functions were available.
| So, it's a newer, simpler way of doing something known.
| system2 wrote:
| If someone is using CSS for living, they must know these
| basics as they come out. Also, browser compatibility is a
| thing.
| mankyd wrote:
| As someone who used to live and breath css, but has been
| out of web development for about 6 years now, I find info
| like this awesome.
| mankyd wrote:
| As someone who used to live and breath css, but has been
| out of web development for about 6 years now, I find info
| like this awesome.
| system2 wrote:
| CSS display: grid existed since 2007, flex since 2009. If
| people are not using box model with CSS, I wonder how
| they are using it. Box model of CSS is "hello world" of
| python.
|
| I said I didn't mean to be cocky. It just makes me think
| people don't even touch CSS because if I publish an
| article saying "this is how you print hello world in C"
| people wouldn't care.
| oneeyedpigeon wrote:
| But none of this is about the box model.
| strenholme wrote:
| Between 2007 and 2009, Internet Explorer 6 was still a
| thing. It was incredibly daring on YouTube's part to put
| up a "Internet Explorer is deprecated" banner back in
| 2009; it had to be done without official approval. [1]
|
| In 2011, "display: table" was cutting edge; we _finally_
| had few enough IE6 and IE7 users that it was practical to
| pull off, albeit with " <!--[if IE lt
| 8]><table><tr><td><![endif]-->" hacks.
|
| I still had to deal with IE-specific bugs like the fact
| webfonts didn't work in IE8 when put in an IFRAME -- but
| did work in IE9 when rendering in IE8 mode. This wasn't
| limited to IE: Safari had a bug where you couldn't
| legibly print a page with webfonts on them, requiring a
| Safari-specific hack to disable webfonts in the print
| CSS.
|
| Professional web developers were not using stuff like
| "display: flex" or "display: grid" in production until
| the late 2010s, when Edge and Chrome was _finally_
| reducing the number of Internet Explorer uses to a sane
| level.
|
| [1] https://blog.chriszacharias.com/a-conspiracy-to-kill-
| ie6
| dmitriid wrote:
| > grid existed since 2007, flex since 2009.
|
| These two only existed _theoretically_. For anyone
| actually earning a living with the frontend they didn 't
| exist because:
|
| - grid kinda existed in IE, but not in other browsers.
| Well, you could build a site that only targeted IE, but
| in 2007 this was already being really frowned upon and
| out of vogue.
|
| When grid was finalized, it was a _different_ version of
| the spec, not entirey compatible with IE 's. Chrome and
| Firefox only got grid _in 2017_.
|
| - flex was only partially supported by browsers until
| 2012 when it was fully supported, but behind a prefix.
| Full support without a prefix only appeared _in 2013_.
|
| I mean, I love the fantasy world you have constructed,
| but there are people who actualy do frontend and do
| actually remember the anciaent histroy of _checks notes_
| the past 10 years or so
| strenholme wrote:
| From where I sit, here in late 2021 it has just become
| _finally_ possible to use "Display: Grid" [1] on a real
| world site. Microsoft has _finally_ configured IE11 to
| force a website to open up in Edge if the patched IE11
| decides the site is not IE compatible; I just need to
| learn how to make my site refuse to open in IE11 (opening
| up in Edge instead) to use "Display: Grid".
|
| I really wish Display: Grid was practical to use back in
| 2009. It would had been a lot more straightforward than
| the "Display: Table" stuff I did instead.
|
| [1] https://caniuse.com/?search=Display%3A%20Grid
| dmitriid wrote:
| There's a great spectrum of people between "using CSS for
| living" and "has never touched web development at all".
|
| So yes. This is useful to significantly more people than
| you imagine.
| system2 wrote:
| Well, there is a response above you to my reply, he is
| saying he never used display grid or flex and used CSS
| for living.
| dmitriid wrote:
| He said, literally, "used to live and breath css, but
| _has been out of web development for about 6 years now_ "
|
| I added emphasis so you don't twist other people's words
| in the future.
| krsdcbl wrote:
| This is one of the places where you can learn it, us having
| existing knowledge does not mean teaching materials are useless
| TranquilMarmot wrote:
| If you're new to flexbox/grid check out these fun games to learn
| them. Really helped me get the syntax down a little better!
|
| https://flexboxfroggy.com/
|
| https://cssgridgarden.com/
| NackerHughes wrote:
| Why does a page about CSS layouts not display anything at all
| unless JavaScript is enabled? So much for "1-line CSS layout".
| Defective website.
| Brajeshwar wrote:
| I believe because this is an informational article hosted on
| someone's platform (Glitch in this case).
| oblak wrote:
| I often complain about stuff like this but the page is visible,
| it's the editable forms that you're expected to play with that
| are empty.
|
| On topic: these are great. I am not sure why grid is one of the
| most useful, yet underutilized set of features in CSS. Could it
| have something to do with the fact that there are literally a
| 1000 ways to accomplish the same thing with it? It's been years
| since their introduction and I am still very much not
| comfortable and have to use MDN every time I have to do
| anything.
|
| Is it just just my old age? Am I alone in this?
| cutler wrote:
| You're not alone. Flex and grid are so complex you need to be
| full-time front-end to master them. The old complexity has
| been replaced by something even more complex.
| globalise83 wrote:
| No, you are not alone. CSS Grid takes everything you could
| achieve with Flexbox and makes it more difficult.
| rp1 wrote:
| I use flexbox extensively, but almost never use grid. I
| haven't taken the time to learn it and the API is not clear
| enough to pick it up intuitively. I might use it if I could
| read some type of primer on the basic concepts.
| a_chris wrote:
| I feel the same issue and I'm 24, I think css grid is
| overwhelming
| TranquilMarmot wrote:
| > I am not sure why grid is one of the most useful, yet
| underutilized set of features in CSS
|
| First time I tried to use grid layout, we had to roll back
| the changes because it didn't work in IE11... now that IE11
| support is being phased out in most places it might be more
| usable now?
|
| I do agree that the grid stuff is a little too robust. I'm
| also finding myself looking it all up again every time I need
| to use it... but maybe I just don't have the muscle memory
| down yet like I do with flexbox.
| Semaphor wrote:
| > now that IE11 support is being phased out
|
| Between last year and this year, our IE11 visitors shrank
| from a few percent (I think it was 5% during the week,
| under 1 on the weekend...) to under 1, and I got permission
| to kick IE11 support. Already implemented the first grid
| and can't wait to use CSS variables. It's like I suddenly
| landed in the future :)
| rocky1138 wrote:
| I suspect it has something to do with the state of the art at
| the time you initially learned CSS. Grid came so much later
| and superseded so much of what came before that it's
| basically likely throwing away everything we know and
| starting to learn from scratch.
| nawgz wrote:
| Grid had a very awkward release / compatibility story so
| loads of devs who were looking for a good support story just
| used flexbox to accomplish what they needed to do and never
| learned grid. The zeitgeist of grid kind of ended before
| support hit acceptable levels, and grid is more or less just
| a syntactical wrapper around flex. The `gap` property is the
| real killer
| dorianmariefr wrote:
| That's not one line and tldr it's about flex and grid
| iamandras wrote:
| this page is great and very helpful.
| keb_ wrote:
| I've run into CSS Grid more than once, but every time I do, I'm
| confused by it. I know I should probably just deep-dive into it.
|
| I have tried CSS Grid Garden in the past. I don't remember a damn
| thing from it.
| c-smile wrote:
| Yes, nor flexbox nor grid are intuitive.
|
| And Classic Holy Grail Layout is not a one-liner but this:
| .ex5 .parent { display: grid; grid-
| template: auto 1fr auto / auto 1fr auto; }
| .ex5 header { padding: 2rem; grid-column: 1
| / 4; } .ex5 .left-side { grid-
| column: 1 / 2; } .ex5 main {
| grid-column: 2 / 3; } .ex5 .right-side {
| grid-column: 3 / 4; } .ex5 footer {
| grid-column: 1 / 4; }
|
| For the note, in Sciter (flow+flex units) that is definable as
| main { flow:grid(1 1 1, 2 5 3,
| 4 4 4); } main > :nth-child(5) { /*middle
| section */ width:*; /* takes all available space */
| height:*; }
|
| https://terrainformatica.com/2018/12/11/10-years-of-flexboxi...
| chrismorgan wrote:
| The key thing is that it's the one line of `grid-template:
| auto 1fr auto / auto 1fr auto` that's doing the heavy lifting
| in the layout.
|
| The job of assigning elements to their places could also use
| named areas: .ex5 .parent { display:
| grid; grid-template: auto 1fr auto / auto 1fr auto;
| grid-template-areas: "header header header"
| "left main right" "footer
| footer footer"; } .ex5 header {
| padding: 2rem; grid-area: header; }
| .ex5 .left-side { grid-area: left; }
| .ex5 main { grid-area: main; } .ex5
| .right-side { grid-area: right; }
| .ex5 footer { grid-area: footer; }
| tehbeard wrote:
| I have the following bookmarked and on the hotbar for this
| exact reason. I don't have to mess with frontend every day so
| they're not memorized.
|
| [1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ [2]
| https://css-tricks.com/snippets/css/complete-guide-grid/
| bradwoodsio wrote:
| This might help - https://layout.bradwoods.io/
___________________________________________________________________
(page generated 2021-11-21 23:00 UTC)