Foundations of Foundation 6 - Jakub Włodaczyk (pl)
- 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)
- 8. Q&A