Share
960gs var bra! När de flesta besökare på din webbplats använde stationära datorer med övervakare minst lika bred som 1024 pixlar gjorde 960gs det dött enkelt att designa en webbplats i kod. Men med tillkomsten av enhetsproliferation och mediasökningsprevalens är fasta breddsplatser bestämt mindre effektiva än responsiva layouter.
I det här dokumentet kommer jag att beskriva hur du tar din fasta bredd 960gs-webbplats och flyttar den till ZURBs Foundation-ramverk. Utan att jaga för mycket vill jag vara rättvist till 960gs och nämna adapt.js, det här rammans svar på lyhörd webbdesign. Nu kommer den här artikeln att täcka grunderna i Foundation Grid, hur det jämförs med 960gs 'nät och några extra alternativ med Foundation Sass. För denna handledning antar jag att du redan är bekant med 960gs och tittar på Foundation som ett sätt att uppnå en lyhörd design.
För att komma igång måste du förstå de grundläggande begreppen i rader och kolumner i Foundation. 960gs konvention var att använda en mega container och förlita sig på varje kombination av DIVs för att göra en rad. Såhär:
Du kanske har en kastas i mellan raster DIV som lägger till 12, men det är valfritt. Denna layout skulle i själva verket producera två rader med två kolumner som lika uppdelade den tillgängliga bredden. Om du lägger till alfa och omega klasser, kommer det att hävda respektive extra margin-vänster och margin-höger.
I Foundations fördefinierade HTML-klasser skulle samma layout utföras med följande kod:
Det finns ingen mega-behållare för Foundation, istället finns det rader och rader som innehåller kolumner, och kolumner måste totalt 12. Varje kolumn definieras genom att lägga till kolonner klass åtföljd av minst en klass för att diktera bredden på den kolumnen.
För att gå på en kort tangent, för vad det är värt, stämmer grundsteget på Twitter Bootstraps rader och spänner, förutom att Foundation ger dig möjlighet att definiera kolumnbredder vid flera brytpunkter.
Du märker notationen medel 6. Det betyder på mellannivåpunkten (men det är definierat, standardvärdet är 641px), du ser sex kolumner som är värda av bredd eller hälften av den tillgängliga bredden. En annan klass kan läggas till för att ange hur många kolonner som är värda på bredden div bör ta upp vid andra brytpunkter, inklusive små och stor. Så här skulle det se ut:
Stiftelsen är mobil-första. Kod för små skärmar först och större enheter kommer att ärva dessa stilar. Anpassa för större skärmar efter behov. källa
Stiftelsen är som standard utformad i ett mobilt första koncept. Vad det här betyder för nät är att små klassen kan användas ensam för att definiera bredden på en kolumn vid den lilla brytpunkten och alla brytpunkter ovan kommer att ärva från det så länge som en medium eller stor klassen är inte närvarande. På baksidan, om du bara använder a medium klassen, så kommer den vanliga lilla brytpunktslayouten att omvandla DIV-enheterna till staplade rader med en kolumn (motsvarar små-12) vilket är standard som tillämpas på kolumner i den lilla brytpunkten.
Med allt detta i åtanke är grunderna för att ändra din markering följande: För det första div med behållare klassen kan raderas. Därefter runt din rutnät_# DIV som utgör "rader", måste du skapa en div med klassen rad. De individuella DIV innehåller rutnät klasser kan ändras till medium-#.
Detta kommer att ge dig något som ser väldigt mycket ut som din gamla 960gs layout för viewports över 640 pixlar och under den bredden, har du bara fullbredd staplar rader, vilket betyder att varje kolumn div kommer att ändras till 100% bredd.
Här är några andra 960gs-begrepp som översatts till Foundation parlance:
I 960gs kan nestning uppnås genom att lägga till alfa till den första kolumnen i din rad och omega till din sista, effektivt avlägsna horisontella marginaler. När du använde detta tillvägagångssätt, måste dina kapslingsrader vara en summa av kolonnens bredd som de kapslade kolumnerna bodde inom.
I stiftelsen är nesting gjord för dig, du måste bara infoga en rad inuti en kolumn. Inga extra klasser krävs. Den andra huvudskillnaden är att varje boetrad förutsätter en ny 12 kolumner inom det tillgängliga boetutrymmet. Så en rad inuti a medel 6 kommer att låta dig dela de sex kolumnerna i 12.
960gs prefix och suffix klasser var utmärkta verktyg klasser för att skapa tomt utrymme i din layout och tillhandahöll ett sätt att centrera. Stiftelsen har samma förmåga, med Offsets.
Detta är faktiskt ganska mycket detsamma i båda ramarna. Med källbeställning kan du skapa dina kolumner i vilken ordning du vill ha i din faktiska HTML, men visas i en annan vänster-till-höger ordning. För detta kan du använda tryck och dra klasser.
Stiftelsen täcker alla 960gs kapacitet och mycket mer. Se dokumenten för att lära dig mer om allt annat det kan göra.
Tja, det här är den främsta anledningen till att du flyttar till något som Foundation: Responsiveness. Du vet om stor, medium och små brytpunkter, men det finns också extra stor och XXLarge. Här är vad dessa breakpoint-klasser hänför sig till:
| brytpunkt | Viewport bredd |
|---|---|
| små | < 40em (640px) |
| medium | 40,063em (641px) < 64em (1024px) |
| stor | 64,063em (1025px) < 90em (1440px) |
| extra stor | 90,063em (1441px)> 120em (1920px) |
| XXLarge | > 120,063em (1921px) |
Observera att endast små, medium och stor brytpunkter kan användas i din HTML. Om du behöver använda extra stor eller XXLarge, eller om du vill anpassa dessa brytpunkter, kan du använda arbetet med Sass att skräddarsy stiftelsen för att passa dina behov.
Stiftelsen är byggd för att arbeta med Compass och Sass. Om Sass är något du är bekväm med kan det göra utvecklingen lättare, läs mer om att komma igång med Sass och Foundation.
Nyckeln till att använda Sass är att istället för att lägga till Foundation-specifika klasser till din HTML, kan du bara utöka Foundation-attribut som bygger på befintlig markup. Till exempel det som existerar div med klassen Nyheter kan göras för att efterlikna en rutnät-6 kolumner div.
Här är ett fullständigt exempel på hur detta kan se ut, låt oss säga att du har den här HTML:
För att uppnå en 50/50 delning av .Nyheter och .evenemang, Din Sass skulle se ut så här:
.main @ include grid-row; .news @ include grid-column (6); .events @ include grid-colmn (6);
Detta motsvarar att du ändrar markeringen till detta:
Om du vill inkludera andra brytpunkter i ditt SCSS, skulle du bara använda den här tekniken:
.main @ include grid-row; .news @ include grid-column (8); @media # $ large-up grid-column (6) .events @ include grid-colmn (4); @media # $ large-up grid-column (6)
Vilket är detsamma som:
SCSS-tekniken är fin eftersom den håller dina klasser klara i din HTML, och låter dig vara mer semantisk.
Det är ännu en viktig sak att förstå om den här metoden. Om du sammanställer din CSS till ett separat, ytterligare stilark, men du vill använda Stiftelsen mixins, Du måste importera vad du behöver, men förhindra duplicering av Foundation-stilar. För att undvika överflödiga stilar som läggs till i din utgående CSS måste du ange $ Inkludera-html-klasser variabel som falsk, här är hur det ser ut:
@import "foundation / settings"; $ include-html-classes: false; @import "foundation";
Observera att banorna kan variera beroende på din egen inställning. Det här låter dig använda alla mixins, funktioner och inställningar i Foundation utan att behöva duplicera alla CSS. Det här är praktiskt om du redan innehåller Foundation CSS på sidan du jobbar på. Den här metoden kan till exempel användas som en plats för att lagra alla dina överklaganden för en särskild sida eller delmängd av sidor.
Detta är bara toppen av isberget: Foundation och Sass har båda mycket mer att erbjuda och båda har stora följder av utvecklare som fortsätter att göra dem både mer avancerade och bättre.
Accentsconagua