How can you get your projects from prototype to production in a faster, lighter and more flexible way?
Kuba familiarized us with Foundation 6 frontend framework and its features.
2. Foundation 6
Prototypowanie stron i aplikacji webowych
Szybkie i łatwe, z minimalną ilością zależności, ale z nowoczesnymi narzędziami
Umożliwia szybkie stworzenie ‘proof of concept’, z czytelnym kodem i czytelnymi klasami css
Posiada bazowy styl, który można z łatwością nadpisać lub dezaktywować
Szeroka gama prekonfigurowalnych pluginów w JS
Strony w wersji produkcyjnej
Ułatwia tworzenie semantycznych nazw klas ( w naszym przypadku BEM), dzięki zastosowaniu mixinów SASS
Znaczne odchudzenie kodu, dzięki selektywnemu importowaniu komponentów
Łatwe stylowanie niestandardowych designów bez konieczności nadpisywania kodu css i wielu zmiennych
3. (nie)Semantyczne klasy css - Material Design Lite
<div class="mdl-layout__tab-panel is-active">
<section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
<article class="section__play-btn mdl-cell mdl-cell--9-col-desktop mdl-cell--10-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 m
white">
</article>
<aside class="mdl-card mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone">
</aside>
</section>
</div>
4. Semantyczne klasy css - Foundation
<div class="homepage">
<section class="content">
<article class="content__main content__main--home">
</article>
<aside class="content__sidebar">
</aside>
</section>
</div>
5. Łatwy start
Zurb udostępnia swój własny stack aplikacji, z którego korzysta.
NPM, Bower, Gulp, Lib-sass
tworzenie bazowego stylu, który jest raczej wireframe’em niż finalnym
designem.
Selektywny import modułów i bazowa konfiguracja w pliku settings
UglifyJS (kompresowanie JavaScript), UnCSS (usuwanie nieużywanego kodu
CSS), kompresja grafiki
6. Foundation 6 for Apps
Gotowe szablony aplikacji Angular 1.x
Komponenty Foundation w Angularze
Motion UI do pięknych animacji i efektów specjalnych
7. Bonuses & perks
Foundation for Emails (dawniej Ink)
Templates
Templates for Apps
Building blocks
Yeti Launch
Flex (opcjonalnie)
