Share
Ooit afgevraagd hoe al die gelikte 'tijdschrift'-thema's voor WordPress en andere platforms werden gemaakt? Veel, zo niet alle, zijn ontworpen met behulp van een CSS Grid Framework - althans in essentie, als het niet in feite is. Dat wil zeggen, u kunt een bestaand CSS-framework gebruiken of uw eigen CSS-framework bouwen. Hoewel het mogelijk is om complexe webpaginalay-outs zonder kader te ontwerpen, is het waarschijnlijk een handeling in masochisme. In dit artikel krijgt u een overzicht van de huidige batch Frameworks die u zou moeten gebruiken.
Lay-outrasters zijn gebruikt in printpublicaties lang voor het web. Het is een onzichtbare basis die wordt gebruikt om visuele samenhang te bereiken in het ontwerp en de lay-out van tijdschriften en krantenpagina's. Ze komen in feite neer op een rooster dat de horizontale en verticale ruimte verdeelt in consistente eenheden waar tekst, koppen, afbeeldingen en advertenties kunnen worden geplaatst.
Hetzelfde concept is om dezelfde reden aangepast voor het ontwerpen van webpagina's, met behulp van CSS (Cascading StyleSheets) -code om HTML-elementen te positioneren. Veel redactionele sites die door grote uitgevers van gedrukte media worden beheerd, passen namelijk rasters toe om een kijkje te nemen op hun websites die vergelijkbaar zijn met hun gedrukte inhoud..
Houd er rekening mee dat de verticale as niet zo goed wordt ondersteund in CSS Grid-systemen, aangezien de hoogte van een webpagina niet zo veel is als bij een afgedrukte pagina. (Toch is dat een onbelangrijk probleem bij het ontwerpen van webpagina's, tenzij u dezelfde functies verwacht als bij Desktop Publishing, ook wel DTP-systemen genoemd, dat moeilijk te ondersteunen is zonder een PostScript-achtige taal die browsers kunnen implementeren en ondersteunen.)
Niet alle ontwerpers ondersteunen het gebruik van grid-frameworks boven tabellen, of zelfs helemaal niet. Maar laten we wel wezen; er zijn lay-outs die je simpelweg niet kunt doen met alleen HTML-tabellen zonder veel pijnlijke moeite - en veel nesten die moeilijk te ontcijferen zijn, zouden ooit veranderingen moeten aanbrengen.
Natuurlijk, als u rasters gebruikt, moet u een aantal noodzakelijke HTML-markeringsmarkeringen aan uw inhoud toevoegen, waardoor de bestandsgrootte van pagina's wordt vergroot. Dit betekent ook dat opmaak en stijl niet echt gescheiden zijn - een principe waar veel webontwerpers zich aan zouden willen houden. (Sommige mensen voelen, terecht of ten onrechte, dat nee-zeggers van CSS-frameworks ontwerpers zijn die zich zorgen maken dat de behoefte aan hun diensten zal afnemen, hoewel met deze logica codeerders ook in de problemen zitten, vooral met de toename van de code voor meerdere browsers. bibliotheken zoals jQuery.)
Het is een feit dat het gebruik van een CSS-rasterkader betekent dat uw browser de CSS-bestanden slechts één keer laadt en ze in de cache "aan de clientzijde" laat staan. Bovendien is de extra HTML-markering die nodig is om het "onzichtbare" CSS-framework toe te passen, zelden zo belangrijk dat problemen met bandbreedte voor lezers een punt van zorg zouden moeten zijn. (Interessant genoeg lijken de meeste nee-zeggers over Yahoo UI Grids te praten, niet zozeer Blueprint.)
In de meeste voorbeelden waar ik mee heb gewerkt, en in alle tijdschriftthema's die ik heb gebruikt, heb ik het over betrekkelijk kleine bestandsgroottes, vooral vergeleken met de code van het blogplatform dat wordt gebruikt. Een enkele grote afbeelding neemt waarschijnlijk meer ruimte in beslag. Met snellere internetverbindingen is het echt niet zo'n groot probleem.
Design en esthetische voordelen
Ongeacht of u CSS-rasters gebruikt voor prototyping of productiesystemen, er zijn meerdere esthetische en ontwerpvoordelen:
Hier is een korte lijst met enkele van de meer populaire kaders:
Er zijn andere CSS Grid-kaders die u kunt vinden in Google Code, maar van de drie of vier die ik heb bekeken, de meeste waren onvolledig op het gebied van documentatie of zelfs projectbestanden, dus ik heb ze achtergelaten. Als u een raamwerk kent dat niet in de lijst staat, laat het ons dan weten in de comments!
Ik wil erop wijzen dat dit geen alomvattende vergelijking van CSS-kaders is. Ik heb zelfs niets anders uitgebreid gebruikt dan Blueprint, hoewel ik documenten heb gescand voor alle hierboven genoemde frameworks en een beetje met YAML en Grid Designer heb gespeeld. Blueprint, YUI Grids en YAML zijn misschien de "grote drie" in de CSS framework-ruimte, en 960 lijkt een stevige vierde keuze te zijn.
Bij het kiezen van een raamwerk heb ik er rekening mee gehouden dat ik geen getrainde ontwerper ben - meer dan wat ik jarenlang zelfstandig heb bestudeerd. Ik waag me in het ontwerp wanneer nodig, zij het in een zeer minimalistische vorm. Omdat ik nogal wat jaren heb doorgebracht met het publiceren van mijn eigen gedrukte tijdschrift of met het werken aan anderen, heb ik inderdaad een behoorlijk (heel slechte) pagina-indeling gemaakt met behulp van de principes van rasterontwerp die werken met Adobe PageMaker. Dus ik vind het heel natuurlijk om met CSS Grids te werken voor webdesign. Het lijkt erop dat gezien het aantal WordPress-thema's die er zijn - zie de lijst aan het einde van dit artikel - die gebaseerd zijn op een rasterwerk (meestal Blueprint), ontwerpers zich behoorlijk comfortabel voelen met rasters, ook.
Niettemin, met de tijd altijd beperkt, heb ik iets nodig dat gemakkelijk te leren en te gebruiken is, maar toch robuust. Ik heb gemerkt dat Blueprint CSS Grid aan mijn behoeften voldoet. Het integreert prima met verschillende JavaScript-bibliotheken - inclusief jQuery, wat kan resulteren in een aantal verdomd sexy webinterfaces. Het wordt goed weergegeven (hoewel niet 100% perfect) in de meeste browsers - hoewel je moet testen op die grote doorn in de zijde van webontwerpers, IE-browser.
Gebaseerd op mijn losse onderzoek van CSS Grids van vorig jaar, lijkt Blueprint het meest robuuste raamwerk te zijn, het minst beperkend, het meest ondersteund - in termen van hoe wijdverspreid het gebruik ervan - de kleinste in omvang, en het raamwerk met de meeste hulpmiddelen . Het mooie van Blueprint is dat je heel snel de CSS-code kunt maken voor een aangepast framework met behulp van tools zoals Kematzy's Blueprint Grid CSS Generator. Hoewel je dit met Grid Designer kunt doen, zou een snelle vergelijking suggereren dat het niet zo robuust is als Blueprint.
Aan de andere kant, scannen en bladeren door de documentatie voor Yahoo! UI Grids CSS-framework doet me geloven dat als je gewoon een eenvoudige webpagina-layout wilt maken en een handvol voorinstellingen wilt om mee te spelen, je misschien deze optie wilt bekijken. Ik heb echter het gevoel dat het een beetje te restrictief is voor mijn smaak. (Misschien wil je Foo Hack's Blueprint CSS Framework vs YUI Grids lezen.)
Uiteindelijk, als het gaat om het leren van iets nieuws online - zoals een programmeertaal en codebibliotheek / raamwerk - pas ik altijd de "schouders van reuzen regel" toe. Ik maak eerst een selectie van de opties die geschikt lijken voor wat ik nodig heb en selecteer vervolgens op basis van hoeveel er over is geschreven. Het lijkt misschien niet eerlijk voor nieuwere opties, maar het proces is niet zo veel willekeuriger dan het aantal mensen dat webtoepassingen kiest om te gebruiken. Er is te veel om op te volgen en het hebben van een bestaande ondersteunende gemeenschap maakt een groot verschil.
Blueprint CSS Grid Framework is wat ik zal gebruiken in al mijn tutorials op NETTUTS (wanneer het relevant is). In plaats van de lijst met functies van de documenten in Google Code te kopiëren, moet ik me concentreren op de reden waarom ik deze persoonlijk heb gekozen. Sommige van deze punten overlappen met wat ik hierboven heb gezegd:
Zoals hierboven vermeld, loop ik wel tegen IE-problemen aan - maar dan niet iedereen? Verschillende WP-thema's die gebruikmaken van Blueprint hebben IE-browserproblemen opgelost, dus ik extrapoleer in mijn overtuiging dat ze grotendeels kunnen worden opgelost.
Blueprint ondersteunt op dit moment geen vloeibare lay-outs, iets waar ik sowieso geen grote fan van ben. Er is echter blijkbaar een dergelijke ondersteuning, voor het geval je op die manier leunt.
Nou, dit is een kwestie van kiezen, is het niet? Sommige CSS-rasters worden geleverd met een grid.png- of zelfs een .psd-bestand dat u in de transparante modus in Photoshop, Fireworks, GIMP, enz. Kunt gebruiken, terwijl u uw ontwerpelementen neerlegt. Ik ben een beetje meer old school en ontwerp altijd mijn lay-outs door op papier te beginnen:
Je zult merken dat nergens in dat proces het gebruik van grafische software voor lay-out mockup is. Dat komt omdat ik geen ontwerper ben en een zeer minimalistische benadering gebruik voor wat ik ontwerp (alleen voor mezelf). Maar als u van plan bent om Fireworks te gebruiken voor uw mockup, doet u dat tussen stap # 3 en # 4.
Ik heb geprobeerd uitgebreid te zijn in mijn zoektocht naar CSS Grid Frameworks, waarbij ik meer dan 120 artikelen voor leads scande. Het is echter mogelijk dat ik sommige opties heb gemist, dus voel je vrij om anderen aan te bieden.
Welk CSS-raamwerk u ook kiest om te gebruiken, doe dit omdat het het beste aansluit bij uw algemene behoeften. Als de pagina's / sjablonen die u ontwerpt, advertenties bevatten, overweeg dan welk type advertenties. Vroeger, toen ik thema's voor mijn sites koos, koos ik voor AdSense-advertenties (welke zijn IAB-compliant). Meer recentelijk heb ik blokken van 125x125-advertenties geplukt / ontworpen, die ik ten zeerste verkies boven de meeste AdSense-blokken.
Als u geïnteresseerd bent, is er een W3C-conceptspecificatie genaamd CSS Grid Positioning Module Level 3 (geschreven door twee Microsoft-medewerkers) waarin de integratie van op rasters gebaseerde lay-out in CSS wordt besproken. De functies die in dit concept worden besproken, kunnen in IE 8 zijn.
Hier zijn links naar enkele van de vele geweldige artikelen die er zijn over CSS Grids.
Als je denkt dat je nog niet klaar bent om rasters en thema-ontwerp aan te pakken, maar een raster-gebaseerd thema nodig hebt, is dit waarschijnlijk een van de meest uitgebreide lijsten die je zult vinden. (Er zijn er zelfs meer dan 46, als u variaties opneemt.) Het omvat tijdschrift, tijdschrift-achtige, galerij, specialiteit en verschillende premium thema's die ofwel uitdrukkelijk of stilzwijgend CSS-rasters. (Het is mogelijk dat een of twee geen rasters gebruiken, hoewel ze op het eerste gezicht lijken.)
Een paar van deze thema's zijn gratis of hebben een gratis versie. De meeste zijn voor het WordPress-platform. Deze lijst bevat alleen thema's die beschikbaar zijn voor het grote publiek, niet noodzakelijk aangepaste rasterthema's die door verschillende bloggers worden gebruikt. (Zie selecte links in de vorige lijst, inclusief Web Designer Wall en Smashing Magazine voor momentopnamen van dergelijke sites. Zie ook Aftrekken van Khoi Vinh, als een voorbeeld van een visueel impactvolle grid-gebaseerde site.)
Waarschuwing: sommige van deze thema's werken mogelijk niet in WP 2.5x+
De bovenstaande lijst met tijdschriftthema's is samengesteld uit de volgende referenties, evenals uit zoeken op Google.com.
Accentsconagua