dzięki współpracy z zestawami interfejsu użytkownika możesz zaoszczędzić mnóstwo czasu. Najpopularniejszy jest Bootstrap, chociaż zdecydowanie zbyt wiele jednorodnych stron opiera się na tym frameworku.

aby dać ci trochę różnorodności, wybrałem najlepsze nowsze frameworki UI open source.

wszystkie te elementy mają swoje unikalne style i różne poziomy wsparcia dla dynamicznych komponentów. Ale jeśli połączysz te frameworki z niektórymi wtyczkami JavaScript, możesz zbudować prawie wszystko.

Możesz również polubić: 20 responsywnych& lekkie frameworki CSS dla szybkiego startu.

UIKit

UIKit framework jest lekki, łatwy do dostosowania i łatwy do dołączenia. Jest to struktura modułowa, w której tworzysz elementy strony z klasami wielokrotnego użytku.

jest idealny do strukturyzowania nowej strony bez konieczności kodowania własnej siatki lub rolowania własnych stosów czcionek. Ten framework zawiera nawet unikalny zestaw ikon, które możesz dodać do swojej strony za pomocą czcionki internetowej.

z UIKit możesz uruchomić Sass lub Less wraz z dowolnym menedżerem pakietów(Zwykle npm).

Plus dzięki ogromnej liście komponentów możesz osadzić wszystko, od pól przesyłania po bułkę tartą i wiele więcej.

Fundacja

Biblioteka Fundacji Zurb jest tam z Bootstrap Twittera. Ale wydaje się, że Fundacja zyskuje mniej uwagi ze względu na mniej stylizowany interfejs.

dzięki Foundation masz dostęp do niestandardowych elementów interfejsu, komponentów i domyślnej siatki. Wszystko, czego potrzebujesz, aby zbudować świetną nakładkę, znajdziesz w Bibliotece Fundacji.

zajrzyj na ich stronę prezentacyjną, jeśli chcesz dowiedzieć się więcej. Zawiera kilka ogromnych witryn działających w Fundacji z niestandardowymi siatkami, funkcjami responsywnymi, w zasadzie wszystko, czego potrzebujesz w nowym projekcie internetowym.

miligram

minimalistyczne podejście do rozwoju frontend sprawdź miligram. Ta otwarta biblioteka CSS jest bardzo mała i zawiera kilka naprawdę prostych funkcji interfejsu.

działa poprzez Bower, Yarn i npm, dzięki czemu może pasować do dowolnego przepływu pracy zarządzania pakietami.

jedynym problemem jest to, że miligram wymaga biblioteki Normalize, więc musisz dodać ją do swojej strony. Ale jeśli masz narzędzie do minifigurowania CSS, możesz łatwo połączyć obie biblioteki razem i zredukować żądania HTTP.

One-Nexus

oto nowsza biblioteka frontend, która oferuje całkiem szalone Moduły.

framework One-Nexus jest ogromny. Obsługuje projektowanie responsywne & urządzeń dotykowych, działa na Sass i współpracuje z automatycznymi narzędziami do budowania. Uważam jednak, że jest to jedna z bardziej złożonych ram na początek.

Jeśli znasz już frameworki i linię poleceń, One-Nexus jest naprawdę niesamowity. Ma tyle modułów, że kręci ci się w głowie!

ale może zająć trochę czasu przyzwyczajenie się do konfiguracji& poprawne skonfigurowanie początkowego układu.

Semantic UI

Jeśli szukasz przetestowanego frameworku, sprawdź Semantic UI. Jest to piękna biblioteka frontend obecnie w wersji 2.2 z mnóstwem funkcji.

uważam Semantic za nieznany Bootstrap do tworzenia frontendu. Nie jest tak popularny wśród mainstreamowych programistów, ale ma te same zalety co Bootstrap.

Biblioteka semantyczna zawiera przyciski, karty, rozwijane listy, wszystko, czego potrzebujesz. Plus oferuje proste debugowanie i kilka niesamowitych motywów, dzięki czemu możesz dostosować swój układ od samego początku.

czysty CSS

użyłem czystego CSS na kilku małych projektach i naprawdę mi się to podoba. Jest to jedna z najfajniejszych frameworków, ponieważ pozwala dostosować pliki do dowolnej funkcji.

Więcej informacji znajdziesz na stronie pierwsze kroki, która zawiera linki do pobierania oraz kilka przewodników po instalacji.

zwróć uwagę, że estetyka Pure jest bardzo minimalistyczna, ale nie zbyt prosta. Naśladują trochę Bootstrap wraz z kilkoma wskazówkami z projektu materiałowego Google. Zabawna biblioteka do wykorzystania w każdym projekcie, zarówno osobistym, jak i komercyjnym.

Ink Interface Kit

dzięki Ink Interface Kit możesz zbudować niesamowite responsywne strony. Będą one wyglądać prosto i postępować zgodnie z bardzo prostym formatem kodu, ale zwykle tego chcesz w ramach frontendu.

Ink ma nawet własną bibliotekę JS, którą można uruchomić na vanilla JS. To zajmie trochę regulacji, jeśli nigdy wcześniej nie używałeś tuszu. Jest to jednak ogromna biblioteka porównywalna do jQuery w składni.

to działa na Sass, działa z semantycznym HTML i czuje się jak każdy świetny Framework frontendowy.

GroundworkCSS

jeszcze nie zrobiłem wiele testów na GroundworkCSS, ale jest to jeden mocny responsywny framework.

obecnie w wersji 2.x możesz pobrać całą bibliotekę Groundwork w dwóch stylach: podstawowy HTML / CSS / JS lub w szablonie dla Ruby on Rails.

oba działają tak samo i zapewniają solidny system frontend do kodowania użytecznych stron.

sprawdź ich układ demonstracyjny, aby dowiedzieć się, jak to będzie wyglądać w Twojej witrynie.

css

odkąd Google ogłosiło Przejście W kierunku projektowania materiałów, stał się jednym z największych języków projektowania interfejsu użytkownika. I chociaż został pierwotnie zbudowany na Androida, znalazł się w sieci dzięki wielu frameworkom, takim jak Zmaterializuj klonowanie stylu.

cały framework działa zgodnie z oczekiwaniami: w pełni responsywny, zgodny ze standardami i obsługuje niestandardowe resety dla wszystkich przeglądarek.

jedyną różnicą jest to, że domyślne elementy przyjmują styl projektowania materiału.

i chociaż jest to prawdopodobnie mój ulubiony materiał dostępny, możesz przeglądać inne, aby zobaczyć, co jeszcze przyciąga wzrok.

Topcoat

jeśli chodzi o wydajność, nie można pominąć jakości kodu. Topcoat bierze to do serca jako ramy z myślą o wydajności.

jest w pełni tematyczny i bardzo łatwy do dostosowania za pomocą łatwego do odczytania HTML i CSS. Wszelkie wprowadzone zmiany będą zgodne z przejrzystą strukturą z konwencjami nazewnictwa bem dla CSS.

prawdziwą korzyścią z nawierzchni jest testowanie obciążenia i skupienie się na wydajności. Każdy, kto potrzebuje niestandardowego układu, który szybko się ładuje, powinien przyjrzeć się lakierowi Nawierzchniowemu.

Petal

Petal jest jednym z najnowszych frameworków CSS na rynku. Ponownie jest w pełni responsywny, 100% open source i może pomieścić dowolny inny główny framework z tej listy.

ale jest dość mały i tak ma zostać. Jest oparty na preprocesorze less CSS i wymaga normalizacji.

ostatecznie jest to super mały framework, który powinien przemawiać do mniej programistów CSS. Możesz zapoznać się z dokumentami online, aby znaleźć fragmenty kodu i przykłady elementów strony na żywo.