Custom Props

Grundlæggende indhold,

1. semester

UX vs. DX

UX

DX

h1 {
  color: green;
}

h2 {
  color: blue;
}

p {
  color: red;
}

Farvepalette i CSS

h1 {
  color: #bada55;
}

h2 {
  color: #ff2291;
}

p {
  color: #5000ca;
}

Farvepalette i CSS

???

???

???

h1 {
  /* = Primary/Brand Color */
  color: #bada55;
}

h2 {
  /* = Secondary Color */
  color: #ff2291;
}

p {
  /* = Tertiary/Accent Color */
  color: #5000ca;
}

Farvepalette i CSS

h1 {
  /* = Primary/Brand Color */
  color:
}

h2 {
  /* = Secondary Color */
  color:
}

p {
  /* = Tertiary/Accent Color */
  color:
}

Farvepalette i CSS

 👎🏻☹️

primary
secondary
tertiary
var(--       )
;
h1 {
  /* = Primary/Brand Color */
  color:
}

h2 {
  /* = Secondary Color */
  color:
}

p {
  /* = Tertiary/Accent Color */
  color:
}

Farvepalette i CSS

primary
secondary
tertiary
var(--       )
;
html {
  --primary: #bada55;
}

h1 {
  /* = Primary/Brand Color */
  color:
}

Farvepalette i CSS

primary
var(--       )
;
html {
  --primary: 20;
}

h1 {
  /* = Primary/Brand Color */
  color:
}

Farvepalette i CSS

primary
var(--       )
;

???

h1 {
  color: var(--primary);
}

h2 {
  color: var(--secondary);
}

p {
  color: var(--tertiary);
}

Farvepalette i CSS

h1 {
  color: var(--primary);
  margin-bottom: 20px;
}

h2 {
  color: var(--secondary);
  margin-bottom: 20px;
}

p {
  color: var(--tertiary);
  margin-block: 20px;
}

Farvepalette i CSS

html {
  --primary: #bada55;
  --secondary: #ff2291;
  --tertiary: #5000ca;
  
  --space-sm: 1rem;
}

Farvepalette i CSS

html {
  --primary: #bada55;
  --secondary: #ff2291;
  --tertiary: #5000ca;
  
  --space-sm: 1rem;
}
h1 {
  color: var(--primary);
  margin-bottom: var(--space-sm);
}

h2 {
  color: var(--secondary);
  margin-bottom: var(--space-sm);
}

p {
  color: var(--tertiary);
  margin-block: var(--space-sm);
}

Custom Properties

html {
  --primary: #bada55;
  --secondary: #ff2291;
  --tertiary: #5000ca;
  
  --space-sm: 1rem;
}

Custom Properties

html {
  --primary-color: #bada55;
}
h1 {
  color: var(--primary-color);
}

Definér

Brug

--dit-variabel-navn: [værdi];
--dit-variabel-navn

Custom Properties

html {
  --primary-color: #bada55;
}
h1 {
  color: var(--primary-color);
}

Definér

Brug

--dit-variabel-navn: [værdi];
[property]: var(                   );
--dit-variabel-navn

Custom Properties

html {
  --primary: #5000ca;
  --secondary: #463866;
  --accent: #fb28a8;

  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-xxl: 6rem;
}

eksempel

"Consistency"

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (min-width: 600px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

Custom Properties

eksempel

.grid {
  --cols: 1fr 1fr 1fr;
  display: grid;
  grid-template-columns: var(--cols);
}

@media (min-width: 600px) {
  .grid {
    --cols: 1fr 1fr 1fr 1fr 1fr;
  }
}

Custom Properties

eksempel

.grid {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
}

@media (min-width: 600px) {
  .grid {
    --cols: 5;
  }
}

Custom Properties

repeat( 3, 1fr )

repeat( 5, 1fr )

eksempel

.grid {
  --grid-size: repeat(3, 1fr);
  
  display: grid;
  grid-template-rows: var(--grid-size);
  grid-template-columns: var(--grid-size);
}

Custom Properties

eksempel

Custom Properties

Color Management

Loading...

@media (prefers-color-scheme: dark) {
  /* Dark styles */
}

Dark mode

html {
  --background-color: #222;
  --foreground-color: #fafafa;
}

@media (prefers-color-scheme: dark) {
  html {
    --background-color: #fafafa;
    --foreground-color: #222;
  }
}

body {
  background-color: var(--background-color);
  color: var(--foreground-color);
}

Dark mode

@media (prefers-color-scheme: dark) {
  /* Dark styles */
}

Dark mode

https://www.joshwcomeau.com/

Custom Properties, 1SEM

By Dannie Vinther

Custom Properties, 1SEM

Short introduction to Custom Properties, 1SEM

  • 444

More from Dannie Vinther