Logo

TODAY I LEARNED

6 posts about #html-css

Fr Unit with CSS Grid Layout

I read about CSS Grid Layout, and I found the Fr unit, so I have to try it out.

From w3.org:

Flexible Lengths: the fr unit A flexible length or is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items with a zero base size fill space in a flex container.

The distribution of leftover space occurs after all non-flexible track sizing functions have reached their maximum. The total size of such rows or columns is subtracted from the available space, yielding the leftover space, which is then divided among the flex-sized rows and columns in proportion to their flex factor.

Each column or row’s share of the leftover space can be computed as the column or row’s * / .

Read more about fr unit

See this example:

CSS:

.grid-container { 
  max-width: 100%; 
  margin: 3em auto; 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: 50px 200px 50px; 
  grid-template-areas: "head head2 head3 head4" "main main2 main3 main4" "footer footer footer footer"; 
} 

Result:

  grid-template-columns: repeat(4, 1fr); 

1fr is for 1 part of the available space, each column take up the same amount of space.

I will update the 3rd column to size up to 4fr

CSS:

.grid-container { 
  max-width: 100%; 
  margin: 3em auto; 
  display: grid; 
  grid-template-columns: 1fr 1fr 4fr 1fr; 
  grid-template-rows: 50px 200px 50px; 
  grid-template-areas: "head head2 head3 head4" "main main2 main3 main4" "footer footer footer footer"; 
} 

Result:

See a live example: CSS Grit: Fr Unit by Victor Velazquez (@vicmaster) on CodePen.

That's all folks!

Learned by Victor Velazquez on Apr 28, 2022

973983 adforcodereview v3 0211021 c02 021121

data-scheme to add styles!

If you need to add styles to an element when the page is in dark mode, simply use the data-scheme of the page followed by the class or ID of the element you want to add styles to.

[data-scheme="dark"] .js-subs-text-inputs {
   color: #FFFFFF;
}

Learned by ramon-guzman on Apr 13, 2022

973983 adforcodereview v3 0211021 c02 021121

:is() pseudo-class - CSS

When we apply the same style to multiple selectors on CSS we use to do something like this:

.section-header h1,
.section-header span,
.section-header .heading {
  line-height: 1.2;
}
.navigation li,
.navigation p {
  padding: 5px 10px;
}

With :is() we can write our CSS in a shorter way.

.section-header :is(h1, span, .heading) {
  line-height: 1.2;
}
.navigation :is(li, p) {
  padding: 5px 10px;
}

Learned by carlos-pineda on Apr 19, 2021

973983 adforcodereview v3 0211021 c02 021121

Change the starting point for your ordered lists.

Use the start attribute to change the starting point for your ordered lists.

<ol start="10">
  <li>Git</li>
  <li>Ruby</li>
  <li>JS</li>
  <li>PostgreSQL</li>
  <li>CSS</li>
  <li>HTML</li>
</ol>

Output:

10. Git
11. Ruby
12. JS
13. PostgreSQL
14. CSS
15. HTML

Learned by Victor Velazquez on Feb 28, 2021

973983 adforcodereview v3 0211021 c02 021121

Comma-Separated Lists

Separate list elements with commas but not the last one:

ul > li:not(:last-child)::after {
  content: ",";
}

Example

  • Hello,
  • There,
  • Comma

Source: AllThingsSmitty

Learned by Victor Velazquez on Feb 14, 2021

973983 adforcodereview v3 0211021 c02 021121

Styling broken links

<img src="http://bitsofco.de/broken.jpg" alt="Broken Image">
img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before { 
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after { 
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

See the Pen Styling Broken Images by Victor Velazquez (@vicmaster) on CodePen.

Original source: bitsofco.de

Learned by Victor Velazquez on Feb 13, 2021

973983 adforcodereview v3 0211021 c02 021121