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:
|
1 2 3 4 5 |
display: flex; /* turn flexbox on */ justify-content: center; /* center horizontally */ align-items: center; /* center vertically */ |
Snippets for container positioning items and IE10 rules:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* 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…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
* { 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)
|
1 2 3 4 |
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:
|
1 2 3 4 5 6 7 |
/* Usage: .box { @include wordBreak; } */ @mixin wordBreak { word-wrap: break-word; //ie specific overflow-wrap: break-word //other browsers } |
A Complete Guide to Flexbox | CSS-Tricks
A Complete Guide to the Table Element | CSS-Tricks
Bootstrap 4 truncate-text responsive classes SASS helper
I needed to truncate text in certain device sizes in a Bootstrap 4 enabled site.
Bootstrap comes with the text-truncate css class that will truncate text in elements that are in displayed as block or inline-block.
There is no support for targeting the different viewports out the box.
Here is solution for this;
Usage
We want the text of this element to truncate (Shorten the text if it doesnt fit and adds … to the end of the text) on smaller devices:
|
1 2 3 |
<p class="text-truncate-xs text-truncate-sm">Maecenas egestas arcu quis ligula mattis placerat. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Phasellus tempus. Vestibulum fringilla pede sit amet augue.</p> |
Source
Include this scss file to your site:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
@mixin text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @include media-breakpoint-only(xs) { .text-truncate-xs { @include text-truncate; } } @include media-breakpoint-only(sm) { .text-truncate-sm { @include text-truncate; } } @include media-breakpoint-only(md) { .text-truncate-md { @include text-truncate; } } @include media-breakpoint-only(lg) { .text-truncate-lg { @include text-truncate; } } @include media-breakpoint-only(xl) { .text-truncate-xl { @include text-truncate; } } |
How to preserve line breaks in p elements with CSS
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
Source: CSS white-space property
Example:
p.intro {
white-space: pre-line;
}
Works in all modern browsers and IE8+