MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND 1
Innehåll Inledning... 3 Framework... 3 Val av ramverk... 3 Arbetet med Bootstrap... 4 Preprocessorer... 5 Val av preprocessor... 5 Arbetet med LESS... 5 Fortsatt arbete med ramverk och prekompilatorer... 5 Referenser... 6 2
Inledning I beskrivningen för den här examinationsuppgiften föreslogs att vi skulle kunna använda oss av den portfolio som skapats tidigare och arbeta om denna i valt ramverk. Jag valde en mycket enkel layout med lite innehåll på varje sida i min portfolio och därför anser jag det inte vara lämpligt att arbeta om portfolion i den här uppgiften eftersom detta inte skulle vara särskilt utmanande. Jag har dock utgått från de menyalternativ/filnamn som användes i porfolion med tillägg av undersidor för två huvudsidor. För var och en av HTML-sidorna har jag skapat lite olika layout med i huvudsak större textblock och bilder. Detta för att visa på lite olika sätt att bygga upp layouten i aktuellt ramverk. Framework För att inte behöva börja om från början varje gång man skall arbeta fram en webbplats kan man utnyttja något av de mer eller mindre innehållsrika ramverk (frameworks) som finns att tillgå. Detta kan bidra till att man lättare kan hålla sig till nuvarande webbstandarder, förkorta ledtiden vid framtagande av en ny webbplats och bygga in mobilitet i webbplatsen (medium: online, tillgänglig: http://cumulus.ei.hv.se/~imcoh/kurser/marksprak-och-stilmallar-ii/ramverk-i-html5/, hämtad: 140219). Val av ramverk I föreläsningen om ramverk (medium: online, tillgänglig: http://cumulus.ei.hv.se/~imcoh/kurser/ marksprak-och-stilmallar-ii/ramverk-i-html5/, hämtad: 140219) nämns fyra olika typer av ramverk nämligen Skeleton, Bootstrap, Foundation och Boilerplate. Dessa kan man säga representerar ramverk på lite olika nivåer. Vad jag förstår så stöder alla aktuella ramverk mobilitet och responsiv design vilket är en mycket viktig aspekt i dagsläget. Enligt en rapport från KPBC (medium: online, tillgänglig: http://www.kpcb.com/insights/2013-internet-trends slide 32, hämtad: 140219) så ökar andelen mobilt användande av internet med en rasande fart. För att tillmötesgå detta krävs att man kontinuerligt tänker responsivt vid framtagande av webbplatser. Vid val av ramverk för aktuell examinationsuppgift går jag främst på de rekommendationer som Christian Ohlsson ger i sin föreläsning om ramverk (medium: online, tillgänglig: http://cumulus. ei.hv.se/~imcoh/kurser/marksprak-och-stilmallar-ii/ramverk-i-html5/, hämtad: 140219), dvs Bootstrap och Foundation. Dessa känns som mer kompletta ramverk jämfört med övriga (Skeleton och Boilerplate). Båda ramverken har en väl utbyggd hjälpfunktion där Foundation även har en fungerande community. En fördel jag kan se med Bootstrap är att detta ramverk erbjuder ett relativt stort urval 3
av exempellayouter som man kan ladda hem och utgå ifrån. Jag ser även en fördel med Bootstrap eftersom ramverket fungerar tillsammans med prekompilatorn LESS (som jag valt att använda mig av). Om jag förstått det hela rätt så använder sig Foundation av SASS istället. Utifrån dessa punkter så väljer jag att arbeta vidare med Bootstrap för den här uppgiften. Arbetet med Bootstrap Det första jag gör är att ladda hem Bootstrap via getbootstrap.com. Jag väljer sedan att spara ner HTML-koden för en av de exempellayouter som finns att tillgå i Bootstrap. Jag har länge varit nyfiken på att arbeta med en layout som har en fixerad horisontell meny med möjlighet till drop-downfunktionalitet. Som tur är finns denna typ av layout som exempellayout ( medium: online, tillgänglig: http://getbootstrap.com/examples/navbar-fixed-top/, hämtad: 140219) så jag väljer att spara ner HTML-koden för denna layout. Det första jag gör är att anpassa exempellayouten och skapa en HTML-mall som jag kan använda mig av när jag skapar mina sidor. Anpassningen görs genom att jag ser till att menyn läggs inne i container istället för att sträcka sig över hela skärmbredden. Dessutom tar jag bort avsnittet jumbotron och lägger till en enkel footer på sidan. I början av mitt arbete blir jag lite fundersam över en formulering i beskrivningen av aktuell uppgift, nämligen att två av sidorna skall ha undersidor. Jag tolkar det som om man först skall komma in på en sida för att sedan kunna gå vidare till dess undersida. Så som drop-down-menyn är utformad i mitt sparade exempel så fungerar inte detta utan man kommer enbart in på undersidan i drop-downmeny. På grund av detta får jag manipulera menyn så att den fungerar som jag tänkt. I Bootstraps gridsystem finns 12 kolumner. Dessa har lite olika bredd beroende på vilken skärmbredd man vill koncentrera sig på. Jag väljer att arbeta med den som är anpassad för skärm med max 768 pixels bredd och där varje kolumn har en bredd på 60 pixlar (klasserna som börjar på col-sm- ). Jag anser detta ger en tilltalande responsiv design och sidorna ser bra ut både på stor skärm (jag arbetar med 1600*900 pixlar) och på de olika storlekar som visas i Firefox-verktyget Visa layouter för anpassningsbar webbdesign (chrome://web-developer/content/generated/view-responsivelayouts.html) Jag bygger upp lite olika layouter med rader och olika bredd på kolumnerna på sidorna och utnyttjar bland annat möjligheten att nästla rader/kolumner för att erhålla önskad layout. Jag väljer att fylla kolumnerna främst med text-block och bilder för att ge en uppfattning om aktuell layout. Genomgående använder jag mig av att hämta bilderna från Lorem Pixel (lorempixel.com). På en av sidorna utnyttjar jag en inbyggd javascript-komponent nämligen carousel för bildvisning. att få en 4
Preprocessorer Ett sätt att få mer flexibilitet i sin CSS-kod är att gå vägen via en preprocessor (LESS eller SASS). Då kan man jobba med variabler, argument ( inparametrar ) etc. Val av preprocessor Som det sägs i föreläsningen om preprocessorer (medium:online, tillgänglig: http:// cumulus. ei.hv.se/~pb/kurser/webbdesign/lesssass/, hämtad: 140220) så är LESS och SASS väldigt lika varandra. Det verkar dock som om LESS har några användningsområden som saknas hos SASS (enligt föreläsningsfilmerna), nämligen mixin guards och pattern match. Jag uppfattar att dessa områden gör att LESS känns ännu mer användbart och flexibelt jämfört med SASS. Eftersom jag arbetar i PC-miljö upplever jag det mycket smidigare att installera och använda LESS än vad som är fallet med SASS eftersom jag behöver installera två komponenter i det senare fallet (Ruby och Scout). Jag väljer därför att arbeta med LESS och att installera SimpLESS från http://wearekiss.com/simpless. Arbetet med LESS Eftersom det finns mycket CSS-funktionalitet inbyggt i Bootstrap så utnyttjar jag detta till stora delar vid skapandet av examinationsuppgiftens webbsidor. Arbetet med LESS koncentrerar jag främst till att på ett smidigt sätt kunna skapa ett flexibelt färgschema för sidorna. Jag definierar upp ett antal färg-variabler som tilldelas olika färgvärden. Sedan skapar jag en variabel @colorbase som sätts till någon av färg-variablerna. Efter det skapar jag mixins som innehåller olika funktioner för bearbetning av färgen som satts som @colorbase. De olika komponenterna på sidorna tilldelas sedan någon av dessa mixins. Jag skapar även en mixin för rundade hörn och en för kantlinje. Båda dessa görs flexibla då jag väljer att anropa dem med argument. Dessutom gör jag några media queries för att hantera de olika utseenden som menyn får beroende på skärmbredd. Fortsatt arbete med ramverk och prekompilatorer Som det känns efter arbetet med den här uppgiften så kommer jag säkerligen arbeta vidare med och fördjupa mig i både ramverk (troligen Bootstrap) och LESS. Jag ser en stor nytta i att arbeta med den funktionalitet/flexibilitet som finns inbyggd i LESS för att göra arbetet med framtagandet av CSS så smidigt som möjligt även i mindre utvecklingsprojekt. Självklart är det smidigt att även arbeta utifrån ett ramverk men jag kan känna att nyttan till viss del är beroende på projektets storlek och om det kanske är fler inblandade i arbetet. 5
Referenser chrome://web-developer/content/generated/view-responsive-layouts.html http://cumulus.ei.hv.se http://getbootstrap.com http://wearekiss.com/simpless. http://www.kpcb.com 6