[HTML|JS|CSS] CSS3: Flexbox

Layout w HTML + CSS zawsze był problemem. W ostatnim czasie coraz więcej przeglądarek wspiera nowe rozwiązanie dotyczące layoutów - flexboxy. Problem jest prosty: mamy kontener i chcemy w nim rozmieścić elementy.

<div id="flexbox1">
 <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Korzystając z propercji display ustawionej na flex oraz ustawiając na kontenerze flex-direction na jedną z możliwych opcji, możemy uzyskać następujące efekty:

.flexbox {
    display: flex;
    flex-direction:row;
    border: 1px solid black;
    margin-top: 10px;
    min-height: 15px;
    width: 200px;    
}

Domyślnie kontener ustawi nam się na 100% szerokości. Modyfikować możemy też style w elementach kontenera. Mamy do dyspozycji propercje order oraz flex-grow.

Jeśli chodzi o sam kontener, to pozostałymi ciekawymi opcjami są flex-wrap oraz justify-content.

[HTML|JS|CSS] Compass : Sprites

Projektując strony internetowe mamy często do czynienia ze sporą ilością małych obrazków, będących np. zawartością kontrolek, służących do nawigacji itd. Aby nie ładować przy każdym odświeżeniu strony wszystkich obrazków, możemy skorzystać z tzw. sprite'ów. Wszystkie obrazki danego typu zostaną połączone w jeden, zatem potrzebne będzie jedna operacja pobierania, a dodatkowo utworzone zostaną style z background image dla każdego z obrazków.

Na przykład, mając w folderze arrows obrazki arr1.png, arr2.png, arr3.png, arr4.png możemy utworzyć dla nich sprite'y.

W pliku scss.

@import "arrows/*.png";
@include all-arrows-sprites;

Resztą zajmie się Compass. Po transformacji:

.arrows-sprite, .arrows-arr1, .arrows-arr2, .arrows-arr3, .arrows-arr4 {
  background: url('/images/arrows-sfa8d0f7a28.png') no-repeat;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr1 {
  background-position: 0 -64px;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr2 {
  background-position: 0 0;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr3 {
  background-position: 0 -128px;
}

/* line 60, C:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.arrows-arr4 {
  background-position: 0 -192px;
}

Uwaga. Folder arrows powinien znajdować się w folderze z obrazkami (w tym przypadku images). Ścieżka do tego folderu ustawiana jest w pliku Config.rb.

To nie koniec możliwości, możemy ustawić kilka opcji dotyczących składania obrazków w jeden. Opcje te ustawiamy, tworząc odpowiednie zmienne przed instrukcją importowania. Aby ustawić odstępy między obrazkami należy podać:

$arrows-spacing : 30px;

Gdzie arrows to nazwa folderu z obrazkami.
Możemy także wybrać layout obrazków ustawiając zmienną $arows-layout. Obrazki możemy ustawić m.in. pionowo lub diagonalnie. Jest też do dyspozycji layout typu smart, gdzie rozmieszczenie jest dobierane tak, aby zminimalizować ilość miejsca.
Kolejną interesującą opcją jest możliwość podmiany obrazka w momencie najechania myszą. Cała transformacja odbywa się poprzez konwencję. Aby np. dla obrazka o nazwie img1.png dodać jego zamiennik w momencie najechania myszą, wystarczy do tego samego folderu dodać obrazek o nazwie img1_hover.png. Resztą zajmie się Compass.