20 responsywnych i lekkich struktur CSS, które warto wziąć pod uwagę

Korzystanie z wysokiej jakości responsywnego frameworka CSS może dać ci dobry start w każdym projekcie projektowania stron internetowych. Niektóre, takie jak Bootstrap, są nieco nadęte nadmiarem kodu, podczas gdy inne wymagają dość stromej krzywej uczenia się.

Najlepiej byłoby pracować z pakietem, który zapewnia wystarczająco dużo funkcji, aby pomóc Ci w rozpoczęciu pracy, nie obciążając Cię wieloma opcjami, których nie potrzebujesz.

Możesz również polubić te struktury internetowe do projektowania materiałów lub te struktury programistyczne WordPress typu open source.

Mając to na uwadze, oto 20 frameworków CSS, które zapewniają podstawy – bez całej masy.

FICTOAN

FICTOAN ma być świetnym wyborem dla tych, którzy nie są fanami większych, bardziej złożonych frameworków. Charakteryzuje się żywą kolorystyką, niestandardowymi ikonami i mnóstwem lekko stylizowanych elementów projektu.

lawina

Avalanche to framework, który możesz dostosować do swoich potrzeb. Dostępne są pakiety umożliwiające korzystanie z określonych funkcji, takich jak system siatki płynnej, klasy offsetu, pojemniki, odstępy w pionie i inne.

Beauter

Przy kompresji mniejszej niż 5k Beauter z pewnością podejmuje wyzwanie bycia naprawdę lekkim. Nie oznacza to jednak, że nie ma funkcji. Dostajesz podstawy, takie jak responsywna siatka, ale także niektóre dodatki, takie jak przewijanie paralaksy, mody, podpowiedzi i kilka fajnych kontenerów.

Waniliowe Szkielety

Vanilla Framework jest prosty z założenia, dzięki czemu jest świetnym punktem wyjścia dla Twojego projektu. Wiele pojemników i elementów wystroju wygląda świetnie samodzielnie, ale można je również łatwo dostosować do pożądanego wyglądu.

Cirrus.CSS

Cirrus.CSS to skoncentrowany na komponentach i narzędziach framework SCSS przeznaczony do szybkiego prototypowania.

Pół księżyc

Halfmoon to front-end framework z wbudowanym trybem ciemnym i pełną możliwością dostosowania za pomocą zmiennych CSS.

nowy.css

new.css to lekka (~4,5kb) i bezklasowa struktura CSS do tworzenia witryn internetowych tylko w formacie HTML.

Bulma

Oparta na CSS Flexbox, Bulma jest w pełni responsywnym i modułowym frameworkiem, który pozwala używać tylko tego, czego potrzebujesz. Otrzymujesz wszystkie zalety Flexbox, w tym kolumny i kafelki, które automatycznie zmieniają swój rozmiar na podstawie ich liczby i widoku.

Miligram

Miligram waży prawie tyle samo, co jego imiennik – zaledwie 2k po skompresowaniu. Zawiera wszystkie podstawy, których można się spodziewać, i ma na celu zminimalizowanie liczby stylów, które trzeba będzie zresetować.

InvisCss

InvisCss został zbudowany jako alternatywa dla bardziej skomplikowanych frameworków. Pakiet zawiera proste nazwy selektorów CSS i minimalistyczny, ale atrakcyjny interfejs użytkownika.

Wyglądać

Rezultat osobistego projektu, Look został udostępniony publicznie jako minimalistyczny framework CSS, który służył jako podstawowy punkt wyjścia do tworzenia witryny. Elementy projektu są proste i można je dostosować do własnych upodobań.

nieograniczonyGrid

Oparta na Sass, unlimitedGrid to elastyczna, mobilna platforma gridowa. Jest modułowy, więc musisz używać tylko potrzebnych funkcji. Obsługa Flexbox jest wliczona w cenę i istnieje wiele wariantów siatki do wyboru.

Niezbędny

Zapowiadany jako „odwrotne podejście” do większych frameworków, Vital jest zarówno lekki, jak i skalowalny. Zbudowany przy użyciu Sass, znajdziesz wydajny układ siatki, niestandardowe przyciski i programy ładujące. Dostępnych jest również kilka przydatnych stylów układu, takich jak kolaże zdjęć, pojemniki na karty i formularze.

PowerToCSS

Oparty na zasadach SMACSS i DRY, PowerToCSS jest lekkim frameworkiem CSS, który oferuje solidną podstawę do szybkiego rozpoczęcia następnego projektu internetowego.

Kouto Szwajcarski

Kouto Swiss to kompletna struktura CSS dla Stylusa, która zapewnia wiele domieszek, funkcji i narzędzi do szybszego kodowania, a także zawiera moc witryny Caniuse, aby dostosować arkusze stylów do Twoich potrzeb w zakresie kompatybilności.

Tajemniczy CSS

Furtive to platforma mobile-first o bardzo małej powierzchni. Ten framework nie przejmuje się starszymi wersjami przeglądarek, co oznacza, że ​​może używać najnowocześniejszych technologii, takich jak flexbox, SVG i ograniczone prefiksy dostawców. Jest również dostępny w SCSS, CSS i zawiera plik Gulp do dostosowywania kompilacji.

Płyta internetowa

Platforma Webplate zawiera wszystko, od solidnego responsywnego silnika układu, po globalne elementy przycisków, konfigurowalne formularze i obsługę czcionek ikon IcoMoon. Zawiera również domyślnie jQuery, Modernizr i Typeplate.

Płynność

Fluidity jest prawdopodobnie najlżejszym, w pełni responsywnym frameworkiem CSS w historii! HTML jest prawie w 100% responsywny od razu po wyjęciu z pudełka, a 115-bajtowy plik CSS naprawia „prawie” część. Nie może być lżejszy niż to.

Schemat

Zbudowany na LESS, Schema jest responsywnym frontendowym frameworkiem interfejsu użytkownika, który zawiera kompletną kolekcję komponentów CSS (przycisków, rozwijanych menu, formularzy…), aby pomóc Ci szybko rozpocząć pracę.

Szmaragd

Emerald to pragmatyczny, responsywny system siatki w LESS. Jest oparty na elementach blokowych (w przeciwieństwie do pływaków) i jest napisany przy użyciu metodologii OOCSS przy użyciu składni BEM.

Klejnot

Bijou to lekka (<2 kb) responsywna platforma z siatką 10-kolumnową. Jest dostarczany z przyciskami, alertami, tabelami, paskiem nawigacyjnym i oczywiście siatką.

Iskra

Spark to lekka platforma oparta na podejściu mobile-first do projektowania responsywnego. Ramy są wstępnie zbudowane z kilkoma motywami kolorystycznymi, które są wymienne, zarówno w błyszczących, jak i płaskich stylach. Obecnie podstawowymi kolorami są srebrny (domyślnie), niebieski, zielony, pomarańczowy, czerwony, fioletowy, limonkowy i smoczy owoc.

Baza czcionek

typebase.css to minimalny i konfigurowalny szablon typografii CSS. Najważniejszą rzeczą, jaką daje typebase.css, jest wymuszony pionowy rytm na większości ekranów urządzeń, dzięki czemu tekst w kolumnach i długiej kopii nie będzie nierówny. Dostępne są zarówno wersje Less i Sass.

Hoisin

Zbudowany z Sass, Hoisin to prosty responsywny mini framework front-end, który został stworzony jako alternatywa dla bardziej złożonych i rozdętych frameworków front-end. Celowo nie zawiera żadnych komponentów, zamiast tego koncentruje się na zapewnieniu zorganizowanej bazy, z której możesz stworzyć własną bibliotekę.

Śliczne siatki

Cute Grids to przeznaczony dla urządzeń mobilnych, 12-kolumnowy responsywny system siatek, który zrodził się z frustracji dzisiejszych dużych, przebudowanych struktur, które mogą być przesadą w przypadku większości projektów i ograniczać kreatywność projektanta.

Lekki, ale potężny

Celem korzystania z wszelkiego rodzaju ram jest ułatwienie pracy. Więc wchodzenie i konieczność zmiany stylu mnóstwa CSS lub ładowanie wielu skryptów, których nawet nie zamierzasz używać, wydaje się być sprzeczne z całą logiką.

Korzystanie z jednego z bardziej podstawowych frameworków powyżej może szybko rozpocząć pracę bez wszystkich bólów głowy. A ponieważ niektóre z nich stosują podejście modułowe, możesz wybrać tylko te elementy, których potrzebujesz do konkretnego projektu. Tak już lepiej!