For years I’ve wanted a really simple base CSS file. I wanted something I could just slap on every project and have it look ok, and something that would be a starting point, easily changed for different projects. I just want the elements styled, NO CLASSES!!
The internet is disgusting for this. Everyone wants to sell you a class or a subscription to a collection of themes. I was just looking for something simple that wouldn’t look like shit. Then today, I realized Jippity (ChatGPT o3-mini-high{which I pay a subscription for but let’s not think about that}) is finally advanced enough to do this for me trivially easily.
Below is the CSS that Jippity helped me craft. It’s a clean, modern base stylesheet with defaults for semantic HTML elements, a simple reset, and a built-in dark/light mode(this functionality still requires a bit of javascript and a single class{h*ck me}).
Feel free to copy, modify, and play around with this CSS. It’s exactly what I’ve always wanted, and now you can have it too! (You could also get exactly what you want from Jippity faster than finding this blog post though, so who am I kidding. Everything Bagel, amirite?)
Here’s the button for the theme toggle:
<button class="theme-toggle" id="theme-toggle">Switch to Dark Mode</button>
Here’s the javascript to make it work:
const themeToggleButton = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
// Check localStorage for a saved theme, default to light
const savedTheme = localStorage.getItem('theme') || 'light';
htmlElement.setAttribute('data-theme', savedTheme);
themeToggleButton.textContent = savedTheme === 'dark'
? 'Switch to Light Mode'
: 'Switch to Dark Mode';
themeToggleButton.addEventListener('click', () => {
let currentTheme = htmlElement.getAttribute('data-theme');
if (currentTheme === 'light') {
htmlElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
themeToggleButton.textContent = 'Switch to Light Mode';
} else {
htmlElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
themeToggleButton.textContent = 'Switch to Dark Mode';
}
});
And here’s that lovely CSS:
/* -------------------------
Color Variables for Light Mode (default)
------------------------- */
:root {
--background: #fdfdfd;
--card-background: #fff;
--input-background: #f1f1f1;
--text-color: #333;
--accent-color: #4FC3F7;
--border-color: #e5e5e5;
--shadow-color: rgba(0, 0, 0, 0.1);
}
/* -------------------------
Dark Mode Overrides
------------------------- */
[data-theme="dark"] {
--background: #121212;
--card-background: #1E1E1E;
--input-background: #2C2C2C;
--text-color: #E0E0E0;
--accent-color: #4FC3F7;
--border-color: #333;
--shadow-color: rgba(0, 0, 0, 0.5);
}
/* -------------------------
Basic Reset
------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 100%;
line-height: 1.6;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
color: var(--text-color);
background-color: var(--background);
padding: 1rem;
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* -------------------------
Semantic Element Styling
------------------------- */
header,
nav,
main,
section,
article,
aside,
footer,
form {
background-color: var(--card-background);
padding: 1rem;
margin-bottom: 1rem;
border-radius: 8px;
box-shadow: 0 1px 3px var(--shadow-color);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
header {
border-bottom: 2px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
gap: 1rem;
}
nav a {
text-decoration: none;
color: var(--accent-color);
}
nav a:hover {
text-decoration: underline;
}
/* -------------------------
Theme Toggle Button
------------------------- */
.theme-toggle {
background-color: var(--accent-color);
border: none;
border-radius: 4px;
color: var(--card-background);
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.2s ease;
}
.theme-toggle:hover {
background-color: #42A9DC;
/* slightly darker blue */
}
main {
min-height: 60vh;
}
article,
section {
margin-bottom: 1rem;
}
aside {
background-color: var(--input-background);
}
footer {
border-top: 2px solid var(--border-color);
text-align: center;
font-size: 0.9rem;
}
figure {
margin: 1rem 0;
text-align: center;
}
figcaption {
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--text-color);
opacity: 0.8;
}
blockquote {
margin: 1rem;
padding: 1rem;
border-left: 4px solid var(--border-color);
font-style: italic;
background-color: var(--input-background);
}
code,
pre {
font-family: "Courier New", Courier, monospace;
background-color: var(--input-background);
color: var(--text-color);
padding: 0.2rem 0.4rem;
border-radius: 4px;
}
pre {
overflow-x: auto;
padding: 1rem;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
}
th,
td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
details {
margin-bottom: 1rem;
}
summary {
cursor: pointer;
font-weight: bold;
}
/* -------------------------
Modernized Form Styles
------------------------- */
form {
padding: 1.5rem;
max-width: 500px;
margin: 0 auto 1rem auto;
}
fieldset {
border: none;
padding: 0;
margin: 0;
}
legend {
font-size: 1.5rem;
margin-bottom: 1rem;
font-weight: bold;
color: var(--text-color);
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text-color);
}
input,
textarea,
select {
width: 100%;
padding: 0.75rem;
margin-bottom: 1rem;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--input-background);
color: var(--text-color);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--accent-color);
box-shadow: 0 0 5px var(--accent-color);
outline: none;
}
button[type="submit"] {
width: 100%;
padding: 0.75rem;
background-color: var(--accent-color);
border: none;
border-radius: 4px;
color: var(--card-background);
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
}
button[type="submit"]:hover {
background-color: #42A9DC;
}
/* Sleek and Modern Link Styling Using --accent-color */
a {
text-decoration: none;
color: var(--accent-color);
position: relative;
transition: color 0.3s ease;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: var(--accent-color);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
a:hover,
a:focus {
color: var(--accent-color);
/* Keeps the accent consistent; optionally, you can define a hover variant */
}
a:hover::after,
a:focus::after {
transform: scaleX(1);
transform-origin: left;
}
/* Enhanced focus style for accessibility */
a:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}