Passing a CSS variable value from the HTML into the CSS

cssJune 9, 2020July 8, 2020

One nice trick I've discovered recently is that you can "pass" the value from the inline HTML to the CSS by having something like this:

<div style="--main-color: red;">RED</div>

div { background-color: var(--main-color); }

I've used quotes when saying to pass because we are not actually passing that variable. We are just defining an inline style for that element and we will let the cascading of the CSS do the rest.

In some scenarios, this is cool because we can define properties for some HTML elements as we would have done with something like React properties.

Of course, we can also add in the :root element a default value for the CSS var.

Below you have the full working codepen.

See the Pen
CSS Var pass value by JS Craft (@js-craft)
on CodePen.

Speaking about the CSS variables I've written some time ago a more in-depth article about them that you can read here.

cssJune 8, 2020

cssJune 3, 2020July 8, 2020

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.

cssJune 2, 2020June 5, 2020

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!

javascriptJune 1, 2020June 1, 2020

Let's say we have the following code:

const tom = { name: 'Tom', colour: 'blue and white' }
const pib = { name: 'Puss in Boots', colour: 'orange'}
const syl = { name: 'Sylvester', colour: 'blue and white' }

console.log(tom) // { name: 'Tom', colour: 'blue and white' }
console.log(pib) //  { name: 'Puss in Boots', colour: 'orange'}
console.log(syl) // { name: 'Sylvester', colour: 'blue and white' }

By using the computed property names in Javascript we can have all the console.log statements combined into just one line.

console.log({ tom, pib, syl }) // {tom: {…}, pib: {…}, syl: {…}}

Quite a useful trick for when you want to console.log the full context of a piece of code.

Here and here you can find two more articles with tips when using the js console.

cssMay 27, 2020

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).

generalMay 25, 2020

generalMay 20, 2020

cssMay 19, 2020July 8, 2020

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.

cssMay 18, 2020July 8, 2020

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.