Fyrir nokkrum vikum síðan hið fræga Grundvallarramma út fjórða útgáfu þess. Ef þú hefur aldrei heyrt um Foundation munum við leiða þig í gegnum þessa svöruðu ramma.

Þar sem útgáfa 3 af Foundation var byggð frá grunni með því að nota SASS - CSS forforrit sem hjálpar við að skrifa skilvirkari CSS - þessi nýja útgáfa er einnig hreyfanlegur-vingjarnlegur og afla a einhver fjöldi af lögun í rist þess að þú don ' T komast frá öðrum rammaumhverfum.

Skulum kafa inn í Foundation og sjá hvers vegna það er svo vinsælt ...

Ristið

Foundation notar 12 dálka nestable rist sem mun laga sig að hvaða stærð skjár, ef þú hefur þegar notað grids þetta ætti allt að vera mjög kunnuglegt fyrir þig. Allir deildir í Foundation nota kassa-límvatn: landamæri kassi þannig að landamæri og padding hafa ekki áhrif á breidd og hæð hæð frumunnar, sem gerir stærðfræði svolítið auðveldara fyrir okkur. En ótrúlegt hlutur um grunnnetsins er að þú færð í raun 2 ristir, stórt rist fyrir þegar skjáinn er stærri en 768px á breidd og minni rist sem þú getur stjórnað alveg eins og einfaldlega. Í því skyni notar stofnunin smá- og stóra- # bekkja eins og svo:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Í þessum kóða við búum til röð þar sem það eru 3 divs sem eru nákvæmlega sömu breidd þegar vafrinn er breiðari en 768px en þegar það er lítill, eins og þú sérð með því að lítill flokkur í deildunum mun hinn síðasti hernema helmingur skjár en hinir tveir munu hernema 25% hvor, þetta gefur þér mikla stjórn á því hvernig vefsvæðið okkar muni líta á alla skjái.

Stofnunin leyfir þér einnig að vega upp á móti dálki þar sem ég meina að þú getir fengið röð með 2 dálka sem eru aðeins 3 dálkar breiður en þú getur móti öðrum sem flýgur til hægri og til að gera það sem við notum stórt móti bekknum eða litlum móti bekknum:

3, offset 6

Block rist

Rammagallið er bara fallegt lítið aukalega, það er leið fyrir þig að skipta innihaldi lista innan ristarinnar, það er gagnlegt fyrir þegar þú vilt að þessi tiltekna hluti af vefsvæðinu þínu sé jafnt dreifður, sama hvað stærðin er vafra. Þessi tegund af rist notar lítinn rás og rásirnar í stórum rásum, ef þú stillir aðeins fyrsta ristið mun halda viðkomandi bili, sama hvað sjónarhornið er en ef þú notar aðeins stóra blokkina ristaflokkur þegar sjónvarpsþátturinn nær 768 punkta punktatöflunni ristir hlutirnir upp á hvor aðra, þú getur alltaf tekið meiri stjórn með því að nota báðar þessar flokka eins og svo:

Notaðu þetta, myndirnar verða jafnt dreifðir, sama hvað stærðin er. Þegar útsýni er stærri en 768 px munu þeir aðeins hernema eina röð, og þegar það er minna en það mun hernema tvær línur með 2 myndum hvor.

Helstu flakk

Nú þegar við höfum fjallað um rist í Foundation og hvernig það gefur þér nóg af stjórn í öllum umhverfum, munum við tala um eitthvað sem við munum nánast alltaf nota á vefsvæðum okkar: toppur siglingarbar. Og auðvitað getur þessi sigling einnig verið sveigjanleg með litlum eða engum vinnu með þessari ramma. Til að búa til einfaldan móttækilegan flakk með því að nota Foundation notarðu:

Þessi hluti af HTML skapar einfaldan flakkastiku sem hefur titilinn á vefsíðunni til vinstri og síðan til hægri hefur það fjóra valmyndir. Athugaðu einnig að þegar sjónarhornið er minna en 768 punkta verður þetta valmynd skipt út fyrir listamerki sem gerir þessa valmynd móttækileg. Ef þú vilt að þetta rist hafi stöðu sína föst þegar þú flettir niður síðuna þarftu bara að vefja það í div með flokki fasta. Til að bæta við fellilistanum við flakk þinn þarftu bara að bæta við eitthvað eins og þetta til þess staðar þar sem þú vilt falla niður:

#">  Undirvalmynd Item 1
Undirvalmynd Item 1
Undirvalmynd Liður 3

Einnig er hægt að bæta við skiptimiði við listalistann þinn og bæta við litlum gráum lóðréttum línu til að gera það að þú þarft bara að setja listalista með bekknum á milli tveggja listahluta sem þú vilt skipta.

Hnappar

Engin ramma væri lokið án fyrirfram ákveðinna hnappa og Foundation hefur reyndar fleiri en eina stíll hnappsins fyrirfram skilgreind, það hefur sjálfgefið eitt sem notar bláa lit og þá bætir það árangri, viðvörun og efri stíll. Með því að bæta við radíusflokknum gefur þú þennan takka svolítið af landamærum radíus og með því að gefa það bekknum um kring, gerir þú hnappinn næstum alveg hringlaga. Þú getur einnig bætt við bekknum fatlaðra á hnappinn og það eru 4 stærðir til að gera hnappinn eins stór og þú þarft.

Sjálfgefið hnappurÖrlítið hnappurLítil hnappurStór hnappurSecondary ButtonÁrangurshnappurAlert ButtonRadíusknetturRound ButtonÓvirkur hnappur

Til að búa til einfaldan fellilistahnapp þarftu aðeins að bæta við dropdown bekknum eftir síðasta flokks, eins og svo:

  h1.subheader 
  h1.  Minni 
  Listatriði 
  Listatriði 
  Link 1
Link 2

Eins og þú sérð, þegar það kemur að leturfræði veitir Foundation okkur nokkrar undirstöðuaðgerðir og þá nokkrar viðbótarþættir til að mæta öllum þörfum okkar.

Aðrar íhlutir

Ef þessi kynning á grunnröðinni hefur vakið matarlyst þína til að læra meira og byrjaðu að byggja með Foundation þú ættir virkilega að skoða skjölin þar sem Foundation býður einnig upp á fleiri CSS hluti svo sem:

• Alert Boxes
• Pallborð
• Verðlagningartöflur
• Framfarir
• Töflur
• Smámyndir
• Flex Video

Og einnig hjálpar JavaScript eins og:

• Hreinsun
• Dropdown
• Joyride
• Magellan
• Sporbraut
• Sýna
• Kafla
• Verkfæri

Eins og þú sérð er mikið af Foundation til að kanna og ég ráðleggi þér eindregið að skoða allar CSS og JavaScript eiginleika þess.

Niðurstaða

Við ræddum bara nóg í þessari grein til að sjá hvernig Stofnunin getur hjálpað til við að byggja upp hraðar og móttækilegar vefsíður með því að nota ristið þitt sem þú færð miklu meiri stjórn á uppbyggingu vefsvæðis þíns en þegar þú notar venjulegt sveigjanlegt rist og Foundation gefur þér líka fullt af hjálparmönnum til að búa til vefsíðuna þína. Ég vona að þessi grein hafi gefið þér ýta til að læra og nota Foundation fyrir næsta verkefni.

Hefur þú notað Foundation fyrir verkefni? Hvaða eiginleikar fannst þér gagnlegur? Láttu okkur vita í athugasemdunum.