Susy - een alternatief en snel CSS grid systeem

03 01 17 | Serieuze zaken | 1 Reactie

Het gebruik van kolommen en grids, bij drukwerk vormgeving bijna vanzelfsprekend, is bij websites nog steeds een vak apart, onder andere doordat je een layout vaak wil aanpassen aan de schermgroote van de bezoeker die een mobiel, een laptop, een iPad maar ook een grote desktop kan gebruiken. Als je je eigen thema's bouwt in HTML is dit prima mogelijk met responsive CSS-stylesheets, maar er zijn meerdere wegen die naar Rome leiden.

Foundation en Bootstrap: opmaakcode in de HTML

Veel CSS frameworks (zoals Foundation en Bootstrap) bieden hiervoor een oplossing, maar ook als je hierbij alle overbodige features 'uit zet' levert dit soms zwaardere, en daardoor langzamere code op dan strikt nodig.

Bij sites die op een computer worden bekeken maakt dat niet zoveel uit, maar met een mobieltje op een langzame verbinding scheelt al snel seconden - en daardoor klanten.

Ook ben je hiermee verplicht om in je HTML-code een aanduiding als class="large-3 small-6 columns" (in het geval van Foundation) te gebruiken.

Enter Susy: alle opmaak in de stylesheets

Onlangs probeerde ik Susy, een Sass-gebaseerde oplossing waarmee je relatief makkelijk je eigen responsive gridsysteem kunt bouwen. Het beviel goed: het is snel op te zetten, en de CSS en HTML-code blijven hiermee een stuk compacter - en dus sneller. Ook heb je volledige vrijheid om verder de technieken te gebruiken die het beste voor je werken.

Het ontbreken van layout-code in de HTML heeft één nadeel: je moet bij het ontwikkelen in 2 vensters (HTML en CSS) kijken hoe een bepaald elemant zich gaat gedragen. Maar verder is Susy zeer de moeite waard, ik ga het zeker vaker gebruiken

Voor designers en frontenders die Sass gebruiken is het zeker de moeite van het bekijken waard. Een goed beginpunt zijn de gratis hoofdstukken van het Learning Susy van de sympathieke Zell Liew.

Jij ook? Stuur me gerust een mailtje als je er vragen over hebt.





1 Reactie

Een of meer reacties staan in de wachtrij om goedgekeurd te worden.

Reageer

(optioneel veld)
(optioneel veld)

Reactiemoderatie staat aan op deze site. Dit betekent dat je reactie niet zichtbaar zal zijn, tot deze is goedgekeurd door een beheerder.

Persoonlijke info onthouden?
Kleine lettertjes: Alle HTML-tags behalve <b> en <i> zullen uit je reactie worden verwijderd. Je maakt links door gewoon een URL of e-mailadres in te typen.

Susy - een alternatief en snel CSS grid systeem


Meer »


Loket Leros

Eerste opvang voor vluchtelingen op Leros
Meer »


Bolt 2.0

Ons favoriete CMS zet een flinke stap
Meer »


Grote en kleine web-projecten

Een update van recent ontwikkelde huisstijlen en websites
Meer »


Website TechnoCow nu meertalig


Meer »


Boltation

Snel startpunt voor simpele websites, nu te downloaden op GitHub
Meer »


Energiebewust webdesign

Het kan, het moet en het levert meer op dan je denkt
Meer »


Streeff.nl op de schop

Hoogste tijd voor een nieuwe site
Meer »