Sajid's Web Wisdom

Intro

A collection of knowledge and wisdom about web design and development. Find his work on his YouTube channel.

Topics

• Design System and Components

• Typography

• Golden rule

• Easy Responsive Websites

• Hacks

CSS boilerplate

Based on Sajid’s advice and tips, this serves as a starting point for a global styles sheet.

/* Clean reset for everything */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
 
/* Theme preference colors */
@media (prefers-color-scheme: light) {
    :root {
	    --text: hsl(80, 22%, 92%);
	    --subtext: hsl(80, 22%, 75%);
	    --background: hsl(83, 27%, 6%);
	    --subbackground: hsl(83, 27%, 10%);
	    --primary: hsl(80, 28%, 71%);
	    --secondary: hsl(80, 29%, 30%);
	    --accent: hsl(80, 33%, 49%);
    }
}
 
@media (prefers-color-scheme: dark) {
    :root {
        /*colors/*
    }
}
 
/* Variable definitions */
:root {
    /* ff and ff2 fonts */
    --ff1: "Noto Sans", sans-serif;
    --ff2: "Archivo", sans-serif;
    /* font sizes */
    --fsize1: 1rem;
    --fsize2: 1.125rem;
    --fsize3: 1.25rem;
    --fsize4: 1.5rem;
    --fsize5: 0.875rem;
    /* Spacings */
    --spacing1: 4px;
    --spacing2: 8px;
    --spacing3: 16px;
    --spacing4: 20px;
    --spacing5: 40px;
    --spacing6: 80px;
    --spacing7: 160px;
    --spacing8: 320px;
    /* fonts in typography file */
    --h1: 700 4rem/1.2em var(--ff2);
    --h2: 600 2rem/1.2em var(--ff2);
    --p: 1rem/1.5em var(--ff1);
 
    --successGreen: hsl(120, 48%, 67%);
    --errorRed: hsl(6, 59%, 55%);
    --focus: 2px solid lightblue;
}
 
/* HTML global styles */
html {
    scroll-behavior: smooth;
}
 
body {
    /* use your defined for globals for bg, font, and color */
    min-height: 100vh;
    text-wrap: balance;
    font: var(--p);
    color: var(--text);
    background: var(--background); 
}
 
section {
    width: 80%;
    max-width: 1200px;
    padding: var(--spacing6);
    margin: var(--spacing6) auto;
}
 
 
h1 {
    font: var(--h1);
    color: var(--primary);
    margin: var(--spacing1);
}
 
h2 {
    font: var(--h2);
    color: var(--primary);
    margin: var(--spacing2);
}
 
h3 {
    margin: var(--spacing2);
}
 
p {
    margin: var(--spacing2);
}
 
small {
    color: var(--subtext);
}
 
a {
    text-decoration: none;
    color: var(--accent);
}
 
a:hover {
    color: var(--secondary);
}
 
ul {
    list-style: inside;
    margin: var(--spacing2);
}
 
img {
    width: 100%;
    border-radius: var(--spacing2);
}
 
.btn,
button {
    all: unset;
    background-color: var(--primary);
    font: var(--p);
    color: var(--background);
    margin: var(--spacing2) auto;
    padding: var(--spacing2) var(--spacing3);
    display: inline-block;
    border-radius: var(--spacing2);
    cursor: pointer;
}
 
 
 
@media (hover: hover) {
 
    .btn:hover,
    button:hover {
        scale: 1.115;
        box-shadow: 0 var(--spacing1) var(--spacing2) var(--accent);
    }
}
 
 
.outline-btn {
    color: var(--text);
    background-color: transparent;
    border: 2px solid var(--primary);
}
 
*:focus,
button:focus,
anchor:focus {
    outline: var(--focus);
}
 
.icon {
    margin-left: var(--spacing3);
    width: var(--spacing5);
    vertical-align: middle;
}
 
.center {
    text-align: center;
}
 
.hidden {
    display: none;
}
 
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing4);
    flex-wrap: wrap;
}
 
.flex>* {
    flex: 1;
    min-width: 200px;
}
 
.column {
    flex-direction: column;
}
 
.reverse {
    flex-direction: row-reverse;
}
 
.flex-start {
    align-items: flex-start;
}
 
.top-accent-tab {
    border-top: var(--spacing1) solid var(--accent);
    border-top-left-radius: var(--spacing1);
    border-top-right-radius: var(--spacing1);
}
 
.left-accent-tab {
    border-left: var(--spacing1) solid var(--accent);
    border-radius: var(--spacing1);
}
 
.container {
    margin: var(--spacing3) auto;
    padding: var(--spacing4);
}
 
.card {
    background-color: var(--subbackground);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: var(--spacing1);
}
 
.card.success {
    background-color: var(--successGreen) !important;
    color: var(--text);
}
 
.card.error {
    background-color: var(--errorRed) !important;
    color: var(--text);
}
 
.click-hover:hover {
    cursor: pointer;
    transform: scale(1.0625);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
 
 
/* Utility Classes for quick styles during dev*/
 
/* Margins and Paddings */
.padding1 {
    padding: var(--spacing1) 0;
}
 
.padding2 {
    padding: var(--spacing2) 0;
}
 
.padding3 {
    padding: var(--spacing3) 0;
}
 
.padding4 {
    padding: var(--spacing4) 0;
}
 
.padding5 {
    padding: var(--spacing5) 0;
}
 
.padding6 {
    padding: var(--spacing6) 0;
}
 
.padding7 {
    padding: var(--spacing7) 0;
}
 
.margin1 {
    margin: var(--spacing1) auto;
}
 
.margin2 {
    margin: var(--spacing2) auto;
}
 
.margin3 {
    margin: var(--spacing3) auto;
}
 
.margin4 {
    margin: var(--spacing4) auto;
}
 
.margin5 {
    margin: var(--spacing5) auto;
}
 
.margin6 {
    margin: var(--spacing6) auto;
}
 
.margin7 {
    margin: var(--spacing7) auto;
}