Arkusze stylu pisuję dość często - taka praca. W sumie nawet to przyjemne. Kłopoty pojawiają się gdy zaglądam po dłużym okresie czasu i dochodzę do wniosku, że jestem zupełnie zagubiony i po prostu dopisuję jakiegoś ida na końcu. I tak się pojawia bałagan. Próbowałem pisać style wieloma metodami, niestety problem w pewnym momencie zawsze się pojawiał, aż do odkrycia CSS Scaffold.

CSS Scaffold, jak opisuje autor, jest CSSowym frameworkiem napisanym w PHP. Tyle, że w przeciwieństwie do innych CSSowych frameworków (960, Blueprint) zmiast ograniczać rozszerza możliwości styli. Brzmi fajnie? Ba - jest fajne, jest po prostu bardzo fajne.

Wymagania i instalacja

Jedyne czego będziemy potrzebować to PHP 5+.

Instalacja może być dla niektórych troszkę upierdliwa. W sumie jednak ogranicza się do pobrania najnowszej wersji ze strony, rozpakowania oraz przekopiowania z archiwum katalogu (katalogu, a nie zawartości) scaffold do katalogu w którym będziemy trzymać arkusze stylu. Czasem(zależne od serwera) trzeba katalogom cache i logs nadać prawa 777.

W praktyce układ katalogów powinien wyglądać następująco:

Osoby które chcą, żeby adresy do CSSów wyglądały normalnie muszą jeszcze w katalogu w którym trzymają CSS utworzyć plik .htaccess a w nim wkleić

Żeby zrobić próbę czy wszystko działa należy w naszym katalogu z CSSami (dla przykładu będzie to katalog css) utworzyć plik test.css a w nim napisać (zagnieżdzenie jest poprawne - dojdziemy do tego):

i wywołać w przeglądarce albo adres_strony/css/scaffold/index.php?f=css/test.css albo, jeżeli użyliśmy regułki w .htaccess, adres_strony/css/test.css. Jeżeli przywita Was komunikat, że nie może znaleźć pliku pomajstrujcie przy ścieżce.

Jeżeli jednak wszystko zadziałało ok to powinniście zobaczyć następujący styl:

Bazując na naszym obrazku i zakładając, że nasz adres to test.pl ścieżką do stylu będzie albo http://test.pl/css/scaffold/index.php?f=css/style.css lub http://test.pl/css/style.css.

Jeżeli wszystko działa na naszej stronie wklejamy:

lub

Jeżeli wolicie możecie użyć ścieżek absolutnych.

Na koniec drobne ale. Jeżeli nie używacie .htaccess i planujecie używać pierwszej wersji to w przypadku gdy nasza strona znajduje się na tym test.pl w katalogu moja_stronka to ścieżka do stylu będzie wyglądać następująco http://test.pl/moja_stronka/css/scaffold/index.php?f=moja_stronka/css/style.css

Zagnieżdżenia

Jak już zauważyliście w poprzednim przykładzie możemy zagnieżdżać kolejne regułki. Dla przykładu kod na listę nieuporządkowaną z linkami i bez kropek.

wypluje to nam oczywiście:

Stałe

To jest jedna z tych funkcji za które bardzo polubiłem CSS Scaffold. Bardzo często się zdarza, że klient sobie wymyśli, że kolor czcionki, który to użyliśmy w wielu miejscach jest jednak do bani i chce inny. Znajdź/zastąp i jedziemy, ale tu mozna prościej. Jeżeli używamy jednego koloru to zdefinijmy go jako stałą i najwyżej poprawiajmy w jednym miejscu.

Wystarczy w naszym CSS napisać:

a następnie gdy chcemy skorzystać:

Mixins

Czasem zamiast jednego koloru byśmy chcieli wstawiać pewne stałe fragmenty kodu. Nic trudnego:

Żeby teraz ten kod wkleić wystarczy do jakiejś naszej regułki dopisać:

W rezultacie otrzymamy:

Prawdziwa siła tkwi jednak w mozliwości parametryzacji. Jeżeli na stronie wszystkie nasze bordery są tego samego stylu i wielkości a tylko kolor się różni to wystarczy nam:

A wywołamy to następująco:

W rezultacie otrzymamy:

Możlwe jest jeszcze ustalenie wartości domyślnej:

Wtedy wywołanie bez parametru spowoduje automatycnze użycie czarnego.

Liczenie

Ta funkcjonalność jest może troszkę mniej szpanerska, ale czasem bardzo przydatna. Jeżeli mamy div o szerokości 100px i zaczynamy dodawać padding to musimy ciągle poprawiać szerokość (width+padding=100). Scaffold policzy to za nas:

Nic nie szkodzi nam na przeszkodzie, żeby użyć w środku stałych, czy użyć parametru.

Jeżeli...

Na koniec jeszcze jedna ciekawa zabawka czyli instrukcja if. Piszemy mixin (jak ktoś ma pomysł na odpowiednik to bardzo zachęcam) o nazwie default_div który ma tam sobie jakieś właściwości oraz parametr round, który przyjmuje true lub false. W zależności od round doklejamy kilka regułek lub nie:

border-radius to już taki gotowy mixin, który zajmuje się zaokrągleniami.

Cache

Kiedy już skończymy tworzenie naszego stylu pozostaje nam włączyć cache (bo po ciągle ma być generowany na nowo ten sam plik) - żeby to zrobić wystarczy otworzyć plik config.php i przestawić define('SCAFFOLD_PRODUCTION',false); na define('SCAFFOLD_PRODUCTION',true);.

Czy to wszystko?

Nie. Oczywiście, że nie. CSS Scaffold posiada także sporo ciekawych opcji a'propos gridów, wiele ciekawych mixinów, flagi, zastępowanie tekstu obrazkami (bardzo fajnie zrobiona funkcja) oraz wiele innych. Do tego mamy jeszcze możliwość dopisywania własnych rzeczy.

Oczywiście trzeba sobie zdawać sprawę, że takie podejście do styli ma swoje wady - każdy nasz plik ze stylem jest obrabiany pzez PHP, wystarczy, że admin nam zrobi prezent w postaci niespodziewanego upgrade'u do wersji w której CSS Scaffold przestanie działać.

Dodatkowo osoba, której przekażemy taką stronę może się zdziwić jak zobaczy co jest w arkuszu.

Zawsze też istnieje możliwość olania projektu przez autora. W obecnej chwili wszystko zdaje się działać stabilnie jednak, jak już wspominałem, przy nowych wersjach PHP teoretycznie mogą się zacząć dziać cuda.

Jest to też pewne dodatkowe obciążenie po stronie serwera, jednak sprawnie działający cache zapewnie rozwiązuje ten problem (przyznaję, iż nie testowałem na stronie o dużym ruchu).

Mimo wszystko polecam spróbować - dla mnie jest to ogromne ułatwienia.