Share
960gs was geweldig! Toen de meerderheid van de bezoekers van uw site desktops gebruikte met monitoren van minstens 1024 pixels, maakte 960gs het doodeenvoudig om een site in code te ontwerpen. Met de komst van apparaatproliferatie en prevalentie van mediaquery's zijn sites met een vaste breedte beslist minder effectief dan responsieve lay-outs.
In dit document zal ik beschrijven hoe u uw website met een vaste breedte van 960gs kunt nemen en deze naar het ZURB Foundation-raamwerk kunt verplaatsen. Zonder al te veel uit te vallen, wil ik eerlijk zijn voor 960gs en adapt.js noemen, de reactie van dat framework op responsief webdesign. Dit artikel behandelt nu de basis van het Foundation-raster, hoe het zich verhoudt tot het raster van 960gs en enkele extra opties met Sass van Foundation. Voor deze tutorial neem ik aan dat je al bekend bent met 960gs en dat je Foundation ziet als een manier om een responsief ontwerp te bereiken.
Om te beginnen, moet u de basisbegrippen van rijen en kolommen in Foundation begrijpen. De conventie van 960gs was om één mega-container te gebruiken en te vertrouwen op elke combinatie van DIV's om een rij te maken. Zoals zo:
Je hebt misschien een gegooid tussen grid DIV's die optellen tot 12, maar dat is optioneel. Deze lay-out zou in feite twee rijen produceren met twee kolommen die de beschikbare breedte gelijkelijk verdelen. Als je toevoegt alpha en omega klassen, het zal respectievelijk de extra strippen -Marge en margin-right.
In de voorgedefinieerde HTML-klassen van de Foundation zou dezelfde lay-out worden bereikt door het volgende fragment:
Er is geen mega-container voor Foundation, in plaats daarvan zijn rijen en rijen kolommen en kolommen moeten in totaal 12. Elke kolom wordt gedefinieerd door de toevoeging van de kolommen klas vergezeld van minstens één klas om de breedte van die kolom te dicteren.
Om een korte raaklijn te gebruiken, voor wat het waard is, is het raster van de Foundation vergelijkbaar met de rijen en overspanningen van Twitter Bootstrap, behalve dat Foundation je de mogelijkheid geeft om kolombreedtes op meerdere onderbrekingspunten te definiëren.
Je zult de notatie opmerken middellange-6. Dat betekent dat bij het middelste breekpunt (hoe dan ook gedefinieerd, de standaardwaarde is 641px), u zes kolommen van de breedte of de helft van de beschikbare breedte zult zien. Een andere klasse kan worden toegevoegd om aan te geven hoeveel kolommen de breedte van de kolommen waard zijn div moet opnemen tegen andere breekpunten, inclusief klein en groot. Hier is hoe dat eruit zou zien:
Stichting is mobile-first. Codeer eerst voor kleine schermen en grotere apparaten nemen die stijlen over. Aanpassen voor grotere schermen als dat nodig is. bron
Standaard is Foundation ontworpen in een mobiel eerste concept. Wat dit voor roosters betekent, is dat het klein klasse kan alleen worden gebruikt om de breedte van een kolom bij het kleine breekpunt te definiëren en alle breekpunten hierboven zullen daarvan erven zolang een medium of groot klas is niet aanwezig. Aan de andere kant, als je gewoon een medium klasse, dan zal de standaard lay-out voor een klein breekpunt de DIV's transformeren in gestapelde rijen met één kolom (gelijk aan small-12), de standaardwaarde die wordt toegepast op kolommen in het kleine onderbrekingspunt.
Met dat alles in gedachten, is de basis voor het wijzigen van uw markup als volgt: Ten eerste, de div met de houder klas kan worden verwijderd. Vervolgens rond je grid_ # DIV's die 'rijen' vormen, moet u een maken div met de klas rij. De afzonderlijke DIV's bevatten rooster klassen kunnen worden gewijzigd in medium-#.
Dit geeft je iets dat heel veel lijkt op je oude 960gs-lay-out voor viewports boven 640 pixels en onder die breedte, je hebt gewoon rijen van volledige breedte, wat betekent dat elke kolom div zal veranderen in 100% breedte.
Hier zijn enkele andere 960gs-concepten die zijn vertaald in Foundation-spraakgebruik:
In 960gs kan het nesten worden bereikt door het toe te voegen alpha naar de eerste kolom in je rij en omega naar je laatste, effectief verwijderen van horizontale marges. Wanneer u deze methode gebruikt, moesten uw geneste rijen een som zijn van de breedte van de kolom waarin de geneste kolommen zich bevonden.
In Foundation wordt nesten voor u gedaan, u hoeft slechts één rij in een kolom in te voegen. Geen extra klassen vereist. Het andere grote verschil is dat elke nestrij een nieuwe 12 kolommen aanneemt binnen de beschikbare nestruimte. Dus een rij binnen een middellange-6 zal je toestaan om die zes kolommen in 12 te verdelen.
De prefix- en suffixklassen van 960gs waren uitstekende utiliteitsklassen om lege ruimte in uw lay-out te creëren en een middel om te centreren. Foundation heeft dezelfde mogelijkheden, met offsets.
Dit is eigenlijk vrijwel hetzelfde in beide kaders. Met bronbestellingen kunt u uw kolommen in elke gewenste volgorde in uw eigen HTML maken, maar deze in een andere volgorde van links naar rechts weergeven. Hiervoor kunt u gebruiken Duwen en Trekken klassen.
Foundation dekt alle mogelijkheden van 960gs en nog veel meer. Raadpleeg de documentatie voor meer informatie over al het andere dat het kan doen.
Welnu, dit is de belangrijkste reden dat je je in iets als Stichting beweegt: het reactievermogen. Je weet van groot, medium en klein breekpunten, maar er zijn ook xlarge en XXLarge. Dit is wat deze onderbrekingsklassen hebben met betrekking tot:
| Breekpunt | Breedte weergave |
|---|---|
| klein | < 40em (640px) |
| medium | 40.063em (641px) < 64em (1024px) |
| groot | 64.063em (1025px) < 90em (1440px) |
| xlarge | 90.063em (1441px)> 120em (1920px) |
| XXLarge | > 120.063em (1921px) |
Merk op dat alleen de klein, medium en groot breekpunten kunnen in uw HTML worden gebruikt. Als je moet gebruiken xlarge of XXLarge, of u wilt deze breekpunten aanpassen, u kunt werken met Sass gebruiken om Foundation aan te passen aan uw behoeften.
Foundation is gebouwd om te werken met Compass en Sass. Als Sass iets is dat u prettig vindt, kan het de ontwikkeling vergemakkelijken, lees meer over de slag aan de slag met Sass en Foundation.
De belangrijkste pro voor het gebruik van Sass is dat in plaats van het toevoegen van Foundation-specifieke klassen aan uw HTML, u Foundation-kenmerken kunt uitbreiden op basis van bestaande markup. Bijvoorbeeld dat bestaande div met de klas nieuws kan worden gemaakt om a na te bootsen grid-6 kolommen div.
Hier is een volledig voorbeeld van hoe dit eruit zou kunnen zien, laten we zeggen dat u deze HTML heeft:
Om een verdeling van 50/50 te bereiken .nieuws en .events, je Sass ziet er als volgt uit:
.main @ include grid-row; .news @ include grid-column (6); .events @ include grid-colmn (6);
Dit is het equivalent van het wijzigen van de markup in dit:
Als u andere onderbrekingspunten in uw SCSS wilt opnemen, gebruikt u deze techniek alleen:
.main @ include grid-row; .news @ include grid-column (8); @media # $ groot-up grid-column (6) .events @ include grid-colmn (4); @media # $ grote-up grid-column (6)
Dat is hetzelfde als:
De SCSS-techniek is leuk omdat het je klassen overzichtelijk houdt in je HTML en je meer semantisch kunt zijn.
Er is nog een belangrijk punt om over deze methode te begrijpen. Als u uw CSS compileert naar een apart, extra stylesheet, maar u wilt gebruik maken van de Foundation mixins, je zult moeten importeren wat je nodig hebt, maar voorkom het dupliceren van Foundation-stijlen. Om te voorkomen dat overbodige stijlen aan uw uitvoer-CSS worden toegevoegd, moet u de $ Omvatten html-klassen variabel als vals, hier is hoe het eruit ziet:
@import "stichting / instellingen"; $ include-html-classes: false; @import "foundation";
Merk op dat de paden kunnen verschillen op basis van uw eigen instellingen. Hiermee kun je alle mixins, functies en instellingen in Foundation gebruiken, zonder alle CSS te hoeven dupliceren. Dit is handig als u de Foundation CSS al opneemt op de pagina waaraan u werkt. Deze methode kan bijvoorbeeld worden gebruikt als een plaats om al uw overrides op te slaan voor een speciale pagina of subset van pagina's.
Dit is nog maar het topje van de ijsberg: Foundation en Sass hebben beide veel meer te bieden en beide hebben grote volgers van ontwikkelaars die ze steeds geavanceerder en beter maken..
Accentsconagua