CSS ramverk

CSS-ramverket  är ett ramverk skapat för att förenkla arbetet för en layoutdesigner , påskynda utvecklingen och eliminera maximalt möjliga antal layoutfel ( kompatibilitetsproblem mellan olika webbläsarversioner , etc.). Precis som skriptspråksbibliotek är CSS- bibliotek , vanligtvis i form av en extern css-fil, "anslutna" till projektet (läggs till i rubriken på webbsidan). Mer funktionsrika ramverk har också mer JavaScript-baserade funktioner och extrafunktioner, men är mestadels designorienterade och fokuserar på interaktiva UI-mönster. Denna detalj skiljer CSS-ramverk från andra JavaScript-ramverk.

Fördelar

• Tillåter en programmerare eller designer som är oerfaren i layoutens krångligheter att skapa en HTML - layout på rätt sätt.
• Layout baserad på lager, inte tabeller.
• Snabbare utveckling.
• Crossbrowser-kompatibilitet .
• Möjlighet att använda kodgeneratorer [1] och visuella redigerare .
• Kodens enhetlighet när du arbetar i ett team gör att du kan minska antalet oenigheter under utvecklingen.

Nackdelar

• Bibliotek kan vara väldigt "uppblåsta" - det kan finnas mycket extra kod som inte kommer att användas i projektet.
• Designen kommer att bero på css-biblioteket.
• Behovet av att lägga till flera klasser till ett enda element bryter mot principen för vilken CSS skapades: separationen av beskrivningar av struktur och utseende.

Skillnader

• Vissa bibliotek [2] använder stilåterställningar ( reset.css ) för att matcha standardstilarna i alla webbläsare, medan andra [3] använder normalisering ( Normalize.css ) för att minska mängden initial bibliotekskod.

CSS-bibliotekstyper

På grund av de nämnda bristerna är användningen av CSS-bibliotek kontroversiell i det professionella samhället. Det ledde också till uppkomsten av olika typer av CSS-bibliotek. Konventionellt kan två typer särskiljas: omfattande och begränsad. Ett tredje alternativ skulle vara att utveckla ditt eget bibliotek [4] . Det här alternativet föredras av de flesta utvecklare, eftersom det ger fördelarna med en anpassad lösning och minskar nackdelarna med att vara beroende av tredjepartsbibliotek.

Omfattande CSS-bibliotek

Den här typen av bibliotek försöker täcka de flesta saker som en utvecklare kan behöva. Den här typen inkluderar bibliotek som inkluderar CSS för layout och återställning (eller någon form av ramverk).

Begränsade CSS-bibliotek

Som namnet antyder täcker denna typ av bibliotek endast ett begränsat antal behov eller har ett specifikt syfte.

Exempel på CSS-bibliotek

Omfattande

• Bootstrap  är ett bibliotek skapat av utvecklarna av Twitter .
• W3.css - CSS-ramverk från w3schools.
• Twitter flyg
• blått tryck
• UIKit
• Materialize är ett CSS-ramverk i stil med Material Design .
• 960 Grid System  är ett bibliotek för snabb layoututveckling.
• Yet Another Multicolumn Layout (YAML)  - har ett kodgenereringsverktyg, förmågan att skapa adaptiva gränssnitt .
• css-framework  är ett ryskt bibliotek för att utveckla webbgränssnitt.
• Foundation  är ett avancerat bibliotek för att utveckla responsiva gränssnitt .
• Golden Grid System  är ett bibliotek för att utveckla adaptiva gränssnitt baserat på det gyllene snittet .
• Gumby Framework
• Topcoat  är ett litet bibliotek från Adobe som distribueras under Apache 2.0-licensen.
• Compass är ett CSS-ramverk oberoende av Rails.
• Rest CSS Framework

Begränsad

• jQuery UI CSS Framework
• CSS-baserat bildspelssystem  är ett bibliotek för att skapa presentationer.

Anteckningar

1. ↑ YAML Builder . Datum för åtkomst: 20 augusti 2012. Arkiverad från originalet 23 augusti 2012. (obestämd)
2. ↑ Den ursprungliga "meyerweb reset" hittade sin väg in i Blueprint . Datum för åtkomst: 20 augusti 2012. Arkiverad från originalet 22 augusti 2012. (obestämd)
3. ↑ Normalize.css används i Twitter Bootstrap, HTML5 Boilerplate, NASA, etc. . Hämtad 28 september 2017. Arkiverad från originalet 3 april 2013. (obestämd)
4. ↑ Riktlinjer för att utveckla ditt eget CSS-ramverk Arkiverad 15 augusti 2012.

Länkar

•  Jämförelse av CSS-ramverk
• Ramar för  designers
• Definitiv lista över CSS-ramverk - Välj din  stil
• 960 Grid System CSS-  bibliotek
•  Bootstrap CSS Library på Github
• Allt om 960gs - en nästan uttömmande beskrivning  (ryska)