Source: Flex Cheatsheet
white-space | CSS-Tricks
Here is a table to understand the behaviors of all the different values for property white-space:
| New lines | Spaces and tabs | Text wrapping | |
|---|---|---|---|
| normal | Collapse | Collapse | Wrap |
| pre | Preserve | Preserve | No wrap |
| nowrap | Collapse | Collapse | No wrap |
| pre-wrap | Preserve | Preserve | Wrap |
| pre-line | Preserve | Collapse | Wrap |
Source: white-space | CSS-Tricks
css3 – Sass Variable in CSS calc() function – Stack Overflow
Use Interpolate: body height: calc(100% – #{$body_padding})
Source: css3 – Sass Variable in CSS calc() function – Stack Overflow
Flexbox guide
Snippet for positioning items centered horizontally and vertically:
display: flex; /* turn flexbox on */ justify-content: center; /* center horizontally */ align-items: center; /* center vertically */
Snippets for container positioning items and IE10 rules:
/* IE 10 flexbox cheatsheet */ /* enable flexbox */ display: flex; display: -ms-flexbox; /* container - horizontal align items */ justify-content: flex-start | flex-end | center | space-around | space-between; -ms-flex-pack: start | end | center | distribute | justify; /* container - vertical align items */ align-items: flex-start | flex-end | center | stretch | baseline; -ms-flex-align: start | end | center | stretch | baseline; /* container - vertical height for items when extra space is available (multi line) */ align-content: flex-start | flex-end | center | space-around | space-between | stretch; -ms-flex-line-pack: start | end | center | distribute | justify | stretch;
Read more here:
css-tricks.com/snippets/css/a-guide-to-flexbox/
Legacy browser support: (E.g. Internet Explorer 10):
https://css-tricks.com/using-flexbox/
Cheatsheet flexbox equiv. for IE10:
https://gist.github.com/Paul-frc/3ed765ed10c9635384e98f58334081e4
CSS to highlight layout – great CSS hack
Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies when working with the overall layout of elements…
* { background-color: rgba(255,0,0,.2);
outline: 1px solid rgba(255, 0, 0, 0.5);
}
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }
Dark and light mode websites – prefers-color-scheme: CSS Media Query
One device and app feature I’ve come to appreciate is the ability to change between light and dark modes. If you’ve ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result. macOS recently implemented a native dark mode but that mode doesn’t convert websites to a dark interface, so you’re still getting a bright site regardless of native theme. Wouldn’t it be amazing if websites would also go dark or light based on user’s system preference?
10 Best CSS Frameworks for Front-End Developers
CSS overflow-wrap — Control wrapping of text overflow or wrapping
This css works in most common browsers (including IE)
word-wrap: break-word; //ie specific overflow-wrap: break-word //other browsers
Internet Explorer has its own implementation for “overflow-wrap” -> “word-wrap”.
A readymade sass mixin:
/* Usage: .box { @include wordBreak; } */
@mixin wordBreak {
word-wrap: break-word; //ie specific
overflow-wrap: break-word //other browsers
}