SmolCSS

A wonderful collection of little layout-related CSS snippets from Stephanie Eckles that serves both as a quick reference and a reminder of how straightforward and powerful CSS has become.

Random things to note!

  • The resizeable containers aren’t some JavaScript library.

…

The post SmolCSS appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier

A wonderful collection of little layout-related CSS snippets from Stephanie Eckles that serves both as a quick reference and a reminder of how straightforward and powerful CSS has become.

Random things to note!

  • The resizeable containers aren’t some JavaScript library. They are just <div>s with resize: horizontal; and overflow: auto; (although there is a nice little lib for that that displays current width output).
  • Each demo can be opened on CodePen, which is the prefill API at work.
  • CSS custom properties are tastefully sprinkled throughout in a way that makes it more understandable instead of less understandable.
  • The dark mode doesn’t go super duper dark, but fairly dark blues and purples. That’s a good reminder that dark mode isn’t gray/black mode. It remembers your setting, but does have flash-of-light-mode, which is the boss-mode problem with color preferences. I think you need server-side tech to really get it perfect.
  • The whole site is open source. Go Eleventy!

Direct Link to Article — Permalink

The post SmolCSS appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier


Print Share Comment Cite Upload Translate Updates
APA

Chris Coyier | Sciencx (2021-02-24T15:54:35+00:00) SmolCSS. Retrieved from https://www.scien.cx/2021/02/24/smolcss/

MLA
" » SmolCSS." Chris Coyier | Sciencx - Wednesday February 24, 2021, https://www.scien.cx/2021/02/24/smolcss/
HARVARD
Chris Coyier | Sciencx Wednesday February 24, 2021 » SmolCSS., viewed ,<https://www.scien.cx/2021/02/24/smolcss/>
VANCOUVER
Chris Coyier | Sciencx - » SmolCSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/24/smolcss/
CHICAGO
" » SmolCSS." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/02/24/smolcss/
IEEE
" » SmolCSS." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/02/24/smolcss/. [Accessed: ]
rf:citation
» SmolCSS | Chris Coyier | Sciencx | https://www.scien.cx/2021/02/24/smolcss/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts