KingPin

Sveiki,
Retai rašau neigiamus atsiliepimus, tačiau apie šią š... krūva, žmonės privalo žinoti.
Renginys reklamuojamas, kaip keturių asmenų spektaklis (realiai jie tiesiog keičiasi ir vaidina spektaklyje dviese ir neaišku ką tu gausi), net aišku dėl ko taip daroma - M. Katleris pritraukia daugiau pinigų (apie tai aš bilietai.lt jau parašiau, screenshotus pasidariau, bus matyt, kaip taisys padėtį).
Spektaklis yra žiaurus iki negalėjimo ir jei Jums festivalis "Juokis" arba Bingelis su Šilansku jau atrodo duobė - šis renginys atveria naujas platumas nemokšiškumui.
Realiai, jautiesi, lyg ketvirtokų rengiamam vaidinime, tik kadangi tu sėdi susimokėjęs dar 15€ už bilietą - jausmai tik paaštrėja. Norėjosi išeiti jau po pirmų 10min, tačiau nesinorėjo gadinti žmonai vakaro. Jei kam atrodys, kad mano humoro jausmas prastas - galbūt, tačiau "spektaklis" nepatiko nei mano žmonai, nei man, nei sutiktiems draugams spektaklyje, nei žmonėms, kurie parašė po mano atsiliepimu, oficialioje spektaklio paskyroje facebook (tokių buvo tikrai daug, bet kaip įrodyti, kai komentarai ištrinti?), tačiau puslapio administracija, tą atsiliepimą pašalino, kas man buvo neįtikėtina. Really, žmonės dar trina fb komentarus, jei jie daro tikrąja ta žodžio prasme - šūdą? Narsūs žmonės.
Šiek tiek turinio:
Bajeris apie falo pavadinimus, kurio gale, aktorius pasako "######", tas pats su makštimi.
Bajeriai apie pensininkus (tipo kur galima rasti pensininką, muahahahaha, žiauriai geri bajeriai)
Realiai, nedaug atsimenu ir džiaugiuosi, kad smegenys moka filtruoti informaciją.
Liūdniausia, kad prie šito reikalo, Tadas Vidmantas prikišo rankas, o bilietai į jo filmą jau email'e. Tikiuosi, jo humoro jausmas, jį pagrobus ateiviams - nepasikeitė, nes kito paaiškinimo tokiai transformacijai aš neturiu.
Jei galvojate eiti čia ir nebuvote "Humoro klubo" "Kam tas kaip?", bėkite kuo toliau nuo šitos mėšlo krūvos ir eikite iš širdies pasijuokti.
 
Trailer'iai buvo bent kažkiek joukingi, patikėkit, "spektaklis", yra toli, toli nuo viso to, kas vyko video...
 
Tikiuosi, bent kam nors padėsiu sutaupyti kelis eurus ir laiką.
Sėkmės ir eikit ši..., šito šlamšto kūrėjai.
Toks mano atsiliepimas apie "Sveiki atvykę į Žemę ir į Lietuvą"...
 
p.s. čia net neminiu, kad garsas ir video buvo tragiški, bet tai nuo organizatorių mažai priklausė
 
Daugiau atsiliepimų: http://www.vinted.lt/forumai/renginiai-koncertai-parodos/1327966-sveiki-atvyke-i-zeme-ir-i-lietuva
 
 
p.s. deja, bet maestro, visus savo postus apie spektaklį ištrynė... gaila.
 
 
Visa, ši istorija turės ir pratęsimą:
http://s12.postimg.org/pg65jx0q5/biliet.png

Ši tema man labiau primena ne į vertą dėmesio kritiką, o į įsižeidusio vaiko verkšlenimus su fb screenshotai's, kaip "kietai" bendravo su Vidmantu. Labai nerimtai atrodo...

tiesą sakant, internetas dabar leidžia bendrauti su kuo nori - tad čia nėra jokio kietumo ar minkštumo, tačiau taip, pokalbis asmeninis, gal ir mano klaida, čia tai postinti, tačiau norėjau pateikti autoriaus mintis (dabar, removed).
ar įsižeidžiau? taip, buvau parašęs atsiliepimą, žmonės po manim, buvę spektaklyje irgi rašė ir visa tai buvo nuvalyta :) neverta įsižeisti? aš manau - verta. čia kaip restoranas, gaminantis neskaniai, valytų klientų atsiliepimus. wtf? autoriai reklamos tv užsipirko, reikia, kad atsipirktų...
ar galiu tinkamai kritikuoti? vargu ar tokį darinį galima kritikuoti apskritai. tieisog, kiek tai yra absurdiška - reikia pamatyti. kažkiek primena Pishiaus stilių. Tikrai esu ne daily hater'is, kuris vaikšto po event'us ir viską heitina. Tokia akistata gyvenime, su visiška chaltūra - buvo pirma.

Sveiki,
Retai rašau neigiamus atsiliepimus, tačiau apie šią š... krūva, žmonės privalo žinoti.
Renginys reklamuojamas, kaip keturių asmenų spektaklis (realiai jie tiesiog keičiasi ir vaidina spektaklyje dviese ir neaišku ką tu gausi), net aišku dėl ko taip daroma - M. Katleris pritraukia daugiau pinigų (apie tai aš bilietai.lt jau parašiau, screenshotus pasidariau, bus matyt, kaip taisys padėtį).
Spektaklis yra žiaurus iki negalėjimo ir jei Jums festivalis "Juokis" arba Bingelis su Šilansku jau atrodo duobė - šis renginys atveria naujas platumas nemokšiškumui.
Realiai, jautiesi, lyg ketvirtokų rengiamam vaidinime, tik kadangi tu sėdi susimokėjęs dar 15€ už bilietą - jausmai tik paaštrėja. Norėjosi išeiti jau po pirmų 10min, tačiau nesinorėjo gadinti žmonai vakaro. Jei kam atrodys, kad mano humoro jausmas prastas - galbūt, tačiau "spektaklis" nepatiko nei mano žmonai, nei man, nei sutiktiems draugams spektaklyje, nei žmonėms, kurie parašė po mano atsiliepimu, oficialioje spektaklio paskyroje facebook (tokių buvo tikrai daug, bet kaip įrodyti, kai komentarai ištrinti?), tačiau puslapio administracija, tą atsiliepimą pašalino, kas man buvo neįtikėtina. Really, žmonės dar trina fb komentarus, jei jie daro tikrąja ta žodžio prasme - šūdą? Narsūs žmonės.
Šiek tiek turinio:
Bajeris apie falo pavadinimus, kurio gale, aktorius pasako "######", tas pats su makštimi.
Bajeriai apie pensininkus (tipo kur galima rasti pensininką, muahahahaha, žiauriai geri bajeriai)
Realiai, nedaug atsimenu ir džiaugiuosi, kad smegenys moka filtruoti informaciją.
Liūdniausia, kad prie šito reikalo, Tadas Vidmantas prikišo rankas, o bilietai į jo filmą jau email'e. Tikiuosi, jo humoro jausmas, jį pagrobus ateiviams - nepasikeitė, nes kito paaiškinimo tokiai transformacijai aš neturiu.
Jei galvojate eiti čia ir nebuvote "Humoro klubo" "Kam tas kaip?", bėkite kuo toliau nuo šitos mėšlo krūvos ir eikite iš širdies pasijuokti.
 
Trailer'iai buvo bent kažkiek joukingi, patikėkit, "spektaklis", yra toli, toli nuo viso to, kas vyko video...
 
Tikiuosi, bent kam nors padėsiu sutaupyti kelis eurus ir laiką.
Sėkmės ir eikit ši..., šito šlamšto kūrėjai.
Toks mano atsiliepimas apie "Sveiki atvykę į Žemę ir į Lietuvą"...
 
p.s. čia net neminiu, kad garsas ir video buvo tragiški, bet tai nuo organizatorių mažai priklausė
 
Daugiau atsiliepimų: http://www.vinted.lt/forumai/renginiai-koncertai-parodos/1327966-sveiki-atvyke-i-zeme-ir-i-lietuva
 
 
p.s. deja, bet maestro, visus savo postus apie spektaklį ištrynė... gaila.
 
 
Visa, ši istorija turės ir pratęsimą:
http://s12.postimg.org/pg65jx0q5/biliet.png

Sveiki,
Retai rašau neigiamus atsiliepimus, tačiau apie šią š... krūva, žmonės privalo žinoti.
Renginys reklamuojamas, kaip keturių asmenų spektaklis (realiai jie tiesiog keičiasi ir vaidina spektaklyje dviese ir neaišku ką tu gausi), net aišku dėl ko taip daroma - M. Katleris pritraukia daugiau pinigų (apie tai aš bilietai.lt jau parašiau, screenshotus pasidariau, bus matyt, kaip taisys padėtį).
Spektaklis yra žiaurus iki negalėjimo ir jei Jums festivalis "Juokis" arba Bingelis su Šilansku jau atrodo duobė - šis renginys atveria naujas platumas nemokšiškumui.
Realiai, jautiesi, lyg ketvirtokų rengiamam vaidinime, tik kadangi tu sėdi susimokėjęs dar 15€ už bilietą - jausmai tik paaštrėja. Norėjosi išeiti jau po pirmų 10min, tačiau nesinorėjo gadinti žmonai vakaro. Jei kam atrodys, kad mano humoro jausmas prastas - galbūt, tačiau "spektaklis" nepatiko nei mano žmonai, nei man, nei sutiktiems draugams spektaklyje, nei žmonėms, kurie parašė po mano atsiliepimu, oficialioje spektaklio paskyroje facebook (tokių buvo tikrai daug, bet kaip įrodyti, kai komentarai ištrinti?), tačiau puslapio administracija, tą atsiliepimą pašalino, kas man buvo neįtikėtina. Really, žmonės dar trina fb komentarus, jei jie daro tikrąja ta žodžio prasme - šūdą? Narsūs žmonės.
Šiek tiek turinio:
Bajeris apie falo pavadinimus, kurio gale, aktorius pasako "######", tas pats su makštimi.
Bajeriai apie pensininkus (tipo kur galima rasti pensininką, muahahahaha, žiauriai geri bajeriai)
Realiai, nedaug atsimenu ir džiaugiuosi, kad smegenys moka filtruoti informaciją.
Liūdniausia, kad prie šito reikalo, Tadas Vidmantas prikišo rankas, o bilietai į jo filmą jau email'e. Tikiuosi, jo humoro jausmas, jį pagrobus ateiviams - nepasikeitė, nes kito paaiškinimo tokiai transformacijai aš neturiu.
Jei galvojate eiti čia ir nebuvote "Humoro klubo" "Kam tas kaip?", bėkite kuo toliau nuo šitos mėšlo krūvos ir eikite iš širdies pasijuokti.
 
Trailer'iai buvo bent kažkiek joukingi, patikėkit, "spektaklis", yra toli, toli nuo viso to, kas vyko video...
 
Tikiuosi, bent kam nors padėsiu sutaupyti kelis eurus ir laiką.
Sėkmės ir eikit ši..., šito šlamšto kūrėjai.
Toks mano atsiliepimas apie "Sveiki atvykę į Žemę ir į Lietuvą"...
 
p.s. čia net neminiu, kad garsas ir video buvo tragiški, bet tai nuo organizatorių mažai priklausė
 
Daugiau atsiliepimų: http://www.vinted.lt/forumai/renginiai-koncertai-parodos/1327966-sveiki-atvyke-i-zeme-ir-i-lietuva
 
 
p.s. deja, bet maestro, visus savo postus apie spektaklį ištrynė... gaila.
 
 
Visa, ši istorija turės ir pratęsimą:
http://s12.postimg.org/pg65jx0q5/biliet.png

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Gal Youtube įrašas yra?

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Sveiki,
Visai nesenai pasirodė mano Foundation 6 review, anglų kalba: https://www.devbridge.com/articles/foundation-6-an-advanced-template-review/
Tiems, kas tingi ar nenori skaityti angliškai - Lietuviškas straipsnio draft'as :)
 
 
Foundation 6 apžvalga
Aš neaiškinsiu, kas yra Foundation frameworkas - jeigu Jūs esate čia, vadinasi Jūs žinote, ko čia atėjote. Nemėgstu gaišinti žmonių laiko, tad viską pateiksiu atvirai ir kaip įmanoma labiau koncentruotai.
Visai nesenai, pasirodė šeštoji Foundation versija. Gamintojai žada daug naujovių, tad pasistengsime jas visas apžvelgti ir kritiškai įvertinti, kam jis geriausia tinkamas - mažoms svetainėms, enterprise sprendimams, o galbūt tai TAS įrankis, su kuriuo galima daryti viską?
 
Fun part
Kompanija “Zurb”, naujos versijos išleidimą supynė su dviejų parų countdown’u ir privertė visus nekantriai laukti. Sulaukus, mano veide pasirodė šypsena, nes tik išėjus final release - framework’as su advanced template (iš oficial page), tiesiog neveikė. Vėlesniuose builduose, klaidos buvo pataisytos, tačiau reikėjo laukti (kiek - nežinau, tačiau kitą dieną, parsisiuntus naują template - viskas veikė, visiškai buvo pakeistas settings.scss failas, kas yra akivaizdu, nes import’ai buvo sudėti netinkama tvarka). Dokumentacijos nebuvimas, 404 klaidos ir dar galybė kliurkų, apie kurias galite paskaityti čia:

 
Pykšt, pokšt, mes - pasiruošę
Setupinti projektą su foundation - tikras malonumas.
Zurb labai gerai padirbėjo ties tuo ir pradėti projektą Jums bus labai lengva. Galite rinktis net kelis variantus:
Galite parsisiųsti pilną foundation iš čia: http://foundation.zurb.com/sites/download.html/
Tame pačiame linke, galite pasidaryti custom build’ą (tikrai geras featuresas, tik pasigedau togglerių, kurie includeintų ir excludeintų visą grupę komponentų, kas priverčia spaudinėti labai daug checkbox’ų...)
Galite naudoti command line ar netgi Yeti Launch GUI (kolkas - Mac only)
Smagiausias pasirinkimas - Advanced Foundation template’as, kurį galite gauti čia: https://github.com/zurb/foundation-zurb-template
 
Kas dėžėje?
Aš pasirinkau advanced template opciją ir parsisiuntęs ją, tiesiog įvydžiau komandas (turėkite omenyje, jog jau turėjau node, bower ir gulp):

npm install bower install gulp
Tai tiek Jums tereikia, jog užkūrtumėte pilnai veikiantį projektą su foundation template.
Advanced template tikrai nustebino ir iš gerosios pusės. Čia yra viskas, ko Jums reikia patogiai pradėti dirbti su projektu. Jei esate dar tik pradedantis front-end pasaulyje - tai turbūt geriausia kas jums galėjo nutikti, nes greitai susipažinsite su automatizuotais task’ais ir viskas čia padaryta gana gerai (labai džiugu ir tai, jog foundation pagaliau perėjo prie gulp, vietoje grunt, kuris yra lanksesnis ir šiek tiek greitesnis).
Advanced template, be pačio foundation rasime šiuos features’us:


 
Libsass based sass kompiliavimas su css minifikavimu, autoprefixeriu ir kitomis gėrybėmis
Švari ir aiški projekto struktūra
Browsersync, kuris leis automatiškai refreshinti resursus ir visa tai bus daroma tarp visų jūsų device’ų
“Pages” taskas, kurį turbūt galėčiau pavadinti static page generatoriumi (nors gamintojas labai pabrėžia, jog tai nėra tai, tačiau tia yra tai :)). Jei esate girdėję apie Jekyll ar Hugo, tai jų mažytė alternatyva.
Styleguide generavimo taskas (markdown based)
Javascript concat taskas, tai man atrodo jau šiek tiek outdated. Requirejs, browserify ar webpack atrodytų patraukliau, tačiau turbūt norėta tiesiog išlaikyti viską kuo paprasčiau ir nenorima useriui kvaršinti galvos, nors js bundleriai/loaderiai šiuo metu - lyg ir savaime suprantamas dalykas.
Paveikslėlių minifikavimo taskas, su defaultiniais nustatymais (tiesą sakant, dabar jis daro nedaug, bet kas trukdo susikonfiguruoti?)

 
Out of the box, Jūs jau turite viską, ko reikėtų norint sėkmingai pradėti paprastą projektą. Viskas sukasi, juda ir kruta ir visa tai - vos per akimirksnį. Puiku!
 
Compatibility
Foundation 6 turi gana standartinį compatibility: IE9+ ir Android 2.3+, visų kitų, modernių browserių, palaikomos paskutinės dvi versijos. Gana įprasta kiekvienam projektui.
Sass features
Sass - svarbiausia foundation vieta, kuri turbūt ne vienam iš jūsų aktualiausia, kai svarstote, kurį front-end frameworką pasirinkti...
Tik įsijungus projektą, kodas atrodo tikrai neblogai. Laikomasi Scss-lint rekomendacijų, jei taisyklė pažeidžiama - čia pat kodas pažymimas custom scss-linterio markeriu, namingas aiškus, net nevartant dokumentacijos - tai jau labai gerai. Galbūt norėtūsi daugiau namespaceintų spalvų pavadinimų (IDE autocomplete’as lengviau padėtų gaudytis kode), šiek tiek pastovumo nameinant kintamuosius(kodėl header-color naudojamas vietoje heading-color, kai tuo tarpu settinant heading size, jau naudojamas “heading” namingas).
Sass Map’ai - palengvins Jūsų gyvenimą
Foundation konfiguracija, dėka Sass maps’ų yra itin lengva.
Norite susettinti savo projekto breakpoints?
http://prntscr.com/9j002r
Done.
 
O galbūt norite susettinti skirtingus heading dydžius, kiekviename breakpoint’e?
http://prntscr.com/9j0062
 
Lengvai susetupinsite buttonus, breakpointus ir headingus, viskas labai paprasta ir aišku, pasiektas tikrai didelis improvementas, tiek setupinant, tiek skaitant kodą.
Galbūt norisi tik daugiau mapsų - pvz global prefixed kintamieji irgi galėtų būt mape.
 
Grid’as
Grid’o sistema naujajame Foundation, tikrai geresnė(tačiau per daug niekas nesikeitė, jei naudojote Foundation 5 grid’ą, atsirado tik keli nauji features’ai), nei buvo prieš tai, lengvai konfiguruojama, gali naudoti tiek jau predefined klases, tiek naudoti mixinsus semantic grid’e, nestinti skirtingus grid’us vieną į kitą ir tai daryti lengvai, tačiau ši grid’o sistema nėra pati geriausia, jei jūs norite pilnavertiško ir lankstaus sass grid’o galimybių. Kodėl?
Teko išbandyti įvairias grid’o sistemas - foundation, neat ir susy ir galiu pasakyti, jog nei viena iš jų nėra bloga, tačiau susy turi tas savybes, kurios neribos Jūsų kodo ir štai dėl ko:
 
Visos prieš tai vardintos grid’o sistemos yra paremtos mixinais, kurie gražina tam tikrus css properties su nustatytais values arba turi “secret” variables, kurie, po ilgų kodo nagrinėjimų, gali jums pasitarnauti, tačiau susy kūrėjai ėjo kitu keliu ir nusprendė vartotojui suteikti visišką laisvę - jie leidžia gražinti css reikšmes per funkcijas. Būtent tokios sistemos leidžia iššlifuoti jūsų grid’ą iki tobulumo ir neriboja jūsų fantazijos (o kas, jeigu developeris nori grid width property panaudoti lighten mixin’e, be gutter? Ok, gal palyginimas gal ir nėra pats geriausias, bet būtent tai ir yra laisvė - turėti laisvai prieinama funkcijų rinkinį, kurį galėtum panaudoti kur tik tu nori). Žodžiu, Foundation tikrai pasistengė, tačiau Sass based grid’as yra vienas pagrindinių frameworko arkliukų, o grid sistemų - tikrai galima rasti geresnių. Taip, Susy turėjo performance problemų, tačiau jau 2015 ir Sass mes buildiname libsass pagalba, naudodami gulp, o Susy apsitvarkė savo lauką ir ženkliai pagerino compilation performance.
Foundation taip pat turi flex-box grid’ą, su kuriuo galima susipažinti čia:
http://foundation.zurb.com/sites/docs/flex-grid.html
 
Functions and mixins
Foundation pasitinka mus su keturiom funkijų grupėm ir dešimčia mixinų (http://foundation.zurb.com/sites/docs/sass-functions.html).
Funkcijų grupės yra:


 
Spalvų
Selektorių
Vienetų (units)
Reikšmių (values)

Mixin’ai ir funkcijos yra gana standartiniai ir nieko išskirtinio čia nerasite. Prie įdomesnių variantų galima priskirti nebent “hamburger” menu mixiną, smart-scale, kuris atskiria ar tai tamsi spalva ar šviesi ir atitinkamai ją pašviesina ar patamsina, remCalc’as.
Kaip bourbon useris, aš čia pasigedau emCalc’o, animacijų easing’o, text-ellipsis funkcijos ir kitų malonių dalykėlių, kurie palengvina kasdieninį darbą.
Custom easing’o funkcijų nebuvimą šiek tiek kompensuoja motion UI, tačiau jis nėra toks lankstus, kaip norėtusi, nes turi gana griežtai apibrėžtą efektų ir nustatymų struktūrą.
 
Pagalbinės klasės, resetai ir nustatymai
Jei esate tik pradedantis front-end pasaulyje, tai Foundation Jums puikiai tiks, kaip pirmasis frameworkas arba mokymosi šaltinis.
Teisingai setinamas line height (unitless), mane iškart nuteikė teigiamai :)
Čia tikrai yra ko pasimokyti ir jei tik pradėjote savo front-enderio kelią - panagrinėti šį kodą tiesiog būtina.
Helper klasės ir jau prestyled komponentai padės, jei tiesiog darote produkto prototype. Realiame projekte, to vengčiau, tačiau, jei visko reikia čia ir dabar - tai puikus pasirinkimas.
 
Panini
Panini, tai lyg static site generatorius, labai panašus į Hugo ar Jekyll, tik daug, daug paprastesnis.
Tai yra tik mano nuomonė, bet šiek tiek keista, kai Zurb tiesiog stengiasi išrasti ratą iš naujo. Aš pasiliksiu savo žodžius pabaigai, tačiau Panini galima palyginti su manimi ir Usanu Boltu bėgime. Taip, aš irgi bėgioju, tačiau tiesiog negaliu skirti bėgimui tiek pastangų, kiek jų skiria profesionalus bėgikas. Tas pats ir čia - Panini nėra blogas, tačiau įrankiai kaip Jekyll ar Hugo leis išspręsti didesnį spektrą problemų, kai Jums to reikės. Taip, galbūt Jūs darote tik paprastus projektus ir Panini bus tai, ko Jums reikia, tačiau visada geriau būti pasiruošus ir turėti didesnį ir geresnį įrankių arsenalą.
Hugo yra tiesiog visa galva prnašesnis ir turi tokias funkcijas, kaip:


 
Prety urls
Themes
Custom error pages
Custom functions
Sitemap generation
Shortcodes

ir begalė kitų privalumų, apie kuriuos galite paskaityti čia: https://gohugo.io/overview/introduction/
Tad, jei einate atlikti darbo, būkite tikri, jog savo arsenale, turite tinkamus įrankius.
 
Javascript organizacija, componentai & Motion UI
Organizacija
 
Pirmas dalykas, kuris krenta į akis, tai foundation template, tiesiog concatenateina failus į vieną failą ir nenaudoja loader’ių, tokių kaip requirejs, webpack and browserify. Iš vienos pusės tai gerai, nes nesudėtingam projekte, vartotojui nereikia sukti galvos ir suprasti, kaip jie veikia. Iš kitos pusės, loaderiai jau yra tapę butinybe. Browserify, webpack and bent jau requirejs tikrai palengvins jūsų darbą su javascript.
Jeigu nesate tikri, kam to reikia, jūs galite perskaityti mano kolegos straipsnį čia: https://www.devbridge.com/articles/understanding-amd-requirejs/
 
Plugins
Foundation 6 išleistas su septyniais pluginsais:
Abide - skirtas formų validacijai. Jo atitikmuo būtų jQuery validation.
Equalizer - pluginsas skirtas sulyginti div’ų aukščiams (nors aš tokios praktikos vengčiau).
Interchange - naudingas pluginsas, kuris leis jum krauti resursus, priklausomai nuo device width. Tikrai neblogas pakaitalas srcset’ui.
Orbit - vargšas Orbit slideris, vis neranda savo vietos. Išmestas iš Foundation 5, su naująja versija jis ir vėl grįžta. Description’as sako, jog tai “The slider you want, the slider you need.”, tačiau lyginant su lyderiais slickJs ar bxSlider, Orbit slideris nėra net vienoje saulės sistemoje su savo konkurentais. Skurdus funkcionalumas, tačiau wireframe’ams - puikiai tiks.
Reveal - tai visai neblogas modal window sprendimas, turi nemažai optins’ų ir callbackų. Naudoti jį irgi gana paprasta, tačiau jei norėsite labiau valdomo sprendimo, rekomenduoju šį:
https://github.com/tkirda/modal-box
Čia rasite didesnę eventų įvairovę, modalų templeitinimą, grupavimą, jau integruotus preloaderį ir t.t.
 
Toggler - turbūt geriausias jūsų draugas ruošiant produkto prototipus. Nurodot kaip toglinti ir kas togglina - done, daugiau jokių custom scriptų elementų togglinimui. Paprastas, universalus ir naudingas.
Sticky - esate daug kartų darę sticky headerius ir programavę custom logiką? “Sticky”, kaip[ ir toggler, man tikrai labai patiko. Galite nurodyti kuriame breakpoint’e veikti, ką stickinti, nurodyti marginus, iki kada stickinti elementą ir t.t. Tikrai gerai apgalvotas ir išdirbtas pluginsas su aiškia dokumentacija.
 
Motion UI
Motion UI yra stand-alone library, kuri panaudota Foundation componentuose, tokiuose kaip Toggler, Reveal ar Orbit.
Motion UI turi pagrindinius penkis tranzicijų tipus: slide, fade, hinge, scale ir spin, kuriuos galite papildomai editinti per sass mixinus.
Ko aš čia labiausia pasigedau, tai:
Dabar elementas hidinamas ir rodomas su inline style’u. Žinant, kad responsive saite display property tikrai gali keistis, frameworkas jus vers naudoti important flagus, kas nėra gera praktika.
Nėra integruotų, jqueryUI artimų sass/css easingų
Predefined tranzicijos tikrai nekelia daug susižavėjimo (apskritai, naudojamos atrodo tik slide, fade ir scale, bet gal aš esu per daug priekabus)
Įvertinti galite čia: http://foundation.zurb.com/sites/docs/motion-ui.html
 
 
Ko pasigedau
Foundation frameworke aš pasigedau dviejų dalykų - brandos ir koncentracijos.
Vėl sugražintas orbit slideris (apskritai, ar tikrai foundation’e reikia tiek daug javascript componentų?), kurio alternatyvos rinkoje - žymiai stipresnės. Jei lygintume SlickJS su Orbit, pastarąjam tektų tik susigūžus tūnoti kamputyje. Tokie įrankiai, kaip panini irgi nesuteikia tvirtumo.
Framework’as taip pat nepasiūlo ir jokio spriting solution’o (nei svg, nei png nei dar kokio, nors spritinimas jau yra “must have”), kas būtų tikrai neblogas žingsnis pirmyn.
Lankstesnė grid’o sistema irgi būtų ne pro šalį.
Kai kurie sprendimai, tikrai pasiteisinę, bet nemaža dalis komponentų, toks vaizdas, jog čia yra tik tam, kad sudarytų įspūdį, jog frameworkas siūlo labai daug, tačiau visur galima pastebėti tam tikrus neišbaigtumus.
 
Finalinės mintys
Mano mintys apie Foundation 6 yra dvejopos. Taip, tai tikrai yra neblogas “out of the box” sprendimas, su juo galima pradėti dirbti iškart, tačiau kitas klausimas - ar tai tikrai tas sprendimas, kurio pagalba pasieksime geriausių rezultatų? Mano manymu - ne.
Jokiu būdu nesakau, jog neturėtumėte naudoti foundation, tačiau custom sprendimas pasitvirtins tikrai geriau, jei siekiate turėti visišką laisvę ir turėti visus geriausius įrankius.
Mano nuomone, foundation 6 komponentus galima būtų pakeisti taip:
Grid system - Susy framework
Mixins - Bourbon framework
Panini - Hugo arba Jekyll (aš rinkčiausi Hugo, vien dėl jo žaibiško greičio)
Kada naudoti custom sprendimą, o kada foundation yra gera idėja?
Jei būčiau vienišas front-end developeris, kuris turėtų taikytis prie daug ir mažų projektų, kurie, greičiausia bus paremti Foundation ar Bootstrap frameworkais, o ir laiko dideliems technologiniams žygiams neturėčiau - Foundation tikrai būtų labai geras pasirinkimas.
Foundation taip pat puikiai tiks, jei jūs turite limituota laiko tarpą ir Jums reikia kuo greičiau suręsti applikacijos prototipą, nes frameworkas turi begalę out of the box sprendimų ir jum tiesiog nereikia apie juos daug galvoti.
Jei man reikėtų dirbti didelėje organizacijoje ir aš žinočiau, jog projektas bus developinamas ilgai, o reikalavimai jam - patys didžiausi, tuomet rinkčiausi custom framework, nes geriausio sprendimo, kuris apjungtų visus geriausius rinkos žaidėjus, tiesiog “out of the box” - nėra.
Bent kuriuo atveju, tai tikrai dėmesio vertas produktas ir sekti tolesnes Foundation vystymosi kryptis - tikrai verta.

Šaltinis: http://www.gdgroup.lt/blog/naudingi-wordpress-pluginai/
 
Kol kas pateiksiu greitą, virš 60 naudingų wordpress pluginų sąrašą.
 
Pluginus atrinkau dirbdamas su wordpress sistema, stengiausi atsižvelgti į pluginų “gerumą” pagal jų programinę dalį, lengvą themeing’ą ir puikų savo darbo atlikimą.
 
Na ką, pradedam!
WordPress SEO by Yoast
Nuoroda: http://wordpress.org/extend/plugins/wordpress-seo/
Vienas iš geresnių seo optimizacijai skirtų pluginų. Leidžia redaguoti postų title ir meta description reikšmes, yra pilnai kanonizuotas, turi integruotus breadcrumb‘us, gali sudaryti xml sitemapus, rss patobulinimus ir keletą kitų funkcijų. Tai toks seo pluginas, kuris atlieka daug veiksmų, jei reikia būtent tokio ir dėl tam tikrų priežasčių negalite naudoti specializuotų pluginų – šis bus pats tas.
 
Booking Calendar
Nuoroda: http://wordpress.org/extend/plugins/booking/
Booking calendar Jums labai pravers, jei užsiimate nuoma ar kita sritimi, kuriai reiktų įskiepio „Booking calendar“.
Lankytojai, šio plugin‘o pagalba, galės tikrinti objektų prieinamumą tam tikru metu, vartotojai galės vykdyti rezervaciją. Klientai gali registruotis vyksiantiems renginiams. Taipogi, galima įdiegti papildomą atsiskaitymo modulį ir leisti vartotojams susimokėti iškart.
Įskiepis ganėtinai lankstus ir jį galima pritaikyti kitoms reikmėms.
Demonstraciją rasite čia: http://onlinebookingcalendar.com/demo/
Galimybės:
Rezervacija, pasirenkant norimą datą
Priminimai el. paštu, tiek administratoriui, tiek vartotojams.
Patogi vartotojo sąsaja.
Kalendoriaus widget‘as.
Palaiko kelias kalbas.
Ir t.t.
 
WP Minify
Nuoroda: http://wordpress.org/extend/plugins/wp-minify/
Įskiepis integruoja „Minify“ varikliuką, kuris optimizuoja JS ir CSS failų krovimo laikus puslapyje.
Puikiai tinka tiems, kurie kaunasi dėl optimizacijos.
Turi klaidų taisymo įrankius ir keletą konfigūracijos pasirinkimų.
 
Widget Logic
Nuoroda: http://wordpress.org/extend/plugins/widget-logic/
Įskiepis suteiks galimybę valdyti widget‘us, tiksliau jų logiką. Prie widgeto atsiras papildomas laukas, kuriame galima bus nustatyti, kuriame puslapyje jis gali atsirasti.
 
WPtouch
Nuoroda: http://wordpress.org/extend/plugins/wptouch/
Šis įskiepis padės optimizuoti Jūsų tinklalapį mobiliesiems įrenginiams.
 
WP-Cumulus
Nuoroda: http://wordpress.org/extend/plugins/wp-cumulus/
Teko matyti gražius tag cloud‘us kitose svetainėse, kur žodžiai sukasi 3d aplinkoje? Būtent šis pluginas ir atlieka šį darbą.
 
Social Slider
Nuoroda: http://wordpress.org/extend/plugins/social-slider-2/
Įskiepis atvaizduoja „išsiskleidžiantį“ box‘ą, kuriame pateikiami Jūsų socialinių tinklų profiliai ar nuorodos.
Pluginas tikrai atrodo neprastai ir su kai kuriais dizaino sprendimais, gali būti tikras išsigelbėjimas.
Įskiepio demonstracija: http://social-slider.com/demo/full.html
Palaikomi soc. Tinklai:
 RSS
 Newsletter
 Facebook
 Google+ (Google Plus)
 Twitter
 Blip
 Flaker
 Soup.io
 Buzz
 Sledzik
 Tumblr
 Spinacz
 GoldenLine
 LinkedIn
 Nasza Klasa
 NetworkedBlogs
 MySpace
 Orkut
 Grono
 FriendConnect
 FriendFeed
 Digg
 Wykop
 Kciuk
 Picasa
 Flickr
 Panoramio
 DeviantArt
 YouTube
 Vimeo
 IMDb
 Last.fm
 iSing
 Blip.fm
 Delicious
 Unifyer
 
Broken Link Checker
Nuoroda: http://wordpress.org/extend/plugins/broken-link-checker/
Kaip ir matosi iš pavadinimo – įskiepis skirtas stebėti „broken links“ svetainėje.
Stebi broken linkus į postus, puslapius, comentarus ir custom field‘us.
Aptinka neveikiančias nuorodas į paveikslėlius ir kitą media.
Perspėja Jus dashboard‘e ir emaliu.
Neleidžia paieškos varikliams followint broken linkų.
Įskiepis leidžia redaguoti nuorodas iškart, t.y. nereikia klaidžioti iki tam tikros vietos ir ieškoti broken linko.
 
TinyMCE Advanced
Nuoroda: http://wordpress.org/extend/plugins/tinymce-advanced/
Šis įskiepis, prideda 16 papildomų funkcijų į standartinį tinymce editorių.
Advanced HR, Advanced image, Advanced link, kontekstiniai meniu, šypsenėlės, laikas ir data, IESpell, sluoksniai, spausdinimas, search and replace funkcija, stailinimas, lentelės, matematikos formulių palaikymas ir t.t.
O prie viso šio gėrio – spellcheckas.
 
BackWPup
Nuoroda: http://wordpress.org/extend/plugins/backwpup/
Galimybės:
Duomenų bazės backupai
Wordpresso xml exportas
Duomanų bazės optimizacija
Duombazės patikra / taisymas
Failų backupas
Backupų archyvavimas
Backupų talpinimas įvairiuose šaltiniuose.
Multisite support‘as
 
WordPress Popular Posts
 
http://wordpress.org/extend/plugins/wordpress-popular-posts/
 
Plačiai konfigūruojamas plugin‘as, skirtas populiariausių post‘ų atvaizdavimui. Galima naudoti ir kaip šablono tag‘ą.
Galima nepriskirti kategorijų, palaiko shortcode‘us, template tag‘us, automatiškas atsinaujinimas.
 
wp-Typography
Nuoroda: http://wordpress.org/extend/plugins/wp-typography/
Super dalykas tiems, kas nori turėti dailią ir TAISYKLINGĄ tipografiją savo tinklalapyje.
 
CMS Tree Page View
Nuoroda: http://wordpress.org/extend/plugins/cms-tree-page-view/
Plugin‘as skirtas tiems, kurie pripratę prie klasikinių turinio valdymo sistemų atvaizdavimo.
Atvaizduoja jūsų tinklalapį hierarchiniu būdu, bei turi keletą papildomų funkcijų.
 
WP-Optimize
Nuoroda: http://wordpress.org/extend/plugins/wp-optimize/
Tai Duomenų bazės optimizacijos ir valymo įrankis.
Leidžia panaikinti postų revizijas, nepatvirtintus arba „šlamšto“ komentarus ir t.t.
Taipogi, leidžia pervardinti wordpress vartotojus.
Palaiko daugiakalbiškumą.
 
Sidebar Login
Nuoroda: http://wordpress.org/extend/plugins/sidebar-login/
Suteikia galimybę išvesti wordpress loginą per shorttag‘ą arba widget‘ą.
 
Contact Form 7
Nuoroda: http://wordpress.org/extend/plugins/contact-form-7/
Leidžia sudarinėti norimas formas.
Palaiko captcha, akismet, ajax ir t.t.
 
Fluency Admin
Nuoroda: http://wordpress.org/extend/plugins/fluency-admin/
Patobulinimas administratoriaus vartotojo sąsajai. Tab‘ai atskiriami skirtinga spalva, įvairios spalvų schemos, galima pridėti savo logotipą ir hotkey palaikymas norint prieiti atitinkamas sekcijas.
 
WP-PostRatings
Norite įdiegti post‘ų vertinimą į savo wordpress svetainę? Prašau 
Yra ajax palaikymas.
 
WordPress Content Slide
Nuoroda: http://wordpress.org/extend/plugins/content-slide/
Šaunus įskiepis, kuris leidžia Jums sudaryti content slaiderius su efektais. Turi begalę opcijų.
Pavyzdys: http://wptuts.info/wp-content-slide/
 
GD Star Rating
Nuoroda: http://www.gdstarrating.com/
Dar vienas, ypač galingas, postų, komentarų ir puslapių reitingavimo pluginas. Multilanguage palaikymas, suderinamumas su kešo pluginais, turi begalę tinkinimo galimybių.
 
WP No Category Base
Nuoroda: http://wordpress.org/extend/plugins/wp-no-category-base/
Greitai ir paprastai nuima /category/ nuo Jūsų postų.
 
WP-Paginate
Nuoroda: http://wordpress.org/extend/plugins/wp-paginate/
Atlieka paprastą funkciją – puslapiuoja ir tai atlieka gerai 
 
SexyBookmarks | email, bookmark, and share buttons
Nuoroda: http://wordpress.org/extend/plugins/add-to-any/
Populiarus ir dailiai atrodantis pluginas, skirtas Sharingui/Bookmarikinimui. Garantuoju, jog jį jau matėte.
 
PHP Code Widget
Turbūt dažnas iš mūsų pasigedo galimybės rašyti php kodą widgete. Šis pluginas suteiks šią galimybę.
 
Relevanssi – A Better Search
Nuoroda: http://wordpress.org/extend/plugins/relevanssi/
Praplečia standartinę wordpress sistemos paiešką.
Paieškos rezultatai patiekiami pagal didžiausią sutapimą, ne pagal datą.
Ieškoma „žodžio dalies“ sutapimų.
Pažymimi paieškos žodžiai rezultatuose.
Ir kitos funkcijos.
 
Twitter Widget Pro
Nuoroda: http://wordpress.org/extend/plugins/twitter-widget-pro/
Turbūt populiariausias Twitter widgetas wordpressui.
 
WassUp
Nuoroda: http://wordpress.org/extend/plugins/wassup/
Nebloga, google analytics alternatyva ir kas svarbiausia – real time trackingas.
 
Sharebar
Nuoroda: http://wordpress.org/extend/plugins/sharebar/
Pavadinimas daug pasako. Vienas iš geresnių savo srityje.
 
Search Everything
Nuoroda: http://wordpress.org/extend/plugins/search-everything/
Paieškos patobulinimas wordpress sistemai.
Paieškos rezultatų paryškinimas, ieško kiekviename puslapyje, tag‘e, taxonomijose, kategorijose, komentare, draftuose, excerptuose, atachmentuose, custom field‘uose, taipogi suteikiama galimybė neleisti prieiti paieškai prie tam tikrų resursų.
 
Role Scoper
Nuoroda: http://wordpress.org/extend/plugins/role-scoper/
Labai šaunus wordpress pluginas, skirtas vartotojų teisėms sistemoje redaguoti.
 
Wordbooker
Nuoroda: http://wordpress.org/extend/plugins/wordbooker/
Pats geriausias ir lengviausiai konfigūruojamas pluginas, skirtas tam, jog Jūsų blogo įrašai atsirastų ir facebook erdvėje.
 
Disqus Comment System
Nuoroda: http://wordpress.org/extend/plugins/disqus-comment-system/
Viena geriausių alternatyvų standartinei wordpress komentavimo sistemai.
 
Really Simple CAPTCHA
Nuoroda: http://wordpress.org/extend/plugins/really-simple-captcha/
Pavadinimas – daug pasako. Gal ir ne pats saugiausias, tačiau labai paprastai valdomas captcha pluginas.
 
Secure WordPress
Nuoroda: http://wordpress.org/extend/plugins/secure-wordpress/
Didelis saugumo paketas wordpress turinio valdymo sistemai.
Trumpai: nepateikia error informacijos prisijungimo lange, prideda index.php failą pluginų direktorijoje, neatvaizduoja wp versijos ir dalies kitos, naudingos įsilaužėliui informacijos, blokuoja „blogas“ užklausas, kurios gali pakenkti wordpress sistemai.
 
BulletProof Security
Nuoroda: http://wordpress.org/extend/plugins/bulletproof-security/
Dar vienas „must have“ saugumo pataisymas wordpress sistemai. Apsaugo nuo xss, csrf, base64_encode, sql injekcijų ir kitų „laužimo“ būdų. Apsaugo wp-config.php, bb-config.php, php.ini, php5.ini, install.php ir readme.html su .htaccess failus, bei begalės kitų pataisymų.
 
Dynamic Content Gallery
Nuoroda: http://wordpress.org/extend/plugins/dynamic-content-gallery-plugin/
Šaunus pluginas, leidžiantis išburti slaiderį, su paskutiniais ir featured postais.
 
WP to Twitter
Nuoroda: http://wordpress.org/extend/plugins/wp-to-twitter/
Šio plugino Jums prireiks, jei norėsite wordpress įrašus postinti ir twitteryje.
 
Ajax Event Calendar
Nuoroda: http://wordpress.org/extend/plugins/ajax-event-calendar/screenshots/
Ajax technologija besiremiantis kalendorius, su begale funkcijų. Plačiau – gamintojo puslapyje.
 
SEO Friendly Images
Turite daug paveikslėlių, bet ne visiems priskyrėte title ir alt žymes? Nepergyvenkite, šis pluginas Jums padės tai sutvarkyti.
Tiek kodas tampa validus, tiek puslapis tampa daugiau „seo friendly“
 
Link Library
Nuoroda: http://wordpress.org/extend/plugins/link-library/
Tiems, kas „stato“ didelius nuorodų sąrašus, šis pluginas tikrai bus naudingas.
 
After the Deadline
Nuoroda: http://wordpress.org/extend/plugins/after-the-deadline/
Spellcheckeris wordpressui. Įdomu dar ir tai, jog naudoja AI rašybai tikrinti.
 
WP Security Scan
Nuoroda: http://wordpress.org/extend/plugins/wp-security-scan/
Tikrina Jūsų wordpress svetainės saugumą. Pateikia pažeidžiamumus ir galimus pataisymus.
Tikrina: slaptažodžius, failų permissionus, duombazės saugumą, versijos slėpimą, wordpress admin dalį ir t.t.
 
Shortcode Exec PHP
Nuoroda: http://wordpress.org/extend/plugins/shortcode-exec-php/
Leis vykdyti php kodą postuose, puslapiuose ir t.t. naudojant shortcodus. Turi įdiegtą sintaksės spalvinimą. Prisibijant dėl saugumo, tai shortcodus galės naudoti tik administratoriai.
 
Easing Slider
Nuoroda: http://wordpress.org/extend/plugins/easing-slider/
Tikria gražus slaideris, su puikiu css3 apipavidalinimu.
 
AdRotate
Nuoroda: http://wordpress.org/extend/plugins/adrotate/
Patogiausias ir turbūt geriausias pluginas reklamai administruoti Jūsų wordpress svetainėje. Patogus, lankstus, paprastas ir galingas. Ko daugiau reikia?
Turi integruotą šiokią tokią statistiką, palaiko shortcodus, turi reklamos „pasibaigimo terminą“ ir begalę kitų galimybių.
 
Exploit Scanner
Nuoroda: http://wordpress.org/extend/plugins/exploit-scanner/
Ieško blogų gyventojų Jūsų wordpress svetainėje  Pats nieko netrina, tiesiog informuoja administratorių apie galimas grėsmes.
Ieškomi neįprasti pluginai, duombazės įrašai, failų vardai ir t.t.
 
WordPress Video Plugin
Nuoroda: http://wordpress.org/extend/plugins/wordpress-video-plugin/
Leidžia paprastai embeddinti video medžiagą į wordpress svetainę.
Palaiko labai daug šaltinių.
 
Facebook likes you!
Nuoroda: http://wordpress.org/extend/plugins/facebook-likes-you/
lengvai ir greitai diegiamas like/share mygtukas wordpress‘ui.
 
Configure SMTP
Sukonfigūruoja smtp nustatymus wordpressui. Be šios konfigūracijos kai kurie pluginai gali veikti nekorektiškai (dažniausia tai būna email notificationai ir newsletter pluginai)
 
Facebook Comments for WordPress
Nurooda: http://wordpress.org/extend/plugins/facebook-comments-for-wordpress/
Lengvai integruojami ir konfigūruojami facebook tipo komentarai wordpress sistemai. Galimybė sinchronizuoti wordpress ir facebook komentarus.
 
Newsletter
Nuoroda: http://wordpress.org/extend/plugins/newsletter/
Naujienlaiškis. Nemokamai ir paprastai.
 
WP-Cufon
Nuoroda: http://wordpress.org/extend/plugins/wp-cufon/screenshots/
Patyrusiems temų developeriams šio plugino tikrai neprireiks, bet tiems, kurie yra mažiau pažengę – šis pluginas tikrai pravers. Pasirinkite ir lengvai embeddinkite bent kokį šriftą iš cufon kolekcijos.
 
All In One Favicon
Nuoroda: http://wordpress.org/extend/plugins/all-in-one-favicon/
Vėlgi – truputį patyrusiems vartotojams šio plugino tikrai neprireiks, tačiau, jei esate naujokas ir nenorite lysti į sistemos vidurius, bet norite pakeisti favicon arba suteikti galimybę paprastam vartotojui ją pasikeisti be Jūsų pagalbos, šis pluginas Jums pravers.
 
Quick Adsense
Nuoroda: http://wordpress.org/extend/plugins/quick-adsense/
Greitas ir lengvas ad sense reklamos administravimas Jūsų puslapyje. Random atvaizdavimas ir kitos funkcijos tikrai palengvins Jūsų gyvenimą ir papildys piniginę.
 
Blog Protector – Protect Your Content
Nuoroda: http://wordpress.org/extend/plugins/blog-protector/
Nors aš manau, jog internete turinys turi būti atviras, tačiau tiems, kurie savo turinį nori apsaugoti – pateikiame blog protector.
Pluginas atjungia tokias funkcijas kaip teksto žymėjimas ir antras pelės mygtuko apspaudimas.
 
WordPress Portfolio Plugin (WP Portfolio)
Nuoroda: http://wordpress.org/extend/plugins/wp-portfolio/
Lengvas portfolio administravimas.
 
WordPress Importer
Nuoroda: http://wordpress.org/extend/plugins/wordpress-importer/
Importuoja postus, puslapius, komentarus, custom , meta fieldus, kategorijas, tagus, taksonomijas ir autorius iš kito wordpress blogo.
 
WP-Polls
Nuoroda: http://wordpress.org/extend/plugins/wp-polls/
Norite surengti apklausą savo wordpress svetainėje? Šis pluginas Jums padės! Paprastas ir greitas.
 
WordPress Mobile Pack
Nuoroda: http://wordpress.org/extend/plugins/wordpress-mobile-pack/
Leis Jūsų svetainei atrodyti geriau mobiliuosiuose prietaisuose.
Galimybės:
Switchas tarp desktop ir mobile svetainės versijų.
Standartinė tema mob. Įrenginiams.
Didelės pritaikomumo galimybės.
Mobiliems įrenginiams pritaikyta admin panelė.
Barcode widgetas
Mobilie adsense widgetas
Ir t.t.
 
NextGen gallery
Nuoroda: http://wordpress.org/extend/plugins/nextgen-gallery/
Pats geriausias albumų / galerijų pluginas wordpressui. Draugauja su begale pluginų, yra pastoviai atnaujinamas, palaiko multilanguage, turi nemažai papildomų praplėtimų ir t.t.
 
Viper’s Video Quicktags
Nuoroda: http://wordpress.org/extend/plugins/vipers-video-quicktags/
Įkeliant video, tag‘us šis pluginas supildys pats, automatiškai.
Palaiko:
 YouTube (including playlists)
 Google Video
 DailyMotion
 Vimeo
 Veoh
 Viddler
 Metacafe
 Blip.tv
 VideoPress aka WordPress.com Video NEW!
 Flickr videos
 Spike.com/IFILM
 MySpaceTV
 
WordPress Related Posts Yet Another Related Posts Plugin
Nuoroda: http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/
Atvaizduoja susijusius postus.
Universalus ir konfigūruojamas algoritmas, kuris peržvelgia postų antraštes, tagus ir kategorijas, bei pagal YARPP apskaičiuoja sutapimo „rezultatą“.
Pluginas draugauja su kešu, bei turi keletą kitų gerų savybių.
 
Autolink URI
Nuoroda: http://wordpress.org/extend/plugins/sem-autolink-uri/
Paverčia tekstą, kuris turi pradžią http:// į nuorodą automatiškai.
 
WordPress Firewall 2
Nuoroda: http://wordpress.org/extend/plugins/wordpress-firewall-2/
Stebi užklausas ir apsaugo sistemą nuo atakų.
 
Zemanta
Nuoroda: http://wordpress.org/extend/plugins/zemanta/
Rašant wordpresse, zemanta siūlo paveiksliukus, video, nuorodas ir seo optimizuotus tag‘us su Jūsų susijusiu turiniu.
Tikrai labai patogus content sugestion engine‘as, padedantis tiems, kurie daug rašo ir nori rašyti kokybiškai.
Plačiau: gamintojo saite ir http://en.wikipedia.org/wiki/Zemanta
 
All in One SEO Pack
Nuoroda: http://wordpress.org/extend/plugins/all-in-one-seo-pack/
Pats geriausias seo pluginas wordpress sistemai. Palaiko custom post type, kanonines nuorodas, turi palaikyma e-commerce pluginams, meta tagų automatinis generavimas ir begalės kitų funkcijų.
 
Qtranslate
Nuoroda: http://wordpress.org/extend/plugins/qtranslate/
Tiesiog, pats geriausias sprendimas tada, kai reikia svetainės keliomis kalbomis. Draugauja su begale pluginų.
 
FancyBox for WordPress
Nuoroda: http://wordpress.org/extend/plugins/fancybox-for-wordpress/
Lengvesnis nei lightbox, bet toks pat gražus.