Css – Andreas Plahn Blog

Basic form validation with Angular – provide visual feedback with form changes CSS classes

Validating user input in HTML forms can be a tedious task. In this new series, we’ll look at how Angular can help us implement painless form validation. First, it’s essential to know that Angular relies primarily on native browser validation features that use modern HTML properties. For instance, if a form field has to be filled out, you can mark it as required using the required HTML attribute

Source: Basic form validation with Angular | Angular Newsletter

How to set width for table columns in CSS

Tables in html behaves differently than other elements on a page since the table, rows, th and td elements are displayed in a special way. The column width is automatically adjusted based on the content.

Here is a trick to set the column width using the colgroup element which affects both the th and td at once.

A table with 3 columns and 2 rows:

<table>
  <colgroup>
    <col class="col-select" />
    <col class="col-product" />
    <col class="col-country" />
  </colgroup>
  <thead>
    <tr>
      <th>Select</th>
      <th>Product</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox">Select</td>
      <td>Product 1</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td><input type="checkbox">Select</td>
      <td>Product 2</td>
      <td>Norway</td>
    </tr>
  </tbody>
</table>

We have 3 columns: Select, Product and Country
To set the widths we use css classes col-select and so on.

.col-select { 
  width: 1%; 
} 
.col-product { 
  width: 75%; 
} 
.col-country {
  width: 24%; 
}

Here we set the select to be as “narrow” as possible (1%). And the others to relative % numbers.
To further “force” the widths we should allow long words to be wrapped, e.g add the following css class for the columns you wish this behavior for:

.text-break {
  overflow-wrap: break-word;
}

Usage:

<colgroup> 
  <col class="col-select" /> 
  <col class="col-product text-break" /> 
  <col class="col-country text-break" /> 
</colgroup>

A Complete Guide to Grid Tricks

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
css-tricks.com/snippets/css/complete-guide-grid/

Pinegrow Web Editor | Website Builder for Professionals

Pinegrow Web Editor, website builder for professionalsPinegrow is a Mac, Windows and Linux web editor that lets you build modern websites faster with live multi-page editing, CSS & SASS styling, CSS Grid editor and support for Bootstrap, Tailwind CSS and WordPress.Pinegrow is a desktop website editor that opens and saves standard HTML and CSS files.

Source: Pinegrow Web Editor | Website Builder for Professionals

Flex Cheatsheet

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 children horizontally */ 
align-items: center; /* center children 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;

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

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

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