Some CSS you will always need
We’re going to learn three CSS concepts you’ll probably need in your projects.
This is the fourth episode in this series, and if you didn’t read the previous episode “CSS of Things”, which I highly recommend because it gives an overview of CSS, feel free to do so by visiting this link. If you want the full plan for this series, you can find it here.
In the previous article, we styled a CV (Curriculum Vitae) web page with basic CSS properties. We made it a little pretty but as I said we can do much better! Actually, that’s the purpose of this article.
I think you agree with me that the CV now is just a box under another under another … This is bad! Your document will look much longer and it’ll contain too much blank space which will make the reader feel bored 😐. We don’t want that.
OK, so how can we fix it? CSS grid to the rescue. But before we start making changes, I should probably show you what is CSS grid. Well, it’s basically rows and columns and it consists of a parent element with one or more child elements.
If you are on a web page and you see a block of content on the right, another on the left… The front end developer is probably using a grid system.
To be honest, there is another way to do so by using floats and positioning, but trust me, it’s a pain in the neck, so I’m gonna show you the modern and best way.
So, what we’re basically going to do is rearrange the CV blocks and add some styles so we get this result in the end:
Can you see the blocks? We have two main ones, the dark on the left and the bluish on the right.
If you remember, we said ‘it consists of a parent element with one or more child elements’, so i typed this in the .html file:
And this in .css:
Behind the scenes, this is the conversation Body and CSS had:
Body: I am the parent and I want my children to be displayed as a grid.
CSS: Yes sir! Then I am adding a ‘display’ property with the value of ‘grid’ and your children will be displayed as rows by default.
Body: No, I want them to be displayed as columns, and I want the left one to take 1/3 of the space and the other 2/3.
CSS: OK, columns so ‘grid-template-columns’, 1/3 and 2/3 so ‘1fr 2fr’.
Body: Add 10px space between them.
CSS: Then ‘grid-gap: 10px’.
Still didn’t understand why ‘1fr 2fr’? No problem, I got you:
fr is a CSS unit, it stands for 'fraction'.
In our example we're splitting the body to 3 equal parts (fractions), so 3fr giving 1/3 for the left so 1fr and 2/3 for the right so 2fr.
I hate to break to you, but we have a small problem here: if we resize the browser window, the right block becomes too narrow.
Hmm, what if we can make each block take the full width of the screen when its width is 700px or smaller? In other words, the left block gets on top and the right block on the bottom, like so:
Fortunately, CSS provides Media queries, it uses the @media rule to include a block of CSS properties only if a certain condition is true. So I typed the following:
So I am telling CSS that I wanna change or override the style of the body element when the screen size is 700px or smaller. That’s it!
I used the only keyword to prevent older browsers that do not support media queries with media features from applying the specified styles. But screen is used to set the screen size of media query. The screen size can be set by using max-width and min-width.
Now, in the ‘Work Experience’ section, I want to put every experience title and period as you can see in the picture of the final result. There is a common way to do that using CSS Flexbox.
Flexbox is similar to Grid but the basic difference is that flexbox was designed for layout in one dimension — either a row or a column. Grid was designed for two-dimensional layout — rows, and columns at the same time.
Wait a minute, in the beginning, didn’t we use Grid while we had one column?
Yes, that’s true, but I did that intentionally for 2 main reasons:
1- I wanted to show you both ways.
2- I Wanted you to know that you can replace flexbox with grid because it’s more general.
Anyway, to do so, let’s wrap every experience title and period in a <div> to create a parent element and i gave it a ‘work-date’ class like so:
Then let’s add the following CSS:
Just similar to what we did with the grid, now we do display: flex ,this stacks the flex items horizontally (from left to right). And with justify-content: space-between, all available space is placed between the first and last items, pushing both items to opposite edges of the container.
To finish, let’s add basic styling properties that we encountered in the previous episode to the rest of the elements, such as ‘background color’, ‘color’, ‘font-size’ etc.. You’ll find all of it in the source code bellow and I commented it so you understand better.
Congrats! You made it to the end and now you have a clean, pretty, complete CV. How awesome is that?!
BTW, we can add some features to CSS with its preprocessors. Sounds interesting?
I think it does, so we’ll do that in the next episode. Stay tuned !
Thank you for following along and seeya soon! 😄
