❄ Design Systems Articles on Building & and Maintaining
❄ Ready Design Component - HTML, CSS, Bootstrap, Tailwind, JavaScript 🐱👤🐱👤🐱👤
❄ Web Development Dictionary 🔥🔥🔥
❄ Float, Flexbox & Grid Layout + (Bootstrap vs Tailwind) - My Notes 🐱👤🐱👤🐱👤
❄ 10 Practical CSS Tricks every developer should know
✔✔✔ 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;
}- dropdown not working without proper.js
- proper.js not included within download file
- right side white space [
overflow-x: hidden] - bottom white space [footer > (-) margin]
.row > .col > .card.h-100[need to add .h-100 class for same height]- .card-img-overlay, apply border-radius
- set inner width % + margin auto
- parent
.card-body + .d-flex + .flex-column
- child
<button class="mt-auto">
<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>- do not use bootstrap for complex grid layout
- must be set height for vertical grid
- https://gridbyexample.com/examples/ [recommanded]
- row > col-12 >
- max-width: 100% |OR| img-fluid [not working] ❌
- only width: 100% work perfectly ✔
- 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>flex min-h-[calc(100vh-80px)] items-center justify-center // 100 vertical height - header or footer height<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>✔✔✔ Setup Background Image
const BannerBackground = {
background: `url(${BannerImg})`,
minHeight: "90vh",
backgroundRepeat: "no-repeat",
backgroundPosition: "center left",
boxShadow: "25px 25px 50px 0 #F6F7F9 inset, -25px -25px 50px 0 #F6F7F9 inset" // blur border edge
};OR
import BannerImg from "../image/banner.png";
<div style={{backgroundImage: `url(${BannerImg})`}}></div>✔✔✔ Conditionally Disable Button
<PrimaryButton disabled={service.slots.length === 0}>
Book Appointment
</PrimaryButton>const PrimaryButton = ({ children, ...props }) => {
return (
<button
disabled={props.disabled}
className="btn btn-primary uppercase font-bold text-white my-6">
{children}
</button>
);
};
export default PrimaryButton;✔✔✔ src import/require not working
- public
- image // move all images to public
- src
- components
- menu
- menuItems.js // create array of object like json and export default, example: src="/images/project-1.png"
- components