Jak stworzyć własny framework CSS na wzór Bootstrap 5: krok po kroku
Frameworki CSS, takie jak Bootstrap, ułatwiają budowanie responsywnych, nowoczesnych interfejsów użytkownika. Ale co jeśli potrzebujesz czegoś lżejszego, prostszego, bardziej dopasowanego do Twoich potrzeb? W tym artykule pokażę Ci, jak stworzyć własny mini-framework CSS inspirowany Bootstrapem 5 – od planowania, przez kod, aż po gotowy plik CSS.
Dlaczego warto stworzyć własny framework?
- Masz pełną kontrolę nad stylami i klasami
- Framework może być lekki i szybki
- Łatwiej go dostosować do konkretnego projektu
- Uczysz się, jak działają takie systemy jak Bootstrap i Tailwind
Krok 1: Zaplanuj strukturę
Podstawowy framework powinien zawierać:
- Reset CSS – wyzerowanie domyślnych styli przeglądarek
- Siatkę (grid) – np. na bazie Flexboxa
- Typografię – nagłówki, paragrafy, rozmiary czcionek
- Komponenty bazowe – przyciski, kontenery
- Klasy narzędziowe (utilities) – marginesy, paddings, wyrównania tekstu
- Zmienna konfiguracja – np. kolory, odstępy
Krok 2: Utwórz strukturę plików
Tworzymy katalog projektu z plikami .scss:
/css-framework/
scss/
_reset.scss
_variables.scss
_grid.scss
_typography.scss
_buttons.scss
_utilities.scss
main.scss
style.css (skompilowany plik wynikowy)Krok 3: Kod SCSS – fragmenty
Zmienne (_variables.scss)
$primary: #0d6efd;
$secondary: #6c757d;
$danger: #dc3545;
$gray-900: #212529;
$font-size-base: 1rem;
$spacing: 1rem;Reset (_reset.scss)
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
font-family: sans-serif;
}Grid (_grid.scss)
.row {
display: flex;
flex-wrap: wrap;
margin-left: -0.5rem;
margin-right: -0.5rem;
}
[class^="col-"] {
padding-left: 0.5rem;
padding-right: 0.5rem;
flex: 1 0 0%;
}
.col-6 {
flex: 0 0 50%;
max-width: 50%;
}Typografia (_typography.scss)
body {
font-size: $font-size-base;
line-height: 1.5;
color: $gray-900;
}
h1, h2, h3 {
font-weight: 600;
margin-bottom: 0.5rem;
}Przyciski (_buttons.scss)
.button {
padding: 0.5rem 1rem;
border-radius: 0.25rem;
font-size: $font-size-base;
border: none;
cursor: pointer;
&.primary {
background-color: $primary;
color: white;
}
&.danger {
background-color: $danger;
color: white;
}
}Utilities (_utilities.scss)
.m-1 { margin: 0.25rem !important; }
.p-1 { padding: 0.25rem !important; }
.text-center { text-align: center !important; }
.container {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}Import wszystkiego (main.scss)
@import "variables";
@import "reset";
@import "grid";
@import "typography";
@import "buttons";
@import "utilities";Krok 4: Kompilacja SCSS do CSS
Aby skompilować main.scss do gotowego style.css, użyj terminala:
sass scss/main.scss style.css --style=expandedJeśli nie masz sass, zainstaluj go:
npm install -g sassKrok 5: Demo HTML
Poniżej prosty plik HTML pokazujący użycie Twojego frameworka:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Demo Frameworka CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container p-1">
<h1 class="text-center">Mój Mini Framework CSS</h1>
<div class="row mt-1">
<div class="col-6 p-1">
<h2>Lewa kolumna</h2>
<button class="button primary">Akcja</button>
</div>
<div class="col-6 p-1">
<h2>Prawa kolumna</h2>
<button class="button danger">Usuń</button>
</div>
</div>
</div>
</body>
</html>Gotowy plik CSS
Możesz pobrać gotowy skompilowany plik CSS tutaj:
Zobacz demo
Co dalej?
Twój framework możesz teraz:
- Rozbudować o inne komponenty (karty, modale, formularze)
- Opublikować na GitHubie jako open source
- Zbudować wersję CDN (np. przez jsDelivr)
- Podpiąć do własnych projektów lub dokumentacji
Podsumowanie
Stworzenie własnego frameworka CSS nie jest trudne – wystarczy dobra organizacja kodu, przemyślana struktura i kilka podstawowych komponentów. Dzięki temu zyskujesz lekki, szybki i własny zestaw narzędzi, który możesz rozwijać według własnych potrzeb.