Tagged: framework

Supermumin – Blueprint Edition

Då är det alltså gjort. Jag har lagt upp en helt ny design. Jag har ju faktiskt tjatat om kodandet hela veckan, så det är väl kanske ingenting nytt under jorden.

Hur som haver, sidan är, om jag inte nämnt det tidigare, ähum, utvecklad med hjälp av Blueprint CSS (och om man ändå ska prata om saker som gjort utvecklandet lättare, texteditorn e är värt guld!). Det går bra mycket snabbare när man gör någonting mha ett framework. Nu skulle jag väl kanske inte göra allting som jag gjort här, främst för att det blir väldigt kladdig HTML, och det är inte världens mest SEO-mässiga kod heller. Det är lite div mania över det hela, väldigt, väldigt osemantiskt.

Men det gick snabbt! Och det krävdes inte mycket jobb! Jag kan säga såhär, nästa gång jag behöver göra ett projekt snabbt och snyggare än jag någonsin hade gjort det på frihand, så blir det ett framework. Frihandskodning i all ära, men det blev väldigt mycket smidigare.

Grid-baserade frameworks som Blueprint och 960 funkar i praktiken såhär: Frameworksen kommer med ett gäng klasser som gör det lättare att lägga upp din sida. Blueprint kör med klasser i stil med “span-4” etc. Det betyder i praktiken att elementet som blivit tilldelad klassen, kommer sträcka sig över fyra fält av griden. I fallet med supermumin, så består griden av 24 fält.

Svårare än så är det inte, i praktiken, åtminstone inte om man kan lite CSS. Det är inte direkt rekommenderat att man ger sig på ett framework det första man gör, eftersom man missar helt otroligt mycket om hur CSS funkar, utöver det faktum att det kan bli väldigt svårt att förstå varför en del grejer funkar som de gör.

Jomen, så att säga, vad mer är nytt. Jo, lite mer reklam. Jag testar det ett tag. ‘Nuff said.

Ja, jo, just det, jag har haft en historia av rosa layouts. Det börjar, i princip, med att Erik a.k.a. Neme, hade en HTML-layout han inte skulle ha. Jag snodde den, eftersom jag köpt domänen, köpte ett webhotell och slängde upp allting på en Textpatterninstallation. I ärlighetens namn var jag markupnazi nr. 1 på den tiden, och jag gjorde i princip om hela koden så att den skulle vara semantisk och fin. Det var ungefär fyra-fem år sen. Jag har blivit latare på den tiden. Och skäggigare. Annars är jag, i princip, likadan.

Den layouten var väldigt, väldigt, väldigt rosa. Och ungefär varje gång jag gjort en uppdatering av sidan har det hängt med. Och när jag äntligen gjorde mig av med den rosa färgen, så började Erik och Marcus att klaga. Något brutalt. De vägrade gå in på bloggen och läsa någonting, eftersom det inte fanns nog med rosa på sidan.

Nå – nu säger jag det – ‘nuff’s ‘nuff. Det är allt jag har att säga. Ni kan suga något tjockt och kraftigt om det inte passar. Speciellt du, Erik.

Nå, jag är iaf nöjd med sidan. Flickvännen fick, som förutsagt, hjälpa mig med en ny färg, den gula just didn’t cut it. Nu blev det iofs inte så att hon hatade färgen, men hon tyckte bättre om den här färgen (och det gjorde jag med).

Såså, det är allt. Nu vet ni att jag har en ny layout, och ni har även fått höra en hel massa annat som ni inte ville veta men vet ändå. Sådetså.

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