Idag ska vi titta på ett nytt projekt från Enavu Network som heter 52 Framework.
Det påstås vara det första ramverket som är byggt speciellt för HTML5 och CSS3. Nedan ser vi på några av de grundläggande funktionerna och gräver i koden för att se vad vi kan hitta.
När det gäller ramar
Ramar är ett intressant ämne. Vissa utvecklare lovar absolut dem och går till och med så långt som att säga att ingen webbsida någonsin bör startas utan att någon annan utvecklare ser dem som onödiga komplikationer som lägger mycket överflödig vikt på vad som annars skulle vara ganska enkelt kod.
Jag är personligen någonstans däremellan. Jag håller helt med om att många ramar, om de inte är ändrade, innehåller mycket fluff som kan skräpas. Men jag tycker också att de är ganska användbara och tidsbesparande.
Nyckeln är anpassning. Varje ram du hittar online skapades av någon med ett annat arbetsflöde än din egen och till och med ett annat sätt att tänka på webbplatser och deras struktur. Detta är en av de främsta orsakerna som ramarna är så laddade: så att de kan tillgodose alla människors behov. Varje liten fil och kodkod som ingår i hämtningen är inte avsedd för varje person, det är bara en utgångspunkt för din egen personliga ram.
När du lånar någon annans bil, hoppar du inte bara in och kör. Du ställer in förarsätet och speglarna så att de passar dina specifikationer. På samma sätt, förvänta dig inte att bara ta en prefab ram och springa med den. Steg ett borde vara att gå igenom och filtrera ut allt du aldrig behöver. Steg två borde vara att lägga till i saknade element som du alltid behöver. Och steg tre borde vara att tweak de saker du vill, men behöver ändras något för din egen användning.
När vi tårar in i ramen nedan, tänk på varje del och hur du skulle anpassa den för att passa dina egna specifika behov.
De 52 ramarna
52 Framework är en ny och väldigt mycket under uppbyggnad, en ram byggd speciellt för att använda HTML5 och CSS3 i ett webbläsare som är standardkompatibelt.
För tidigt?
HTML5 och CSS3 är fortfarande ny teknik, är det inte lite för tidigt att börja skapa ramar för dem? Absolut inte. Stöd för båda dessa nya standarder ökar snabbt och drivs av ett stort antal utvecklare som helt enkelt inte kan vänta med att genomföra dem.
Oavsett om det är dags att börja använda HTML5 och CSS3 är en annan debatt helt, tanken är att det är den perfekta tiden att börja bygga system för att underlätta deras användning inom en snar framtid. Det kommer aldrig att finnas en tid när webbstandarder upphör att utvecklas och därför skapa det perfekta klimatet för att skapa ramar. I stället för att falla bakom, bör verktyg som dessa följa med ny teknik och utvecklas med dem. På det sättet som utvecklare bestämmer att det faktiskt är dags att börja implementera HTML5 och CSS3, kommer verktygen redan att vara på plats för att de ska kunna göra det.
Hämta
Som du kan se är ramverket ganska litet i filstorlek, även med de medföljande PSD: erna, som självklart kan tas bort på en webbplats.
Nedladdningen består av tre CSS-filer, två HTML-filer, en JS-fil, en JPG och två PSD-filer. Vi tar en titt på den roll som varje av dessa spelar i förklaringen nedan.
Demofilen
När du hämtar ramverket öppnar du index.html. Det här är hjärtat i hela ramen och vad jag vill spendera större delen av vår tid på att diskutera.
Som du ser kan ramverket hjälpa dig genom att skapa ett antal av de vanligaste elementen. Din header-taggar (h1, h2 och h3) är utformade tillsammans med grundläggande sidtypografi, formelementen är redo att gå och har en bonus anpassad knappdesign, det finns en metod för att visa kod, och till och med en massa ytterligare stilar på plats för olika element som stark, fet, kursiv, infogad text, stor text etc.
Koden
För att få en mycket bättre titt på vad som finns i demofilen, kolla under huven för att se koden. Vi analyserar det här stycket för bit nedan.
DOCTYPE
Det första du ser i .html-filen är den nya, vackert enkla HTML5 DocType.
Detta är ett måste-ha uttalande som berättar webbläsare hur du tolkar din kod. Det är trevligt och kortfattat och jag föredrar det i högsta grad till tidigare, mer komplicerade versioner.
JavaScript
Nästa anmärkningsvärda sak som du ser är en länk till en extern JavaScript-fil.
Oroa dig inte, du behöver inte förstå en enda rad av JavaScript för att använda denna ram. Den medföljande JS använder helt enkelt ett par rader av kod för att skapa stöd för nya element i äldre webbläsare. Det är ett snyggt trick som låter dig använda mycket av godheten i HTML5 utan att oroa dig för vem du lämnar bakom.
Semantik
Nästa sak du bör märka om detta dokument är hur HTML-filen är konstruerad. Den använder den nya semantiska markeringen som du redan bör lära följa. Här är en extremt förenklad, avvecklad version av strukturen.
Som du kan se används ett antal nya HTML5-element här. Sidan är uppdelad i sidhuvud, nav, åt sidan, sektion, artikel, kod och sidfot. Med hjälp av ramverket kommer dessa element att ge den grundläggande strukturen för allt du skapar. Observera att många av de delar du normalt vill skapa divs för har inbyggt stöd i HTML5.
Använda 52 Framework kommer att tvinga dig att skapa dina sidor med dessa nya element och är därför ett bra sätt att hoppa in i HTML5 när tiden kommer.
Reset och Grid System
Det finns tre CSS-filer som ingår i ramverket: Allmänt, rutnät och återställning.Återställningsfilen är ganska grundläggande och är i huvudsak en modifierad version av den populära Eric Meyer CSS-återställningen. Denna version skapades av Richard Clark.
Nätet CSS finns där eftersom den, som alla goda ramar, använder grids tungt.
Det är definitivt inget banbrytande här, det är i grunden ett 16 kolonn 960 nätverkssystem precis som du brukar använda i andra ramar. Tillgängliga kolumner varierar i bredd från 40px hela vägen upp till 940px och varje innehåller en vänster och höger marginal på 10px.
General CSS
Den primära CSS innehåller ett antal användbara stilar för att komma igång. Allt i HTML-namnet ovan har specifika stilar på plats tillsammans med ett antal andra grundläggande objekt som float clearing klasser och block citat.
En snygg funktion här är att du kan ställa in en färgs färg för en webbsida för att åsidosätta webbläsarens standard. Det betyder att när du väljer en textrad, kommer markeringen att vara den färg du definierar.
I fältformatstilarna hittar du några stilar för att skapa de populära CSS3-rundade hörnen.
Slutligen, i den inbäddade CSS som finns i HTML-filen ser du lite mer CSS3 som används för att skapa skuggor.
Det kommer mera
Som jag sa ovan är 52 ramarna definitivt fortfarande i de tidiga stadierna och kommer att fortsätta växa och förbättra. Till exempel har den senaste beta-utgåvan lagt till stöd för duk och videoelement.
Jag skulle vilja se CSS för avrundade hörn och skuggor dras ut av specifika element i generella klasser eller mer märkbara provelement så att du inte behöver leta efter dem i koden om du vill använda dem som en starter för dina egna stilar.
Annars tror jag att ramverket är på en stark start och jag kan verkligen se mig själv bygga på det för att skapa något som är perfekt för mig själv.
Vad skulle du ändra?
Lämna en kommentar nedan och berätta vad du tycker om 52 Framework. Vad gillar du med det? Vad hatar du? Utvecklarna letar efter förslag på funktioner att lägga till så var noga med att lista alla som kommer att komma ihåg!