Posted on

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

Posted on

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

Posted on

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); }

From: dev.to/gajus/my-favorite-css-hack-32g3

Posted on

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?

Source: prefers-color-scheme: CSS Media Query

Posted on

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
}

Source: CSS overflow-wrap — Control wrapping of text overflow or wrapping – CSS: Cascading Style Sheets | MDN

Posted on

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:

<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:

@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; 
    }
}