Category: css

Even dough I don't believe the CSS grid was designed especially for stacking elements one on top of each other this can be achieved easily with a combination of grid-area and z-index.

Let's say we want to build the below widget.

This can be described by the following HTML structure:

<div class="card">
    <div class="top">A cat named</div>
    <div class="bottom">TOM</div>
    <img src="http://examples.js-craft.io/tom.png" alt="TOM">
</div> 

If we place it in grid layout of 1 column - 3 rows then we can easily say something like:

.card { display: grid; }
img {  grid-area: 1 / 1 / 4 / 2;  }
.top { grid-area: 1 / 1 / 2 / 2; }
.bottom { grid-area: 3 / 1 / 4 / 2; }
.card div { z-index: 2; }

That's pretty much all that we need to stack elements on top of each other with the CSS grid. Just don't forget to set the z-index prop to the elements you want on top and that the grid-column is using line numbers to place items. Therefore that's the reason why we have lines like img { grid-area: 1 / 1 / 4 / 2; } even if we have just 1 column and 3 rows.

Below you have the full working example:

See the Pen
tom-cat by JS Craft (@js-craft)
on CodePen.

There were defining moments in our evolution as a species. Like when we discovered fire, or when we discovered electricity. Exactly like this, we have some breakthrough moments when we learn something new.

In its essence CSS is simple. We have selectors and properties that we combine to style our HTML documents.

However, there are still moments when I've felt like I have discovered that missing piece of the puzzle that was explaining why things were not behaving as intended.

So, my main breakthrough moments:

1. The CSS box model: In the beginning, it was not clear to me that if you have an element with width: 100px and border: 5px solid that element will need in total 110px of space. Things like the border, margin, and padding are not included in the width of an element. And we can change this with the box-sizing property .

2. How CSS deals with conflicting rules: What if we have:

html div p {color: blue}
body p {color: red}

What color our paragraphs will be? The two main principles that are used by CSS to decide the winning rule are specificity and cascading. Of course initially I was getting frustrated and was using !important all over the place. But getting a grip on how these principles work made writing CSS a more enjoyable experience.

3. Using CSS grid and flexbox: layout is hard in CSS. Maybe the most complicated subject. However, with the addition of CSS grid and flexbox things got way better. What took before a lot of math and "brainpower" become simpler with these two. You can see here also a way on how to decide when to use the CSS grid and when to use flexbox.

Of course, every learning experience is unique, but for me, these were the things I wished somebody told me when I've started making stuff with CSS.

Cheers and happy learning!

Let's say we want to build the example below:

Defining the grid can be easily done with the repeat function:

.container {
    display: grid;
    grid-template-columns: repeat(3, 75px);
    grid-template-rows: repeat(3, 75px);
    grid-gap: 5px;
}

All the elements (besides the green one) take only one cell, so placing them it's quite straight forward with something like:

.red {
    grid-row: 3;
    grid-column: 1;
}

Now, the tricky part is with the .green element. To make it span across multiple cells we have a few ways of doing it. We can use grid-row-start and end or we can use the span keyword.

For me, the most intuitive approach is by using the grid-area property. How it works is by giving it the coordinates for the top-left cell and the ending bottom-right cell.

The element will span all the way from the top-left to the bottom right. However, keep in mind that the actual bottom-right cell is not included so we will have +1 for the ending coordinates.

So, in our case if we want the green cell to go from cell 1-1 to cell 2-2 we will have:

.green {
    grid-area: 1 / 1 / 3 / 3;
}

The full documentation about it property can be found here.

You can see the full working codepen below.

See the Pen
grid-area by JS Craft (@js-craft)
on CodePen.

EXTRA TIP: if you add one element in a CSS grid but you don't specify where you want that element to be placed the grid will place it in the first available cell that is found by traversing top-left to bottom-right. The next one in the next available cell and so on. This is the reason why we did not need to manually place the blocks that take just 1 cell (.red, .blue etc).

In many circumstances, we will use something a combination of the top - bottom - left - right properties to set or adjust the position of an element on the page.

I have found myself quite often waiting to have a shorthand for these properties. In the end, is we can write something like this:

margin: 10px 20px 5px 15px;
/* sets the margin to:
maring-top: 10px;
maring-right: 20px;
maring-bottom: 5px;
maring-left: 15px;
*/

Then why I can't do the same for the coordinates props?

Well, this is exactly what inset is here for. The CSS inset It is a shorthand that corresponds to the top, right, bottom, and/or left properties. For example:

inset: 10px;
 /* is the same as:
top: 10px;
right: 0; 
bottom: 0; 
left: 0;` */
*/ 

inset: 2.4em 3em 3em 3em;
 /* is the same as:
top: 2.4em ;
right: 3em; 
bottom: 3em; 
left: 3em;` */ 

inset: 4px 8px; 
 /* is the same as:
top: 4px ;
right: 8px; 
bottom: 8px; 
left: 8px;` */ 

You can see the full docs here.

It is a part of the CSS Logical Properties, together with margin-block and margin-inline.

Keep in mind though that this is still work in progress. The support for it is not great yet but it will improve in the future. For not it is supported in Firefox only.

A calendar layout seems a perfect candidate to be using the CSS grid. Let's see how we can accomplish this with the minimum amount of code.

The final example will look like this.

And our HTML structure will be the following:

<div class="days-of-week-container">
      <div>Mo</div>
      <!-- the list continues -->
      <div>Su</div>
</div>
<div class="calendar-container">
  <div>1</div>
  <!-- the list continues -->
  <div>31</div>
</div>

In normal circumstances, we will not have to write by hand all the <div>1 ... 31</div> stuff. It will be generated by Javascript, but for the sake of the example, we will just use basic HTML and CSS.

We have two main sections, the days-of-week-container and the calendar-container. Both of them will be grids, with the right text-align:

.days-of-week-container,
.calendar-container {
  display: grid;
  text-align: right;
}

Now, if we take a look at our grid it's pretty clear that we will have 7 columns. It's a bit, troublesome to write by hand something like:

grid-template-columns: 30px 30px 30px 30px 30px 30px 30px;

So we can use just a simple repeat to set up our columns:

grid-template-columns: repeat(7, 30px);

Now, given the auto-placement of the elements in the cells, the days of the week and the actual calendar will be placed first to last in the 7 column layout.

See the Pen
Calendar by JS Craft (@js-craft)
on CodePen.

But, what if the month does not start on Monday? We can just use the grid-column to move the placement of the first day in the calendar, and the auto-placement will take care of the rest.

.calendar-container div:first-child {
  grid-column: 7;
}

See the Pen
Calendar with starting date by JS Craft (@js-craft)
on CodePen.

So, voila, another example of how much we can get done with CSS grid and just a few lines of code.

Today I want to share with you guys two sites I've have found recently. Both of them quite useful for our CSS endeavors.

The first one is the CSS grid generator made by Sarah Drasner. Define a grid, select the areas where you want the content to be, how big it should be, the spacing and the generator will give you the code to make it happen. Good to use when you want to learn or make some fast sketches using CSS grid.

And the second is the Selectors Explained tool. It's super cool. You give it a selector and it will show a nice "plain English explanation" for what that selector means alongside its CSS specificity score.

For example, if you give it:

#main-from > input[type=text] 

It will give back: "An input element with an attribute type whose value is text … directly within the element with id main-from". And with a specificity score of 1.1.1.

Pretty neat, no !? Btw, here you can find also 2 games for learning CSS grid and Felxbox.

In CSS we can use the user-select property to decide how the user can select the text.

By default, a user has to drag and hold the cursor to select the wateded text. But thanks to the user-select prop we can select a full text with just one click:

.select-all-text {
    user-select: all;
    -moz-user-select: all;
    -webkit-user-select: all;
}

And you can apply the .select-all-text class the whatever element is needed. A paragrpah, a div and so on.

But you can also have a no-select option if you don't want to allow any selection, or copy paste at all.

.no-select-allowed {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

Below is a full Codepen example with these options in action.

See the Pen
CSS User Select by JS Craft (@js-craft)
on CodePen.

PS: if you want to reved to the default way of selecting the text you can say:

.default-select {
    user-select: auto;
    -moz-user-select: auto;
    -webkit-user-select: auto;
}

There are cases when it's a bit confusing to decide if one should use flexbox or the CSS grid for the layouts. Till a point, both of them are interchangeable.

Maybe the best, and the shortest definition of the difference between Flexbox and CSS grid : Flexbox is for one-dimensional layout. A row OR a column. Grid is for two-dimensional layout. Rows AND columns.

It's from a tweet of Rachel Andrew (read her blog; it's fantastic).

So if we have a case like this, with just one dimension flexbox is a good fit.

Meanwhile, a case like this is more suited for a CSS grid.

However, keep in mind that a flexbox layout can "flow" on multiple rows if it does not have enough space for its elements. But it's still unidimensional.

But if we look at a design like this, the blue rectangle is set on two dimensions so CSS grid is the way to go.

Also, in this video, Jen Simmons explains how they’re different, and when you should choose one over the other.

Cheers!

o my shame, I have found about the CSS :root selector only a few weeks ago when I was changing some styling in the WordPress theme of this blog.

I've seen a piece of code similar to the one below:

:root {
    --color__success: #1fc281;
    --color__info: #00b9f2;
    --color__warning: #f4cc31;
    --color__danger: #e83337;
}

I've recognized the declarations of the CSS variables but what was that :root thing doing there !?

And started to read more about it.

Long story short. The :root is referring to the highest-level parent of a given specification. In the HTML specification, the :root is essentially the same as the html selector.

But, CSS is also designed for SVG. So, we can use :root to select the highest-level parent of a given specification even if is HTML, CSS or XML.

This means that if we want to define global properties, like CSS color variables, we will use :root and those variables will be available both in HTML and SVG.

:root { 
    margin: 0; 
    padding: 0; 
    --main-color: #ff1100; 
}

html {
    color: var(--main-color);
}

svg {
    fill: var(--main-color);
}

And also keep in mind that root is a pseudo selector. This means it will have a higher specificity that the html element selector.

:root { 
    background-color: red; 
    color: white; 
} 
html {
    background-color: red; 
    color: white;
}

There are two main ways of how CSS deals with conflicting rules: specificity and cascading. In this article, we will focus on specificity.

Take the following example:

div p { color: green;}
p { color: red;}     

Applied to this HTML:

<body id="home-page" class="blog">
    <div class="intro">
        <p> some content</p>
    </div>
</body>

The cascading rule in CSS will indicate that the paragraph should be reb, given the last rule. However, we will see that the paragraph is green. And that is because of the first rule is more specific than the last rule.

ok, but what happens if we have a CSS like this one:

#home-page.blog { color: green;}
.intro .blog p { color: blue; }
#home-page { color: orange;}
body div p { color: red;}      

With the HTML being the same, what color will the paragraph be in this case?

How CSS specificity is calculated?

The CSS power can be determined by calculating the sum of all the selectors that are used in that statement. For this we can use the following table:

The most powerful selectors are the ID's (100 specificity points) , followed by classes (10 specificity points), and finally the elements selectors (just 1 specificity points each).

The pseudo-class selectors (for example :hover, :before or :after) and the attributes selectors have the same power as a class selector (10 points).

So, with this knowledge, let's calculate the specificity levels in our example:

#home-page.blog { color: green;}
// one ID and one CLASS
// #home-page(100) + .blog(10)  = 110

.intro .blog p { color: blue; }
// two CLASS and one ELEMENT
// .intro(10) + .blog(10) + p(1) = 21

#home-page { color: orange;}
// one ID 
// #home-page (100) = 100

body div p { color: red;}       
// three elements  
// body(1)  + div(1) + p(1) = 3    

So the first rule gets the most specificity power, with 110 points making the text green colored.

Also, keep in mind that specificity is more powerful than cascading. However, if we have conflicting rules, with the same specificity then the result will be determined based on the cascading / order.

Example:

div p { color: green;}
// div (1) + p (1)  = 2

body p { color: blue; }
// body(1) + p (1)  = 2

// same specifity; the last rule wins
// paragraph is blue

What about the specificity of !important and inline styles

In normal circumstances, we should avoid as much as possible to use both !important and inline styles. But if we have to, keep in mind that inline styles count as 1000 points, and !important is even more powerful with 10.000 points.

So the full table of specificity points looks like this:

Alright friends, that's all for now! Have a fantastic day 🙂