Vi starter alle et sted. Som ny designer kunne jeg ikke have passet mindre om strukturen i mine designs. Jeg ville åbne Photoshop og skubbe pixler rundt, indtil jeg lavede noget, som jeg troede, var cool. Som jeg lærte at kode, var min proces ligeledes tilfældig.
Jeg ser ikke tilbage på gamle dage med for meget kærlighed. Mit arbejde var sjusket og ufokuseret. Jeg havde ingen klare mål. Som en begyndelse antager jeg, at det ikke er så slemt, i betragtning af at det meste af min designuddannelse kom fra Photoshop-undervisningssider, mit arbejde var ikke forfærdeligt.
Men så lærte jeg om nettet systemer. Jeg glemmer, nøjagtigt hvornår og hvordan de blev populært brugt i webdesign, men pludselig gik alle webdesign-relaterede websteder, jeg gik til, sammen med artikler om 960.gs eller noget andet gittersystem. Betydningen af at give en konsistent visuel struktur i vores layout blev understreget af alle de store navne og blev til en tendens.
Lige så hurtigt blev trenden en industristandard, og nu tænker de fleste af os ikke to gange om, hvorvidt vi skal implementere et gittersystem. Det eneste spørgsmål er, hvilken? Vil vi gå med en af de store navne eller en mindre kendt variant, eller endda lave vores egne?
I denne artikel vil jeg gerne se på den anden mulighed: nye og mindre kendte net systemer. Der er altid nogen derude, der kommer op på nye måder at løse de forskellige problemer med layout, og jeg synes, det er vigtigt at være bekendt med så mange tilgange som muligt, så lad os se på nogle grundlæggende gridrammer.
34Grid handler om lige kolonnefordeling. Det kan rumme ulige distributioner også, men det er ikke det primære formål med dette net system. For de af jer, der ønsker at dele de fleste eller alle dine sider i vandret lige dele, er dette din ramme.
Hvordan det virker
Rammen er designet til at kunne tilpasses til dine behov, så du ikke bare downloade og gå. Du skal først konfigurere dit net på projektets hjemmeside først. En hurtig formular giver dig mulighed for at bestemme, hvor mange kolonner der passer til hinanden, hvor store dine margener vil være, og om CSS3-overgange skal overføres til dine kolonner eller ej, når din visningsport ændrer størrelse.
Koden i sig er opdelt i to CSS-filer: en med basekoden og en med alle medieforespørgsler. CSS klasserne er enkle. Hvis du bruger '.col_1' til en kolonne, udfyldes rækken til 100%. '.col_2' vil oprette en kolonne med en bredde på 50% og så videre.
Derudover ændres img-elementer, objekter og nogle andre automatisk. Der er en ekstra klasse til at hjælpe videobåndene opfører sig. Projektets hjemmeside giver råd om, hvordan man får Facebook og Twitter embeds til at spille godt.
Ulemper
Der ser ikke ud til at være nogen måde at nekke kolonner på eller skabe mere komplekse kolonneordninger inde i en enkelt række. På den anden side, hvis du ikke har brug for kompleksitet, og du bare vil have en enkel ramme, som du kan justere, når du har brug for det, vil 34Grid gøre jobbet.
Simple Grid er en lydhør indstilling, der maksimerer ud i en bredde på 1140 pixels. Med andre ord, mens det er designet til at lege godt med tabletter og telefoner, sikrer Simple Grid, at større skærme ikke er udeladt.
Hvordan det virker
Som navnet ville betyde, er dette net system ret let. Det hele kommer i en fire kilobyte ukomprimeret CSS-fil.
Klassenavne er designet til let at forstå: '.col-2-6' vil opdele rækken i seks kolonner og definere kolonnebredden til to kolonner bredt. Hver række kan opdeles i en kolonne, '.col-1-1' eller to, tre, fire osv. Helt op til tolv.
Ulemper
Ligesom 34Grid ser der ikke ud til at være nogen bestemmelse til nestekolonner. På samme måde håndteres margenerne for første og sidste kolonne, hvilket kan medføre vanskeligheder, når man f.eks. Opretter et fotogalleri.
Denne er til enhver, der foretrækker et simpelt gitter med plain-engelsk klassenavne. Det er lydhurt, nemt forstået og hurtigt implementeret.
Hvordan det virker
Når dine sædvanlige'container 'og'grid'-elementer er sat på plads, implementeres kolonnerne på gammeldags måde. En klasse ('.unit') bruges til at definere de generelle attributter for en kolonne, og en anden klasse bruges til at definere bredden. Rækker kan opdeles i 2-5 kolonner, og klassenavnene ser alle ud som sådan: '.on-of-three, .two-of-three'.
Også inkluderet er nogle grundlæggende typografiske stilarter.
Ulemper
Endnu en gang er dette en netramme beregnet til ukomplicerede layouter, så ingen bestemmelse for indlejrede kolonner. Der er også kun ét brudpunkt, der er sat til en visningsbredde på 650 pixels, så nogle af dine kolonner kan for tidligt ende med at blive ret bred.
Matt (AKA Boon ) er lidt som mig. Han elsker design, men elsker ikke matematik helt lige så meget. Som et resultat, hans Proportional Grids synes at gøre væk med endeløse beregninger så meget som muligt afhængigt af box-sizing ejendom. Resultatet er et komplet, men stadig ret let, grid system, der dækker dine baser for responsivt layout.
Hvordan det virker
Når jeg siger, at dette system afhænger af box-sizing , Jeg mener, at kolonner får procentvise bredder uden at regne med tagrender. Fastbredde gutters er defineret af padding ; og box-sizing sørger for, at kolonnerne spiller godt sammen.
Gutterbredder og de fleste andre målinger er defineret med "ems". Tro mod navnet på dette net er kolonneklasserne proportional (dvs. .col-one-third , .col-two-thirds ), og kolonner er mere eller mindre uendeligt nestable, hvilket er noget, jeg kan lide meget.
Klasser er inkluderet for at ændre søjledimensioner på tre forskellige brudpunkter. Medieforespørgslen selv er struktureret i "mobile først" mode, i overensstemmelse med standardpraksis.
Der er et separat stylesheet til Internet Explorer 8 og ældre. Da IE8 ikke understøtter medieforespørgsler, og versioner, der er ældre end det, ikke understøtter box-sizing , de er forsynet med en fast bredde layout.
Også inkluderet er SASS (både .sass og .scss) filer til hurtig og nem tilpasning af gittersystemet.
Ulemper
Jeg ville ikke have noget imod at have nogle flere kolonnebredder at arbejde med (femte, sjette, ottende). Ellers er dette et stort set fejlfrit og velafrundet net system.
Af de avancerede net systemer på denne liste, En% er den enkleste, men det er på ingen måde ufuldstændig. Den er designet til at rumme lidt større skærme og store UI-elementer, hvis dens hjemmeside er nogen indikation.
Navnet stammer fra det faktum, at rutenettet og kolonnebredden er beregnet således, at den altid svarer til 99%, i stedet for 100%. Dette eliminerer behovet for nogle af de mere komplekse gentagende decimaler og nummerrunding, som browsere ofte bliver tvunget til at gøre.
Hvordan det virker
Gitteret er opdelt i de klassiske tolv søjler. Klasserne er enkle ( .onerow , .col1 , .col6 ), og jeg kan godt lide at du for det meste kun bruger en klasse pr. kolonne.
To brudpunkter er som standard inkluderet: 768 pixels og 1024 pixels. Hvis jeg er ærlig, synes den første en smule ... stor ... men du kan altid tilføje et andet brudpunkt, hvis du har brug for en. Der er også to eksemplarer på desktop layout bredde: 1000 pixels og 1200 pixels.
På projektets startside kan du downloade Photoshop-actionfiler og PSD'er, der er egnet til at mocke dine layouter med dette netværkssystem.
Ulemper
Mine to store problemer her er de sædvanlige. Først: ingen nesting kolonner. Nestende søjler er gode mennesker! Andet: Den sidste kolonne i hver række skal have .last klasse anvendt til det.
En CSS gridramme med tværbrowser, der ikke skjuler pixler i margener! Det er taglinen for Flurid, og en hurtig gennemgang til dokumentationen vil fortælle dig hvorfor: Flurids skaber virkelig ikke vil have dit layout at bryde. Nogensinde.
Her er sagen, på grund af den måde, sub-pixelrunding fungerer, vil en browser til tider sige "skrue den" og sætte den sidste kolonne i rækken et sted, det skal ikke gå. Flurid er bygget til stabilitet, så dit layout altid vil virke, selv på ældre versioner af IE. (Kompatibilitet er angivet som IE5 +.)
Hvordan det virker
Flurid har alle de funktioner, du har brug for: regelmæssige kolonner, blandede kolonner, indlejrede søjler og skiftede søjler. Listen over mulige kolonnebredder og klasser er omfattende og forholdsbaseret, så du vil gerne give dig tid til at blive fortrolig med dem.
Nogen retfærdig komplet dokumentation leveres via GitHub, samt et jQuery-plugin, der tilføjer ekstra funktioner-ja det kommer med sin egen jQuery-plugin, som giver lige højde kolonner og kan sætte vekslende klasser på dine kolonner til din styling fornøjelse.
Ulemper
Det er så beskidt .last klasse igen. Stadig, ifølge dokumentationen, er der en god grund til det denne gang.