❄ Design Systems Articles on Building & and Maintaining

❄ Design Systems for Figma

❄ Ready Design Component - HTML, CSS, Bootstrap, Tailwind, JavaScript 🐱‍👤🐱‍👤🐱‍👤

❄ Web Development Dictionary 🔥🔥🔥

❄ Float, Flexbox & Grid Layout + (Bootstrap vs Tailwind) - My Notes 🐱‍👤🐱‍👤🐱‍👤

❄ Grid By Example

❄ 10 Practical CSS Tricks every developer should know

❄ HTML Reference

❄ CSS Reference

Index

Raw CSS
Bootstrap
Tailwind
React

Raw CSS

✔✔✔ CSS Grid Simple Card with Image

/* Parent */
.card-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); ✔✔✔
  grid-template-columns: repeat(3, 1fr); ❌
}

/* Child */
.card{
  height: 510px;
  width: 320px;
  padding: 15px;
  justify-self: center;
}

/* Must need a container/wrapper for image */
.image-container{
  width: 300px;
  height: 300px;
}

img{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

✔✔✔ Responsive Content Without Scroll Bar

.header{
  width: 100px
}

.content/banner{
  min-height: calc(100vh - 300px)
}

.footer{
  height: 200px
}

✔✔✔ Hide X axis scroll bar

  body {
    overflow-x: hidden;
  }

✔✔✔ Footer Bottom Position ✔ using flex and min vertical height ✔✔✔

// content and footer need to wrap by parent conteiner
// only applied on content
margin: 200px 0; // top-bottom
display: flex;
justify-content: center; // horizontal center
align-items: center; // vertical center
min-height: calc(100vh-200px); // 200px is footer height

 ✔ using margin-top auto ❌❌❌
  .footer {
  margin-top: 0; /* take available whitespace */
  margin-bottom: -10px; /* remove bottom whitespace */
  padding-bottom: 5px;
  height: 100px; /* calc height when limited content */
  }

✔ using position absolute ❌❌❌
#page-container {
  position: relative; // use only position fixed
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

body{
  min-height: calc(100vh - footer_height)
  }

✔✔✔ Responsive Google Map

  .map-responsive{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  }
  .map-responsive iframe{
  left:0;
  top:0;
  height:100%;
  }

✔✔✔ Simple Box Shadow

border-radius: 20px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px ;
/* color | offset-x | offset-y | blur-radius */ ✔
/* color | offset-x | offset-y | blur-radius | spread-radius */ ❌
|OR|
background-color: #E83D3D;
border-radius: 30px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
/* offset-x | offset-y | blur-radius | color*/ ✔

// for dark mode
-webkit-box-shadow: 2px 4px 10px 1px rgba(0, 0, 0, 0.47);
  box-shadow: 2px 4px 10px 1px rgba(201, 201, 201, 0.47);

✔✔✔ -----OR----- Divider

<div className="d-flex align-items-center my-4">
    <div style={{ height: "1px" }} className="bg-secondary w-50 opacity-50"></div>
        <p className="mt-2 px-2 opacity-75">OR</p>
    <div style={{ height: "1px" }} className="bg-secondary w-50 opacity-50"></div>
</div>

✔✔✔ Button position at bottom

.item {
display: flex;
flex-direction: column;
}
.item button {
margin-top: auto;
}

✔✔✔ Pop image out of the section

section {
position: relative;
overflow: visible;
}
img{
position: absolute;
bottom: 0; ✔
}

✔✔✔ Horizontal Scroll Bar 👿👿👿

body {
  overflow-x: hidden;
}

Bootstrap

Download CDN

dropdown not working without proper.js
proper.js not included within download file

Body

right side white space [overflow-x: hidden]
bottom white space [footer > (-) margin]

Card

.row > .col > .card.h-100 [need to add .h-100 class for same height]
.card-img-overlay, apply border-radius

Card inner div width

set inner width % + margin auto

Card Button

parent
- .card-body + .d-flex + .flex-column
child
- <button class="mt-auto">

Flex item fixed position

<parent class="d-flex">
  <child class="mt-auto"></child>
  <child class="mb-auto"></child>
  <child class="ms-auto"></child>
  <child class="me-auto"></child>
</parent>

Grid Layout

do not use bootstrap for complex grid layout
must be set height for vertical grid
https://gridbyexample.com/examples/ [recommanded]

Row [img full-width]

row > col-12 >
- max-width: 100% |OR| img-fluid [not working] ❌
- only width: 100% work perfectly ✔

Position a background img

start-100 [Creates extra margin on right][scroll bar appeared] ❌
end-0 ✔
add padding inside container

<div class="position-absolute end-0 bottom-0 d-none d-lg-block">
  <img src="assets/img/dest/shape.svg" alt="" class="pb-5">
</div>

Tailwind

✔✔✔ Center content without scroll bar

flex min-h-[calc(100vh-80px)] items-center justify-center // 100 vertical height - header or footer height

✔✔✔ Misonry grid system

<div class="columns-3 ...">
  <img class="w-full aspect-video ..." src="..." />
  <img class="w-full aspect-square ..." src="..." />
  <!-- ... -->
</div>

✔✔ Footer at bottom using flex, min-height & top-bottom margin ✔✔✔

// parent
<div>
  // content
  <div className="my-8 flex justify-center items-center min-h-[calc(100vh-200px)]">
  </div>
  <Footer></Footer>
</div>

<div class="flex flex-col h-screen/h-[90vh] justify-between">
  <header class="h-10 bg-red-500">Header</header>
  <main class="mb-auto h-10 bg-green-500">Content</main>
  <footer class="h-10 bg-blue-500">Footer</footer>
</div>

// Class justify-between is not required, play with h-screen and mb-auto classes.

✔✔✔ Setup Background Image

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

React