Een paar weken geleden de beroemde Funderingskader bracht de vierde versie uit. Als u nog nooit van Stichting gehoord hebt, zullen we u begeleiden bij het gebruik van dit responsieve framework.

Sinds versie 3 van Foundation vanaf de basis is opgebouwd met behulp van SASS - een CSS-pre-processor die helpt bij het schrijven van efficiëntere CSS - is deze nieuwe versie ook mobielvriendelijk en biedt deze een groot aantal functies in het raster dat u niet nodig hebt Het komt niet van andere kaders.

Laten we een duik nemen in Foundation en zien waarom het zo populair is ...

Het rooster

Foundation maakt gebruik van een nestbaar raster met 12 kolommen dat zich aan elk scherm van grootte kan aanpassen, als je al rasters hebt gebruikt, zou dit allemaal heel vertrouwd voor je moeten zijn. Alle divs in Foundation gebruiken box-sizing: border-box, zodat de randen en opvulling geen invloed hebben op de breedte en hoogte van het element, waardoor de wiskunde een beetje eenvoudiger voor ons wordt. Maar het verbazingwekkende aan het Foundation-raster is dat je in feite 2 rasters krijgt, een groot raster voor wanneer het scherm groter is dan 768px in de breedte en een kleiner raster dat je net zo eenvoudig kunt besturen. Daartoe gebruikt Foundation de klassen small- # en large- #, zoals:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

In deze code hebben we een rij gemaakt waarin er 3 divs zijn die exact dezelfde breedte hebben als de browser breder is dan 768px maar wanneer deze kleiner is, zoals je kunt zien aan die kleine klasse in de divs, zal de laatste de helft van de divs innemen scherm terwijl de andere twee elk 25% bezetten, dit geeft u een enorme controle over hoe onze website op alle schermen zal verschijnen.

Met Foundation kun je ook een kolom verspringen, waarmee ik bedoel dat je een rij kunt hebben met twee kolommen die slechts 3 kolommen breed zijn maar je kunt de tweede kolom die naar rechts zweeft, verrekenen en daarvoor gebruiken we de grote offsetklasse of de kleine offsetklasse:

3, offset 6

Blokraster

Het blokraster is gewoon een leuk extraatje, het is een manier voor u om de inhoud van een lijst binnen het raster te splitsen, het is handig wanneer u wilt dat dit specifieke deel van uw website gelijk verdeeld blijft, ongeacht de grootte van de lijst browser. Dit type raster gebruikt de klassen met kleine blokken en de klassen met grote blokken. Als u alleen de eerste instelt, behoudt het raster de gewenste afstand, ongeacht wat de viewport is, maar gebruikt u alleen de grote blokken. rasterklasse wanneer de viewport het breekpunt van 768 px bereikt, zullen de rasteritems op elkaar worden gestapeld, u kunt altijd meer controle nemen door beide klassen te gebruiken, zoals:

Hiermee worden de afbeeldingen gelijkmatig verdeeld, ongeacht de grootte. Wanneer het kijkvenster groter is dan 768 px, zullen ze slechts één rij innemen en wanneer deze kleiner is dan zullen ze twee rijen bezetten met elk twee afbeeldingen.

De hoofdnavigatie

Nu we het raster in Foundation hebben behandeld en het u voldoende controle geven in alle omgevingen, zullen we praten over iets dat we bijna altijd zullen gebruiken op onze sites: een navigatiebalk bovenaan. En natuurlijk kan deze navigatie ook flexibel zijn met weinig tot geen werk met behulp van dit kader. Om een ​​eenvoudige responsieve navigatie te maken met behulp van Foundation gebruikt u:

Dit stukje HTML maakt een eenvoudige navigatiebalk met de titel van de website aan de linkerkant en vervolgens aan de rechterkant vier menu-items. Merk ook op dat wanneer het kijkvenster kleiner is dan 768px dit menu wordt vervangen door een lijstpictogram waardoor dit menu reageert. Als je wilt dat dit raster zijn positie vastzet terwijl je naar beneden scrolt, moet je het gewoon in een div wikkelen met een klasse van fixed. Om vervolgkeuzemenu's aan uw navigatie toe te voegen, hoeft u zoiets als dit toe te voegen aan de plaats waar u uw dropdown wilt:

#">  Submenu Item 1
Submenu Item 1
Submenu Item 3

Er is ook de mogelijkheid om een ​​scheidingslijn toe te voegen aan uw lijstitem en een beetje grijze verticale lijn toe te voegen. Hiervoor hoeft u alleen maar een lijstitem te plaatsen met de scheidingsklasse tussen de twee lijstitems die u wilt verdelen.

Toetsen

Geen enkel framework zou compleet zijn zonder een aantal vooraf gedefinieerde knoppen en Foundation heeft eigenlijk meer dan één stijl van voorgedefinieerde knoppen, het heeft de standaardstijl die een blauwe kleur gebruikt en voegt vervolgens de succes-, waarschuwings- en secundaire stijlen toe. Door de klasse van de straal toe te voegen, geeft u deze knop een klein grensgebied en door hem de klasse van de ronde te geven, maakt u de knop bijna volledig rond. Je kunt ook de klasse die is uitgeschakeld toevoegen aan de knop en er zijn 4 grootteklassen om de knop zo groot te maken als je hem nodig hebt.

Standaard knopKleine knopKleine knopGrote knopSecundaire knopSucces knopWaarschuwingsknopRadiusknopRonde knopUitgeschakelde knop

Om een ​​eenvoudige vervolgkeuzeknop te maken, hoeft u alleen de vervolgkeuzelijst na de laatste les toe te voegen, zoals:

  h1.subheader 
  h1.  Kleiner 
  Lijstitem 
  Lijstitem 
  Link 1
Link 2

Zoals je kunt zien, biedt Foundation ons, wat betreft typografie, enkele basishulp en vervolgens een aantal extra lessen om aan al onze behoeften te voldoen.

Overige onderdelen

Als deze demonstratie van het kader van de Foundation je eetlust opwekt om meer te leren en te beginnen met het bouwen met Foundation, moet je echt de documentatie bekijken omdat Foundation ook aanvullende CSS-componenten biedt, zoals:

• Waarschuwingsdozen
• panels
• Prijzen tabellen
• Vooruitgangsbalken
• tabellen
• thumbnails
• Flex video

En ook wat helper JavaScript zoals:

• opheldering
• Laten vallen
• Joyride
• Magellan
• Baan
• Onthullen
• Sectie
• tooltips

Zoals je kunt zien, is er heel wat te ontdekken en ik raad je ten sterkste aan om al zijn CSS- en JavaScript-eigenschappen te bekijken.

Conclusie

We hebben net genoeg in dit artikel behandeld om te zien hoe Foundation kan helpen bij het bouwen van snellere en meer responsieve websites, met behulp van het raster krijgt u veel meer controle over de structuur van uw website dan bij het gebruik van een normaal flexibel raster en biedt Foundation ook voldoende helpers. om uw website te maken. Ik hoop dat dit artikel je de push heeft gegeven om te leren en Foundation te gebruiken voor je volgende project.

Heb je Foundation voor een project gebruikt? Welke functies vond u het nuttigst? Laat het ons weten in de comments.