Concepts of CSS — Part 2

📄 Table of contents

◉ Why css ‘reset’ is important for the web developer?

That’s why we reset it. On reset-ting, we override any styling that you would otherwise inherit.

To ensure that any website will look the same across different browsers, everyone must reset or start about every project with a few lines of code in their top-level CSS file that look something like this:

By default, an element’s height and width are determined in the following way:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

What else can we do (in Reset) ?

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
  • Set a scalable base font-size. Using em in * ensures all components inherit the same base size and that it is scalable. 62.5% in HTML will make the base font 10 pixels. Now, you can scale font size site-wide using a 10 based number system. ex: 140%.
* {
font-size: 1em;
}html {
font-size: 62.5%;
}
  • Make images easier to work with. This gets rid of some bottom spacing and makes them work more like blocks.
img {
max-width: 100%;
display: block;
}

◉ Responsive Images

  • using PURE CSS

Below are the 4 lines of CSS code that will make any image responsive:

.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
<img class=”center” src=”https://images.unsplash.com/photo-1592329724435-67ae98e9824f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1991&q=80">

Using above piece of css code, you don’t have to scroll the image left to right or top to bottom to see the full image. This is the beauty of adding CSS properties to make an image responsive.

  • using BOOTSTRAP 4
<img class=”img-fluid” src=”https://images.unsplash.com/photo-1592329724435-67ae98e9824f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1991&q=80">

Grid Layout

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

All direct children of the grid container automatically become grid items.

The grid-gap property is a shorthand property for the grid-row-gap and the grid-column-gap properties:

.grid-container {

display: grid / inline-grid;
grid-column-gap
grid-row-gap
grid-gap
grid-template-columns: auto auto auto auto;
grid-template-rows: 80px 200px;
justify-content: center;/ space-around; / space-between;
}.item1 { grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}

The Most Powerful Lines in Grid

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));


/* This is better for small screens, once min() is better supported */
/* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
grid-gap: 1rem;
/* This is the standardized property now, but has slightly less support */
/* gap: 1rem */
}

1. Vertical Centering of Dynamic Content

  • For multiple lines of text or non-text content, CSS tables are the answer. Set .container’s display to table, then use display: table-cell and vertical-align: middle for .text:

Think of this CSS trick as the vertical equivalent of margin: 0 auto.

  • One of the easiest ways to center a div with CSS is by using Flexbox if & only Internet Explorer support isn’t a must.. It makes positioning and aligning elements much easier.

Here is an example:

.parent {
display: flex;
align-items: center;
justify-content: center;

height: 100vh;
width: 100wh;
}
.child {
width: 100px;
height: 100px;
background-color: #20126f;
}

Vertically center absolute element inside a relative container:

.container {
position: relative;
}.element {
/* change to fixed to center relative to the view */
position: absolute;
top: 50%;
transform: translateY(-50%);

}

2. Blend modes

Here is an example where we have an image and text inside a div:

HTML:

<div class="blend">
<img src="imageSrc" />
<h1>NATURE</h1>
</div>

CSS:

.blend {
width: 100vw;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}.blend img {
position: absolute;
}.blend h1 {
font-size: 150px;
mix-blend-mode: overlay;
}

3. Responsive Grid

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}

For example, imagine you have to display a list of products for an e-commerce app. Your task is to make it responsive, so you decide to display three products per row for desktops, two products per row for tablets, and only one product per row for mobiles. Have a look at the examples below:

HTML code:

<div class="grid">
<div class="item">Product 1</div>
<div class="item">Product 2</div>
<div class="item">Product 3</div>
<div class="item">Product 4</div>
<div class="item">Product 5</div>
<div class="item">Product 6</div>
</div>

CSS:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
margin-top: 150px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}

.item{
background: red;
padding: 20px;
color: wheat;
}

4. Backface visibility

.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

Here is a Codepen example to check out:

5. Text tooltips

<button type="button" class="tooltip" data-tip="This css tooltip">
I have a Tooltip
</button>// only add tooltip when there is a message
.tooltip[data-tip]:not([data-tip=""])::before {
content: attr(data-tip);
position: absolute;
background-color: rgba(0,0,0,0.8);
color: #fff;
padding: 15px 10px;
border-radius: 3px;
max-width: 300px;
width: 250%;
left: 50%;
transform: translate(-50%, 0);
bottom: calc(100% + 12px);
}

→The direction arrow

.tooltip[data-tip]:not([data-tip=""])::after {
content: '';
border-width: 6px;
border-style: solid;
border-color: transparent;
border-top-color: rgba(0,0,0,0.8);
width: 0;
height: 0;

display: inline-block;
position: absolute;
left: 50%;
bottom: 100%;
transform: translate(-50%, 0);
}

more @ https://beforesemicolon.medium.com/10-css-tricks-you-need-to-know-about-part-2-df52ee0b2937

box-sizing

The following will create a box that is 240 by 240 (adds padding to width and height):

.box {
width: 200px;
height: 200px;
background: #eee;
padding: 20px;
}

The following will create a box that is 200 by 200 (includes padding and border into the size I set):

.box {
width: 200px;
height: 200px;
background: #eee;
padding: 20px;
box-sizing: border-box;
}

This is why on all my CSS tutorial videos You hear me mention setting the following:

Targets all elements and pseudo-elements
*, *::after, *::before {
box-sizing: border-box;
}

Truncate with Ellipsis (single line)

The element must be a block or inline-block, the text-overflow does not work without the overflow being hidden and the element must have a defined width or a max-width set. The white-space value of nowrap (reads No Wrap not Now Rap) simply forces the text not to break into a new line

p {
/* use max-width so the ellipsis
only shows when reached that size */

max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;

}

→Truncate with an ellipsis (multiple lines)

p {
/* old display option */
display: -webkit-box;
-webkit-box-orient: vertical;
/* max number of lines to show */
-webkit-line-clamp: 3; /* needed for it to work */
overflow: hidden;
}

Responsive text

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

You can also get a closer result with a much simpler CSS option, clamp function, which has decent support.

font-size: clamp(min, viewport-width-unit, max);

Display: flex

.flex-item {/* this */
flex: 1 100px;
/* is the same as */
flex-grow: 1;
flex-basis: 100px;
/* and it leaves the flex-shrink property alone, which would be */flex-shrink: inherit; /* defaults to 1 */}

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store