CSS-klasser for mer effektiv styling

Her er en liste over noen vanlige klasser som kan være nyttige å inkludere i en standard CSS-fil. Disse klassene er generelle og kan brukes på ulike typer elementer for å tilpasse utseendet uten å lage nye spesifikke stiler hver gang.

1. Typografi-klasser

Brukes for å justere tekstens utseende og plassering.

/* Sentralisert tekst */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Uthevet tekst */
.text-bold {
  font-weight: bold;
}

.text-italic {
  font-style: italic;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

2. Margin og padding

For enkel avstandskontroll.

/* Margin */
.mt-1 { margin-top: 5px; }
.mb-1 { margin-bottom: 5px; }
.ml-1 { margin-left: 5px; }
.mr-1 { margin-right: 5px; }

.mt-2 { margin-top: 10px; }
.mb-2 { margin-bottom: 10px; }
.ml-2 { margin-left: 10px; }
.mr-2 { margin-right: 10px; }

/* Padding */
.pt-1 { padding-top: 5px; }
.pb-1 { padding-bottom: 5px; }
.pl-1 { padding-left: 5px; }
.pr-1 { padding-right: 5px; }

.pt-2 { padding-top: 10px; }
.pb-2 { padding-bottom: 10px; }
.pl-2 { padding-left: 10px; }
.pr-2 { padding-right: 10px; }

3. Farger

For å bruke på bakgrunner, tekst, eller grenser.

/* Tekstfarger */
.text-primary {
  color: #007BFF; /* Blå */
}

.text-secondary {
  color: #6C757D; /* Grå */
}

.text-success {
  color: #28A745; /* Grønn */
}

.text-danger {
  color: #DC3545; /* Rød */
}

.text-warning {
  color: #FFC107; /* Gul */
}

/* Bakgrunnsfarger */
.bg-primary {
  background-color: #007BFF;
}

.bg-secondary {
  background-color: #6C757D;
}

.bg-success {
  background-color: #28A745;
}

.bg-danger {
  background-color: #DC3545;
}

.bg-warning {
  background-color: #FFC107;
}

4. Layout

Klasser for layoutjustering.

/* Flexbox */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-space-between {
  display: flex;
  justify-content: space-between;
}

/* Usynlig element */
.hidden {
  display: none;
}

5. Størrelser

For rask justering av bredde, høyde, eller størrelse på elementer.

/* Bredde */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }

/* Høyde */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }

/* Full skjerm */
.full-screen {
  width: 100vw;
  height: 100vh;
}

6. Knapper

For enkle og gjenbrukbare knappstiler.

/* Primær knapp */
.btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1rem;
  text-align: center;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007BFF;
  color: white;
}

.btn-secondary {
  background-color: #6C757D;
  color: white;
}

.btn-success {
  background-color: #28A745;
  color: white;
}

.btn-danger {
  background-color: #DC3545;
  color: white;
}

7. Skygger og grenser

For å gi dybde til elementene.

/* Skygger */
.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

/* Grenser */
.border {
  border: 1px solid #ddd;
}

.border-rounded {
  border-radius: 5px;
}

.border-circle {
  border-radius: 50%;
}

Hvordan bruke disse klassene:

Disse klassene gir deg fleksibilitet til raskt å style elementer uten å måtte lage nye CSS-regler. For eksempel:

<div class="text-center mt-2">
  <button class="btn btn-success">Klikk meg</button>
</div>

Disse klassene kan tilpasses og utvides etter behov. Dette oppsettet fungerer som en god start for nesten enhver nettside! 😊