Deze tutorial zal u kennis laten maken met Pure, een CSS-bibliotheek gemaakt van kleine modules, die u kan helpen bij het schrijven van volledig responsieve lay-outs, op een zeer snelle en eenvoudige manier. Onderweg zal ik u helpen bij het maken van een eenvoudige pagina om te benadrukken hoe u enkele componenten van de bibliotheek kunt gebruiken.
Waarom Responsieve lay-outs maken?
In de afgelopen jaren in webontwikkeling, drie woorden die steeds weer terugkomen, zijn: Responsive Web Design (RWD). Op dit punt zou je al moeten weten wat het is, maar, voor het geval je het gemist hebt, hier zijn enkele bronnen om de gaten op te vullen:
Artikelen over WebDesign Tuts+
Cursussen op Tuts + Premium
Responsive Web Design door Ethan Marcotte
Maar de vraag is: waarom reageren? Het antwoord is dat we geen controle hebben over welke resolutie het volgende apparaat zal gebruiken wanneer ze onze website bezoeken. We kunnen niet langer alleen zinnen weergeven als: 'Best bekeken met een resolutie van 1024x768' (hoewel je ze nog steeds kunt vinden op internet). Een van de belangrijkste redenen voor dit fenomeen was de toename in de breedte van pc-monitoren en ook de verspreiding van mobiele apparaten die met internet zijn verbonden. Bovendien, op basis van StatCounter, is momenteel ~ 16% van de gebruikers verbonden via een mobiel apparaat. Nu zeg ik dat niet RWD is gewoon een kwestie van het optimaliseren van een website voor een bepaalde schermgrootte, wat ik bedoel is dat we een geweldige ervaring creëren voor gebruikers die onze website bezoeken, ongeacht de apparaten die ze gebruiken.
Dat gezegd hebbende, is het ook duidelijk dat niet iedereen werkt voor een bedrijf waar iedereen een enkele rol heeft (ontwerper, ontwikkelaar, tester, enzovoort). Laten we zeggen dat je een solo-ontwikkelaar bent, als freelancer werkt en niet veel weet over webontwerp. Er zijn veel bibliotheken beschikbaar die uw werkstroom kunnen versnellen. De meest complete zijn zeker Boostrap en Foundation, maar soms kunnen ze overkill zijn en heb je misschien iets kleins nodig. In deze gevallen is door Yahoo een nieuw interessant project geïntroduceerd dat we kunnen gebruiken, genaamd Pure.
Wat is puur?
Onder verwijzing naar de Pure-website is dat zo een set kleine, responsieve CSS-modules die u in elk webproject kunt gebruiken. Zoals eerder gezegd, is de volledige bibliotheek echt licht, met slechts 4,2 KB verkleind en gzipped, maar om uw website nog lichter te houden, kunt u slechts enkele van de beschikbare modules opnemen. Kortom, het is samengesteld uit de volgende modules:
Baseren
rooster
vormen
Toetsen
tabellen
menu's
Een van de dingen die ik echt waardeer aan Pure is dat het gebaseerd is op Normalize.css, een bekende bibliotheek die elementen consequenter en in overeenstemming met moderne normen rendert en ook in oudere browsers werkt. Omdat het erg klein is, biedt het geen complete oplossing voor al uw problemen, maar het heeft verschillende vooraf gebouwde gemeenschappelijke gebruikersinterface-elementen die u op veel websites op internet kunt vinden. Een ander interessant kenmerk van Pure is dat het zeer uitbreidbaar en aanpasbaar is. De auteurs gebruikten SMACSS om het te bouwen en al zijn klassen beginnen met zuiver-, zodat je ze gemakkelijk kunt herkennen.
Hoewel Pure een interessant project is om naar te kijken, moet je er rekening mee houden dat het echt nieuw is en misschien niet geschikt voor grote projecten. In feite bevat de huidige versie (0.2.0 ten tijde van dit schrijven) verschillende problemen die je waarschijnlijk niet zou vinden in meer volwassen frameworks en de documentatie zou ook kunnen worden verbeterd. Toch vond ik het leuk en als voorloper heb je het voordeel om vanaf het allereerste begin Pure te studeren en te leren, wat het volgende bekende project op het web zou kunnen worden..
Laten we Pure in actie zien
Ze zeggen dat een beeld meer zegt dan duizend woorden. Voor ons als ontwikkelaars en ontwerpers is een demo waar we mee kunnen spelen nog beter. Dus, om te zien wat Pure voor ons kan doen, laten we een eenvoudige demo-app maken. Onze demo zal bestaan uit een eenvoudige Homepage met wat informatie over mezelf (soms verbeeld ik me door mijn verbeeldingskracht). De onderstaande afbeelding laat zien hoe het eindresultaat eruit zou moeten zien op een groot scherm:
En de volgende afbeelding toont u in plaats daarvan hoe het eruit zal zien op een smartphone:
Stap 1: Maak het horizontale menu
Zoals ik al zei, Pure heeft verschillende vooraf samengestelde gemeenschappelijke elementen die je op veel websites op internet kunt vinden. Een horizontaal menu is er zeker een van en geeft ons de kans om een kijkje te nemen naar enkele van de klassen van de menu-module.
Om dit met HTML5 te maken, hebben we meestal een element wikkelen een ongeordende lijst die de belangrijkste links van onze website bevat. Nadat de lijst is gemaakt, moeten we deze horizontaal weergeven. Om dit te bereiken, moeten we drie klassen toepassen op de lijstwrapper (): .pure-menu, .pure-menu openen, en .pure-menu-horizontaal. De eerste klasse past regels toe die voor alle menu's in Pure gelden. De .pure-menu openen class wordt gebruikt om de lijstitems weer te geven (in plaats van te verbergen), terwijl de .pure-menu-horizontaal klasse is degene die verantwoordelijk is voor het weergeven van de lijstitems op dezelfde regel. Houd er rekening mee dat het menu standaard niet gecentreerd is.
Om de gebruikersinterface te verbeteren, moeten we nu het lijstitem dat links naar de huidige pagina bevat, markeren. Dit wordt gedaan door de .-Pure-menu geselecteerd klasse voor de element dat u wilt markeren. Hierdoor verandert de kleur van de tekst van grijs naar zwart.
De volledige code van ons menu wordt hieronder weergegeven:
Stap 2: de auteurbeschrijving
Na het menu kun je zien dat we een ideale "rij" hebben met aan de linkerkant een foto en aan de rechterkant een kleine beschrijving van mij. Deze "rij" is eigenlijk een responsief netwerk gemaakt van twee rastereenheden, waarbij de eerste de foto omwikkelt en 25% van de ruimte inneemt, terwijl de tweede de beschrijving omspant en de resterende 75% inneemt, zolang de breedte van het scherm groter is dan 767 px. Als de breedte van het scherm daarentegen gelijk of kleiner is, worden de rastereenheden gestapeld en bezetten ze 100% van de beschikbare breedte. Houd er rekening mee dat de eenheden een breedte van 100% hebben, dus als de elementen binnenin kleiner zijn in de breedte, zullen ze slechts een deel van de eenheid innemen. Om te zien hoe dit werkt, probeer het formaat van het venster te veranderen en merk op hoe de foto niet 100% van de breedte verbruikt, terwijl de rastereenheden tegelijkertijd worden gestapeld.
Zoals eerder opgemerkt, heeft Pure een specifieke module voor het beheer van roosters. Als u een responsief raster wilt declareren, moet u een klasse met de naam van de container aanvragen .pure-G-r. De rastereenheden delen echter een vergelijkbare naam, .pure-u - * - *, waarbij het laatste deel van de klasse aangeeft hoeveel ruimte de gegeven eenheid inneemt. Als u bijvoorbeeld op een element de van toepassing bent .pure-u-1-4 klasse, behoudt het 25% van de beschikbare breedte, zoals ik deed voor de foto. Een ander voorbeeld zou kunnen zijn .pure-u-2-3 waardoor de eenheid 66,6% van de rasterruimte kan innemen.
Dit rastersysteem is echt interessant omdat het u veel tijd kan besparen als u niet weet hoe te beheren vlotter, duidelijk, en andere regels om lay-outs te maken. Bovendien zullen ze u redden van alle pijn van het beheren van de responsieve kant van de lay-out.
Met dat gezegd, zou de code die het eerste raster implementeert er als volgt uit moeten zien:
Aurelio De Rosa
Ik ben een Italiaanse web- en app-ontwikkelaar met een bachelor in computerwetenschappen en meer dan 5 jaar ervaring met programmeren voor het web met HTML5, CSS3, JavaScript en PHP. Ik gebruik voornamelijk de LAMP stack en frameworks zoals jQuery, jQuery Mobile en Cordova (PhoneGap). Mijn interesses omvatten ook webbeveiliging, webtoegankelijkheid, SEO en WordPress.
Momenteel werk ik als zelfstandige met de genoemde technologieën. Ik ben ook een regelmatige blogger voor verschillende netwerken (SitePoint, Tuts + en FlippinAwesome), waar ik artikelen schrijf over de onderwerpen waarmee ik gewoonlijk werk en meer.
Stap 3: Het informatienetwerk
Het tweede en laatste rooster is opgesplitst in drie gelijke delen. Ik heb ze gemaakt om je andere onderdelen van de bibliotheek te laten zien, zodat je er een goed overzicht over hebt. In feite heeft de eerste eenheid een tabel, de tweede heeft een formulier en de derde heeft een verticaal menu.
De onderstaande code laat zien hoe u het raster in drie delen splitst:
Laten we nu eens kijken naar elke eenheid van dit responsieve raster.
Stap 4: een responsieve tabel
Een andere van de beschikbare modules in Pure, is Tables. Zoals de naam al zegt, bevat het regels om a te stijlen
element en zijn kinderen. Standaard hebben tabellen een verticale rand die wordt toegepast op visueel gescheiden kolommen. U kunt echter ook een horizontale rand toevoegen door de .-Pure-table omzoomd klasse of toon alleen de laatste met behulp van de .pure-table-horizontaal klasse voor de
element. Bovendien kunt u ook gestreepte tabellen maken om de gebruiker te helpen bij het lezen van de gegevens. Om dit te bereiken, hebt u twee mogelijkheden. De eerste zal werken op browsers die dit ondersteunen n-kind en bestaat uit het toepassen van de .-Pure-table gestreept class naam voor de
element. Het tweede werkt in alle browsers, inclusief Internet Explorer 8 en lager, maar het is meer uitgebreid. Het bestaat uit het toevoegen van de .pure-table oneven klasnaam voor elkaar
element. Om compatibiliteitsredenen ga ik voor de tweede benadering.
Op dit moment hebben tabellen een probleem wanneer ze op kleine schermen worden bekeken, maar het zal in de volgende release worden opgelost. Houd er rekening mee dat je het niet zult zien in de demo omdat ik het heb gerepareerd. High five voor mij.
De code die de gestreepte tabel maakt, wordt hieronder weergegeven:
Grappige Prijstabel
Urennummer
Prijs (€)
Veilig (%)
1
30 €
0%
5
135 €
10%
10
255 €
15%
20
480 €
20%
50
1050 €
30%
Stap 5: Een gestapeld contactformulier
Formulieren zijn nog een andere module van de Pure-bibliotheek. Hiermee kunt u uw formulieren in verschillende soorten stijlen weergeven. In deze demo maken we een gestapeld formulier, waarbij de invoerelementen zich onder de labels bevinden. Om dit te doen, moeten we het toevoegen .pure vorm en de .-Zuivere vorm gestapeld klassen voor de element. Dan moeten we beide plaatsen label en de invoer tags in een wrapper, waar we de .pure-control-groep klasse en leg dan al deze wrappers in een element. De submit- en de resetknop hebben ook een wrapper, maar hun wrapper heeft de klasse .pure-controles. Houd er rekening mee dat we voor de knop Verzenden de klas hebben gebruikt .pure-button-primaire om het te markeren. De geciteerde klasse behoort tot de Buttons-module en wordt gebruikt om de stijl van de knop te wijzigen, een blauwe kleur toe te passen.
Dit is hoe uw formuliercode eruit zou moeten zien:
Neem contact met mij op
Stap 6: Een verticaal menu met een koptekst
Het laatste element dat u leert maken met behulp van Pure, is een verticaal menu met een koptekst. Een menu van dit type is rondom gestileerd met een zwarte rand. Om het te gebruiken, passen we de lijstwrapper toe, twee van de drie klassen die we al in de eerste stap hebben gebruikt, namelijk .pure-menu en .pure-menu openen. Om de koptekst te maken, moeten we bovendien een ander element toevoegen en daarop toepassen .pure-menu-rubriek klasse.
De code voor dit menu staat hieronder:
Waar kun je me vinden?
Mijn profielen
tjilpen
LinkedIn
GitHub
Google+
Conclusie
Dus dat maakt deze introductie tot Pure compleet. Ik hoop dat je het leuk vond. Als je de ontwikkeling van Pure wilt volgen, kun je de repository op GitHub bezoeken. Voel je vrij om problemen in te dienen, trekverzoeken uit te voeren en een bijdrage te leveren.
Accentsconagua
Share
