Kas yra Open Props ir kodėl tai svarbu
Jei kada nors kūrėte dizaino sistemą nuo nulio arba bandėte palaikyti konsistentišką stilių visame projekte, žinote, kad tai gali būti tikras galvos skausmas. Open Props – tai atviro kodo CSS custom properties (kintamųjų) biblioteka, kuri siūlo jau paruoštą dizaino tokenų rinkinį. Galima sakyti, kad tai tarsi Tailwind CSS, tik be utility klasių – tiesiog gryni CSS kintamieji, kuriuos galite naudoti kaip norite.
Projektas pradėtas Google Chrome komandos nario Adam Argyle, kuris norėjo sukurti kažką tarp pilnos dizaino sistemos ir tuščio lapo. Open Props duoda jums pamatą – spalvas, atstumus, šriftus, animacijas ir daug daugiau – bet neprimetant jokios specifinės architektūros ar metodologijos. Tai tiesiog kintamieji, kuriuos galite integruoti į savo esamą darbo procesą.
Biblioteka yra nedidelė (apie 20KB), modulinė ir puikiai veikia su bet kokiu CSS preprocessoriu ar framework’u. Galite naudoti viską arba importuoti tik tai, ko reikia. Nėra jokių JavaScript priklausomybių, nėra build stepo reikalavimų – tiesiog importuojate ir naudojate.
Kaip pradėti naudoti Open Props
Pradėti naudoti Open Props yra itin paprasta. Paprasčiausias būdas – įtraukti per CDN:
„`html „`
Bet jei dirbate su moderniu build procesu, geriau įdiegti per npm:
„`bash
npm install open-props
„`
Tada galite importuoti CSS faile:
„`css
@import „open-props/style”;
„`
Arba jei naudojate PostCSS ar panašius įrankius:
„`css
@import „open-props”;
„`
Vienas iš gražiausių dalykų – galite importuoti tik tai, ko reikia. Pavyzdžiui, jei jums reikia tik spalvų ir atstumus:
„`css
@import „open-props/colors”;
@import „open-props/sizes”;
„`
Tai leidžia išlaikyti bundle dydį minimalų, ypač svarbu, jei kuriate performance-orientuotą projektą. Biblioteka padalinta į atskirus modulius: spalvos, šešėliai, animacijos, gradientai, šriftai, atstumai ir t.t.
Spalvų sistema ir tamsus režimas
Open Props spalvų paletė yra tikrai įspūdinga. Kiekviena spalva turi 15 atspalvių – nuo šviesaus iki tamsaus. Pavyzdžiui, mėlyna spalva:
„`css
.element {
background: var(–blue-0); /* šviesiausia */
color: var(–blue-9); /* tamsiausia */
}
„`
Bet štai kur tampa įdomu – biblioteka turi įtaisytą tamsaus režimo palaikymą. Yra specialūs kintamieji, kurie automatiškai prisitaiko prie `prefers-color-scheme`:
„`css
.card {
background: var(–surface-1);
color: var(–text-1);
border: 1px solid var(–surface-3);
}
„`
Šie kintamieji automatiškai pasikeičia, kai vartotojas perjungia tamsų režimą savo sistemoje. Jums nereikia rašyti jokių media queries ar kurti atskirų taisyklių. Tai veikia iš karto, nes Open Props naudoja CSS custom properties su default reikšmėmis, kurios keičiasi pagal media query.
Yra net adaptyvios spalvos, kurios skirtos teksto ir fono kontrastui užtikrinti. `–text-1` visada bus tinkamo kontrasto su `–surface-1`, nepriklausomai nuo temos. Tai labai palengvina prieinamumo standartų laikymąsi.
Atstumai, dydžiai ir responsive dizainas
Viena iš sunkiausių dalykų kuriant dizaino sistemą – nuspręsti, kokie turėtų būti atstumai. Per daug pasirinkimų sukuria chaosą, per mažai – riboja kūrybiškumą. Open Props siūlo gerai apgalvotą skalę:
„`css
/* Atstumai nuo 000 (mažiausias) iki 15 (didžiausias) */
.container {
padding: var(–size-5);
margin-bottom: var(–size-8);
gap: var(–size-3);
}
„`
Skalė yra pagrįsta matematine progresija, todėl vizualiai atrodo harmoninga. Mažesni skaičiai auga lėčiau, didesni – greičiau. Tai reiškia, kad turite daugiau pasirinkimų mažesniems atstumams (kur dažnai reikia daugiau tikslumo) ir mažiau pasirinkimų dideliems (kur tikslumas mažiau svarbus).
Dar yra fluid atstumai, kurie automatiškai prisitaiko prie viewport dydžio:
„`css
.hero {
padding-block: var(–size-fluid-5);
}
„`
Fluid kintamieji naudoja `clamp()` funkciją, todėl jie sklandžiai keičiasi tarp minimalios ir maksimalios reikšmės. Nebereikia rašyti daugybės media queries skirtingiems ekranų dydžiams.
Taip pat yra relative dydžiai, pagrįsti em vienetais, kurie puikiai tinka komponentams, kurie turi prisitaikyti prie tėvinio elemento font-size:
„`css
.button {
padding: var(–size-2) var(–size-4);
border-radius: var(–radius-2);
}
„`
Animacijos ir easing funkcijos
Open Props turi išsamią animacijų biblioteką su paruoštomis easing funkcijomis. Užuot kiekvieną kartą ieškojęs „natural easing function CSS” Google, tiesiog naudojate:
„`css
.modal {
animation: var(–animation-fade-in);
animation-timing-function: var(–ease-spring-3);
}
„`
Yra kelios easing kategorijos:
– `–ease-in` / `–ease-out` / `–ease-in-out` – klasikiniai variantai su skirtingais intensyvumais
– `–ease-elastic` – atšokimo efektas
– `–ease-spring` – fizikos pagrįstas spyruoklės efektas
– `–ease-bounce` – kamuolio atšokimo efektas
Kiekviena kategorija turi kelis intensyvumo lygius (1-5), todėl galite tiksliai kontroliuoti, kaip intensyvus norite efektą.
Biblioteka taip pat turi paruoštas keyframe animacijas:
„`css
@keyframes fade-in {
from { opacity: 0; }
}
.element {
animation: fade-in var(–animation-fade-in-duration) var(–ease-out-3);
}
„`
Arba galite naudoti paruoštas animacijas:
„`css
.notification {
animation: var(–animation-slide-in-right);
}
„`
Tai apima slide, fade, scale ir kitas dažniausiai naudojamas animacijas. Viskas optimizuota performance’ui – animacijos naudoja tik transform ir opacity properties, kurios nesukelią reflow ar repaint.
Šešėliai ir depth sistema
Material Design populiarino elevation koncepciją – idėją, kad UI elementai gali būti skirtinguose „aukščiuose” virš pagrindo. Open Props turi puikią šešėlių sistemą, kuri tai įgyvendina:
„`css
.card {
box-shadow: var(–shadow-2);
}
.modal {
box-shadow: var(–shadow-6);
}
„`
Šešėliai eina nuo 0 (jokio šešėlio) iki 6 (labai ryškus šešėlis). Kiekvienas lygis turi kelias šešėlių sluoksnius, kurie sukuria realistišką depth efektą. Tai nėra tiesiog vienas blur su offset – tai kruopščiai sukurti šešėliai, kurie atrodo natūraliai.
Yra ir spalvoti šešėliai, jei norite kažko drąsesnio:
„`css
.button-primary {
box-shadow: var(–shadow-3), var(–shadow-color-blue);
}
„`
Inner šešėliai taip pat palaikomi:
„`css
.input {
box-shadow: var(–inner-shadow-2);
}
„`
Šešėliai automatiškai prisitaiko prie tamsaus režimo – jie tampa subtilesniais tamsoje, nes per ryškūs šešėliai tamsame fone atrodo nenatūraliai.
Tipografija ir šriftų sistema
Tipografijos kintamieji Open Props yra pragmatiški ir lankstūs. Yra paruošti font stack’ai, kurie veikia visose platformose:
„`css
body {
font-family: var(–font-sans);
}
code {
font-family: var(–font-mono);
}
h1 {
font-family: var(–font-serif);
}
„`
Font dydžiai seka panašią logiką kaip ir atstumai – yra skalė nuo 00 iki 8:
„`css
.small-text {
font-size: var(–font-size-0);
}
h1 {
font-size: var(–font-size-8);
}
„`
Taip pat yra fluid tipografija, kuri automatiškai skalėja pagal viewport:
„`css
h1 {
font-size: var(–font-size-fluid-3);
}
„`
Line height ir letter spacing taip pat turi paruoštas reikšmes:
„`css
.body-text {
line-height: var(–font-lineheight-3);
letter-spacing: var(–font-letterspacing-1);
}
„`
Font weights yra apibrėžti kaip semantiniai kintamieji:
„`css
strong {
font-weight: var(–font-weight-7); /* bold */
}
„`
Tai leidžia lengvai pakeisti visų bold elementų storį vienoje vietoje, jei jūsų dizainas to reikalauja.
Integracijos su framework’ais ir realūs pavyzdžiai
Open Props puikiai veikia su bet kokiu moderniu framework’u. Su React galite tiesiog importuoti CSS faile:
„`jsx
import ‘open-props/style.css’;
function Card({ children }) {
return (
{children}
);
}
„`
Su Vue.js tai veikia analogiškai:
„`vue
„`
Jei naudojate CSS-in-JS sprendimus kaip styled-components, tai taip pat veikia sklandžiai:
„`javascript
import styled from ‘styled-components’;
const Card = styled.div`
padding: var(–size-5);
background: var(–surface-2);
border-radius: var(–radius-3);
box-shadow: var(–shadow-2);
`;
„`
Realus pavyzdys – sukurkime responsive navigation bar su tamsaus režimo palaikymu:
„`css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(–size-3) var(–size-5);
background: var(–surface-1);
border-bottom: var(–border-size-1) solid var(–surface-3);
box-shadow: var(–shadow-1);
}
.nav-link {
padding: var(–size-2) var(–size-3);
color: var(–text-2);
text-decoration: none;
border-radius: var(–radius-2);
transition: background var(–animation-fade-in-duration);
}
.nav-link:hover {
background: var(–surface-3);
color: var(–text-1);
}
„`
Šis kodas automatiškai veiks ir šviesoje, ir tamsoje, prisitaikys prie skirtingų ekranų dydžių (jei naudojate fluid kintamuosius) ir atrodys profesionaliai be jokių papildomų pastangų.
Kai Open Props tampa jūsų dizaino sistema
Gražiausia Open Props dalis yra tai, kad tai nėra „viskas arba nieko” sprendimas. Galite pradėti naudoti tik spalvas, vėliau pridėti atstumus, paskui animacijas. Arba galite naudoti viską iš karto ir turėti beveik pilną dizaino sistemą per kelias minutes.
Jei jums reikia customization, tiesiog override’inkite kintamuosius:
„`css
:root {
–brand-primary: var(–blue-6);
–brand-secondary: var(–purple-5);
}
.button-primary {
background: var(–brand-primary);
color: var(–gray-0);
}
„`
Biblioteka yra puikiai dokumentuota, turi interaktyvią dokumentaciją, kur galite matyti visus kintamuosius ir jų reikšmes. Yra net Figma plugin, kuris leidžia dizaineriams naudoti tuos pačius tokens dizaino procese.
Performance požiūriu Open Props yra efektyvus – CSS custom properties yra natyviai palaikomi visų modernių naršyklių ir turi minimalią našumo įtaką. Kadangi tai tiesiog CSS, nėra jokio runtime overhead, skirtingai nuo kai kurių CSS-in-JS sprendimų.
Projektas aktyviai prižiūrimas, reguliariai atnaujinamas ir turi augančią bendruomenę. Tai nėra dar vienas apleistas open source projektas – tai rimtas įrankis, kurį naudoja tikri projektai gamyboje. Jei ieškote būdo greitai pradėti projektą su gera dizaino sistema arba norite standartizuoti savo esamą kodą, Open Props verta rimto dėmesio. Tai įrankis, kuris netrukdo, bet padeda rašyti geresnį, konsistentesnį CSS.
