Share
De Yahoo User Interface Library is een tamelijk uitgebreide set JavaScript-tools voor ontwikkelaars. Vaak worden ongemerkt een paar andere nuttige onderdelen van de bibliotheek achtergelaten die uw codering versnellen: sommige CSS-bibliotheken. Vandaag wil ik je een rondleiding geven in de YUI Grids CSS-bibliotheek.
Waarom zou u overwegen om de YUI Grids CSS-bibliotheek te gebruiken (hierna "YUI-rasters" genoemd)? Wat onderscheidt het? Ik heb niet uitgebreid naar andere rastersbibliotheken gekeken, maar ik vind deze zaken interessant:
YUI-rasters maken gebruik van gemakkelijk te onthouden id's en klassen, en schone opmaak; Zodra je het eenmaal hebt geleerd, kun je binnen een maand teruggaan naar je code en weten welke onderdelen van YUI zijn en wat elk stuk doet.
Dit vermindert uw belasting twee keer: u hoeft het bestand niet op uw server te hosten en de pagina wordt sneller geladen als de client het bestand in de cache heeft opgeslagen.
Yahoo heeft in zijbalkbreedten gebakken die overeenkomen met de advertentierichtlijnen van het Interactive Advertising Bureau.
Met meerdere sjablonen en de mogelijkheid om paginagebieden te nesten, claimt Yahoo meer dan 1000 lay-outcombinaties te bieden ... alles in minder dan 5 kb.
Natuurlijk is YUI-rasters niet perfect. Het is een beetje beperkend als het gaat om de voorgebakken breedte van de zijbalk; Als ze echter aan uw behoeften voldoen, bespaart u veel tijd, codering en hoofdpijn tijdens het opmaken van uw site.
Als we beginnen, volgen hier een paar hulpmiddelen die van pas zullen komen.
Voordat we ingaan op de nitty griddy, laten we eens kijken naar de bouwstenen van YUI-grids. Er zijn vijf verschillende structuren waarmee u werkt om uw lay-out te ontwikkelen; elk van deze structuren wordt gedefinieerd door een id of een klasse (meestal een klasse). Ze zijn als volgt:
Uiteraard is je hele HTML-bestand het document, maar in ons geval is het ook de div direct in het lichaam - de div die alles bevat. Dit is waar u de breedte van uw site definieert. YUI-rasters geeft je 4 opties voor de breedte: 750px, 950px, 100% of 974px. Deze breedtes zijn eigenlijk geen hard gecodeerde pixels; Het zijn ems, dus de pagina zal vloeiend worden aangepast wanneer uw gebruiker de lettergrootte aanpast. Als deze niet knippen, heeft Yahoo het definiëren van een aangepaste breedte als een koud kunstje gemaakt. Hier is de code om een document 800px breed te maken:
# custom-doc margin: auto; / * deze twee waarden zijn vereist, zoals * / text-align: left; / * ze helpen YUI-rasters de pagina centreren * / width: 61.54em; / * 800px / 13 = em-waarde voor de meeste browsers * / * width: 60.00em; / * 800px / 13.333 = em-waarde voor IE * / min-width: 800px; / * optioneel, maar aanbevolen * /
Gebruik de ID van doc, doc2, doc3 of doc4 om de breedte in te stellen, afhankelijk van de hierboven gegeven waarden.
Er zijn zeven sjablonen waaruit u kunt kiezen. De eerste zes definiëren een lay-out met twee kolommen; Elke balk heeft een andere breedte of richting voor de zijbalk, waarbij de kolom Hoofdinhoud de rest van de breedte van het document weergeeft. De sjablonen zijn 1) 160 px links, 2) 180 px links, 3) 300 px links, 4) 180 px rechts, 5) 240 px rechts, en 6) 300 px rechts. Om de sjabloon van je wens te krijgen, voeg je eenvoudig een klasse van yui-t # toe aan dezelfde div die je hebt gedefinieerd (vervang de # door de bovenstaande nummers). Zoals ik hierboven al zei, zijn deze zijbalken standaard web-advertentie breedten, dus elke advertentie moet comfortabel binnenin passen.
De zevende template - yui-t7 - is niet zo goed gedocumenteerd (vreemd genoeg staat het niet op de spiekbrief waarnaar ik hierboven heb gelinkt, maar het is op deze oudere versie). Het trekt de zijbalk van elkaar af, u krijgt gewoon een kolom met de volledige breedte (die later in kolommen kan worden verdeeld).
De blokken zijn de daadwerkelijke manifestatie van de kolommen die u in de sjabloon hebt gedefinieerd. Het zijn gewoon twee divs binnen de doc div, beide geclassificeerd met yui-b. Gelukkig hoeven ze geen directe kinderen van de hoofdafdeling te zijn; Yahoo geeft dit voorbeeld:
<-- Header Content --><-- Main Content --><-- Sidebar Content --><-- Footer Content -->
Je kunt aan het voorbeeld zien dat je de blokken niet direct in de root-div hoeft te plaatsen. Hiermee kunt u een kop- en voettekst over de volledige breedte gebruiken, wat over het algemeen een goed idee is. Je zult opmerken dat het hoofdcontentblok zich binnen een div bevindt met een id van yui-main; Met YUI-rasters krijgt u de mogelijkheid om uw zijbalk of uw hoofdkolom eerst in uw code te plaatsen, wat een voordeel kan zijn wanneer u overweegt SEO of toegankelijkheid te gebruiken.
Ik heb netten en eenheden bij elkaar gegroepeerd omdat ze in werkelijkheid erg op elkaar lijken; beide zijn divs. Een raster (gedefinieerd met klasse yui-g) vertelt feitelijk aan 2 kinderen (meestal eenheden) om de breedte gelijkmatig te verdelen. Een eenheid (klasse yui-u) moet altijd het kind zijn van een raster en de ouder van uw inhoud.
Wat is het verschil tussen een blok en een raster??
Wanneer u meerdere rasters of eenheden in een raster hebt, moet u de eerste eerst classeren. Dit komt omdat niet elke browser de pseudo-klasse biedt: eerste kind.
Maar wat als u een raster ongelijk wilt verdelen? Het leven is niet altijd eerlijk, toch? Gelukkig biedt YUI een aantal alternatieve keuzes voor de yui-g-klasse. Hier is een lijst van de anderen:
Dat is alles; sla gewoon 2 of 3 eenheden in elk van de bovenstaande rasters en je hebt ongelijke kolommen.
Nou, nu je de touwen kent, laten we een eenvoudig voorbeeld bespreken. Laten we zeggen dat we de standaard site-indeling willen - u weet wel, de hoofdinhoudskolom met een zijbalk aan de rechterkant - met een beetje een draai: we verdelen de hoofdkolom in twee kleinere en verdelen een van die twee verder in twee.
Zoals ik al zei, biedt Yahoo hosting aan voor dit framework, en het is meestal een goed idee om daar gebruik van te maken. Yahoo adviseert ook de HTML 4.01 strict Doctype, dus dat is wat ik erin heb gestopt. Dit is wat we beginnen:
Een eenvoudig YUI Grids CSS-voorbeeld
Accentsconagua