Hoe complexe lay-outs te bouwen met behulp van CSS

Lay-out voor het web is altijd beperkt geweest, er is echt nooit iets gewijd geweest om inhoud eenvoudig te laten zien in een formaat dat logisch is.

Terug in de jaren '90 toen het web voor het eerst in de wacht nam, vonden ontwerpers die gewend waren om inhoud op een raster te leggen, de enige manier om hetzelfde resultaat in de browser te krijgen, was om de tabel te gebruiken. Het samenvoegen van cellen leidden tot complex Website-lay-outs , maar dit speelde ravage met toegankelijkheid en SEO. Snel vooruit en vandaag zijn er allebei manieren om inhoud te plaatsen met drijvers, flexibele dozen enzovoort.

CSS3 heeft echt de capaciteiten van het web vooruit geduwd en sinds 2014 is er geweest CSS GRID-indeling ​Dit heeft momenteel 75 procent browserondersteuning, dus het komt op het punt wanneer het tijd is om het serieuze overweging te geven. Zurb's Foundation 6 Framework is aan boord en gebruikt dat om het raster van stroom te voorzien.

Deze tutorial zal zich richten op het creëren van een functie-stijl-stijl die u zal laten zien hoe te perfectioneren Responsive Web Design voor middelgrote en kleine schermmaten.

Download de tutorial-bestanden hier

01. Ga aan de slag

Open het bestand 'Grid1.html' van de startmap in de Projectbestanden ​De HTML-lay-out hiervoor heeft vijf div-tags, eenvoudig genoemd item1-5 als CSS-klassen. Dit zijn de inhoud die in het raster wordt geplaatst. De verpakking van de container Dit zal het raster definiëren, dat vier kolommen heeft.

 & lt; div class = "container" & GT;
  & lt; div class = "item1" & gt; item 1 & lt; / div & gt;
  & lt; div class = "item2" & gt; item 2 & lt; / div & gt;
  & lt; div class = "item3" & gt; item 3 & lt; / div & gt;
  & lt; div class = "item4" & gt; item 4 & lt; / div & gt;
  & lt; div class = "item5" & gt; item 5 & lt; / div & gt;
& lt; / div & gt; 

02. Controleer CSS voor het raster

Kijkend in het hoofdgedeelte U kunt zien dat de 'container' is verteld dat het wordt aangelegd als een raster, met automatische hoogte voor de rijen, terwijl de kolommen moeten worden ingesteld op vier met elk ingesteld op 25 procent van de browser . Controleer dit in de browser en u zult zien dat elk item automatisch de volgende beschikbare rasterpositie wordt toegewezen.

 .Container {
  Weergave: raster;
  Rasterjabloon-rijen: Auto;
  Rasterjabloon-kolommen: herhaling (4, 25%); } 

03. Definieer rasterposities

Bekijk nu het bestand 'GRID2.HTML'. Het is hetzelfde als het eerste bestand, behalve 'item1' en 'item2' krijgen specifieke posities. De eerste is in rij 1 en eindigt vóór de rij 2. De kolom begint bij 1 en eindigt op 3, zodat deze twee kolommen overspant. De tweede start bij kolom 3 en neemt de volgende twee kolommen. De resterende items vullen de volgende beschikbare rasterslots.

 .item1 {
  GRID-rij-start: 1;
  rasterrij-einde: 2;
  Rasterkolom-start: 1;
  rasterkolom-end: 3;
​
.item2 {
  GRID-rij-start: 1;
  rasterrij-einde: 2;
  rasterkolom-start: 3;
  rasterkolom-end: 5;
} 

04. Gebruik een rastjabloon

Open 'GRID3.HTML' en kijk naar het lichaam van de HTML. Je zult zien dat er een lay-out is met een header, zijbalk, hoofdinhoudssectie en een voettekst. U kunt meer tekst toevoegen aan de inhoud om te zien wat er gebeurt wanneer dit is geplaatst. Het raster gebruikt een sjabloonfunctie om deze secties in een lay-out te maken.

 & lt; div class = "container" & GT;
  & LT; DIV-klasse = "Header" & GT; Header & LT; / DIV & GT;
  & LT; DIV-klasse = "zijbalk" & GT; zijbalk & lt; / div & gt;
  & LT; DIV-klasse = "Inhoud" & GT; Inhoud & LT; / DIV & GT;
  & LT; DIV-klasse = "Footer" & GT; Footer & LT; / DIV & GT;
& lt; / div & gt; 

05. Definieer de sjabloon

Kijk naar de CSS voor de container. Het wordt opnieuw gedefinieerd als een raster. De bovenste rij zal 200px hoog zijn, het midden wordt automatisch formaat en de laatste rij zal 100px hoog zijn. De kolommen zijn ingesteld op 33 procent wijd en om de rest te automatiseren. De sjabloon stelt de koptekst beide kolommen in. De volgende rij is de zijbalk in de eerste kolom en de inhoud in de volgende. De voettekst gaat beide over.

 .Container {
  Weergave: raster;
  Rasterjabloon-rijen: 200px Auto 100px;
  Rasterjabloon-kolommen: 33% automatisch;
  Rasterjabloongebieden:
  "Header header"
  "Sidebar-inhoud"
  "Footer Footer"; } 

06. Link de sjabloon aan de klas

Om de klasse naar de sjabloon te koppelen, definieert de hier weergegeven code dit. Elk roostergebied is genoemd en de link is gemaakt. De inhoud wordt hier niet weergegeven, maar het zit in het document 'GRID3.HTML'. Kijk hierop in de browser om de lay-out van het rooster te zien. Omdat twee kolommen worden gedefinieerd, heeft de sjabloon twee gebieden nodig in elk van de omgekeerde komma's.

 .Heater {
  Rastergebied: header;
​
.erkant {
  Rasterruimte: zijbalk;
​
.footer {
  Rastergebied: voettekst; } 

07. Maak het reagerend

Om 'GRID3.html' responsive te maken, wordt een mediacy-query ingevoegd en wordt de bovenste rij op 200 procent gehouden, terwijl de resterende rijen automatisch worden afgebeeld. Er is slechts één kolom, de volledige breedte, dus de sjabloon heeft één woord in elke omgekeerde komma om de lay-out te definiëren. Deze kunnen eenvoudig opnieuw worden gerangeerd zonder een van de HTML te verschuiven.

 @media-scherm en (max-breedte: 699px) {
  .container {
  Weergave: raster;
  Rasterjabloon-rijen: 200px Auto;
  Rasterjabloon-kolommen: 100%;
  Rasterjabloongebieden: "Header" "Sidebar" "Inhoud" "Footer";
  ​
} 

08. Werk aan een echte lay-out

Open nu 'Index.html' - alle HTML voor de inhoud is al gemaakt, net als een deel van de CSS voor de ontwerpelementen. Voeg dit raster toe aan de stijl-tags in het hoofdgedeelte. Als u dit doet, creëert een drie-kolomraster met de sjabloon voor elke sectie. Let op de full-stop voor de lege roostersecties.

 .Container1 {
  Breedte: 80%;
  Marge: 0 Auto;
  Weergave: raster;
  Rasterjabloon-rijen: Auto;
  Rasterjabloon-kolommen: 33,3% 33,3% Auto;
  Rasterjabloongebieden: "Header header header" ". StandFIRST StandFIRST" ".. Artikel1" "FOCUS PLEKPUNT PRULKET" "" Artikel 2 Artikel 2. ";
} 

09. De sjabloon koppelen

Net als bij de vorige stap verbindt dit de koptekst met de sjabloon. De koptekst wordt verteld om alle drie de kolommen van het rooster te overspannen, dan is de standFIRST ingesteld om twee kolommen te nemen en een lege kolom aan de linkerkant te hebben. Als u de browser controleert, is die kolom ingevuld omdat de resterende inhoud de volgende beschikbare ruimte wordt gebruikt - het zal dit niet doen wanneer het allemaal is opgezet.

 .Heater {
  Rastergebied: header;
​
.standfirst {
  Rastergebied: standfirst;
} 

10. Voeg de volgende gebieden toe

Nu zijn het eerste artikel, de trekofferte en het focusafbeelding in het ontwerp geplaatst. De pull-citaat en het beeld bevinden zich naast elkaar op dezelfde rij. In dit stadium is artikel 2 niet geplaatst, dus het neemt de eerste beschikbare ruimte op het raster die naast de standFIRST staat.

 .ARTICLE1 {
  Rasterruimte: artikel1;
​
.pullquote {
  Rastergebied: Pullquote;
​
.focus {
  Rastergebied: focus;
  Tekst-Uitlijnen: Centrum; } 

11. Voltooi het eerste raster

Door de CSS van het tweede artikel toe te voegen, kunt u al het eerste raster correct worden geplaatst. Kijken naar dit in de browser zal laten zien dat de lay-out werkt met de achtergrondafbeelding en creëert het soort lay-out gezien in tijdschriften, waar de ontwerper rond een grote achtergrondafbeelding werkt.

 .ARTICLE2 {
    Rastergebied: artikel 2;
    kolomkloof: 65px;
    Column-Count: 2;
} 

12. Voeg een witte achtergrond toe

Voordat u het tweede raster start, kunt u zich afvragen waarom er een behoefte is aan twee rasters. De reden is dat dit raster een witte volledige breedte achtergrond zal hebben, dus deze CSS zal het tweede raster wikkelen. Dit is om dit gedeelte het gevoel van een tweede pagina in het ontwerp te geven.

 .whiteBG {
    Vulling: 100px 0;
    Achtergrondkleur: #ddd;
} 

13. Maak een tweede raster

Het tweede raster is eenvoudiger dan de eerste. Er zijn drie kolommen, met een automatische hoogte op de rijen. De inhoud gaat een kolom invullen, zodat het niet nodig is om de sjabloongebieden te definiëren. Wanneer het tabletontwerp echter wordt toegevoegd, moet dit overschakelen naar twee kolommen, dus een reflow is vereist en de namen zullen belangrijk zijn.

 .Container2 {
    Breedte: 80%;
    Marge: 0 Auto;
    Weergave: raster;
    Rasterjabloon-rijen: Auto;
    Rasterjabloon-kolommen: 33,3% 33,3% Auto;
    Rasterjabloongebieden: "IMG1 IMG2 Artikel3";
} 

14. Voeg de kolommen toe

Elk van de CSS-klassen in het tweede raster wordt verteld om met de relevante kolom te koppelen, zoals gedefinieerd in de rastjabloon. De tekstkleur van het artikel wordt gewijzigd om te laten opvallen tegen de lichtere achtergrond van deze sectie. Met alleen de voettekst om te voltooien, is het ontwerp van de lay-out van de tijdschriften bijna op zijn plaats.

 .IMG1 {
  Rastergebied: IMG1;
​
.img2 {
    Rastergebied: IMG2;
​
.article3 {
  Rasterruimte: artikel3;
  Kleur: # 333;
} 

15. Perfecteer de voet van de pagina

Het afmaken van de pagina zal een volledige breedte div over het scherm plaatsen, dat wordt gevuld met een zwarte kleur en de tekst is gewoon gecentreerd. Hiermee wordt de desktopversie van het ontwerp voltooid, maar verplaatst u het scherm naar beneden onder 1200px breed en de site begint te breken.

. Footer {
    achtergrondkleur: # 000;
    Kleur: # 999;
    Tekst-Uitlijnen: Centrum;
    Vulling: 50px 20px 100px;
} 

16. Aanpassen voor ontwerp van middelgrote scherm

Hier wordt een mediaquery ingevoegd om voor het ontwerp te zorgen wanneer de breedte van de browser minder is dan 1200 px. De code voor stappen 17 en 18 wordt in de beugels geplaatst waar de opmerking is. Dit is een geval van het wijzigen van beide lay-outstructuur van het roosters.

 @media-scherm en (max-breedte: 1200px) {
  / * -code hier * /
} 

17. Ontwikkel het eerste raster

Het eerste raster is ingesteld om nu de volledige breedte van de browser te vullen met slechts twee kolommen in plaats van drie. De volgorde van de secties wordt in de sjabloon geplaatst, waarbij de artikelen schakelzijden, omdat dit in deze schermgrootte beter past bij de achtergrondafbeelding.

 .Container1 {
  Breedte: 100%;
  Rasterjabloon-rijen: Auto;
  Rasterjabloon-kolommen: 50% 50%;
  Rasterjabloongebieden: "Header header" "StandFirst StandFirst" "Artikel1." "Pullquote Pullquote" "Artikel 2 Focus";
  ​
.article2 {
  Kolomcellen: 1;
  } 

18. Test je lay-out

Het tweede rooster wordt ook aangepast om de volledige breedte van de browser en twee kolommen aan te nemen. De afbeeldingen worden naast de rij naast de knop boven de tekst geplaatst, zodat deze netjes op het display past. U kunt deze lay-out in de browser testen door uw browser onder de 1200px-breedte te wijzigen.

 .Container2 {
  Breedte: 100%;
  Marge: 0 Auto;
  Rasterjabloon-rijen: Auto;
  Rasterjabloon-kolommen: 50% 50%;
  Rasterjabloongebieden: "IMG1 IMG2" "Artikel3 Artikel3";
} 

19. Tweak ontwerp voor mobiel

Elke browser met een breedte van minder dan 769px krijgt de code die wordt toegevoegd in de laatste stappen. Alles wat we hier moeten doen, is ervoor dat elk van de roosters een enkele kolomlay-out heeft, zodat de inhoud correct in de kleinere ruimte kan worden bekeken.

 @media-scherm en (max-breedte: 768px) {
  / * Laatste stappencode hier * /
} 

20. Controleer een enkel kolomrooster

Nu wordt het eerste raster ingesteld op een enkele kolom van 100 procent van de breedte van de browser en wordt de volgorde van de secties toegevoegd in de sjabloongebieden. Controleer om te zien hoe het eerste deel van de pagina op mobiele schermen werkt.

 .Container1 {
  Breedte: 100%;
  Rasterjabloon-rijen: Auto;
  Rasterjabloon-kolommen: 100%;
  Rasterjabloongebieden: "Header" "StandFirst" "Artikel1" "Pullquote" "Focus" "Artikel 2";
} 

21. Maak de lay-out af

Hier wordt ook het tweede raster gemaakt om een ​​enkele kolom te vullen en de lay-out van secties is gedefinieerd. Sla nu het voltooide ontwerp op en bekijk deze op verschillende schermen om de volledige lay-outcapaciteit van het CSS-raster te zien en hoe gemakkelijk het was om de inhoud voor verschillende breedtes gewoon opnieuw te ordenen.

 .Container2 {
  Breedte: 100%;
  Marge: 0 Auto;
  Rasterjabloon-rijen: Auto;
  Rasterjabloon-kolommen: 100%;
  Rasterjabloongebieden: "IMG1" "IMG2" "Artikel3";
} 

Dit artikel is oorspronkelijk gepubliceerd in Creative Web Design Magazine Web Designer. Kopen uitgave 271 of inschrijven ​

Gerelateerde artikelen:

• 5 tips voor supersnelle CSS
• Informatie over het CSS-scherm onroerend goed
• Hoe een piramide-lay-out te maken met CSS-vormen