Kas yra Foundation ir kodėl jis vis dar aktualus
Kai kalbame apie CSS framework’us, daugelis iš karto prisimena Bootstrap – tarsi tai būtų vienintelė pasirinkimo galimybė. Tačiau tie, kurie dirba su web dizainu ilgiau nei porą metų, puikiai žino, kad Foundation CSS framework’as yra ne mažiau galingas įrankis, o kai kuriais aspektais net pranoksta savo populiaresnį konkurentą.
Foundation, kurį sukūrė ZURB komanda 2011 metais, nuo pat pradžių buvo orientuotas į profesionalius kūrėjus. Tai nėra framework’as pradedantiesiems – jis reikalauja šiek tiek daugiau techninio supratimo, bet mainais suteikia neįtikėtiną lankstumą ir kontrolę. Jei Bootstrap yra kaip automatinė pavarų dėžė, tai Foundation – tai mechaninė, kur jūs kontroliuojate kiekvieną detalę.
Šiandien, kai responsive dizainas jau nėra prabanga, o būtinybė, Foundation išlieka vienu iš geriausių sprendimų. Jo mobile-first filosofija nėra tik marketingo šūkis – tai realiai įgyvendinta strategija, kuri leidžia kurti svetaines, veikiančias sklandžiai nuo mažiausio išmaniojo telefono ekrano iki didžiausio 4K monitoriaus.
Mobile-first filosofija praktikoje
Foundation iš esmės keičia požiūrį į tai, kaip kuriame svetaines. Vietoj to, kad projektuotume desktop versiją ir vėliau bandytume ją „suspausti” į mobilų, pradedame nuo mažiausio ekrano. Tai gali atrodyti keista, bet logika čia geležinė – lengviau išplėsti dizainą nei jį sumažinti.
Praktiškai tai reiškia, kad jūsų CSS stiliai pagal nutylėjimą taikomi mobiliems įrenginiams, o tada naudojate media queries tik tam, kad pridėtumėte papildomų stilių didesniems ekranams. Pavyzdžiui, Foundation grid sistema automatiškai pritaiko stulpelius:
Šis paprastas kodas reiškia, kad jūsų elementas užims visą plotį mobiliame (small-12), pusę ekrano planšetėje (medium-6) ir trečdalį desktop’e (large-4). Nereikia rašyti jokių papildomų media queries – viskas jau įdiegta.
Kas dar svarbiau, Foundation naudoja em vienetus vietoj pikselių breakpoint’ams. Tai reiškia, kad jūsų dizainas geriau prisitaiko prie skirtingų naršyklių nustatymų ir vartotojų, kurie padidina teksto dydį dėl prieinamumo priežasčių.
Flexbox Grid ir XY Grid revoliucija
Seniau Foundation naudojo float’us savo grid sistemai, bet nuo 6.4 versijos jie pristatė XY Grid, paremtą Flexbox technologija. Tai buvo žaidimo taisyklių pakeitimas. Staiga problemos, kurias sprendėme valandų valandas – vertikalus lygiavimas, vienodo aukščio stulpeliai, tarpų valdymas – tapo trivialios.
XY Grid suteikia jums du pagrindinius konteinerius: grid-x horizontaliam išdėstymui ir grid-y vertikaliam. Taip, jūs teisingai supratote – galite kurti grid’us, kurie veikia vertikaliai, kas yra neįtikėtinai naudinga kuriant sudėtingesnius layout’us.
Štai kaip galite sukurti tobulai centruotą turinį:
Be to, XY Grid leidžia kontroliuoti tarpus tarp elementų naudojant grid-margin-x, grid-padding-x ir jų variantus. Galite net sukurti grid’us be jokių tarpų naudodami grid-margin-collapse klasę – puiku galerijom ar mozaikiniams dizainams.
Komponentų biblioteka ir jos pritaikymas
Foundation ateina su išsamia komponentų biblioteka, kuri apima viską nuo navigacijos meniu iki modalinių langų. Bet štai kur Foundation tikrai spindi – šie komponentai nėra „vieno dydžio visiems” sprendimai. Jie sukurti būti pritaikomi.
Paimkime, pavyzdžiui, Off-Canvas meniu – tai vienas iš populiariausių mobilių navigacijos šablonų. Foundation leidžia jums pasirinkti, iš kurios pusės jis turi išslinkti (kairės, dešinės, viršaus ar apačios), ar jis turi stumti pagrindinį turinį, ar tiesiog jį užkloti, ir net kaip jis turėtų elgtis skirtinguose ekranuose.
Accordion, tabs, dropdown meniu – visi šie komponentai yra pilnai prieinami (accessibility-friendly) ir veikia su klaviatūra, ekrano skaitytuvais. Tai nėra atsitiktinumas – ZURB komanda nuo pat pradžių teikė didelę reikšmę prieinamumui, kas šiandien yra ne tik gera praktika, bet ir teisinis reikalavimas daugelyje šalių.
Sass ir moduliškumas: konfigūruok kaip nori
Vienas didžiausių Foundation privalumų yra jo Sass architektūra. Jei niekada nesate naudoję Sass, tai CSS preprocessor’ius, kuris leidžia naudoti kintamuosius, funkcijas, mixins ir kitas programavimo kalbų savybes jūsų stilių failuose.
Foundation suteikia jums _settings.scss failą, kuriame yra šimtai kintamųjų, kontroliuojančių kiekvieną framework’o aspektą. Norite pakeisti spalvų paletę? Tiesiog pakeiskite kelis kintamuosius. Reikia kitokių breakpoint’ų? Nesudėtinga. Norite, kad jūsų mygtukai būtų apvalesniais kampais? Viena eilutė.
$primary-color: #2ba6cb;
$secondary-color: #e9e9e9;
$global-radius: 8px;
$global-width: 1200px;
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
Dar geriau – jums nereikia įtraukti viso framework’o. Foundation yra moduliškas, tai reiškia, kad galite importuoti tik tuos komponentus, kurių jums reikia. Jei jūsų projektui nereikia accordion ar tabs, tiesiog jų neimportuokite. Rezultatas? Mažesni CSS failai ir greitesnis puslapio įkėlimas.
Motion UI ir animacijos
Foundation ateina su Motion UI biblioteka – tai Sass biblioteka, skirta kurti CSS perėjimus ir animacijas. Tai nėra tiesiog fadeIn/fadeOut efektai – tai išsami animacijų sistema, leidžianti kurti sudėtingas, profesionaliai atrodančias animacijas be JavaScript.
Motion UI suteikia jums transition efektus (slide, fade, hinge, scale, spin) ir jų variantus. Galite lengvai pridėti animacijas prie modalinių langų, dropdown meniu ar bet kokio kito elemento:
Kas tikrai įspūdinga, tai galimybė kurti savo animacijas naudojant Motion UI mixins. Galite kontroliuoti trukmę, vėlavimą, timing funkcijas – viską, ką tik galite įsivaizduoti. Ir visa tai daroma per CSS, o ne JavaScript, kas reiškia geresnę našumą ir sklandesnį veikimą.
Prototyping ir greitas kūrimas
Vienas iš nedaug minėtų Foundation privalumų yra jo puikumas kuriant prototipus. Kai turite greitai sukurti veikiančią svetainės versiją klientui ar komandai, Foundation leidžia tai padaryti neįtikėtinai greitai.
Foundation turi Prototype klasių sistemą – tai utility klasės, kurios leidžia greitai stilizuoti elementus be jokio custom CSS rašymo. Panašiai kaip Tailwind CSS, bet integruota į pilną framework’ą:
Antraštė
Tekstas...
Šios klasės yra responsive – galite pridėti breakpoint’ų prefiksus, kad stiliai veiktų tik tam tikruose ekranuose. Pavyzdžiui, medium-text-right teksto lygiavimą į dešinę taikys tik nuo medium breakpoint’o ir aukščiau.
Kai prototipas patvirtintas ir reikia pereiti prie gamybinės versijos, galite lengvai pakeisti šias utility klases custom CSS, nekeičiant HTML struktūros. Tai labai lankstus workflow’as.
Ką reikia žinoti prieš pradedant dirbti
Foundation nėra framework’as, kurį galite tiesiog įtraukti ir tikėtis, kad viskas veiks iš dėžės be jokių žinių. Jums reikės suprasti bent Sass pagrindus, kaip veikia build procesai (Gulp, Webpack ar panašūs įrankiai), ir turėti gerą CSS supratimą.
Dokumentacija yra išsami, bet kartais gali būti per daug techninė pradedantiesiems. Bendruomenė yra mažesnė nei Bootstrap, tai reiškia, kad rasti atsakymus į specifines problemas gali būti sunkiau. Stack Overflow turi mažiau Foundation klausimų, o YouTube tutorialų taip pat mažiau.
Bet jei esate pasiruošę investuoti laiko į mokymąsi, Foundation suteiks jums neįtikėtiną kontrolę ir lankstumą. Jūsų svetainės neatrodys kaip dar viena Bootstrap kopija – galėsite sukurti unikalų dizainą, kuris vis tiek naudoja patikrintą, profesionalią framework’o bazę.
Praktiniai patarimai pradedantiesiems:
- Pradėkite nuo Foundation CLI įrankio – jis automatiškai sukurs projektą su visais reikalingais failais ir build procesu
- Neskubėkite pritaikyti visko iš karto – pradėkite naudoti default nustatymus ir keiskite tik tai, kas tikrai reikalinga
- Išnagrinėkite _settings.scss failą – tai jūsų pagrindinis kontrolės centras
- Naudokite naršyklės developer tools, kad suprastumėte, kaip veikia grid sistema ir komponentai
- Sukurkite komponentų biblioteką savo projektui – tai sutaupys laiko ateityje
Kai responsive dizainas tampa natūraliu procesu
Dirbant su Foundation ilgesnį laiką, pastebite, kad jūsų mąstymas apie web dizainą keičiasi. Nebemanote apie „desktop versiją” ir „mobilią versiją” – manote apie fluidų, prisitaikantį dizainą, kuris natūraliai veikia bet kokiame ekrane.
Foundation nėra tobulas – jokia technologija nėra. Bet tai yra brandus, gerai apgalvotas įrankis, sukurtas profesionalams, kurie vertina kontrolę ir lankstumą. Jei Bootstrap jums atrodo per ribotas, o rašyti viską nuo nulio per daug laiko reikalaujantis, Foundation yra ta aukso viduriukas.
Responsive dizainas su Foundation nėra kažkas, ką „pridedi” prie projekto pabaigoje. Tai yra pagrindas, ant kurio statote viską kitą. Ir kai suprantate šią filosofiją, kurti svetaines, kurios puikiai atrodo ir veikia visur, tampa ne iššūkiu, o natūraliu procesu. Tai ir yra tikroji Foundation vertė – ne tik kodas, bet ir mąstymo būdas apie modernų web dizainą.
