Bygg en responsiv, mobilvänlig webbsida med skelett

Nyligen publicerade vi en artikel som visar 20 fantastiska exempel på att använda mediafrågor för Responsive Web Design. Dessa webbsidor svarar extremt bra på olika webbläsarfönsterstorlekar, från stora HD-skärmar till smartphones.

Idag kommer vi att visa dig hur man använder en panna som kallas Skelett för att ta huvudvärk ur att designa och bygga en lyhörd webbsida. Du kommer bli bedövad på hur lätt det är!

Vad är skelett?

Skelettens hemsida beskriver projektet som en liten samling CSS & JS-filer som kan hjälpa dig att snabbt utveckla webbplatser som ser vackra ut i vilken storlek som helst, oavsett om det är en 17-tums bärbar dator eller en iPhone.?

I grund och botten, vilken skelett skapare Dave Gamache har gjort är reformen den åldrande 960 ramen för att bättre möta de moderna utmaningar som presenteras av den mängd resurser som regelbundet kommer åt webben. Även om projektet innehåller några extra godbitar som jQuery, fokuserar vi idag främst på layoutaspekten. Kom ihåg att eftersom denna panna är organiserad så bra är det ganska lätt att ta bort allt som vi inte använder. Författaren lägger stor vikt vid anpassning: behåll vad du vill, ändra vad du inte gör!

Sneak Peek

Live Demo: Klicka för att starta

Komma igång

Steg 1 är att ladda ner projektet. När du har laddat ner allt och lossat, öppnar du den medföljande HTML-filen och gräver allt innanför behållaren.

Innan vi börjar bygga sidan är det viktigt att ta reda på hur allting fungerar. Skelett är byggt på ett rutnätverk, så om du hatar rutnätverk, kommer det inte att vinna dig över. Glöm inte att läsa nu, lämna en otäck kommentar om semantisk webbutveckling och fortsätt.

För er som fortfarande är intresserade finns det sexton kolumner, som var och en har en marginal kvar på 10px och en marginal-rätt på 10px. Med en total bredd på 960px för behållaren, här är storlekarna för varje kolumn:

/ * Base Grid * / .container .one.column {width: 40px; } .container .two.columns {width: 100px; } .container .three.columns {width: 160px; } .container .four.columns {width: 220px; } .container .five.columns {width: 280px; } .container .six.columns {width: 340px; } .container.seven.columns {width: 400px; } .container .eight.columns {width: 460px; } .container .nine.columns {width: 520px; } .container .ten.columns {width: 580px; } .container .eleven.columns {width: 640px; } .container .twelve.columns {width: 700px; } .container .thirteen.columns {width: 760px; } .container .fourteen.columns {width: 820px; } .container .fifteen.columns {width: 880px; } .container .sixteen.columns {width: 940px; }

Som med de flesta kolumnsystem är ditt mål att lägga till totalt antal: 16. Så om du vill dela upp sidan mellan två kolumner, skulle du skapa två separata div och använda klasserna? Åtta kolumner? till varje.

Det finns någon annan användbar funktionalitet som du också borde veta, till exempel möjligheten att dela bredden med tredjedelar. Applicera helt enkelt en tredjedel? eller? två tredjedelar? klasser, vilka är lika med 300px respektive 620px.

.container. one-third.column {width: 300px; } .container.two-thirds.column {width: 620px; }

För att skapa luckor eller tomma kolumner lägger du till förskjutningsklasserna: offset-by-one, offset-by-two, etc. Var och en av dessa lägger väsentligen upp till sextio fler pixlar av vaddering för att ta hänsyn till luckorna i innehållet.

mallar~~POS=HEADCOMP

Koden ovan kommer från det medföljande? Skeleton.css? fil. Det finns också två andra viktiga CSS-filer: bas och layout. The? Base.css? filen innehåller förinställda format för typografi, knappar, blanketter, flikar etc. Det mesta av vad som finns här är helt frivilligt och menas att överträffas av användaren. Om du tycker att den här pannan är för stor för vad du vill göra eller tar för mycket kontroll, radera den här filen.

The? Layout.css? filen är en tungt organiserad men fortfarande mestadels tom stilark inkluderad för din bekvämlighet. Det här är där du lägger någon anpassad CSS som du vill lägga till för din sida. Den här CSS-filen innehåller också några extra @media-frågor som du kanske vill genomföra. Standardfrågorna finns i? Skeleton.css? och tillämpa i princip bara en ny bredd till alla kolumnklasser när fönstret reduceras till vissa storlekar.

Webbsida Steg 1: Navigering

Nu när vi vet grunderna i Skelett, låt oss hoppa in och bygga en webbsida med det! Vi håller designen fin och minimal för att fokusera på hur rent och organiserat allt kommer ut med nästan ingen ansträngning från din sida.

Det första vi vill lägga till på vår sida är ett enkelt logotyper och några navigeringslänkar. Var och en av dessa får sin egen div och vi ger den första en bredd på två kolumner och den andra en fjorton bredd (2 + 14 = 16).

Därefter kommer vi att sätta en enkel? DS? för Design Shack i första div och en lista över länkar i andra div. Vi klarar mycket av standard styling för texten bara så att du kan få en känsla för vad skelettstilarna är.

<h1>DS</h1> <ul> <li>Hem</li> <li>Handla om</li> <li>Portfölj</li> <li>Kontakta</li> </ul>

Navigation CSS

Skelett kommer att ta hand om vår layout och merparten av vår text styling. Allt vi behöver göra är att lägga till några vertikala marginaler för att lägga allt där vi vill ha det. Jag bestämde också att skrapa några av standardlänkstyling till förmån eller min egen.

Vad jag har gjort appliceras några toppavstånd till hela behållaren bara för att stöta ner det lite. Jag har också flyttat länkarna lite eftersom de som standard anpassade sig med toppen av den stora DS? och jag ville ha dem nära mitten.

.container {margin-top: 50px; } #nav {margin: 13px 0 0 0; } #nav ul li {display: inline; marginal: 0 20px 0 0; marginal-botten: 130px; } #nav en {text-decoration: none; } #nav a: svävar {text-decoration: underline; }

Därmed har vi en bra start. Text styling från Skeleton kommer ut bra och definitivt lämpar sig för det klassiska, minimala utseende vi ska åka till här.

Steg 2: Header Image

När du utformar en lyhörd webbsida är det viktigt att förstå hur bilder fungerar. Visst, allt som webbläsaren gör kan ändras, men vad händer när en bild är för stor för sin kontraktsbehållare?

För att svara på den här frågan, låt oss slänga en enorm bild längst upp på vår sida. För att göra detta lägger vi till en annan div precis som tidigare. Det blir den fulla bredden på vår behållare, så vi måste tillämpa de? Sexton kolumnerna? klasser.

<h1>DS</h1> <ul> <li>Hem</li> <li>Handla om</li> <li>Portfölj</li> <li>Kontakta</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_4.jpg"> <h2>Steg 3: Välkomstmeddelande</h2> <p>Jag ringer till nästa avsnitt? Välkommen? avsnitt bara för att jag inte har ett annat bra namn för det. Nu när vi har provat ett navigeringsområde och en bild, behöver vi fortfarande testa en ren textprimär och en innehållande bilder blandad med text. Detta kommer att vara det förra.</p> <p>Bygg av samma HTML som vi redan har byggt, starta en ny sexton kolumn div och kasta i en rubrik och ett stycke som visas nedan.</p> <textarea wrap="soft" readonly=""> <h1>DS</h1> <ul> <li>Hem</li> <li>Handla om</li> <li>Portfölj</li> <li>Kontakta</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_5.jpg"> <h2>Steg 4: Tre kolumner</h2> <p>Nu har vi gjort en navigationssektion, en bild av sig själv och en paragraf av sig själv. Det är dags att skapa några kolumner som integrerar text och bilder tillsammans. För att åstadkomma detta använder vi "en tredjedel? klass som vi lärde oss om ovan. Detta gör det möjligt för oss att snabbt dela bredden i tre kolumner innehåll med nästan inget arbete från vår sida. </p> <p>Vi börjar med blocket av HTML nedan. Först slänger vi in ​​en h2-tagg, sedan en bild och slutligen ett stycke text.</p> <textarea wrap="soft" readonly=""> <h2>Ett</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_6.jpg"> <p>Om vi ​​skala fönstret ner ett gäng ser vi några dramatiska förändringar. Layouten återuppvinner sig själv, och den fantastiska delen är, det ser fortfarande bra ut! Jag tog inte ens tid att föreställa mig hur allt skulle se ut när det omformaterades men här är det allt trevligt och i en vertikal stack.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_7.jpg"> <p>För att avsluta kan du anpassa objekten i bildmappen till egna ändamål. Skelettet innehåller olika visuella resurser som Apple Touch Icon för iOS-enheter och en favicon.</p> <h2>Slutsats</h2> <p>När jag började läsa om responsiv webbdesign uppskattade jag de uppenbara fördelarna men var inte så upphetsad över det extra arbete som krävs för att planera en webbplats som passar alla storlekar. </p> <p>Men med ett verktyg som Skelett, är ansträngningen som krävs för att göra en webbsida responsiv, verkligen ganska minimal. Om något är det ett bra exempel att se igenom och riva ihop för att se några bra metoder för att implementera ditt eget responsiva system. </p> <p>Lämna en kommentar nedan och låt oss veta vad du tycker om Skeleton. Tror du att mottagliga webbsidor är värda extra ansträngning? Har du börjat göra dina mönster vänliga mot ett brett utbud av enheter?</p>