Top 21 de sisteme și cadre de rețea HTML5 / CSS3

Metodele tradiționale de proiectare în urmă cu doar câțiva ani au însemnat că trebuia să proiectați o pagină de pornire singură, îmbinând cadre de sârmă și cutii de conținut și apoi să sperați la cele mai bune, dar treptat această tehnică a dispărut și metode noi, mai moderne, de dezvoltare rapidă a site-ului web au apărut. În special, CSS3 a introdus Flex-box - o funcție de grilă ușor de utilizat pe care ați putea să o utilizați pentru a crea machete de conținut, dar totuși - unele sunt rezistente, în timp ce altele adoptă abordări și mai complicate pentru o precizie absolută a designului.

Când deschideți un nou site web, de obicei ceea ce veți vedea este partea de antet a site-ului, zona de conținut și o bară laterală - acele zone principale includ, de asemenea, propriile structuri de proiectare și specificații, iar gaura de iepure continuă să devină mai profundă. Este crucial să găsiți o modalitate de a proiecta un aspect al paginii de pornire (sau a oricărei alte pagini) care să arate bine pe toate mediile, dispozitivele și software-ul. Așadar, ne-am gândit că ar putea fi util colegilor noștri dezvoltatori să realizăm o colecție de cadre și sisteme CSS și HTML pentru dezvoltarea aspectelor de grilă.

Vrei mai multe cadre? Încercați celelalte rezumate:

• Cadruri JavaScript
• Cadre HTML5
• Cadre CSS3
• Cadre Node.js

Inutil să spun că aceste modele se pot adapta oricărei situații, astfel încât să vă puteți salva de durerea de cap de a fi nevoit să rezolvați înțelegerile și ciudățenii aspectului de proiectare în sine, și în loc să vă concentrați pe îndeplinirea acelor casete de grilă cu conținutul dorit a pune acolo. Există o mulțime de varietate și stiluri diferite pe care le veți găsi în aceste sisteme de rețea, luați ceva timp pentru a vizita paginile demonstrative și poate chiar să scrieți ceea ce căutați, astfel încât să aveți un timp mai ușor de a găsi cadrul de potrivire pentru nevoile tale.

Dead Simple Grid

Grilele nu ar trebui niciodată să fie complicate, în adevărata lor esență sunt doar elemente HTML care pun împreună un design general, iar Vladimir Agafonkin este unul dintre dezvoltatorii care îmbrățișează acest concept. Cadrul său de rețea Dead Simple Grid vine la numai două sute de octeți de cod CSS; adică o cantitate minimă de cod, paginile dvs. nici măcar nu vor observa că există. Puteți separa grila pentru a include o zonă principală de conținut și o bară laterală flexibilă, dacă doriți. Acest tip de grilă s-ar potrivi blogurilor și aspectelor generale ale paginii de pornire unde este preferat un design minim. Designul receptiv este integrat datorită interogărilor media, astfel încât rețeaua va arăta impecabilă pe orice dispozitiv pe care este utilizat.

Bourbon Neat

Bourbon este o bibliotecă de succes de mixinuri pentru preprocesorul SASS. Acest lucru, desigur, a făcut din Neat o alegere atrăgătoare pentru cei care folosesc deja Bourbon și SASS. Neat oferă dezvoltatorilor acces la un sistem de rețea fluidă, suficient de rapid și ușor de configurat în câteva minute, dar flexibil până la punctul în care modificările și ajustările nelimitate nu ar deveni o problemă.

Grd

Grd este un sistem de rețea CSS care folosește Flexbox ca instrument de backend pentru crearea unor layout-uri flexibile și moderne receptive. Folosind Live Demo puteți juca cu setările și diferite personalizări de proiectare pentru a vedea dacă Grd ar putea rezolva problema dvs. de a integra un anumit element de design în fluxul de lucru existent. Am găsit cu ușurință crearea de anteturi, subsoluri și zone generale de conținut, folosind altceva decât o listă de setări.

STRUCTURA

Structura, care se bazează și pe Flexbox, folosește modele de sintaxă declarative (similare cu cele din Angular.js) pentru a defini secțiunile și parametrii de aspect. Unii dezvoltatori s-au plâns că marcajul final al paginii nu poate fi validat, dar ideea este că folosind Structure puteți crea o grilă declarativă care nu se încurcă cu atributele CSS tradiționale, cum ar fi clasele și numele de identificare.

Sistemul de rețea 960

Sute de mii de site-uri web au folosit sistemul Grid 960 al lui Nathan Smith pentru a-și alimenta aspectul de proiectare. Este un instrument eficient pentru eficientizarea fluxului de lucru al dezvoltatorilor web care lucrează din greu. Prin alegerea a două planuri de coloane diferite (respectiv 12 și 16), dezvoltatorii pot boota rapid o pagină de pornire care să accepte orice tip de intrare dinamică și statică. Este posibil să adăugați mai multe coloane, dar va trebui să lucrați cu documentația pentru a înțelege mai clar utilizarea.

Antisemantic

Unsemantic este versiunea de urmărire a grilei 960 care oferă capacități de proiectare complet receptive. Prin intermediul claselor de extragere unice dezvoltatorii pot rearanja aspectul paginii pe care o produc, ceea ce ar putea ajuta la promovarea și prezentarea celui mai important conținut la un moment dat, o strategie cunoscută pentru a ajuta motoarele de căutare să înțeleagă mai bine scopul fiecărui element de conținut. Unsemantic este, de asemenea, un utilizator mândru al Media Queries, astfel încât dezvoltatorii front-end stabiliți nu vor avea un moment dificil pentru a personaliza acest cadru de rețea pentru propriile nevoi.

Grilă simplă

De aici și numele, Simple Grid este pentru toți cei care urmăresc simplitatea și ușurința de utilizare. Aspectul este receptiv, compatibil cu smartphone-uri, tablete și computere desktop. Cu alte cuvinte, performanța proiectului dvs. va fi de top, fără umbră de îndoială. Este în întregime în ton cu ecrane mari și rezoluții mai mari. De asemenea, Simple Grid este doar o grilă, fără alte active suplimentare, ceea ce o face foarte ușoară. Cu structura convenabilă cu douăsprezece coloane, aveți libertatea de a crea aspectul care este exact pe placul dvs. Îl puteți împărți în două, trei, patru sau șase coloane fără cusur.

csswizardry-grids

Cu o grilă HTML, cum ar fi grilele csswizardry, vă puteți economisi timp și energie. Este un instrument robust pe care îl poți folosi în funcție de conținutul inimii tale. Este foarte ușor de utilizat și ușor de structurat, asigurându-vă că dezvoltatorii web de toate nivelurile beneficiază la maximum de el. În captura de ecran de mai sus, puteți arunca o privire asupra diferitelor variații pe care le acceptă csswizardry-grids. Puteți reordona în mod liber lucrurile, astfel încât să corespundă dorințelor dvs. la un tee. Faceți-vă activitatea evitând să efectuați lucruri de la capăt cu csswizardry-grids acum și începeți cu piciorul drept.

Grilă profundă

Libertatea pe care ți-o oferă Profound Grid merge dincolo de dincolo. Puteți utiliza acest sistem de rețea flexibil și extensibil atât pentru dispuneri fixe, cât și pentru fluide. Rezultatul va funcționa pe toate dispozitivele moderne unt ușor din cutie. Puteți crea structura exactă pe care o doriți schimbând, eliminând sau adăugând coloane după bunul plac. Puteți verifica mai întâi câteva dintre exemple pentru a vedea ce este posibil cu Profound Grid. Mai mult, cu marjele negative la calcularea coloanelor, Profound Grid garantează că aspectele fluide apar la fel indiferent de dimensiunea ecranului și de browserul web.

Tavă

Avantajele utilizării unui sistem de rețea sunt extraordinare, deoarece nu numai că economisiți timp, dar nu trebuie să vă faceți griji cu privire la tehnicități. De exemplu, Griddle asigură compatibilitatea completă cu dispozitivele și browserele web populare. Adică, performanța aplicației dvs. va fi tot timpul de primă clasă. Cu Griddle, puteți aduce la bun sfârșit orice, de la rețele proporționale și cuibărite la unități centrate și hibride. Cât despre acesta din urmă, cu o anumită personalizare, puteți combina unități fixe și fluide într-o singură construcție impresionantă. Aveți control asupra centrării orizontale a unităților și puteți chiar să modificați alinierea verticală.

CSS Smart Grid

CSS Smart Grid respectă cele mai noi tendințe și reglementări pentru a asigura compatibilitatea cu diferite dispozitive. Pe scurt, instrumentul este ușor, receptiv și mobil, mai întâi pentru ca tu să construiești lucruri epice cu el. Fie că folosești un smartphone sau un ecran de desktop mare, CSS Smart Grid se asigură că aspectul funcționează pe ambele fără probleme. Pentru informații, chiar dacă cineva folosește un telefon cu funcții pentru a naviga pe internet, proiectul dvs. bazat pe CSS Smart Grid va funcționa la fel de bine - cu o singură vizualizare pe coloană. Pe site-ul oficial, aveți și o modalitate rapidă, astfel încât să nu vă confruntați cu probleme atunci când utilizați instrumentul.

Gridlex

Gridlex se remarcă datorită designului său stelar și ușurinței de utilizare. Simplitatea acestui cadru de rețea bazat pe Flexbox este uimitoare, viziunea este simplă - înfășurați coloanele în rețea și, dacă este necesar, la orice ajustări suplimentare pentru a face designul final să arate irezistibil. Doar uitându-vă la demonstrațiile site-urilor web care utilizează Gridlex, este evident că acesta este un sistem de rețea de top și nu veți fi dezamăgiți de ceea ce poate face pentru propriile proiecte și fluxul de lucru.

Sistem de rețea receptiv

Sistemul de rețea responsive are multe de făcut, numele de domeniu perfect, o viziune clară și instrumentele necesare pentru a face proiectarea rețelei receptive o briză! Generatorul de rețea oferă o introducere simplă a formularului în care puteți specifica numărul de coloane pe care doriți să le utilizați și marja pe care doriți să o vedeți între ele .. faceți clic pe trimitere și aveți un cod de ieșire gata de pornire a următoarei dvs. structuri de grilă receptivă. Autorul, Graham, este fericit să facă toată munca grea pentru dvs. dacă doriți acest lucru, puteți lua legătura cu el la subsolul paginii.

Gridly

Dezvoltatorii au construit Gridly ca un sistem minimal de aspect al grilei pentru a sprijini cele mai moderne browsere de astăzi. Structura sa ușoară îi ajută pe dezvoltatori să aibă un timp ușor pentru a pune în funcțiune un aspect al grilei / coloanelor, fără prea multe bătăi de cap. În ansamblu, dimensiunea minimă absurdă a acestei biblioteci vă va lăsa să doriți mai multe pentru proiectele viitoare.

Formstone

Formstone nu este un singur sistem de rețea gestionat de la sine, este de fapt o bibliotecă pentru dezvoltatorii front-end care au nevoie de componente și elemente web foarte personalizabile care alcătuiesc o pagină web tradițională pe care o întâlnești zilnic. Fiind o bibliotecă modulară, receptivă și automată - Formstone poate fi utilizat nu numai în scopul scalării unui proiect de site-uri web de mare anvergură, ci și pentru utilizarea în sine a structurii grilei.

Bootstrap

Unde ar fi Bootstrap astăzi dacă nu ar fi fost sistemul de rețea pe care s-a construit orice altceva? Încă așteptăm cu nerăbdare sosirea Bootstrap 4, dar între timp .. nu poți rezista să spui da unui cadru care a reușit să se impună ca unul dintre cele mai proeminente cadre front-end ale acestui secol. Milioane de site-uri web sunt alimentate de caracteristicile Bootstrap, dar niciunul dintre acestea nu ar fi posibil dacă nu ar fi fost cadrul de rețea care vine integrat în nucleul Bootstrap.

fundație

Foundation este o altă bibliotecă front-end de succes care acceptă designul receptiv, cea mai recentă versiune (Foundation 6) aduce la masă funcții și elemente și mai moderne, care pot ajuta dezvoltatorii să ofere clienților lor designuri incredibil de versatile. Șabloanele ușor de utilizat oferite de Fundație vă oferă șansa de a vă odihni de la această dezvoltare a rețelei și, în schimb, de a vă concentra asupra a ceea ce este important - lucrurile pe care le veți pune în interiorul acelei rețele.

Schelet

Scheletul are un design frumos și natural, care vă va lăsa să doriți mai mult. Creatorii au format ideea din spatele Skeleton de a fi cea mai bună alegere pentru proiectele mici. De asemenea, îl puteți utiliza în proiecte în care nu aveți impresia că ar fi adecvat să utilizați un cadru cu drepturi depline. Skeleton vă oferă elementele esențiale de care aveți nevoie pentru a pune în funcțiune un prototip de site web; un aspect de grilă, opțiuni de tipografie pentru titluri și secțiuni, elemente de buton pentru toate nevoile dvs. de formular și, de fapt, formulare personalizate, astfel încât să puteți economisi timp pentru a fi nevoie să vă codificați propriul, o adăugare frumoasă de liste, tabele și sintaxa codului și un suport media interogări, astfel încât proiectele dvs. să devină pe deplin receptive!

Sistem de rețea receptiv 2

Sistemul de rețea Responsive (versiunea 2) este un sistem de rețea primul mobil, de dimensiuni foarte mici, dar foarte eficient în stil. Puteți selecta dintr-o gamă de planuri de coloane (24, 16, 12). De asemenea, puteți personaliza marginile și căptușelile dintre coloane și puteți utiliza polifenituri pentru a crea un aspect de design stelar.

Sistem de rețea receptiv pentru următorul dvs. proiect

Sistemul de rețea Responsive pentru următorul dvs. proiect utilizează aceleași clase ca sistemul de rețea 960. A fost construit pentru a servi mai întâi vizitatorii mobili și oferă o placă pentru gestionarea antetului. Dezvoltatorii au testat-o ​​cu toate browserele moderne, astfel încât să fiți pe mâini bune. Puteți utiliza acest lucru ca un sistem de rețea de bază care vă va ajuta să construiți un design web receptiv. Acest lucru vă va menține competența existentă față de sistemul popular de rețea.

HTML5 Boilerplate

HTML5 Boilerplate este un cadru robust (șablon) pentru dezvoltatorii front-end. Este pentru dezvoltatorii care doresc să-și înceapă proiectul fără a avea probleme cu cadre mai mari, cum ar fi Bootstrap sau Foundation.