CSS Cheat Sheet demonstrated in React
This article is about some basic CSS topics which are worth knowing in order to build the visual part of the website. There are so many things to learn in order to build a Full Stack application that often there is not much time left to explore CSS. So here it is - CSS Cheat Sheet demonstrated in React. Hopefully, it will be useful for some of you.
Box model (margin vs padding)
First, the “box model” is a box that wraps around elements and it consists of margins, borders, padding and the actual content. The demo below is showing 3 squares with the same width and height of 500px but with different margin and padding:
- The red square doesn’t have any margin or padding.
- The yellow square has a margin 50px from each site which means that box “moved” or got some extra spacing around. The size of the square remains 500px.
- The gray square with the same size and padding 50px expanded, so 50px was added to the total width — making the box 600px wide.
Position
Position property specifies in what manner an item is positioned on the page. By default elements are displayed on the page in the way they appear in the document (static):
- Position relative of element places the element relative to where it would have originally been on a web page.
- Position absolute of element makes the element being ignored by other elements (siblings).
- Position fixed means that element is pinned to a specific spot on a page (it’s fixed to the viewport) and it stays regardless of the scrolling (it could be use in Navbar)
- Position sticky will not affect until we define offset, like top: 20px. The element will scroll until it reaches the offset and stay on its position.
The demo below demonstrates how position absolute works. The yellow square with absolute position property is ignored by gray square. That’s why gray square takes the next available spot after red square.
Flexbox Model
Flexbox aligns elements horizontally and vertically along the main and cross axes. The rule number 1 is to set the property display: flex on parent element. This turns the element into flex container and its first-level children elements into flex-items. Now, depends on how we want to align its elements we need to add property justifyContent and/or alignItems
- justifyContent align elements along main axis. All possible values are: flex-start, center, flex-end, space-between, space-around, initial, inherit
- alignItems works exactly the same as justifyContent but aligns elements along the cross axis. The values unique to alignItems are stretch and baseline
The demonstration below shows the red square being centered in the pink colored window by applying 3 properties on the parent element:
display: "flex",
justifyContent: "center",
alignItems: "center"
Viewport units (responsive website)
In the responsive websites, elements adapt to different sizes of browsers. What that means is that when we make the window smaller, the elements also get smaller without messing up our layout. So instead of using px to apply length of the element, we can use Viewport units.
- Viewport Width (vw) is the percentage of the full viewport width (10vw is 10% of the current browser width)
- Viewport Height (vh) is the percentage of the full viewport width (10vh is 10% of the current browser height)
The demonstration below shows that elements are scaled proportionally with the size of browser window. The width and height of the block is always 20% and 70% correspondingly to the current size of the window.
Site note, the difference between using % length and viewport unit is that % is relative to local context (parent), when vw length is relative to the full width of the browser window.
