Here's a quick challenge I came up with the other day. A very common navigational pattern is to put the logo on the left side and the list items on the right.
Recreate the layout of this navigation with as little
htmlandcssas possible.
My personal solution uses flexbox with 7 lines of html and 13 lines of css. Is it possible with less?
EDIT: This is wat I came up with: https://codepen.io/anon/pen/wYebQg
Top comments (13)
I think navigation should be part of the footer. So I put it there, where it should be. And then I think that if you don’t add interactivity you might as well use an image. So I added a few link states as well. Some extra lines of CSS because it’s the web, not an image editor (-:
codepen.io/vasilisvg/pen/VEEPZo?ed...
But then, to be honest, I think most of the time these links are really not needed. Who ever clicks on a navigation? Such an overrated pattern! So instead of a lonely
<ul>I would urge everybody to wrap it in something like a<details>with a clear<summary>, so you won't bother people with things they don’t need. In this case you need a lot less CSS, because you don’t really need any layout.codepen.io/vasilisvg/pen/gBBgmw?ed...
Hey Danny, fun challenge!
I've got 5 lines of html and 11 of CSS (13 with proper spacing), using CSS grid.
Are Item 1 and item 2 links? If so, I'm up to 13 lines of css (15 with spacing, adding
text-decoration: none;andcolor: #000000; to ovveride browser link styling). Here's my solution: codepen.io/versavale/pen/VEWKMBNice one! Neat trick with CSS grid, might Flebox be better suited for this?
Unfortunately I'm not that familiar with Flexbox, that's why I'm really interested in your solutions :)
I'm stuck at 7 and 14 with CSS grid... great challenge! Got the gears turning :-)
There must be a way to do the grid shorthand...
codepen.io/eblairmckee/pen/OBgjwe
Blair, if you use grid, I don't think it is necessary for you to use a list. You could be down to 5 lines of HTML :)
For semantic purposes I would use list item here. But indeed, it can be done without.
One line /s
¯_(ツ)_/¯
i really tried not to over think this:
7 lines in html
12 lines in css
gotta love Flexbox
codepen.io/Keinchy/pen/RegVYr
Smart solution! I used another alternative.
codepen.io/anon/pen/ZqJBxv