Fluid grid layout - best practices?

[Aureola]

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 cssn?

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

[voigtann1]

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

[xtreme]

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.

[Aureola]

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 Gridn (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 V]

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 Gridn (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.

[Aureola]

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å!

[voigtann1]

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).

[Aureola]

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 CSSn. 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.

[kaxigt]

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