Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

13 Frameworków HTML/CSS

Frameworki CSS są podstawą projektów internetowych już od wielu lat. W wieku responsywnych projektów, framework ma jeszcze więcej zalet. Dobrze zbudowany framework CSS lub boilerplate może znacząco przyspieszyć proces tworzenia, pozwoli zaoszczędzić dużo czasu i zagwarantuje nam odpowiednie skalowanie się strony w zależności od tego z jakiego urządzenia korzystamy.

Untitled-3

Mając tak wiele możliwości do wyboru, może być ciężko wybrać odpowiedni framework z którym będziemy pracować. Dlatego postaram się przybliżyć 13 frameworków, żeby pomóc w podjęciu tej decyzji.


1. Bootstrap

1

Bootstrap jest intuicyjnym i mocnym front-endowym frameworkiem, który pomoże w szybszym i łatwiejszym tworzeniu stron. Wykorzystuje 12 kolumnowy responsywny system gridów i daje nam dostęp do wielu składników, stylów i wtyczek JavaScript, stylów linków. Używając Customizera, można dopasować Bootstrapa do własnych potrzeb poprzez regulację wartości, składników, wtyczek JavaScript itd. Można rozszerzyć Boostrapa używając różnych motywów i narzędzi do budowania interface'u.


2. Less Framework

2

Stworzony dla czterech layoutów (default, tablet, mobile i wide mobile), posiada trzy zestawy podstawowych grafik. Less jest responsywnym gridowym systemem CSS do tworzenia responsywnych stron internetowych. Dostajemy domyślny 992px layout i zapytania CSS3 dają nam do dyspozycji layouty „dzieci” w 769, 480 i 320px. Starsze komputery i mobilne przeglądarki korzystają tylko z domyślnego layoutu, może nie jest to idealne jeśli chodzi o dostępność, ale zbędny będzie „IE-proofing” pozostałych layout'ów „dzieci”. Obydwie aplikacje Less.app i CodeKit sprawiają, że korzystanie z Less jest banalnie proste poprzez automatyczne kompilowanie plików .less do standardowego CSS.


3. Foundation

3

Foundation stworzone przez ZURB, jest zaawansowanym, lekkim, responsywnym front-endowym frameworkiem. Bazuje na elastycznej, 12 kolumnowym gridzie, który skaluje się do dowolnego rozmiaru (definiowana poprzez maksymalna szerokość wiersza). To pozwala nam na tworzenie skomplikowanych layoutów bez tworzenia niestandardowych elementów.

Foundation używa „box-sizing: border-box,” po to aby granice i padding nie miały wpływu na ogólną szerokość kolumn, dzięki czemu obliczenia stają się prostsze. Domyślne skoncentrowanie się na mobilnych urządzeniach, sprawia że zawartość jest domyślnie zestackowana. Mamy też dostęp do oddzielnego małego grida ograniczonego do 768px.

Grid może być nieskończenie „nestowany” przesunięciami (do 11) co pozwala na dodatkowy przestrzeń pomiędzy kolumnami i wierszami. Foundation zawiera także dziesiątki elementów i stylów, co przyspiesza proces tworzenia i zapewnia nam sprawne działanie frameworka na każdym urządzeniu.


4. 960 Grid System

4

Wypuszczony na rynek w 2008 roku, 960.gs szybko stał się częstym wyborem, jako że jest idealnie stworzony do szybkiego prototypowania. Wszystkie elementy strony są umieszczane w boxie szerokim nam 960px, który może być podzielony na 12, 16 lub 24 równe kolumny. 10Px margines zostaje umieszczony po prawej i lewej, ze wszystkimi liczbami na podstawie„golden ratio”, co oznacza że nie będziemy mieli problemów z dziwnymi odstępami. Można zmieniać kolejność niezależnie od kolejności w jakiej się one pojawiają w markup'ie poprzez użycie „push” i „pull” klas CSS. To pozwala trzymać ważniejsze info wyżej w HTML.

Zbudowany na 12 kolumnowym płynnym i responsywnym gridzie. Podstawowy template HTML5 da nam możliwość szybkiego startu. Zawiera równie domyślny plik JavaScript z podstawowymi ulepszeniami.


5. Semantic Grid System
Stworzony przez Tylera Tate, który jest autorem 1KB CSS Grid (już nidostępny), Semantic Grid System może mieć zarówno zmienną jaki stałą szerokość. Pozwala na wybór ilości kolumn, ich szerokości oraz szerkości „guttera” i modyfikowanie ich bezpośrednio w arkuszu stylów. Jest on całkowicie semantyczny i responsywny, co oznacza że layout dopasowuje się do ekranu lub urządzenia użytkownika, używając media queries.

Semantic Grid System uniką prezentacyjnych class CSS w markupie HTML, zamiast tego używa LESS do kontroli layout w style sheet'cie. Obsługuje wszystkie aktualne wyszukiwarki oraz IE6 i nowsze.


6. Base

6

Base to super prosty responsywny framework zbudowany do działania na urządzeniach mobilnych., tabletach, netbookach i komputerach stacjonernych. Jest oparty na LESS, silnym Pre-procesorze CSS który pomaga w pisaniu czystrzego, lepiej zorganiozowanego i łatwiejszego do utrzymania w porządku kodu CSS. Posiada podstawowe style dla nagłówków, tabel, formularzy i wielu innych. Najlepiej działa z nowoczesnymi przeglądarkami oraz IE7 i nowsze.


7. Fluid Baseline Grid
Fluid Baseline Grid jest to zestaw opierający się na HTML5 i CSS3, który daje nam fundamenty do szybkiego projektowania stron internetowych. Zbudowany z typograficznymi standardami na uwadze, łączy płynny layout kolumn z podstawowym gridem. Domyślnie zawiera minimalistyczny trzy-kolumnowy składający się grid, który jest podzielony na równe części. Płynność zachęca do używania tego grida na początku a potem zmieniać kolumny według potrzeb projektu. Style CSS skalują się od minimalnych zamiast od maksymalnych, poprzez użycie Media Queries.

Typografia jest dobrze przemyślana, zaprojektowana żeby stworzyć hierarchię, która poprawia gotowość i tworzy harmonię w tekście i całym layoutcie. Kod jest prosty, lekki i łatwy w edycji dla każdego projektu.


8. Skeleton
Skeleton to mały boilerplate przyjazny tworzeniu na urządzenia mobilne. Zbudowany na lekkim 960px gridzie, który elegancko skaluje się do mniejszych ekranów, tabletów, i telefonów komórkowych. Jest to narzędzie przeznaczone do szybkiego tworzenia, posiadające grid o dobrej strukturze, dobrze zorganizowaną strukturę plików i wiele więcej. Posiada jedynie podstawowe style, ale jest w stanie zaadoptować jakikolwiek design lub styl, który sobie zażyczymy. Jego grid jest wariacją znanego nam gridu 960. Większość zapytań mediów jest kierowana na maksymalne i minimalne szerokości, a nie zależnie od rozmiaru urządzenia lub orientacji w jakiej się znajduje, dzięki temu jest on bardziej przyszłościowy.

Typografia Skeletona jest zaprojektowana z naciskiem na podstawowe style – podstawową czcionką jest Helvetica Neue. Jednakże czcionki można z łatwością zmienić. Starsze przeglądarki so obsługiwane przez standardowy grid 960, więc polyfill taki jak Respond.js będzie potrzebny.


9. Gumby Framework
Zbudowany przy pomocy Compass i SASS, Gumby jest responsywnym frameworkiem CSS. Jego podstawą jest hybrydowy grid, który pozwala na tworzenie layoutów poprzez definiowanie z jakiego gridu chcemy skorzystać, gdziekolwiek chcemy na stronie. Wbudowany zestaw interfejsu użytkownika łączy najnowsze trendy i pozwala na wybór i mieszanie prostych design'ów z tymi bardziej zaawansowanymi stylami. Używaj imponujących, zintegrowanych Entypo Icons w każdym projekcie – są niezależne od rozdzielczości.

Jest to w pełni wyposażony framework ze wspaniałym zestawem narzędzi.


10. Responsive Grid System
Nie jest to zupełnie framework, Responsive Grid System oferuje szybki, łatwy i elastyczny sposób na stworzenie responsywnej strony internetowej. Możesz sprecyzować ilość kolumn (do 12), które będą płynne, bez potrzeby na usuwanie offsetów albo tworzenie kolumn bez akapitów. Mobilne wersje gridu są od razu załączone i są bezpośrednio podłączane do istniejącego HTML i CSS. Nie trzeba również komplikować sobie życia matematyką, gdyż Responsive Grid System używa procentów to wyznaczania szerokości kolumn.

Jest łatwy do skonfigurowania: Po prostu wybierz potrzebną Ci liczbę kolumn i wklej je do głównego CSS'a albo dodaj odnośnik w dokumencie „head.”


11. Columnal
Jest to responsywny CSS grid system o szerokości 1140px, jednakże jest on płynny, więc współpracuje z większością przeglądarek. Jest to „remix” cssgrid.net i 960.gs, z wbudowanym debuggowaniem CSS do pokazywania struktury budowanych stron. Daje nam również dostęp do pod kolumn dla dodanych opcji layoutów oraz pionowych odstępów dla class CSS.

Columnal zawiera PDF'a grid'a do tworzenia szkicy i planowania, jak również szkielety templatów do szybkiego tworzenia. Responsywny layout jest obsugiwany Media Queries i większość przeglądarek z IE 6 i 7 degradowanym do 12 kolumn z gridem 984px lub 960px dla wersji szeroko ekranowej.

Obrazy i wideo są zmniejszane, żeby pasowały do ekranu bez potrzeby na definiowanie szerokości i wysokości inline'ów. Strona demo pokazuje responsywny12-kolumnowy grid w akcji.


12. Profound
Profound to responsywny system gridowy dla stałych i płynnych layoutów. Zbudowany w SASS, daje pełną elastyczność i kontrolę. Możesz uczynić grid płynnym i dodać per-media layouty jeśli zaistnieje taka potrzeba, a także zmienić szerokość kolumn i guttera oraz dodać lub usunąć kolumny. Grid utrzymuje markup w formie semantycznej i w przeciwieństwie do innych systemów, płynny layout będzie wyglądał dokładnie tak samo w każdej przeglądarce.

Różnorodność layoutów, które można stworzyć przy pomocy Profound jest niesamowita. Elastyczność to odznaczająca się zaleta Profound.


13. Compass
Compass jest to open-source'owy CSS Authoring Framework, który wykorzystuje Sass, rozbudowany CSS3 do dodawania reguł, zmiennych, wstawek i wielu innych. Generuje dobrze sformatowany CSS i sprawia, że arkusze stylów są łatwiejsze do uporządkowania i utrzymania oraz posiada wzory z których można wielokrotnie korzystać. Jest on device-agnostic i zawiera wspólny kod, który inaczej byłby duplikowany przez inne frameworki i rozszerzenia. Moduł CSS3 zaopatruje nas we wstawki cross-browser dla właściwości CSS które zostały wprowadzone w CSS3, podczas gdy typografia modułu może pomóc w tworzeniu pięknych typograficznych rytmów. Compass zawiera wiele wspólnych wzorów projektów, pozwala to na znacznie przyspieszenie procesu tworzenia.