Rammeverk for CSS

MikkelRev · 22. februar 2012

Har nylig oppdaget at det finnes rammeverk ikke bare for Ruby, PHP og Javascript, men også for CSS. Ser også at det finnes to typer av CSS-rammeverk: layout-rammeverk (feks blueprint, 960.gs, bluetrip, osv) og syntaks-rammeverk (feks sass, less, xcss osv). Førstnevnte er egentlig bare ferdiglagde .css-filer, mens sistnevnte gir deg helt nye muligheter i CSS-koden din. Har du brukt noen CSS-rammeverk? Hvilke anbefaler du og hvilke fraråder du? Og hvorfor? Selv er planen å starte med SASS og bluetrip.

Discuss!

agm · 22. februar 2012

sistnevnte gir deg helt nye muligheter i CSS-koden din

"Helt nye muligheter" blir vel litt misvisende. LESS, SASS/SCSS osv er primært laget for å effektivisere produksjon ved å åpne for bl.a. variabler i stilsettet. Men når alt kommer til alt genererer de et stilsett i CSS som må følge standarder og spilleregler som alle manuelt kodede stilsett...

MikkelRev · 22. februar 2012

Jo du har jo rett at det gir ikke nye muligheter for CSS på samme måte som at jQuery/Prototype ikke gir nye muligheter for Javascript f.eks. Men det gir nye muligheter i selve kodingen. F.eks. oop, variabler, m.m.

Tror jeg dropper Bluetrip. Den ser ut til å ikke lenger bli vedlikeholdt, og forumet er full av spam.

sunsunsun · 22. februar 2012

Jeg ser også etter et gridsystem. Det står mellom 960.gs eller Twitter Bootstrap. Bootstrap har masse andre greier i pakken. Men man kan tilpasse det man vil laste ned.

Tror jeg kommer til å gå for Bootstrap, siden det er Twitter som utvikler koden.

torbjørn marø · 23. februar 2012

Jeg ser også etter et gridsystem. Det står mellom 960.gs eller Twitter Bootstrap. Bootstrap har masse andre greier i pakken. Men man kan tilpasse det man vil laste ned.

Tror jeg kommer til å gå for Bootstrap, siden det er Twitter som utvikler koden.

Jeg bruker Bootstrap, og liker det! Ikke sååå gøy at de endret alt for en måneds tid siden

MikkelRev · 23. februar 2012

Jeg ser Bootstrap bruker Less. Går det fint å bruke det sammen med Sass? Og har det sticky footer?

sunsunsun · 23. februar 2012

Spiller det noen rolle om man bruker SASS eller LESS? Det ser ut som det nesten er det samme.

Det finnes også noen kule måter å skrive HTML på. HAML og Jade lar deg skrive mye penere kode, som gjør det enklere å skrive HTML-sider.

Jeg syns Jade så best ut, så jeg prøvde meg på å lage en HTML-side.

Jade:

doctype 5
html(lang="en")
head
	meta(charset="utf-8")
	title Biler.no - Biler er helt et transportmiddel.
	link(rel="stylesheet", href="/main.css", type="text/css")
body
	header
		h1.logo Biler.no
		nav
			ul
				li Raske biler
				li Trege biler
				li Kule biler

	section#nyheter
		article
			img(src="bilde01.jpg", alt="En rød Ferrari")
			h1 Ferrari ute med ny bil
			p Se oss kjøre den på nordpolen.
		article
			img(src="bilde02.jpg", alt="En blå Toyota")
			h1 Toyota Lager også biler
			p Vi kjørte den i Japan.
		article
			img(src="bilde03.jpg", alt="En gul Volkswagen")
			h1 Gulbil
			p En ny type boksing testes ut.

	aside
		nav
			ul
				li Et
				li Eller
				li Annet

	footer
		p What up - Copyrightz 2012

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Biler.no - Biler er helt et transportmiddel.</title>
<link rel="stylesheet" href="/main.css" type="text/css">
</head>
<body>
<header>
	<h1 class="logo">Biler.no</h1>
	<nav>
		<ul>
			<li>Raske biler</li>
			<li>Trege biler</li>
			<li>Kule biler</li>
		</ul>
	</nav>
</header>

<section id="nyheter">
	<article><img src="bilde01.jpg" alt="En rød Ferrari">
		<h1>Ferrari ute med ny bil</h1>
		<p>Se oss kjøre den på nordpolen.</p>
	</article>
	<article>
		<img src="bilde02.jpg" alt="En blå Toyota">
		<h1>Toyota Lager også biler</h1>
		<p>Vi kjørte den i Japan.</p>
	</article>
	<article>
		<img src="bilde03.jpg" alt="En gul Volkswagen">
		<h1>Gulbil</h1>
		<p>En ny type boksing testes ut.</p>
	</article>
</section>

<aside>
	<nav>
		<ul>
			<li>Et</li>
			<li>Eller</li>
			<li>Annet</li>
		</ul>
	</nav>
</aside>

<footer>
	<p>What up - Copyrightz 2012</p>
</footer>
</body>
</html>

Hvis dere bruker Mac så burde dere laste ned CodeKit. Den kompilerer HAML, Jade, SASS, LESS etc. automatisk hver gang man lagrer.

MikkelRev · 23. februar 2012

HAML og Jade har jeg aldri hørt om før, men ser det har Ruby/Python-syntaks og kan sikkert dermed appellere til fanboysen I SASS kan kan man velge mellom å skrive vanlig C-syntaks eller Ruby-syntaks. Tilsvarende finnes det CoffeScript for Javascript.

Tja, det finnes nok pros og cons med både SASS og LESS. Etter det jeg har lest her og der, og av sammenligninger, så har jeg bestemt meg for SASS (enn så lenge). Du har flere funksjoner du ikke har i LESS, du kan bruke Compass om du ønsker, og du trenger ikke ha javascript installert. SASS kjøres fra serveren istedet. Sammenligning her.Det har også kommet et nyere og mindre kjent rammeverk, xCSS. Det er et objektorientert css-rammeverk. Men noe særlig mer enn det, vet jeg ikke om det.

Endret 23. februar 2012 av MikkelRev

Logg inn

Rammeverk for CSS

Anbefalte innlegg

MikkelRev

Lenke til kommentar

Videoannonse

agm

Lenke til kommentar

MikkelRev

Lenke til kommentar

sunsunsun

Lenke til kommentar

torbjørn marø

Lenke til kommentar

MikkelRev

Lenke til kommentar

sunsunsun

Lenke til kommentar

MikkelRev

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer