UIkit CSS framework: moduliniai komponentai

Kas yra UIkit ir kodėl jis vis dar aktualus

Kai kalbame apie CSS framework’us, dažniausiai išgirstame apie Bootstrap, Tailwind ar Foundation. Tačiau yra vienas framework’as, kuris nusipelno daug daugiau dėmesio – UIkit. Šis YOOtheme komandos sukurtas įrankis jau seniai įrodė savo vertę, ypač tarp tų, kurie vertina elegantišką dizainą ir modulinę architektūrą.

UIkit nėra tik dar vienas CSS framework’as. Tai gerai apgalvota sistema, kuri leidžia kurti modernias sąsajas nenaudojant tonos nereikalingo kodo. Skirtingai nuo kai kurių konkurentų, UIkit neverčia jūsų naudoti visų komponentų – galite pasirinkti tik tai, ko reikia jūsų projektui. Tai ypač svarbu, kai optimizuojate puslapio įkrovimo greitį ir norite išvengti „code bloat” problemos.

Framework’as aktyviai palaikomas ir reguliariai atnaujinamas. Versija 3, kuri buvo išleista prieš kelerius metus, atnešė daug modernių funkcijų ir pagerinimų. Tai reiškia, kad naudodami UIkit, nesate priklausomi nuo pasenusios technologijos – tai gyvas projektas su aktyvia bendruomene.

Modulinė architektūra praktikoje

Vienas didžiausių UIkit privalumų – tai jo modulinė struktūra. Kiekvienas komponentas yra atskirtas ir gali būti naudojamas nepriklausomai. Tai ne tik teorija – praktikoje tai reiškia, kad jūsų package.json failas ir galutinis bundle’as gali būti daug mažesnis.

Pavyzdžiui, jei jums reikia tik navigacijos ir kortelių (cards), galite importuoti tik šiuos komponentus:


import UIkit from 'uikit/dist/js/uikit-core';
import Icons from 'uikit/dist/js/uikit-icons';
import 'uikit/dist/css/uikit.min.css';


Arba dar geriau – naudojant Sass, galite importuoti tik konkrečius komponentus:


@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";
@import "uikit/src/scss/components/card.scss";
@import "uikit/src/scss/components/navbar.scss";


Tokia prieiga leidžia tiksliai kontroliuoti, kiek kodo pateks į jūsų galutinį produktą. Tai ypač svarbu, kai kuriate single-page aplikacijas su React, Vue ar Angular – kiekvienas kilobaitas turi reikšmę.

Komponentų ekosistema ir jų panaudojimas

UIkit siūlo per 30 skirtingų komponentų, kurie apima beveik visus įmanomus UI poreikius. Nuo paprastų mygtukų iki sudėtingų slider’ių ir modal langų – viskas čia yra. Bet svarbiausia – visi šie komponentai puikiai dera tarpusavyje.

Pavyzdžiui, Accordion komponentas yra ne tik gražus vizualiai, bet ir funkcionalus. Jis automatiškai tvarko būsenas, animacijas ir prieinamumą (accessibility). Jums nereikia rašyti papildomo JavaScript kodo – tiesiog pridėkite atitinkamus atributus:


<ul uk-accordion>
<li>
<a class="uk-accordion-title" href="#">Pirmasis punktas</a>
<div class="uk-accordion-content">
<p>Turinys čia...</p>
</div>
</li>
</ul>


Grid sistema UIkit yra labai lanksti. Ji naudoja flexbox ir leidžia lengvai kurti responsive layouts. Skirtingai nuo Bootstrap, čia nėra griežtos 12 stulpelių sistemos – galite turėti tiek stulpelių, kiek norite:


<div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid>
<div>Turinys</div>
<div>Turinys</div>
<div>Turinys</div>
</div>


Ši sistema automatiškai pritaiko stulpelių skaičių pagal ekrano dydį. @s reiškia small ekranus, @m – medium. Tai intuityvus ir lengvai skaitomas kodas.

JavaScript funkcionalumas be papildomo kodo

Viena iš stipriausių UIkit pusių – tai integruotas JavaScript funkcionalumas. Daugelis framework’ų reikalauja, kad patys parašytumėte daug kodo interaktyvumui. UIkit daro tai už jus, naudodamas data atributus.

Pavyzdžiui, norite sukurti modal langą? Nereikia rašyti event listener’ių ar tvarkyti DOM manipuliacijų:


<button uk-toggle="target: #my-modal">Atidaryti</button>

<div id="my-modal" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2>Antraštė</h2>
<p>Turinys...</p>
<button class="uk-modal-close" type="button">Uždaryti</button>
</div>
</div>


Viskas veikia iš karto. UIkit automatiškai tvarko animacijas, focus management’ą, ESC klavišo paspaudimus ir net backdrop paspaudimus. Tai sutaupo ne tik laiką, bet ir padeda išvengti klaidų.

Dropdown komponentas yra kitas puikus pavyzdys. Jis gali būti prijungtas prie bet kokio elemento ir palaiko įvairias pozicijas:


<button type="button">Hover</button>
<div uk-dropdown="mode: hover; pos: bottom-center">
<ul class="uk-nav uk-dropdown-nav">
<li><a href="#">Pirmas</a></li>
<li><a href="#">Antras</a></li>
</ul>
</div>


Parametrai yra aiškūs ir lengvai suprantami. mode: hover reiškia, kad dropdown’as atsiras užvedus pelę, o pos nustato poziciją.

Temų kūrimas ir customizacija

UIkit nėra „vieno dydžio visiems” sprendimas. Framework’as sukurtas taip, kad jį būtų lengva pritaikyti prie jūsų projekto dizaino. Naudojant Sass kintamuosius, galite pakeisti beveik bet ką.

Pagrindiniai kintamieji yra apibrėžti variables.scss faile. Čia galite keisti spalvas, šriftus, tarpus ir daug daugiau:


$global-primary-background: #1e87f0;
$global-success-background: #32d296;
$global-danger-background: #f0506e;
$global-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$global-font-size: 16px;


Bet tikroji galybė slypi teminių failų naudojime. Galite sukurti savo custom-theme.scss failą ir perrašyti tik tai, ko jums reikia:


// Importuojame originalius kintamuosius
@import "uikit/src/scss/variables-theme.scss";

// Importuojame UIkit
@import "uikit/src/scss/uikit-theme.scss";


Tokiu būdu jūsų customizacijos yra atskirtos nuo pagrindinio kodo, o atnaujinti UIkit versiją tampa daug paprasčiau.

Jei reikia dar gilesnių pakeitimų, galite naudoti Sass mixins. UIkit suteikia daug naudingų mixins, kurie leidžia kurti custom komponentus, išlaikant vienodą stilių:


.my-custom-card {
@include hook-card();
border-left: 4px solid $global-primary-background;
transition: transform 0.3s ease;

&:hover {
transform: translateY(-5px);
}
}


Integravimas su moderniomis JavaScript bibliotekomis

UIkit puikiai veikia su React, Vue, Angular ir kitais framework’ais. Nors jis nėra sukurtas specialiai jiems, integracija yra gana paprasta.

React integravimui galite naudoti uikit-react biblioteką arba tiesiog importuoti UIkit į savo komponentus:


import React, { useEffect, useRef } from 'react';
import UIkit from 'uikit';

return (
<div ref={modalRef} uk-modal>
<div className="uk-modal-dialog">
{children}
</div>
</div>
);
}


Vue.js vartotojams yra oficiali vuikit biblioteka, kuri suteikia Vue komponentus, paremtus UIkit:


<template>
<vk-modal :show.sync="showModal">
<vk-modal-title>Pavadinimas</vk-modal-title>
Turinys čia...
</vk-modal>
</template>

<script>
export default {
data() {
return {
showModal: false
}
}
}
</script>


Svarbu paminėti, kad naudojant UIkit su SPA framework’ais, reikia atkreipti dėmesį į komponentų inicializaciją. UIkit automatiškai inicializuoja komponentus puslapio įkrovimo metu, bet dinamiškai pridėtiems elementams gali tekti rankiniu būdu iškviesti UIkit.update().

Performance optimizacija ir best practices

Nors UIkit yra gana lengvas framework’as, vis tiek yra būdų, kaip dar labiau optimizuoti jo veikimą jūsų projekte.

Tree shaking yra pirmasis dalykas, kurį turėtumėte įgyvendinti. Jei naudojate modernius build tools kaip Webpack ar Vite, įsitikinkite, kad importuojate tik tai, ko reikia:


// Blogai
import UIkit from 'uikit';

// Gerai
import { Modal, Dropdown } from 'uikit';


CSS purging – kitas svarbus žingsnis. Naudodami tools kaip PurgeCSS, galite pašalinti nenaudojamus stilius. Tačiau būkite atsargūs su UIkit, nes kai kurie komponentai dinamiškai prideda klases:


// purgecss.config.js
module.exports = {
content: ['./src/**/*.html', './src/**/*.js'],
safelist: [
/^uk-/, // Išsaugome visas UIkit klases
'uk-active',
'uk-open'
]
}


Lazy loading komponentams, kurie nėra reikalingi iš karto, gali labai pagerinti pradinį puslapio įkrovimo laiką:


// Įkeliame tik kai reikia
const loadLightbox = async () => {
const UIkit = await import('uikit');
const component = await import('uikit/dist/js/components/lightbox');
UIkit.use(component);
};

document.querySelector('.gallery').addEventListener('click', loadLightbox, { once: true });


Dar vienas praktinis patarimas – naudokite CDN production aplinkoje, jei jūsų projektas nėra labai customizuotas. Daugelis vartotojų jau turės UIkit failą cache’e:


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>


Kada UIkit yra geriausias pasirinkimas

UIkit nėra universalus sprendimas visiems projektams. Yra situacijos, kai jis tikrai spinduliuoja, ir yra atvejų, kai galbūt geriau rinktis ką nors kita.

UIkit puikiai tinka:

Korporatyviniams projektams, kuriems reikia profesionalaus, bet ne per daug „flashy” dizaino. UIkit estetika yra švari ir moderni, bet ne agresyvi. Tai puikiai veikia B2B produktams, admin panelėms ir content management sistemoms.

Projektams, kuriuose svarbus greitis ir efektyvumas. Jei nenorite praleisti savaičių kurdami custom komponentus ir tvarkydami cross-browser compatibility, UIkit sutaupo daug laiko.

Kai reikia gero dokumentacijos ir palaikymo. UIkit dokumentacija yra išsami, su gyvais pavyzdžiais ir aiškiais paaiškinimais. Tai ne visada būdinga mažesniems framework’ams.

Galbūt geriau rinktis ką nors kita, jei:

Jūsų projektas reikalauja labai specifinio, unikalaus dizaino. Nors UIkit ir yra customizable, jei jūsų dizaineris sukūrė kažką visiškai išskirtinio, galbūt Tailwind ar tiesiog custom CSS bus geresnis pasirinkimas.

Dirbate su labai dideliu team’u, kuris jau turi daug patirties su Bootstrap. Mokymosi kreivė nėra didelė, bet jei visi jau žino Bootstrap, perjungimas gali neapsimokėti.

Reikia maksimalaus lightweight sprendimo. Nors UIkit yra gana lengvas, jei kuriate landing page’ą ir skaičiuojate kiekvieną kilobaitą, galbūt minimalistinis framework’as ar tiesiog custom CSS bus geresnis.

Kaip pradėti ir kur toliau mokytis

Pradėti naudoti UIkit yra tikrai paprasta. Galite tiesiog įtraukti CDN nuorodas į savo HTML ir iš karto pradėti eksperimentuoti. Bet jei norite rimtai naudoti jį projekte, rekomenduoju setup’ą per npm:


npm install uikit


Tada savo projekte:


import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
import 'uikit/dist/css/uikit.min.css';

UIkit.use(Icons);


Oficiali dokumentacija getuikit.com yra puikus šaltinis. Ten rasite ne tik API aprašymus, bet ir interaktyvius pavyzdžius, kuriuos galite iš karto išbandyti naršyklėje.

GitHub repository taip pat verta sekti. Ten galite matyti, kas keičiasi, kokios problemos sprendžiamos, ir net prisidėti prie projekto, jei norite.

Praktinis patarimas – sukurkite sau komponentų biblioteką. Kai pradėsite naudoti UIkit keliuose projektuose, pastebėsite, kad kai kurie pattern’ai kartojasi. Susikurkite savo custom komponentų rinkinį, kuris išplečia UIkit funkcionalumą pagal jūsų poreikius.

Dar vienas naudingas dalykas – prisijunkite prie UIkit bendruomenės Discord ar Slack kanaluose. Ten galite užduoti klausimus, pasidalinti savo sprendimais ir sužinoti apie best practices iš kitų developerių.

UIkit yra brandus, patikimas framework’as, kuris suteikia puikią pusiausvyrą tarp funkcionalumo ir paprastumo. Jo modulinė architektūra leidžia naudoti tik tai, ko reikia, o integruotas JavaScript funkcionalumas sutaupo daug laiko. Nors jis galbūt nėra toks populiarus kaip Bootstrap, tai tikrai ne dėl kokybės trūkumo – greičiau dėl mažesnio marketing’o. Jei dar nebandėte UIkit, tikrai verta išbandyti kitame projekte. Gali būti, kad tai bus būtent tas įrankis, kurio ieškojote.