Foundations of Foundation 6

Foundation 6Prototypowanie 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

Możliwość tworzenia własnych pluginów JS na bazie Foundation JS utilities (breakpoints, events)

Strony w pełni dostępne (ARIA), z zastosowaniem dobrych praktyk

(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 mdl-color-text--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>

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>

Ł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

Foundation 6 for Apps

Gotowe szablony aplikacji Angular 1.x

Komponenty Foundation w Angularze

Motion UI do pięknych animacji i efektów specjalnych

Bonuses & perks

Foundation for Emails (dawniej Ink)

Templates

Templates for Apps

Building blocks

Yeti Launch

Flex (opcjonalnie)

Q&A