Share
In deze tutorial gaan we een eenvoudig, responsief rastersysteem bouwen met behulp van CSS. Zodra we bekend zijn met hoe het werkt, verbeteren we het met Sass en leren we onderweg enkele essentiële Sass-functies.
Laten we snel kijken hoe ons rastersysteem eruit zal zien. Er zijn slimmere manieren om rasters te bouwen, die minder opdringerig zijn aan de benodigde markup, maar dit raster geeft ons een geweldige mogelijkheid om eenvoudige maar bruikbare Sass-technieken te oefenen. Het gebruikt één wrapping-element, en vervolgens andere elementen binnen die als rijen werken, en vervolgens meer elementen dan die elementen die als onze kolommen fungeren.
Een beetje trippy, maar je krijgt het idee ... Om te beginnen is alles wat we nodig hebben een CSS-bestand, dus open een nieuw document in je code-editor en noem het "grid.css".
Het eerste dat we gaan toevoegen is een algemene reset- en box-sizing-regel. Dit zorgt ervoor dat de opvulling toegepast op onze elementen wordt toegevoegd binnen hun berekende dimensies, waardoor we veel meer vrijheid hebben voor het definiëren van kolombreedten.
*, *: after, *: before margin: 0; opvulling: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
Vervolgens voegen we een regel toe om te zorgen dat alle gebruikte afbeeldingen vloeiend werken.
img width: auto; max. breedte: 100%; hoogte: auto! belangrijk;
Nu enkele regels om ervoor te zorgen dat ons wrapper-element zich gedraagt.
.wrapper breedte: 100%; marge: 0 auto;
Notitie: Houd in gedachten dat we eerst mobiel werken. Onze container begint bij een viewport-breedte van 100%, maar dat veranderen we voor grotere schermen.
Al onze rijelementen bevatten de kolommen en zorgen ervoor dat groepen kolommen elkaar goed opruimen. Laten we wat algemeen toevoegen .Clearfix regels voor onze wikkel- en rij-elementen.
.wrapper: after, .row: after content: ""; weergave: tafel; beiden opschonen;
Notitie: We hoeven deze elementen niet te noemen .wikkel, .rij en .kolom, we kunnen veel creatiever zijn dan dat. Deze namen zijn gewoon heel duidelijk voor deze tutorial.
We gaan een reeks kolomklassen hebben, afhankelijk van de grootte van elke kolom (bijvoorbeeld .kolom 1 en .kolom 6. Laten we een attribuutselector gebruiken om al deze in één keer te richten en te stijlen.
[class * = 'column-'] float: left; opvulling: 1em; breedte: 100%; min-hoogte: 1px;
Deze selector zegt; neem een element waarvan de klasse de tekenreeks bevat kolom- en pas de volgende stijlen toe. Daarom zweven al onze kolomelementen naar links, hebben een opvulling van 1em (dit vormt onze rugmarge en enige verticale ruimte) en vult 100% van de breedte van de viewport (opnieuw werken we hier eerst mobiel). Ten slotte, de minimale hoogte: 1 px zorgt ervoor dat de kolom juist wordt weergegeven, zelfs als deze geen inhoud bevat.
Geloof het of niet, we hebben nu zelf een rooster! De volgende markeringen zijn alles wat we nodig hebben.
We kunnen elke combinatie van kolommen binnen rijen gebruiken, bekijk de demo om te zien wat je op dit moment zou moeten hebben.
Deze schermafbeelding toont meerdere kolommen meer dan in het bovenstaande fragment Dat is onze mobiele weergave waarvoor gezorgd is, laten we nu een mediaquery toevoegen om ons een andere lay-out te geven voor grotere schermen. U moet breekpunten voor uw eigen raster bepalen, maar we gaan één willekeurig breekpunt van gebruiken 30em.
@media alleen scherm en (min-breedte: 30em)
Alle stijlen die we in deze mediaquery plaatsen, worden van kracht op schermen van 30em en groter. We gebruiken dit punt om onze kolommen op te splitsen in juiste breedten.
Hoe breed moet elke kolom zijn? Dat hangt af van het aantal kolommen dat we hebben. Voor deze demonstratie ga ik werken met twaalf kolommen, dus elke moet precies een twaalfde (1/12) van de verpakking zijn. Voor een kolom die twee breedtes beslaat, zal dit zijn twee twaalfden, enzovoorts. Dit is wat ons dat geeft:
@media only screen en (min-width: 30em) .wrapper width: 95%; max. breedte: 65em; .column-1 width: 8.33333%; .column-2 width: 16.66667%; .column-3 width: 25%; .column-4 width: 33.33333%; .column-5 width: 41.66667%; .column-6 width: 50%; .column-7 width: 58.33333%; .column-8 width: 66.66667%; .column-9 width: 75%; .column-10 width: 83.33333%; .column-11 width: 91.66667%; .column-12 width: 100%;
Je zult ook zien dat we het hebben gemaakt .wikkel element minder dan de volledige breedte van het scherm en kreeg het een Maximale wijdte. Kijk eens wat dat met ons rooster heeft gedaan.
Je zult waarschijnlijk beter passende vulling in je eigen raster willen kiezen Ons CSS-raster werkt, maar wat zou er gebeuren als we eigenlijk zestien kolommen in ons raster wilden? Of nog meer? We zouden elke kolom opnieuw moeten berekenen en deze handmatig in ons CSS-bestand moeten invoeren. Om nog maar te zwijgen over het feit dat onze CSS steeds langer en moeilijker te beheren zou zijn. Gelukkig kan Sass (of een andere preprocessor) ons helpen.
Deze tutorial gaat niet over het opzetten van Sass, het gaat ervan uit dat je al weet hoe je dat moet doen. Als dat niet het geval is en je moet de touwtjes in handen hebben, kijk dan eens naar Mastering Sass: Les 1, of SASS en Compass for Web Designers: Introductie.
Zodra je een Sass-project hebt ingesteld, duik je in de volgende stap.
Sass gaat ons helpen om onze CSS op allerlei manieren op te ruimen, maar het eerste wat we kunnen doen is alle nuttige waarden uitpakken en in variabelen opslaan. Begin met het starten van een nieuwe gedeeltelijk genaamd "_variables.scss"; een Sass-bestand dat niet direct in CSS zal worden gecompileerd, maar in onze andere bestanden zullen we verwijzen.
// grid variables $ grid-columns: 12; $ grid-max-width: 65em; // breekpunten $ breekpunt-klein: "alleen scherm en (min-breedte: 20em)"; $ breekpunt-medium: "alleen scherm en (min-breedte: 30em)";
Deze variabelen geven ons het aantal kolommen waarmee we willen werken; 12 op dit moment, maar kan gemakkelijk worden gewijzigd in 16, misschien 32 (wat je ook echt wilt). We hebben ook enkele onderbrekingspunten in variabelen opgeslagen als tekenreeksen, ook al gebruiken we er momenteel slechts één.
We zullen deze binnenkort gebruiken, maar eerst zullen we enkele mixins instellen.
Sass-mixins zijn stukjes code die we een keer kunnen definiëren en vervolgens elders in ons project kunnen hergebruiken. We kunnen bijvoorbeeld de allereerste reeks regels nemen die we instellen border-box en haal het meeste daarvan uit een mixin. We beginnen met:
*, *: after, *: before margin: 0; opvulling: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
Daarna halen we er een deel uit dat we opnieuw kunnen gebruiken, een mixin definiërend die ik "border-box" heb genoemd, zoals zo:
@mixin border-box -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
Dan gaan we @importeren onze variabelen en mixins in de hoofd "grid.scss", gebruikmakend van de mixin met een @include uitspraak.
@import "variabelen"; @import "mixins"; *, *: after, *: before margin: 0; opvulling: 0; @ include border-box;
We kunnen iets soortgelijks doen met de clearfix-regels, zoals gesuggereerd door Sebastian Ekström. In dit geval nemen we de clearfix-regels aanbevolen door Nicolas Gallagher en voegen ze toe aan ons mixin-bestand met een plaatshouder selector (%):
% clearfix * zoom: 1; &: before, &: after content: ""; weergave: tafel; &: na clear: both;
Met de placeholder-selector kunnen we hele brokken van stijl definiëren die alleen uitvoer krijgen als we ze elders uitbreiden, zoals deze:
.wrapper, .row @extend% clearfix;
Eenmaal gecompileerd ziet dat nette paar regels van Sass er zo uit:
.wrapper, .row * zoom: 1; .wrapper: before, .row: before, .wrapper: after, .row: after content: ""; weergave: tafel; .wrapper: after, .row: after clear: both;
Laten we een paar van die variabelen gebruiken die we hebben opgesteld, nietwaar? Om te beginnen kunnen we de Maximale wijdte waarde op de verpakking. Deze:
.wikkel breedte: 95%; max. breedte: 65em;
wordt dit:
.wikkel breedte: 95%; max-width: $ grid-max-width;
Laten we nu hetzelfde doen met onze media-query. Deze:
@media only screen en (min-width: 30em)
zal worden verbeterd met onze $ Breekpunt-medium variabele:
@media # $ breekpunt-medium
Notitie: je ziet dat we onze variabele hebben ingepakt # . Dit wordt aangeduid als interpolatie. Dit wordt normaal gedaan als we een variabele in een andere moeten uitvoeren, maar in dit geval is het noodzakelijk omdat de Sass-compiler over mediaquery's struikelt als @media wordt niet direct gevolgd door beugels (). Je kunt hier meer over lezen in Hugo Giraudel's Alles wat je ooit moet weten over Sass-interpolatie.
Om onze laatste variabele te gebruiken, $ Rooster-kolommen, we moeten nog wat meer Sass-functionaliteit gebruiken; loops.
Onze kolombreedtedefinities zijn allemaal exact hetzelfde, afgezien van de werkelijke waarden. Het zal veel schoner zijn als we een kolomdefinitie uitvoeren voor zoveel kolommen als we nodig hebben, waarbij we elke keer de waarden veranderen. Om dit te doen kunnen we een Sass gebruiken @voor loop, die er zo uitziet:
@voor $ i van 1 tot 12 // lusinhoud
Dit zal lus over 12 iteraties, en elke keer de waarde van $ i zal die lus weerspiegelen. We kunnen uitvoeren $ i zoals dit:
@voor $ i van 1 tot en met 12 .column - # $ i
Nogmaals, u zult merken dat we gebruiken # in de omgeving van $ i om de waarde als een tekenreeks uit te voeren die we aan de .kolom- selector. Dit geeft ons het volgende bij het compileren:
.kolom-1 .kolom-2 .kolom-3 .kolom-4 .kolom-5 .kolom-6 .kolom-7 .kolom-8 .kolom- 9 .column-10 .column-11 .column-12
Briljant! Laten we nu wat berekeningen gebruiken om de juiste stijlen binnen deze selectors uit te voeren.
Het gaat goed, maar we moeten nu voor elke selector zoiets als het volgende uitvoeren:
.kolom-5 breedte: 41,666667%;
Die kolombreedte wordt berekend als 100% gedeeld door het totale aantal kolommen, vermenigvuldigd met het kolomnummer. In dit geval 100% / 12 * 5 = 41.66667%. Dat is dus de berekening die we moeten toepassen, waarbij de relevante waarden voor variabelen worden uitgeschakeld.
@voor $ i van 1 tot en met 12 .column - # $ i width: 100% / 12 * $ i;
Sass voert nu de berekeningen voor ons uit en geeft ons het volgende:
.kolom-1 breedte: 8,333333%; .column-2 width: 16.66667%; .column-3 width: 25%; .column-4 width: 33.33333%; .column-5 width: 41.66667%; .column-6 width: 50%; .column-7 width: 58.33333%; .column-8 width: 66.66667%; .column-9 width: 75%; .column-10 width: 83.33333%; .column-11 width: 91.66667%; .column-12 width: 100%;
Als laatste stukje opruimen kunnen we de $ Rooster-kolommen variabele, in plaats van de waarde 12:
@voor $ i van 1 tot $ rasterkolommen .column - # $ i width: 100% / $ rasterkolommen * $ i;
Als we nu het aantal kolommen willen wijzigen, veranderen we gewoon de variabele en worden de berekeningen allemaal voor ons gedaan! Bijvoorbeeld veranderen $ Rooster-kolommen naar 4 geef ons de volgende CSS:
@media only screen en (min-width: 30em) .wrapper width: 95%; max. breedte: 65em; .column-1 width: 25%; .column-2 width: 50%; .column-3 width: 75%; .column-4 width: 100%;
Onze laatste grid.scss is een schamele 42 regels code; veel minder dan onze oorspronkelijke CSS.
@import "variabelen"; @import "mixins"; *, *: after, *: before margin: 0; opvulling: 0; @ include border-box; img width: auto; max. breedte: 100%; hoogte: auto! belangrijk; .wrapper width: 100%; marge: 0 auto; .wrapper, .row @extend% clearfix; [class * = 'column-'] float: left; opvulling: 1em; breedte: 100%; min-hoogte: 1px; @media # $ breekpunt-medium . wrapper breedte: 95%; max-width: $ grid-max-width; @voor $ i van 1 tot $ rasterkolommen .column - # $ i width: 100% / $ rasterkolommen * $ i;
Gedurende dit proces hebben we gekeken naar Sass-variabelen, mixins, placeholders, extend, loops, operators en zelfs interpolatie. Dit is een ongelofelijk krachtige reeks functies en een goed begin als je Sass gewoon binnengaat.
Hoe kun je anders het raster verbeteren dat we hebben gebouwd? Wat zou je nog meer toevoegen of zelfs verwijderen? Laat het ons weten in de comments!
Accentsconagua