Tagged: blueprint

Designhjälp, allvarligt.

Nytt index.Nytt single

Ungefär såhär långt har jag kommit på en ny Supermumin-sida. Jag tror det mesta framgår ganska tydligt.

jag hara bara fipplat lite den här veckan. Från början var det bara en enkel layout för att testa lite blueprint, men till slut så hade jag nästan en full framsida, så jag la till de sista smågrejerna (som menyn, loggan och “taggar etc”-meningen) och bestämde mig för att köra på.

Jag är inte riktigt säker på färgerna (jag vet att min flickvän kommer hata det gula), men jag har ingenting annat att ersätta dem med. Det är alltid mitt problem.

Dessutom tycker jag det saknas ganska mycket. Det är vitt. Väldigt vitt. Jag ska försöka hitta något ikontema som funkar ihop med det gula (eller någon annan färg, i värsta fall får ikontemat bestämma färgen) och köra in lite fina ikoner till listorna och de övriga element som går att typbestämma ganska enkelt.

Ja, just det. Jag hade ju en layout som byggde på Yahoo!-ui. Den kastar jag. Koden var ganska rörig, och jag förstod inte själv tanken bakom allting. Det var en ganska fin, tre-kolumnslayout som var ännu vitare än den jag har nu och den jag visat upp, men den var ändå hyffsat fin. Men, som sagt, koden var en enda röra. Jag kanske gör klart den (om jag orkar, som sagt så har jag ingen som helst lust att göra kommentarfält etc till temat, hence IntenseDebate här på bloggen) och lägger upp den ifall någon annan vill använda sig av den, alternativt säljer den till någon som behöver support etc. Vi får se.

Iaf, till inläggets kärna; om det är någon som har något förslag, vad som helst, för vad jag kan göra för att bättra på layouten, släng upp en kommentar eller maila mig!

Nu ska jag slänga mig i duschen – det sitter fast en massa sticksiga småhår överallt sen jag snaggade mig igår.

Frameworks och designmönster

Kod

Idag har jag, när jag inte suttit på dass, försökt komma in i “960 Grid System” och “Blueprint CSS Framework”. Jag snubblade över en video (som jag skippat tidigare) som går igenom tanken och användandet av 960 ganska grundligt. Jag har dock inte riktigt fastnat för det där med att sitta fast i en bredd på sidan (namnet 960 syftar på att det är enda bredden som finns tillgänglig. Det är en storlek anpassad för folk som kör 1024×768 i upplösning, om inte jag minns helt fel), så jag tittade vidare lite. Jag har tidigare grejat lite med Yahoo!’s gridsystem, men det var så krångligt att jag inte alls förstod varför eller hur det jag gjorde funkade, det bara gjorde det.

Istället hittade jag Blueprint. Blueprint bygger på samma princip, men det har lite fler olika bredder att välja på, om inte jag missuppfattat. det går även att välja lite fler olika kolumnsystem än i 960 (960 har 12 eller 16, Blueprint har 8, 10, 16 och 24). Det passade mig utmärkt, dessutom hade nettuts (vilka annars) en åtminstone hyffsad artikel uppe. Efter lite hoppande fram och tillbaka tror jag att jag förstod hur det funkade. Jag lekte lite, och lekte lite till, och nu börjar jag få sväng på det.

Det är onekligen intressant hur man tänker annorlunda när man blir inrutad i en grid. Förr i tiden tänkte jag ganska flytande när jag kodade upp en hemsida. Ett fält med innehåll där, och så headern där uppe och menyn under där. Nu blir det mer som fyrkanter. Man sätter ut fyrkanter, ger dem den plats de behöver och rutar in sidan på det sättet.

Det kanske låter tråkigare med hela “fyrkantstänket”, men egentligen tycker jag att det är mycket smidigare och mer flexibelt. Innan hade jag alltid svårt att avgöra hur mycket plats någonting skulle få, eller hur mycket whitespace jag skulle tilldela ett fält. Men nu är det mycket enklare att se, och förstå, hur det hänger ihop. Det är också lättare att få det jämt och fint. All luft är mycket enklare att få till.

Jag behöver nog öva mig litet på det, och försöka avgöra när jag ska använda det och inte, men i slutändan tror jag att jag och Blueprint kommer att funka jättejättefint tillsammans. Och när blueprint vägrar göra som jag säger, plockar jag väl kanske fram 960 eller Yahoo!…

Affiliator.com