Hey Pinboard fans who are designers, I'm going to monkey with the site a bit so it looks okay on phones. My CSS is several years out of date and every six months it seems like there was a holy war about how to do it right. Can you point me to a good tutorial on modern approaches?
-
-
This Tweet is unavailable.
-
This was also my suggestion (I couldn't remember what it was called). Personally I'd read the MDN docs on Flexbox and then spent a while playing around with this to make it all click. The other way around would also work if practical to theory is your preferred way of learning.
- Show replies
-
-
-
A suggestion that doesn't violate your constraints: use SASS so you don't go crazy writing out all the CSS. SASS compiles down into CSS but has a much more friendly notation for repeated blocks and inheritance and such. https://sass-lang.com/
-
Thank you; I'll read up on it!
End of conversation
New conversation -
-
-
I went through this mess recently. My biggest takeaway was understanding font sizes (especially relative ones) and ensuring they never ever go below 16px. I think I've got a collection of links related to this on my pinboard. I'll try and dig them up. :)
New conversation -
-
-
Do you wanna do it yourself? You could make Pinboard phone-friendly with no Javascript and some basic CSS grid principles, but it might be a little tricky to get up to speed.
-
This site by
@rachelandrew is a good way to get to modern best practices with grid (and Rachel worked a LOT on grid. https://gridbyexample.com/learn/
End of conversation
New conversation -
-
-
This is my goto reference for modern layouts using flexbox (a CSS feature):https://css-tricks.com/snippets/css/a-guide-to-flexbox/ …
Thanks. Twitter will use this to make your timeline better. UndoUndo
-
-
-
CSS Grid is a web standard for layouts, and it's well supported in all modern browsers: https://css-tricks.com/snippets/css/complete-guide-grid/ … https://gridbyexample.com/examples/ CSS Variables also help a lot (if you're not going to use SASS): https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties …
Thanks. Twitter will use this to make your timeline better. UndoUndo
-
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.