webForumDet fria alternativet

Fluid grid layout - best practices?

8 svar · 1 424 visningar · startad av Aureola

AureolaMedlem sedan okt. 201027 inlägg
#1

Hej!

Jag har en fråga: Jag har nyss börjat sätta mig in i Dreamweaver CS6 (hade CS3 förut) och dess "Fluid grid layout". Jag kollade på en video samt har läst på lite, och hela tiden påtalas att man inte ska röra den css som skapas vid layouten (alltså inte boilerplate). Men då är min stora fråga: var lägger jag stylingen på div:arna i så fall? Om jag gör en ny css; ska jag återigen ange samma namn på div:arna som i fluid grid css:en?

Hoppas nån förstår vad jag menar! Tack på förhand!

voigtann1Medlem sedan juni 20019 519 inlägg
#2

Det är väl upp till dig hur du vill namnge dina div:ar (element) om du vill bygga vidare på DW egna css:er(?) eller lägga till egna klassar för din unika styles.

xtremeMedlem sedan juli 20002 056 inlägg
#3

Kan det vara så att DW skriver över dina ändringar om du ändrar i den CSS som DW skapat?

Bästa är som sagt att skapa en annan css fil som du anropar efter den DW skapat och skriver över (anger samma ID/klassnamn) det som DW skapat.

AureolaMedlem sedan okt. 201027 inlägg
#4

Hej och tack för era svar. Jag har gjort så tills vidare att jag har stylat divarna i den css som skapas i Fluid Grid:en (bakgrund, linjer) och så har jag skapat en annan css för all annan styling. Jag är inte proffs på css så jag vet inte om man kan layout'a divar i en css och sen styla dom i en annan (dvs använda samma klassnamn i två olika) men det kan man kanske..?

Danne VMedlem sedan aug. 20068 090 inlägg
#5

Aureola skrev:

Hej och tack för era svar. Jag har gjort så tills vidare att jag har stylat divarna i den css som skapas i Fluid Grid:en (bakgrund, linjer) och så har jag skapat en annan css för all annan styling. Jag är inte proffs på css så jag vet inte om man kan layout'a divar i en css och sen styla dom i en annan (dvs använda samma klassnamn i två olika) men det kan man kanske..?

Jovisst kan du det! Det enda du ska tänka på att om du råkar stilsätta samma sak i båda stilmallarna så är det den stil som är närmast html-koden som exekveras.

Har du t.ex. två länkar till två olika stilmallar i head och råkar ha stilsatt samma sak på olika sätt i båda, så är det stilen i mallen i den nedre länken som slår igenom eftersom den är närmast html-koden.

AureolaMedlem sedan okt. 201027 inlägg
#6

Tack för hjälpen!
Det verkar dock som att min strategi fungerar dvs jag har inte pajjat nåt genom att ange lite style attribut på divarna i DW's css så jag låter det vara.
Men bra att veta att man kan göra så!

voigtann1Medlem sedan juni 20019 519 inlägg
#7

Använd helst inte style attribut, det kommer klottra ner html strukturen och håll design i din CSS kod, du borde kunna ange en tillräcklig selektor att hitta de element du vill göra unika (är inte rädd att lägga in nya klasser på befintliga element).

AureolaMedlem sedan okt. 201027 inlägg
#8

Ah, jag tror jag gjort mig missförstådd här (har visst använt fel terminologi). Alltså jag anger ingen styling i HTML-filen, det gör jag i CSS:en. Min fråga rörde alltså vilken CSS jag ska lägga stylingen i, typ fluid-grid.css eller min-egen-design.css.
Jag gjorde så att jag la bakgrundsfärg samt ev. linjer i fluid-grid.css'en där divarna finns definierade (man får se upp bara så man gör det för samtliga medieformat), och sen stylar jag resten av elementen i "min-egen-design.css". Body, h1-h4, mm mm.

kaxigtMedlem sedan okt. 2004636 inlägg
#9

Du gör bäst i att använda en stilmall för den responsiva delen, dvs strukturen för dina grids.
I denna kan du även lägga in dina mediaqueries (sist) eller så separerar du dessa till en egen stilmall.
Vad gäller presentation och struktur av övriga element så använder du style.css - i denna kan du lägga in presentationen av gridsen.

Så här har man gjort för Skeleton (men så många stilmallar behöver du egentligen inte).

http://www.getskeleton.com/src/stylesheets/base.css
http://www.getskeleton.com/src/stylesheets/skeleton.css
http://www.getskeleton.com/src/stylesheets/layout.css
http://www.getskeleton.com/documentation-assets/docs.css

126 ms totalt · 3 externa anrop · v20260731065814-full.37765c92
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
123 ms — hämta tråd, inlägg och bilagor (db)