11 CSS -mallplatser: Börja inte från början!

11 CSS -mallplatser: Börja inte från början!

Webbdesign är mer tillgänglig än någonsin, men det krävs fortfarande mycket arbete - och mycket skicklighet - för att få professionella resultat.





Lyckligtvis behöver du inte börja om från början varje gång. Det finns tusentals gratis CSS -mallar tillgängliga online, alla omfattar moderna designtrender och tekniker. Du kan använda dem i sin ursprungliga form eller anpassa dem för att göra dem egna.



I den här guiden tittar vi närmare på CSS -mallar och var du kan hitta dem.





Vad är en CSS -mall?

En CSS -mall innehåller inte bara CSS: den ger dig allt du behöver för att skapa en fullt fungerande webbplats. När du laddar ner en får du vanligtvis en mapp som innehåller följande:

  • HTML -filer - Du får en HTML-fil för varje sida på webbplatsen. Den innehåller exempeltext och bilder som du måste ersätta med ditt eget innehåll. Du måste också kunna justera metadata, relaterade till saker som webbplatsbeskrivningen.
  • CSS -fil - Du får vanligtvis en huvud-CSS-fil som innehåller all styling för webbplatsen, plus eventuella extrafunktioner som ett återställt formatmall eller en för webbteckensnitt.
  • Javascript -fil - Om webbplatsen innehåller Javascript-funktioner bör de helst ingå i sin egen separata fil, snarare än att integreras i HTML-dokumenten.
  • Bilder, teckensnitt och ikoner - Alla bilder som används i mallen bör också inkluderas. Du kanske vill behålla saker som ikoner och bakgrunder, men måste ersätta de andra platshållarbilderna med dina egna. Vissa anpassade teckensnitt kan också inkluderas.

Till skillnad från de flesta andra typer av mallar du kommer att stöta på - vare sig det är Wordpress, Excel eller InDesign -mallar - CSS-mallar kräver viss teknisk kunskap.



Det finns inget användarvänligt gränssnitt för att redigera dem i, så du måste åtminstone veta hur du hittar runt i ett HTML -dokument bara för att lägga till ditt eget innehåll. För att göra egna anpassningar behöver du en anständig kunskap om CSS.

hur man tar bort filer på Android

Vad du ska leta efter i en CSS -mall

Det finns så många gratis CSS -mallar att välja mellan. Så hur vet du vilket som är rätt för dig? Här är några saker att se upp för:



  • Design - Uppenbarligen vill du ha en webbplats som ser snygg ut och återspeglar vilken bild du vill skildra. Men överväg också om mallen är rätt för dina behov både nu och i framtiden. Många är för en sida webbplatser; vissa är avsedda för flera sidor. Om du behöver det senare, överväg om du kan vara bättre att använda ett CMS som Wordpress istället.
  • Mobiloptimerad - Mobil webbanvändning är nu högre än stationär, så det är viktigt att din webbplats fungerar korrekt på smartphones. Alla anständiga CSS -mallar bör använda responsiv design så att webbplatsen fungerar perfekt på vilken skärm som helst. Om din utvalda inte gör det, byt till en som gör det.
  • Välskriven - Ladda ner mallen och ta en titt på koden innan du förbinder dig att använda den. Det ska vara rent, välstrukturerat och enkelt att redigera. Det bör också vara SEO-medvetet, med korrekt användning av titel- och rubriktaggar.
  • Licens - Kontrollera licensen för din valda CSS-mall. Många är tillgängliga under en Creative Commons -licens , men olika versioner av den här licensen avgör om du kan redigera mallen, om du kan använda den kommersiellt och om du behöver tillgodoräkna dig den ursprungliga designern.
  • Tillägg - Vissa CSS-mallutvecklare erbjuder sitt arbete på freemium-basis. Du får mallen gratis, men har möjlighet att betala för ytterligare anpassningar för att göra den unik för din webbplats.

Med allt det förklarade, låt oss ta en titt på de bästa platserna för att hitta gratis CSS -mallar.

1. Mall.co

Denna fantastiska samling med mer än 800 CSS -mallar innehåller stilar för varje klass av webbplatser. De är alla skapade speciellt för webbplatsen, så du bör inte se dem dyka upp någon annanstans.



Alla mallar är responsiva och byggda med HTML5. De är små och lätta, med extra Javascript -funktioner, som en videoljuslåda eller rullningseffekter, används endast där de ger verkligt värde till upplevelsen.

2. Styleshout.com

Styleshout erbjuder ett stort utbud av både gratis- och premiummallar, de tidigare släpptes under Creative Commons -licensen.

De fria mallarna täcker ett brett spektrum av kategorier, från hela webbplatser till Coming Soon -sidor och till och med den ofta förbises 404 -felsidan. Du kan anpassa dem själv och anpassa dem efter stilen på din befintliga webbplats, eller så kan du betala för att få Styleshout att göra det åt dig.

3. HTML5Up.net

Denna supersnygga samling mallar är också superpopulär. De flesta har laddats ner hundratusentals gånger, och det är lätt att se varför.

Alla vanliga kategorier av webbplatser tillgodoses, som blogg och produktsida, och det finns några särskilt fina mönster för fotografer att visa upp sitt arbete. De grundläggande mallarna i rutnätstil är extremt anpassningsbara, medan de flashigare tenderar att använda Javascript ganska tungt så kan vara mindre lämpade för dina tweaks.

Fyra. Freebiesbug.com

Vad Freebiesbug saknar i kvantitet är det mer än kompenserar för i kvalitet. En webbplats där unga utvecklare visar upp sina färdigheter, den innehåller många avancerade premiumdesigner.

Webbplatsens imponerande samling gratis mallar är perfekta för byråer, fotografer, apputvecklare och andra annonsmaterial. Förpackad med Javascript- och CSS -effekter och animationer kan du anpassa sajterna, även om de ofta är så fina att du kanske inte vill.

Dessutom innehåller Freebiesbug.com alla typer av gratis resurser för webbdesigners, inklusive teckensnitt, stockfoton, Illustrator -skisser och PSD -filer och mer.

5. Gratis- CSS.com

Free-CSS.com är en utan krusiduller webbplats som erbjuder-i skrivande stund-cirka 2503 gratis mallar, plus massor av premiummallar också, om du fortfarande inte kan hitta det du letar efter.

Med så många att välja mellan kan det vara lite svårt att nöja sig med den perfekta designen. Kvaliteten är i allmänhet bra, även om webbplatsens 10-åriga existens innebär att den fortfarande är värd för mallar skrivna i XHTML. Du vill undvika dessa. Den andra saken är att se till att du kontrollerar licensen för din valda mall. De är alla gratis, men vissa är offentliga, vissa Creative Commons, och vissa använder en författarspecifik licens.

6. OS-Templates.com

28 sidor gratis CSS-mallar, mestadels med hjälp av moderna, rutnätsbaserade layouter på en enda sida. Om det är enkelt vad du är ute efter, är det här platsen att leta efter. Designen är ren, snygg och lätt att anpassa.

OS-Templates.com erbjuder också en stor samling 'grundläggande mallar'. Dessa ger dig grundstrukturen för en webbplats i olika populära layoutscheman (två-kolumn, tre-kolumn, etc), samtidigt som den är helt ostylerad. Precis som att använda standardtemat i Wordpress, gör den tomma duken att du kan göra din webbplats till vad du vill.

7. boag.online [Inte längre tillgängligt]

Maglev är en enda en sida webbplats mall som kan vara förhandsgranskas i aktion på boag.online .

Det är en snabb, ren mall, perfekt för en produktsida. Den minimalistiska designen förstärks endast med några få Jquery -effekter för att hjälpa dig att bläddra mellan sektioner. Den enkla layouten fungerar i sig, men den är också en bra utgångspunkt för dina egna anpassningar.

8. Pixel Buddha

Pixel Buddhas mallar är inte bara begränsade till webbplatser, de innehåller också några för nyhetsbrev via e -post.

Hur som helst, de är alla utformade med HTML5 och CSS3, och är lyhörda så ser bra ut på vilken enhet som helst. Höjdpunkter inkluderar Howdy HTML, en vacker portfölj/CV -mall och SOHO HTML, en fantastisk e -handelssida som innehåller PSD -källfiler ovanpå HTML och CSS.

bad_system_config_info

9. Templatemo.com

Nästan 500 gratis mallar är tillgängliga från Templatemo. Några av de bästa är de som bryter sig loss från systemet Bootstrap-stil för att prova något annat.

De flesta mallarna är enkla och överskådliga, även om funktioner som ljusboxar och innehållskaruseller ingår där de behövs. Vi gillar också det faktum att flera av mallarna är konfigurerade för att fungera med så många som sex sidor som standard. Detta gör det lättare om ditt innehåll inte passar den allt vanligare layouten på en sida.

10. Startbootstrap.com

Bootstrap är ett otroligt populärt front-end-ramverk som gör att du kan bygga webbplatser av hög kvalitet på nolltid. Det tar dock lite tid att lära sig, det är där Start Bootstrap kommer in.

Denna samling gratis mallar med öppen källkod är alla byggda med Bootstraps rutsystem. Det finns mer än 30 att välja mellan. Vissa är helt utformade och avsedda för appar, bloggar och målsidor, medan andra är tomma layouter som väntar på att du ska göra stil.

elva. Bootswatch.com

Slutligen, något lite mer praktiskt. Bootswatch erbjuder 16 teman med öppen källkod till stilsajter byggda med Bootstrap.

Du kan antingen bygga din webbplats layout själv med Bootstrap eller ladda ner en av de tomma mallarna från Start Bootstrap. Vad Bootswatch gör är att ändra teckensnitt, bakgrundsfärger och styling för knappar, menyer och andra element. Det ger din webbplats ett unikt utseende samtidigt som den är trogen Bootstraps ultra-rena etos.

Det är lätt att slå ihop en grundläggande webbplats med Bootstrap, och Bootswatch ger den lite omedelbar polering.

Hur man använder CSS -mallar

I stort sett finns det två sätt att använda mallar. Antingen använder du dem som de är eller så använder du dem som grund för din egen design.

Faran vid användning av mallar är att du hamnar på en webbplats som är identisk med någon annans. Välj en populär mall så kan det bokstavligen finnas tiotusentals identiska webbplatser. Detta är huvudargumentet för att anpassa dem.

vad gör en twitch -prenumeration

CSS -mallar är en bra genväg för erfarna webbdesigners som har en grundläggande layout i åtanke och vill hoppa direkt in i stylingen.

De är också perfekta för alla som är nya inom webbdesign. Om du kan din väg runt HTML och CSS men ännu inte har förtroende eller kunskap för att bygga en webbplats från grunden, fungerar en CSS -mall både som ett enkelt sätt att få en snygg webbplats och ett fantastiskt inlärningsverktyg.

Du kan behandla det som ett pågående arbete. Börja med byta teckensnitt och ändra färgschema , och med tiden kan du göra om befintliga element, lägga till nya och så vidare. Det finns inget bättre sätt att lära sig något än genom praktisk, praktisk erfarenhet.

Använder du CSS -mallar när du bygger webbplatser? Vilka är dina favoritplatser att hitta dem på? Dela dina erfarenheter och tips med oss ​​i kommentarerna.

Dela med sig Dela med sig Tweet E-post Hur du rengör din Windows -dator med kommandotolken

Om din Windows -dator har slut på lagringsutrymme, rensa bort skräpet med dessa snabba kommandotolken.

Läs Nästa Relaterade ämnen
  • Programmering
  • Webbdesign
  • CSS
Om författaren Andy Betts(221 artiklar publicerade)

Andy är en tidigare tryckt journalist och tidningsredaktör som har skrivit om teknik i 15 år. Under den tiden har han bidragit till otaliga publikationer och producerat copywriting för stora teknikföretag. Han har också gett expertkommentarer för media och varit värd för paneler vid branschevenemang.

Mer från Andy Betts

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera