Concepts of CSS — Part 2

Anil Kumar

Jan 10·8 min read

📄 Table of contents

• Why to Reset in CSS
• Responsive Images
• Grid Layout
• Vertical Centering of Dynamic Content
• 8 CSS -tips tricks

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

As a web developer, you can have zero lines of code in your stylesheet and your HTML will look slightly different depending on which browser you view it in.

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

• Set a default font family.

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

Responsive images are those images that fit well to the screens (desktop, laptop, tablet, smartphone), irrespective of their aspect ratios. Responsive images will naturally change in accordance by adjusting to the screen.

• 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

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

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

Fluid width columns that break into more or less columns as space is available, with no media queries!

.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

• It’s possible to vertically center one line of text with line-height:

• 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

CSS can do a lot of amazing stuff, and one of them is the blend mode. There are two properties for blend modes: mix-blend-mode , which defines blending between element and element behind it and background-blend-mode , which defines blending between the background image and background color of the element.

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

You can easily make auto responsive layouts using the CSS grid feature. Here is an example:

.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

The CSS property backface-visibility sets whether the back face of an element is visible when turned towards the user.

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

Here is a Codepen example to check out:

5. Text tooltips

All you do is the absolute position it and style it.

<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

One thing that actually goes great with a tooltip is the little down arrow pointing to the button with the tooltip (image above). The conversation bubble arrow. It works by removing the width and height of the pseudo-element and adds borders only which with a width and height of zero forms 4 triangles which you can set the color to be transparent and then target a specific one to color, whether the top, right, bottom or left.

.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

One thing that used to drive me crazy was that I set an element to be for example 200px and then in the browser, it would be something else because of padding or border, then I found out about 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)

If you want to maintain a single line of text but want to show 3 dots(ellipsis) at the end in case the text ends up being too big, you need this trick. This is one of the examples which illustrate a bad CSS API design due to the fact you need all these combinations of properties for this to work.

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)

If you want ellipsis on multiple lines there is an entire, weird CSS solution to this. You can check this article on CSS-Tricks for more alternative options and details.

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

If you ever wanted your font size to adapt with the size of the site — which you should if you ever code frontend — then this simple formula got you covered;

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

This is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink and flex-basis) are optional.

.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 */}