Który jest dla mnie odpowiedni? 22 Responsive Ramy CSS i Boilerplates Poradnik
Frameworki CSS istnieją już od lat, ale pojawienie się responsywnych praktyk projektowych sprawiło, że wiele naszych starych ulubionych programów było bezużytecznych. Na szczęście wielu naprawdę utalentowanych programistów włączyło się, aby wypełnić lukę w nowej generacji platform i szablonów CSS.
Jest już mnóstwo takich rzeczy. Każdy ma listę, ale tak naprawdę nikt nie poprowadzi cię przez to, jak różni się każdy szkielet i płyta podstawowa od następnej, abyś mógł podjąć świadomą decyzję. To dzisiaj nasz cel. Śledź, co sprawia, że każda z 22 responsywnych ram CSS i szablonów jest wyjątkowa.
Gumby
Platforma Gumby wykorzystuje siatkę 960, którą wszyscy obcinaliśmy zęby przed laty i wprowadza ją do nowoczesnej ery projektowania stron internetowych z wyczuciem. Ma również gotowe style dla formularzy, przycisków, przełączników, menu rozwijanych, kart i innych.
System siatki semantycznej
Jeśli nie znosisz systemów gridowych i ich nadęty, semantyczny znaczników, ten jest dla Ciebie. Semantic Grid System wykorzystuje moc preprocesorów CSS (LESS, Sass i Stylus), aby tworzyć konfigurowalne zmienne dla rzeczy takich jak rynna i szerokość kolumny. Wszystko, co musisz zrobić, to użyć kilku gotowych miksów w swoim CSS, bez dodatkowych znaczników!
Bez siatki
Gridless jest potężnym boilerplate który używa mobilnego pierwszy projekt reaguje internetowej, aby dostosować się do szerokości urządzenia. Jest również pełen wspaniałych funkcji, takich jak normalizacja CSS, poprawki błędów IE i style typografii.
Bezszkieletowy
Bezramowe jest trudne do sklasyfikowania, ponieważ jest technicznie bardziej zalecanym sposobem podejścia do responsywnego projektu niż faktyczny zestaw plików, które można pobrać. Istnieją trzy kroki: Najpierw utwórz regularną siatkę o stałej szerokości, następnie powtórz ją w nieskończoność i zakończ, wyśrodkowując ją w rzutni.
Witryna wyraźnie stwierdza, że Frameless nie jest ramą i że nie ma plików do pobrania, ale pomimo tego twierdzenia istnieją w rzeczywistości podstawowe szablony, które pomogą Ci zacząć.
Siatki proporcjonalne
Proporcjonalne siatki rozwiązują niektóre duże problemy, które pojawiają się przy próbie responsywnego układu CSS, a mianowicie zagnieżdżanie siatek i walka z wartościami opartymi na procentach w bardzo różnych rzutniach.
Proportional Grids wykorzystuje CSS do wymiarowania pudełek, aby stworzyć rozwiązanie, które pozwala na stałe rynny (ems / rems) zmieszane z płynnymi kolumnami. Odległość między kolumnami pozostanie równa w każdym punkcie przerwania w stosunku do podstawowego rozmiaru czcionki. Kolumny są zdefiniowane proporcjonalnie, np. Połowa, jedna trzecia, dwie trzecie i mogą być łatwo ponownie użyte tyle razy, ile chcesz, nawet po zagnieżdżeniu.
Podejście Goldilocks
Podejście Goldilocks ma na celu zmniejszenie skłonności reagujących projektów do skłaniania się do obsługi określonych urządzeń. Zamiast tego dąży do uniwersalnego projektu, który nie zależy od żadnego urządzenia.
Podejście Goldilocks wykorzystuje kombinację ems, maksymalnej szerokości, zapytań o media i translacji wzorców, aby uwzględnić trzy stany, które pozwalają twoim projektom być niezależnym od rozdzielczości.
Bootstrap na Twitterze
Twitter Bootstrap nie wymaga przedstawiania. Jest to jeden z największych, najgorszych kotłów CSS w sieci i jest punktem wyjścia dla niezliczonych profesjonalnych i osobistych witryn deweloperów z całego świata.
Twitter Bootstrap zawiera responsywny system siatki oprócz mnóstwa gwiezdnych, wstępnie stylizowanych elementów, takich jak formularze, przyciski, menu nawigacyjne i inne. Sprawdź naszą pełną wprowadzenie tutaj.
Fundacja ZURB
Fundacja jest najważniejszym konkurentem Twitter Bootstrap, ponieważ oba projekty są bardzo podobne. Podobnie jak Bootstrap, Foundation zapewnia responsywną siatkę, a także różne elementy interfejsu użytkownika w stylu.
Niedawno uruchomiono Foundation 3, więc jeśli od jakiegoś czasu nie przyjrzałeś się projektowi, czas się zatrzymać i sprawdzić. To ręce w dół jednej z najbardziej przydatnych i dokładnych ram, które znajdą Państwo w dowolnym miejscu.
Szkielet
Szkielet był jednym z najwcześniej reagujących bojlerów, który pojawił się i nadal jest jednym z najlepszych. Pod względem koncepcyjnym jest trochę podobny do Fundacji, ale wydaje się lżejszy (typ, przyciski i formularze są jedynymi elementami interfejsu użytkownika w zestawie).
Zapoznaj się z naszym samouczkiem Szkielet, aby zobaczyć, jak niezwykle łatwe jest to narzędzie, dzięki któremu można szybko i szybko uruchomić responsywny projekt.
Amazium
Amazium jest bardzo podobne do Gumby powyżej pod tym względem, że jest responsywną siatką zbudowaną na starych technikach 960 siatek. Ostatnio jednak ramy zostały zaktualizowane i rozciągają się do 1200 pikseli, dzięki czemu można korzystać z dużych wyświetlaczy. Obejmuje nawet obsługę wyświetlaczy siatkówki!
System Golden Grid
System Golden Grid nazywa się „składaną siatką”, co jest naprawdę tylko fantazyjnym sposobem stwierdzenia, że zapytania o media są używane do zwinięcia pierwotnego układu szesnastu kolumn w osiem, a następnie cztery kolumny w miarę zawężania się widoku.
Podobnie jak niektóre inne siatki, które widzieliśmy do tej pory, Golden Grid System wykorzystuje rynny oparte na ems, dzięki czemu rynny zawsze pozostają proporcjonalne do zawartości.
System siatki CSS 1140px
Ten jest dość standardowym systemem gridowym, który nie wymaga niczego szczególnego. Zaczyna się od 12-kolumnowej siatki płynów, która wykorzystuje rynny oparte na procentach i działa świetnie na monitorach 1280 i 1140px. W miarę zmniejszania się obszaru wyświetlania do przepuszczania zawartości używa się kilku prostych zapytań o media.
StackLayout
StackLayout jest dla rebeliantów, będzie bardzo różnił się od innych struktur, które wypróbowałeś. W rzeczywistości, to wstał z niechęcią typowych ram układu CSS.
Podstawową zasadą tutaj działającą jest to, że StackLayout wykorzystuje blok wbudowany jako kamień węgielny unikalnego systemu układu. System jest trochę dziwaczny, ale mimo to imponujący. Sprawdź przewodnik tutaj.
SimpleGrid
SimpleGrid to kolejny unikalny system układ, że będziesz cieszyć się, jeśli lubisz gry z tych rzeczy tak samo jak ja. Siatka opiera się na czterech różnych zakresach ekranów: ekrany o szerokości mniejszej niż 720px, ekrany o szerokości większej niż 720px, ekrany o szerokości większej niż 985px i ekrany o szerokości większej niż 1235px.
Aby wdrożyć system, korzystasz z klas „slotowych” z układu czterech i sześciu kolumn. Brzmi skomplikowanie, ale w rzeczywistości jest zgodne z nazwą i dość proste do wdrożenia.
Płynna siatka bazowa
Płynna siatka linii bazowej została zbudowana z dużym naciskiem na silną typografię, która jest zgodna z siatką linii bazowej. Zawiera również składaną trzykolumnową siatkę, która ma być pomocnym punktem wyjścia, a nie standardem, którego należy przestrzegać.
Columnal
Columnal to rodzaj hybrydowego systemu siatki, który pożycza najlepsze elementy z różnych innych ram. Ma elastyczny DNA 1140px CSS Grid System z wrzuconymi około 960 gs. To dość standardowe rzeczy, ale jeśli inne nie wydają się dobrze dopasowane, możesz spróbować.
Inuit.css
Inuit.css to świetny framework, który jest zbudowany z myślą o rozszerzalności. Użyj niestandardowego narzędzia do tworzenia siatek, aby utworzyć własną elastyczną siatkę, a następnie pobierz niektóre igloo (wtyczki), aby rozszerzyć platformę w użyteczny sposób.
320 i więcej
320 i Up jest jak zbiór buzzów związanych z projektowaniem stron internetowych (w dobrym tego słowa znaczeniu). Zawiera responsywny układ układu, który wykorzystuje mentalność „najpierw mobilna”, wraz ze stylami wizualnymi Bootstrap, ikonami Awesome czcionki, Modernizrem, Selectivizrem, LESS i Sass. To imponujący zestaw narzędzi, które, jak sądzę, będą ci się spodobać.
Susy: Responsive grids for Compass
Ten jest dla super-nerdów takich jak ja, którzy uwielbiają systemy układów, a także Sass i Compass. Budować układy w ciągu kilku minut z magią wstawek i zmiennych.
Biorąc pod uwagę, że Compass niedawno zrezygnował z natywnej obsługi sieci, Susy powinna być przydatna dla tych, którzy za nimi tęsknią.
Initializr - responsywny szablon HTML5
Initializr to narzędzie, które pomaga szybko i łatwo uruchamiać projekty HTML5 za pomocą HTML5 Boilerplate, Bootstrap lub nowego responsive bojlera.
Wybór responsywnego szablonu to dopiero początek. Stamtąd możesz skompilować własne pobieranie, wybierając spośród wszystkich zasobów, których zwykle możesz potrzebować, takich jak Modernizator i MNIEJ.
Gotowa jeszcze innego telefonu
YAMB to świetny punkt wyjścia dla twoich responsywnych projektów internetowych, oparty na kilku kluczowych funkcjach: responsywnej płynnej siatce, rozwijanych menu nawigacyjnych, które automatycznie zmieniają się w pola wyboru na małych ekranach oraz responsywne obrazy / pokazy slajdów.
Myślę, że strona internetowa jest dość brzydka, ale sam zestaw narzędzi jest całkiem przydatny!
Wirefy
Wirefy został opracowany specjalnie z myślą o szybkim i szybkim przeprowadzaniu eksperymentów w dziedzinie wireframe Wykorzystuje zmodyfikowaną wersję szesnastokolumnowej siatki 960 wraz z niektórymi elementami interfejsu użytkownika przypominającymi Bootstrap (menu, formularze, pokazy slajdów, przyciski, obrazy itp.).
Który jest twoim ulubionym?
Tego rodzaju posty nieuchronnie przyciągną uwagę komentatorów, którzy odczuwają potrzebę zdyskredytowania całego pojęcia użycia dowolnego szablonu lub systemu gridowego do projektowania stron internetowych. Po prostu nie są dla wszystkich i szanuję twoją opinię, jeśli nie możesz ich znieść.
Jeśli jednak interesują Cię systemy gridowe, chciałbym usłyszeć Twoją opinię na temat powyższych opcji. Które wypróbowałeś i co o nich myślisz? Który jest twoim ulubionym?
