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?

1. Find element that is causing the showing of horizontal scrollbar in Google Chrome
2. 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

• Custom Underlines with SVG

• 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

CSS Snippets

Amazing trick to fit text size to container

Use simple SVG as explained here: Fitting Text to a Container

Getting the real viewport 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.

Source in comment