Frustrerad med kvaliteten på gratis CSS-mallar på nätet, men är inte helt överens med byggnadsnivån? Trött på att spendera timmar att försöka skräddarsy lame pre-fab designs?
Idag tar vi dig över sju hundra gratis nedladdningsbara CSS-mallar som fokuserar på att ge dig bara en grundläggande layout att bygga på. Med hjälp av de här webbläsarens layouter kan du undvika oändliga CSS-positioneringsproblem och fokusera på vad du är bra på: design.
Vem är dessa för?
Många av er har varit i designspelet i flera år men börjar bara nu skapa webbplatser och koda dem för hand. Du har tillräckligt med Photoshop-färdigheter för att byta ut en vacker design och tillräckligt med grundläggande CSS-kunskaper för att få texten att se bra ut.
Men det största problemet som många nya utvecklare stöter på kan helt enkelt vara att få sin grundläggande layout att fungera i CSS. Placering med CSS kan vara mycket svårare än grundläggande styling, speciellt när du börjar faktor i flera webbläsare. Om du inte är säker på hur du löser ett problem kan timmar av tweaking landa dig tillbaka där du började, oerhört frustrerad och desperat för lite hjälp.
De enkla nedladdningsbara layouterna nedan ger dig en solid grund för att bygga dina webbplatser och ge bra exempel för att lära dig hur du skapar din egen.
Varför inte fulla mallar?
Om du kör en snabb Google-sökning efter gratis CSS-mallar hittar du en miljon. De flesta av dessa är dock inte idealiska för verkliga webbutvecklare som vill skapa unika webbplatser. Vad du vanligtvis får är något som detta:
Mallar som detta tvingar dig verkligen i en ful, förutbestämd design som du antingen måste följa eller spendera timmar att dra ihop för att försöka anpassa. I slutändan hade det varit enklare att bara koda det själv från början!
Jag tycker att det är mycket mer användbart att ladda ner några super grundläggande CSS-layouter som är så enkla som möjligt. Detta gör det möjligt för dig att snabbt prototyper layouten för en sida utan att slösa bort halva din dag sortering genom kod du inte behöver. Den typiska layouten i denna kategori ser mer ut så här ut:
Här har vi ingen text eller bilder att kasta ut, det är bara ett naket skelett som är klart för dig att fylla. Ta en titt på de stora resurserna nedan för att hitta alla grundläggande layoutmallar du någonsin behöver!
Primär CSS: 22 Layouts
? Primär är ett enkelt CSS-ramverk, utformat för utvecklare och designers för att göra CSS så enkelt som möjligt.?
Lilla lådor: 16 Layouts
En intressant samling av fyra grundläggande layouter utförs genom ett antal olika metoder.
CSS Easy: 8 Layouts
En samling av fyra fasta och fyra flytande layouter som syftar till att lära dig grunderna för CSS-positionering.
Max Design: 25 layouter
En solid samling av superbaserade mallar, varav många har medföljande handledning så att du kan lära dig hur det är gjort.
Iron Meyers: 224 Layouts
Definitivt en av de bästa resurserna på listan. Den här sidan innehåller 56 grundläggande layouter, var och en med fyra versioner: 100% Fluid, 974px, 950px och 750px.
Dynamisk enhet: 47 Layouts
Dessa CSS-layouter är uppdelade i fyra kategorier: två kolumner, tre kolumner, fasta layouter, flytande layouter och CSS-ramar.
Intensivstation: 16 Layouts
En liten men användbar samling av XHTML 1.0 och CSS2 layouter.
BlueRobot: 3 Layouts
Bara tre mallar här men de är solida och populära layouter som du definitivt vill kolla om du behöver något grundläggande.
Matthew James Taylor: 7 Layouts
? Inga CSS hackar. SEO vänliga. Inga bilder. Ingen JavaScript. Cross-browser och iPhone kompatibel.? Dessa layouter kommer också med mycket dokumentation för att komma igång.
Gratis CSS: 252 Layouts
En hel del 252 CSS-layouter som säkert kommer att komma igång på rätt väg. Snabbt att ladda ner och enkelt att anpassa!
Kod suger: 95 Layouts
Code Sucks har en imponerande samling gratis nedladdningsbara layouter med 53 fasta versioner och 42 faux kolumnversioner. Faux kolumn layouter använder en bakgrundsbild för att se ut som de vänstra och högra kolumnerna är lika höga och oberoende av varandra.
Slutsats
Att riva upp ovanstående layouter bör lära dig ton om CSS-positionering på ett mycket mer praktisk sätt än att läsa tre böcker om CSS. Var noga med att inte bara genomföra dessa mallar utan att verkligen sparka däcken och justera siffrorna för att se hur de fungerar.
Lämna en kommentar nedan och meddela om du hittade det här inlägget användbart. Också vara säker på att dela med dig av andra stora resurser som du använder för grundläggande CSS-layouter!