Spectre.css minimalistinis framework

Kas yra Spectre.css ir kam jis skirtas

Jei esate bent kartą bandę sukurti web projektą nuo nulio, tikriausiai susidūrėte su dilema: naudoti masyvų Bootstrap ar kažką lengvesnio? Spectre.css yra būtent tas „kažkas lengvesnio”, kuris neapkrauna jūsų projekto nereikalingais kilobajtais, bet kartu suteikia pakankamai įrankių normaliam darbui.

Šis CSS framework sveria vos apie 10KB (gzip formatu), o tai maždaug dešimt kartų mažiau nei Bootstrap. Sukūrė jį Yan Zhu 2016 metais, ir nuo to laiko projektas įgavo nemažą gerbėjų ratą tarp tų, kurie vertina minimalizmą ir greitį. Spectre.css yra visiškai nemokamas, open-source ir licencijuotas MIT licencija, todėl galite jį naudoti bet kokiuose projektuose be jokių apribojimų.

Pagrindinis framework’o tikslas – suteikti modernią, lengvą ir lankstų sprendimą, kuris neprimetų savo stiliaus. Jei Bootstrap kartais jaučiasi kaip „vienas dydis visiems”, tai Spectre.css labiau primena tuščią drobę su pagrindiniais įrankiais.

Kodėl verta rinktis minimalizmą

Šiuolaikinėje web kūrimo eroje vis daugiau dėmesio skiriama našumui. Google jau seniai įtraukė puslapio įkėlimo greitį į SEO vertinimo kriterijus, o vartotojai tampa vis nekantresniais – jei puslapis neužsikrauna per 3 sekundes, didelė dalis jų tiesiog išeina.

Minimalistiniai framework’ai kaip Spectre.css sprendžia kelias problemas vienu metu. Pirma, mažesnis failų dydis reiškia greitesnį įkėlimą, ypač mobiliuose įrenginiuose ar lėtesniame internete. Antra, mažiau kodo – mažiau potencialių konfliktų su jūsų pačių CSS. Trečia, lengviau išmokti ir pradėti naudoti.

Man asmeniškai patinka, kad Spectre.css nenori būti „viskas viename” sprendimu. Jis sutelkia dėmesį į tai, kas iš tikrųjų reikalinga: grid sistema, tipografija, formos, mygtukai, navigacija. Nereikia šimtų klasių, kurias vis tiek niekada nenaudosite. Tai kaip turėti kokybišką Šveicarijos peilį vietoj viso įrankių rinkinio – kompaktiškas, bet funkcionalus.

Pradžia su Spectre.css

Įdiegti Spectre.css galima keliais būdais, priklausomai nuo jūsų projekto struktūros ir asmeninių preferencijų. Paprasčiausias būdas – tiesiog įtraukti CDN nuorodą į savo HTML failą:

<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">

Jei naudojate npm, galite įdiegti per paketų tvarkyklę:

npm install spectre.css

Arba yarn:

yarn add spectre.css

Spectre.css taip pat siūlo papildomus komponentus ir eksperimentines funkcijas atskiruose failuose. Jei norite pilno paketo, galite įtraukti ir juos:

<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

Bet jei jums rūpi minimalumas, pradėkite tik su pagrindiniu failu ir pridėkite papildomus tik tada, kai tikrai jų prireiks. Tai viena iš Spectre.css filosofijos dalių – naudok tik tai, ko reikia.

Grid sistema ir layout’ai

Spectre.css naudoja flexbox pagrįstą grid sistemą, kuri yra intuityvesnė nei senojo Bootstrap float’ai. Sistema paremta 12 stulpelių tinkleliu, bet jūs galite lengvai pritaikyti ją savo poreikiams.

Štai paprastas pavyzdys:

<div class="container">
  <div class="columns">
    <div class="column col-6">
      Pusė pločio
    </div>
    <div class="column col-6">
      Kita pusė
    </div>
  </div>
</div>

Klasės yra aiškios ir loginės: col-6 reiškia 6 stulpelius iš 12, tai yra 50% pločio. Jei norite skirtingų dydžių skirtingiems ekranams, galite naudoti responsive klases kaip col-xs-12 col-sm-6 col-lg-4.

Kas man tikrai patinka Spectre.css grid sistemoje – ji automatiškai išlygiuoja stulpelius. Jei turite tris column elementus be nurodyto dydžio, jie automatiškai pasiskirsto po lygiai. Tai sutaupo laiko ir kodo eilučių.

Taip pat yra naudingos utility klasės kaip col-mx-auto centravimui arba col-gapless tarpų pašalinimui tarp stulpelių. Grid sistema palaiko ir nested (įdėtus) grid’us, todėl galite kurti sudėtingesnius layout’us be problemų.

Komponentai ir UI elementai

Nors Spectre.css yra minimalistinis, jis vis tiek turi visus pagrindinius komponentus, kurių reikia normaliam projektui. Mygtukai, formos, kortelės, navigacija, modalai – visa tai yra.

Mygtukai yra stilingi ir lengvai pritaikomi:

<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-link">Link</button>

Formos elementai atrodo švariai ir moderniai be jokių papildomų pastangų. Tai vienas iš dalykų, kuris dažnai užima daug laiko – priversti formas atrodyti gerai visuose naršyklėse. Spectre.css tai padaro už jus:

<div class="form-group">
  <label class="form-label" for="input-example">Vardas</label>
  <input class="form-input" type="text" id="input-example" placeholder="Įveskite vardą">
</div>

Navigacijos komponentas yra lankstus ir responsive. Galite sukurti horizontalią navigaciją, vertikalų meniu ar net tabs’us naudojant tas pačias pagrindines klases. Modalai veikia be JavaScript – naudojant tik CSS ir HTML checkbox trikų, nors praktikoje tikriausiai norėsite pridėti bent minimalų JS funkcionalumui.

Kortelės (cards) yra universalus komponentas, kurį galite naudoti produktų sąrašams, blog įrašams ar bet kam kitam:

<div class="card">
  <div class="card-header">
    <div class="card-title h5">Kortelės pavadinimas</div>
  </div>
  <div class="card-body">
    Turinys čia...
  </div>
</div>

Pritaikymas ir customizacija

Vienas iš didžiausių Spectre.css privalumų – lengvas pritaikymas. Framework’as parašytas naudojant SASS/SCSS, todėl galite lengvai pakeisti kintamuosius ir sukurti savo temą.

Pagrindiniai kintamieji yra apibrėžti _variables.scss faile. Čia galite keisti spalvas, šriftus, tarpus ir kitus parametrus:

// Spalvos
$primary-color: #5755d9;
$secondary-color: #f1f1fc;

// Tipografija
$base-font-size: 16px;
$body-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;

// Tarpai
$unit-1: 0.25rem;
$unit-2: 0.5rem;
$unit-3: 0.75rem;

Jei nenorite kompiliuoti SASS, galite tiesiog perrašyti CSS klases savo stylesheet’e. Spectre.css nenaudoja !important be reikalo, todėl perrašymas yra paprastas.

Dar vienas būdas pritaikyti – naudoti CSS kintamuosius (custom properties). Nors Spectre.css pagal nutylėjimą jų nenaudoja, galite lengvai juos integruoti į savo projektą:

:root {
  --primary-color: #your-color;
}

.btn-primary {
  background: var(--primary-color);
}

Tai ypač naudinga, jei kuriate dark mode ar leidžiate vartotojams pasirinkti temas.

Našumas ir optimizacija

Vienas iš pagrindinių argumentų už Spectre.css yra našumas. Bet vien tik mažas failų dydis dar negarantuoja greito puslapio. Štai keletas patarimų, kaip išspausti maksimumą:

Naudokite tik tai, ko reikia. Jei jūsų projektui nereikia eksperimentinių komponentų ar ikonų, neįtraukite jų. Kiekvienas kilobaitas svarbus.

Minifikuokite ir gzip’inkite. Jei naudojate CDN, tai jau padaryta už jus. Bet jei hostinate patys, įsitikinkite, kad serveris grąžina suspaustas versijas.

Critical CSS. Jei kuriate didelį projektą, apsvarstykite galimybę išskirti critical CSS – stilius, reikalingus pirminiam turinio atvaizdavimui – ir įterpti juos tiesiog į HTML. Likusį CSS galite įkelti asinchroniškai.

Pašalinkite nenaudojamą CSS. Įrankiai kaip PurgeCSS gali automatiškai pašalinti nenaudojamas klases iš galutinio failo. Tai ypač naudinga, jei naudojate tik dalį framework’o funkcijų.

Spectre.css taip pat gerai veikia su moderniais build įrankiais kaip Webpack ar Vite. Galite importuoti tik tuos komponentus, kurių reikia:

@import "spectre.css/src/variables";
@import "spectre.css/src/mixins";
@import "spectre.css/src/buttons";
@import "spectre.css/src/forms";

Realūs panaudojimo scenarijai ir patirtis

Spectre.css puikiai tinka kelių tipų projektams. Asmeniškai jį naudojau landing page’ams, admin dashboard’ams ir net kelių mažesnių e-commerce projektų frontend’ui.

Landing pages. Čia Spectre.css tikrai spindi. Jums reikia greito, gražaus puslapio su minimalia apkrova? Spectre.css su keliais custom stiliais – idealus pasirinkimas. Grid sistema leidžia greitai sukurti responsive layout’us, o komponentai atrodo moderniai be papildomų pastangų.

Admin panelės. Jei kuriate vidinę sistemą, kur dizainas yra svarbus, bet ne prioritetas, Spectre.css suteikia profesionalų išvaizdą be Bootstrap „overload”. Formos, lentelės, kortelės – viskas veikia iš dėžės.

Prototipai. Kai reikia greitai sukurti veikiančią koncepciją, Spectre.css leidžia susikoncentruoti į funkcionalumą, o ne į stilių. Vėliau galite lengvai pritaikyti dizainą.

Maži projektai. Jei kuriate blog’ą, portfolio ar bet kokį kitą mažesnį projektą, kur kiekvienas kilobaitas svarbus, Spectre.css yra puikus balansas tarp funkcionalumo ir dydžio.

Bet yra ir situacijų, kur Spectre.css gali būti ne geriausias pasirinkimas. Jei jums reikia labai specifinių komponentų ar sudėtingų interaktyvių elementų, gali tekti rašyti daug custom kodo. Dideliems enterprise projektams, kur naudojama daug trečiųjų šalių bibliotekų, gali būti lengviau naudoti populiaresnį framework’ą dėl geresnės ekosistemos.

Ką reikia žinoti prieš pradedant

Prieš šokant į Spectre.css, verta suprasti kelis dalykus. Pirma, bendruomenė yra mažesnė nei Bootstrap ar Tailwind. Tai reiškia, kad rasite mažiau tutorialų, pavyzdžių ir trečiųjų šalių komponentų. Bet tai taip pat reiškia, kad framework’as yra paprastesnis ir lengviau suprantamas.

Antra, Spectre.css nėra aktyviai plėtojamas kaip kai kurie kiti framework’ai. Paskutiniai didesni atnaujinimai buvo prieš kelerius metus. Vienai pusei tai yra stabilumas – jūsų kodas nesuges po kito atnaujinimo. Kitai pusei – naujos funkcijos ateina lėčiau.

Trečia, jei esate įpratę prie utility-first požiūrio kaip Tailwind, Spectre.css gali atrodyti senoviškas. Jis naudoja tradicinį komponentų požiūrį su semantinėmis klasėmis. Tai nei gerai, nei blogai – tiesiog kitaip.

Dokumentacija yra gana gera, bet ne tokia išsami kaip norėtųsi. Kartais teks pasikasti į source kodą, kad suprastumėte, kaip kažkas veikia. Bet kadangi kodas yra švarus ir gerai organizuotas, tai nėra didelė problema.

Dar vienas dalykas – Spectre.css neturi oficialaus JavaScript. Jei norite interaktyvių komponentų kaip dropdown’ai ar carousel’iai, turėsite rašyti JS patys arba naudoti trečiųjų šalių bibliotekas. Tai gali būti privalumas (daugiau kontrolės) arba trūkumas (daugiau darbo), priklausomai nuo jūsų perspektyvos.

Praktinis patarimas: pradėkite su paprastu projektu. Sukurkite landing page arba portfolio puslapį naudodami Spectre.css. Tai padės suprasti framework’o logiką ir nuspręsti, ar jis tinka jūsų darbo stiliu. Neskubėkite migruoti esamo projekto – geriau išbandykite naujame.

Taip pat rekomenduoju peržiūrėti oficialius pavyzdžius GitHub repository. Ten rasite praktinių layout’ų ir komponentų kombinacijų, kurios gali sutaupyti daug laiko. Ir nepamirškite, kad galite derinti Spectre.css su kitomis bibliotekomis – jis nėra pavydus ir gerai sugyvena su kitais įrankiais.

Kai minimalumas tampa pranašumu

Grįžtant prie esmės – Spectre.css yra įrodymas, kad ne visada daugiau reiškia geriau. Šiuolaikinėje web kūrimo aplinkoje, kur framework’ai tampa vis didesni ir sudėtingesni, Spectre.css primena, kad kartais pakanka pagrindų.

Ar jis tiks kiekvienam projektui? Tikrai ne. Bet jei vertinate greitį, paprastumą ir kontrolę, verta bent išbandyti. Ypač jei esate pavargę nuo Bootstrap „bloat” ar Tailwind verbosity. Spectre.css siūlo švelnią alternatyvą – pakankamai funkcionalumo, kad galėtumėte produktyviai dirbti, bet ne tiek daug, kad jaustumėtės paskendę.

Galiausiai, framework’o pasirinkimas visada priklauso nuo konkretaus projekto poreikių ir komandos preferencijų. Bet turėti Spectre.css savo įrankių arsenale tikrai nepakenks. Kartais mažesnis ir paprastesnis sprendimas yra būtent tai, ko reikia projektui sėkmingai įgyvendinti. O kai puslapis užsikrauna akimirksniu ir kodas yra švarus bei lengvai prižiūrimas – žinote, kad padarėte teisingą pasirinkimą.