CSS » Resources Dump
SASS Guidelines CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS
SASS & SCSS
SassMeister | The Sass Playground!
Overflow Issues In CSS: How to detect horizontal overflow?
- Find element that is causing the showing of horizontal scrollbar in Google Chrome
- Finding/Fixing Unintended Body Overflow | CSS-Tricks - CSS-Tricks
- Bookmarklet to find the elements that are causing a horizontal scroll
*:hover { outline: 5px blue solid; opacity: 1 !important; visibility: visible !important; }
Debug Horizontal Scroll: https://gist.github.com/cuth/c1ddf2b1ce2fb07e512a
Interesting articles
-
Very nice idea: Flexbox Dynamic Line Separator
-
Centering text problems - Aligning a Button Label Vertically
-
Rating system, maybe useful Gutscheinpanda - Star Rating: An SVG Solution
-
Amazing article Defensive CSS
- My frequent problem - Minimum content size in CSS flexbox
Interesting links
-
Some amazing CSS tools 100 Free CSS Resources
for example:
- Pure CSS Code Snippets
- Fancy Border Radius Generator
- Browser Extension Stylebot
Why I don’t like utility CSS frameworks
I agree on not liking utility CSS - Why I Don’t Like Tailwind CSS Even better article not liking it - A Look at Tailwind CSS
CSS Snippets
Amazing trick to fit text size to container
Use simple SVG as explained here: Fitting Text to a Container
Getting the real viewpoert width
The best way I’ve gone about solving this is creating a CSS variable –window-width and set it to 100vw. Then in javascript i set this CSS variable to document.body.clientWidth which will get the width of window without the scrollbar.