Share
Wat je gaat creërenIn deze zelfstudie concentreren we ons op het coderen van een PSD-indeling met behulp van de responsieve Skeleton-zonnecolplate. Er zijn veel tutorials over hoe je een ontwerp kunt coderen met HTML en CSS, vaak met een extra streepje JavaScript, maar het belangrijkste doel van deze tutorial is om dingen te laten bouwen met de nieuwste versie van het Skeleton-framework (2.0.4). Er zijn enkele geweldige verbeteringen doorgevoerd sinds we het voor het laatst hebben behandeld!
Laat ik eerst Skeleton introduceren, dan springen we in een codering.
Skelet is het geesteskind van Dave Gamache. Het is een vloeistofraster met twaalf kolommen, met een standaard max. Breedte van 960px, standaard typografie en minimale stijlen voor algemene HTML-elementen zoals knoppen, links, invoer en tekstgebieden.
Zijn kracht ligt in het feit dat het een is licht CSS-raamwerk. 400.000 regels code zijn verborgen, Skeleton is ontworpen als een startpunt, niet als een volledig raamwerk vol met UI-ontwerp zoals Bootstrap, Foundation of SemanticUI.
Omdat het eenvoudig te gebruiken is, en het is een goed begin voor het bouwen van uw eigen responsieve frameworks.
Dave Gamache introduceerde en update verschillende functies in Skeleton v2.0:
Accentsconagua
u-full-width, .u-max-full-width wat perfect is voor containers van 100% breedteTijdens deze tutorial gaan we het bovenstaande ontwerp coderen, gemaakt door Samir Timezguida. Onderweg zullen we:
Laten we beginnen met het downloaden van Skeleton framework van www.getskeleton.com en de PSD uit de bronbestanden halen.
Je hebt misschien een andere aanpak, maar ik begin met het schetsen van de lay-out om elke sectie te visualiseren. Er zijn veel secties over de lay-out:
Dit is mijn geschetste uitkomst voor de gewenste HTML-structuur:
Voor elke sectie maken we een container (of band) die de hele breedte van het venster vult, met de sectienaam als klassenaam. Binnenin profiteren we van Skelet door het raster te bouwen om een container en rijwikkelaar te maken. De HTML voor elke sectie is een variant hiervan:
Nu is het tijd om elke sectie te nemen en de markup toe te voegen. Maak je geen zorgen over stijlen, afbeeldingen, lettertypen, enzovoort, want we concentreren ons nu volledig op de HTML-structuur.
Voor het menu moeten we het "hamburger" -pictogram en een ongeordende lijst gevuld met de interne links toevoegen. Elke link verwijst naar een specifieke sectie.
Notitie: de scherpzinnige onder u herkent de fa fa-bars klassen op de element voor het navigatiepictogram. Deze zijn typerend voor de pictogrammen van Font Awesome, die we later in het proces zullen implementeren.
De heldensectie, zoals te zien in de PSD, bestaat uit één uitgerekt beeld, een titel en een ondertitel. Voor de achtergrondafbeelding voegen we een andere container toe, voor de titel die we gebruiken h1 en voor de ondertitel a h2. Hier, zie je, ik gebruik u-full-width, de nieuwe skelet utility-klasse.
We hebben talent
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
De introductie bevat twee elementen; een titel en een ondertitel. We bereiden de html voor om de grens van de titel te ondersteunen, door een separator klasse, die zal toevoegen border-bottom en wat afstand.
Invoering
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Veniam, quis nostrud exercitation ullamco laboris.
Creativiteit heeft een achtergrond op volledige breedte en een knop. Je kunt ook de gecentreerd les op de h4; een utility-klasse die we in de volgende tutorial zullen maken om ons te helpen bij het centreren van elementen op zowel de verticale als de horizontale assen.
Dit is de grootste sectie op de website en bevat nog eens twee rijen; een voor werkfilterkoppelingen en een voor werkitems.
Een deel van ons werk
Werkfilters bevatten een ongeordende lijst gevuld met koppelingen die de werkitems filteren.
De werkitems zelf zullen vier kolommen breed zijn, met daarin het werkbeeld, de werktitel en de werkbeschrijving.
Je kunt ook zien dat ik een andere utility-klasse gebruik, verticaal gerichte, waarmee het item op de verticale as wordt gecentreerd. De beschrijving voor elk werkitem heeft ook onderaan een rand. Om dit te bereiken zullen we het separator klasse eerder gezien, terwijl een extra klasse werd toegevoegd voor extra styling, kleur en maat.
MTV AMA-logo
Dribbble herontwerp
Google Mail
Vlakke pictogrammen
Inbox door Google
Skeleton skin heeft een nieuwe gebruikersinterface
De helpsectie heeft dezelfde html-structuur als de sectie creativiteit, maar we onderscheiden ze door verschillende klassenamen toe te voegen.
Dit gedeelte bevat een ongeordende lijst met de afbeeldingen van de klant. Ik gebruik placehold.it om tijdelijke afbeeldingen te genereren.
Onze klanten
Hier hebben we twee verschillende rijen, één voor de introductietekst en één voor de mensen.
De introductierij bevat een titel en een ondertitel, net zoals we eerder in de introductie hebben gezien.
Over ons
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Veniam, quis nostrud exercitation ullamco laboris.
De personenlijst is een ongeordende lijst met vier items, waarvan de laatste voor wervingsdoeleinden. Elk lijstitem is drie kolommen breed en bevat een afbeelding, een link, de naam en de positie van het individu.
CEO / Founder
CTO / Founder
Ontwerper
Het videogedeelte bevat slechts één knop en de uitgerekte achtergrondafbeelding. In de komende tutorials zullen we dit een modaal venster maken dat verwijst naar een YouTube-video.
Verderop, de "why us" -sectie bestaat uit twee afzonderlijke delen; een voor een korte introductie en de andere voor de huidige services.
De introductiesectie is twaalf kolommen breed en bevat de titel ingepakt in een en de tekst voor een korte beschrijving ingepakt in een . Zoals je hieronder zult zien, heeft de titel ook separator klasse om het eerder genoemde grenseffect te creëren.
Waarom voor ons kiezen
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim Veniam, quis nostrud exercitation ullamco laboris.
In het gedeelte Services bevat elk lijstitem een afbeelding en een beschrijving.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ilabore et dolore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ilabore et dolore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ilabore et dolore.
Deze sectie neemt dezelfde html-structuur over als de creativiteitsectie, maar met andere tekst voor de gecentreerde knop.
Nog een paar meer om te gaan! Dit gedeelte biedt een korte verhaallijn voor het formulier. Het is gebouwd met een html-structuur die er nu waarschijnlijk heel bekend uitziet, met een titel en een beschrijving met een scheidingsteken ertussen.
Neem contact op
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Nesciunt illum sed veritatis at, ipsam quo vitae minima. Animi unde doloremque iste, incidunt nihil, est vero aliquam, nemo id ab totam.
De contactformuliersectie bestaat uit twee kolommen, één voor locatie-meta en sociale profiellinks en één met het formulier waarmee de gebruiker contact kan opnemen met het bedrijf..
Opnieuw gebruik ik de opmaak om Font Awesome te ondersteunen, die we zullen integreren in de volgende tutorial.
De eerste kolom is vier kolommen breed en de tweede kolom is acht kolommen breed. Hier kun je echt de kracht van Skeleton-boilerplate zien, omdat we geneste kolommen en rijen gebruiken. Het formulier heeft verschillende formaten; de eerste twee ingangen zijn zes kolommen breed binnen een wikkel die acht kolommen breed is.
onze locatie
174 Mimosa ST. NW
Casablanca, MA 20370
(212) 123 456 7
Samir Timezguida
Onze voettekst bevat wat tekst verpakt in een container met twaalf kolommen.
& 2015 2015 WebDesign Tuts kopiëren+.
Deze tutorial heeft aangetoond waar Skelet voor precies is: we hebben de markup gebruikt om de structuur van een webpagina uit te werken. In de komende tutorial nemen we die structuur en voegen we wat styling toe om het een volledig unieke look te geven. Zie je daar!
