70-480 – Tworzenie elastycznego układu zawartości

70-480

Wdrażanie układu przy użyciu elastycznego modelu pudełkowego; wdrażanie układu przy użyciu wielu kolumn; wdrażanie układu przy użyciu pozycjonowania elementów pływających i wykluczeń; wdrażanie układu przy użyciu opcji wyrównania siatki; wdrażanie układu przy użyciu regionów, grupowania i zagnieżdżania.



Model “flexbox

Model “flexbox” to nowy sposób na pozycjonowanie elementów blokowych względem siebie. Specyfikacja nie jest jeszcze w pełni ukończona, ale już teraz przeglądarki (poprzez przedrostki: -ms-, -webkit-, -moz-) umożliwiają korzystanie z własności modelu. Pozycjonowanie elementów odbywa się w pionie i poziomie z możliwością zdefiniowania co ma się dziać z wolnym miejscem. Jesteśmy także w stanie ustawiać poszczególne elementy w odpowiedniej kolejności oraz wyrównywać je względem okna przeglądarki.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W przykładzie widzimy element container, który jest bazowym komponentem dla pozostałych trzech elementów box. Dla elementu nadrzędnego ustawiona jest własność display na wartość flex, co definiuje nam model flexbox dla wszystkich elementów blokowych, które są dziećmi tego elementu. Dla elementów box ustawiona została z kolei własność flex z wartością 1, co oznacza w zasadzie tylko tyle, że każdy element zajmuje tyle samo miejsca.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W powyższym przykładzie doszła kolejna reguła, która dla pierwszego elementu box ustawia własność flex na wartość 2. Oznacza to, ze element ten będzie zajmować dwa razy więcej miejsca niżeli elementy z wartością 1. Widzimy to wyraźnie na przedstawionym przykładzie.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kolejna własność do ustawienia to order, która również przyjmuje wartości liczbowe, a pozwala nam ustawić poszczególne elementy w odpowiedniej kolejności.

Kolejna własność to flex-direction, która przyjmuje cztery wartości:

  • row – domyślne ustawienie według kolejności HTML
  • row-reverse – odwrócona kolejność elementów
  • column – elementy ustawiane są od góry do dołu, według kolejności w HTML
  • column-reverse – odwrócona kolejność w pionie

Spójrzmy na przykład z wykorzystaniem wartości row-reverse:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

.. oraz wartości column:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kolejna jest własność flex-wrap, która posiada trzy wartości:

  • wrap – niemieszczące się elementy przenoszone są do kolejnego wiersza lub kolumny
  • nowrap – blokujemy w ten sposób przenoszenie do nowego wiersza lub kolumny
  • wrap-reverse – przenoszenie do kolejnego wiersza lub kolumny z odwróceniem kolejności

Jest jeszcze własność, która łączy obie poprzednie: flex-flow. W ten sposób możemy sterować położeniem i kolejnością elementów, a także ich przenoszeniem do nowego wiersza lub kolumny przy użyciu jednej własności.

Kolejną własnością jest flex-align, czyli wyrównanie elementów względem siebie oraz okna przeglądarki. Posiada ona pięć następujących wartości:

  • start – wyrównanie do początku
  • end – wyrównanie do końca
  • center – wycentrowanie elementów
  • stretch – rozciąganie elementów
  • baseline – wyrównanie elementów (względem największego)

Microsoft przygotował tech demo, które pozwala samodzielnie pobawić się modelem “flexbox”: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_flex.htm

(Uwaga: działa jedynie pod IE!)

Tekst i interfejs kolumnowy

Kolejną ciekawą własnością CSS3 jest interfejs wielokolumnowy, który znamy z gazet, a który dotyczy ułożenia tekstu na stronie. Dzięki własnościom column-* możemy zdefiniować czytelny oraz bardziej przystępny layout dla tekstu.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dla kontenera zawierającego paragrafy tekstu zdefiniowana została w tym wypadku tylko jedna własność: column-count. Pozwala ona na określenie ilości kolumn na jaki zostanie podzielony tekst znajdujący się w danym kontenerze.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kolejna własność, to odstęp pomiędzy kolumnami, który określa column-gap, przyjmująca jako wartość szerokość przerwy.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Powyżej widzimy wyraźne oddzielenie tekstu poprzez wykorzystanie własności column-rule, które tworzy linię, która separuje nam poszczególne kolumny.

Własności jest oczywiście więcej, ale zapraszam na stronę w3schools, gdzie jak zawsze znajdziemy pełen opis: http://www.w3schools.com/Css/css3_multiple_columns.asp

Microsoft również i dla własności multi-column przygotował demo, które w bardzo prosty sposób pokazuje w jaki sposób możemy manipulować tekstem: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_multi-column.htm

Opływanie elementów blokowych

Do tej pory znaliśmy tylko własność float, która pozwalała na opływanie elementu z lewej lub prawej jego strony. Wartość opływania mogliśmy wyłączyć poprzez wartość clear. CSS3 daje nam jednak możliwość sterowania opływaniem za pomocą tak zwanych wykluczeń.

Zacznijmy od spojrzenia na wartości dla własności wrap-flow, o której mowa:

  • auto – domyślnie, brak opływania
  • both – opływanie z każdej strony elementu
  • start – opływanie z lewej strony elementu
  • end – opływanie z prawej strony elementu
  • minimum – opływanie od strony, która zostanie zapełniona w minimalnym stopniu
  • maximum – opływanie od strony, która zostanie zapełniona w maksymalnym stopniu
  • clear – opływanie z lewej i prawej zostaje w tym przypadku wyłączone, tekst opływa dany element od góry i dołu

Wszystkie wartości zostały świetnie przedstawione w formie obrazków na stronie: https://docs.webplatform.org/wiki/css/properties/wrap-flow

Wyrównanie do siatki

Z kolejnym nowym modelem radzi sobie na razie w zasadzie jedynie przeglądarka ze stacji Microsoft: http://caniuse.com/#feat=css-grid Jest to jednak jeden z elementów egzaminu 70-480, więc na pewno się temu przyjrzeć. Chodzi mianowicie o budowanie layoutu strony w oparciu o tak zwany model grid, czyli siatkę elementów.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/5093r9uf/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Pamiętajcie, że przykład powyżej działa w zasadzie jedynie w przeglądarce IE10+.

Po pierwsze dla kontenera container z elementami blokowymi box ustawiona została własność position: -ms-grid. Powoduje to włączenie layoutu siatki, dla wszystkich elementów blokowych wewnątrz elementu. Kolejną rzeczą jest definicja ilości kolumn oraz wierszy na naszej siatce. Posłużyły do tego dwie własności: -ms-grid-columns oraz -ms-grid-rows. Następnie każdemu elementowi ustawiona została konkretna pozycja na siatce za pomocą własności: -ms-grid-column-ms-grid-row.

Definiowanie ilości kolumn oraz wierszy, a także ich rozmiarów możliwe jest poprzez nadanie własnościom: -ms-grid-columns-ms-grid-rows wartosci:

  • px, em, % – standardowe jednostki
  • auto – wartość ustalana automatycznie na podstawie rozmiarów elementów rozmieszczonych na siatce
  • min-content – najmniejszy rozmiar wśród elementów
  • max-content – największy rozmiar wśród elementów
  • minmax(a, b) – zakres spomiędzy którego ma być ustalony rozmiar komórek na siatce
  • frakcje – jednostki części [fr]
[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/5093r9uf/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W powyższym przykładzie widzimy rozciąganie elementów na wiele kolumn i wierszy przy pomocy -ms-grid-column-span oraz -ms-grid-row-span. I tak:

  • element 1 został rozciągnięty na dwa wiersze
  • element 2 został rozciągnięty zarówno na dwa wiersze, jak i dwie kolumny
  • element 3 został rozciągnięty na dwie kolumny

Siatka pozwala także wyrównywać elementy znajdujące się w jej polach. Służą do tego kolejne dwie własności: -ms-grid-column-align oraz -ms-grid-row-align.

Po raz kolejny możemy się z tym zaznajomić na demo od Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_grid.htm

Budowanie układu przy użyciu regionów

CSS3 wprowadza jeszcze jeden sposób na układ naszej strony / aplikacji. Są to regiony, które rozmieszone mogą być po całym dokumencie, a z opcją współdzielenia tekstu pozwalają tworzyć ciekawe i zarazem niestandardowe układy, które często widzimy choćby w gazetach.

Pełna specyfikacja regionów znajduje się oczywiście na stronie konsorcjum W3C: http://dev.w3.org/csswg/css-regions-1/

Przyznam się, że nigdy nie miałem okazji korzystać z tej własności. Nie spotkałem się także z pytaniem na egzaminie, które dotyczyło tego tematu i wydaje mi się, że jest on dość mocno pomijany w materiałach przygotowujących. Materiały W3C pokazują temat w bardzo obszerny sposób, a do tego odsyłam Was znów do demo od Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_regions.htm

Roundup #9 – gridster, Avgrund Modal, Sequence, BigScreen, D3 Charts, Toast, SlabText

Roundup #9 - gridster, Avgrund Modal, Sequence, D3 Charts, Toast, SlabText

gridster

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better.

gridster.js – a jQuery plugin for building intuitive draggable layouts


Avgrund Modal

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

Avgrund Modal


Sequence

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!

Sequence.js – The jQuery slider plugin with infinite style


BigScreen

BigScreen makes it easy to use full screen on your site or in your app. It smoothes out browser inconsistencies and bugs, especially if the element you’re working with is inside of an <iframe>. It will also intelligently fall back to the older video full screen API if the element contains a <video> and the older API is available.

Full Screen Mode for Images & Videos in Web Apps


D3 Charts

In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data.

MULTIPLE AREA CHARTS WITH D3.JS


Toast

Toast is a CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Toast – A simple responsive CSS framework


SlabText

SlabText is a jQuery plugin for producing big, bold and responsive headlines. Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space.

jQuery Plugin for Producing Bold Responsive Headlines


[1], [2], [3], [4]