Share
Tijdens het vorige deel van deze serie hebben we de Behance-API geleerd, waarmee we de portfoliostukken van een gebruiker konden vastleggen en deze op een webpagina konden weergeven. In dit deel zullen we de webpagina stylen en de portfolio-onderdelen op een passend aantrekkelijke manier presenteren.
Om te beginnen, zullen we onze toolkit voorbereiden:
We zullen Normaliseren gebruiken om de basiselementstijlen consistenter te maken in verschillende browsers en de kans op onverwachte resultaten te minimaliseren.
We zullen ook MINDER gebruiken voor het stylen van onze website. Welke preprocessor u ook kiest, het is zeker aan te bevelen om ze in uw workflow te gebruiken. Ik ben een groot fan van, in plaats van de gewenste kleur in de kleurenkiezer vanuit een afzonderlijke toepassing te moeten trawelen, eenvoudig met behulp van LESS controlefuncties zoals verlichten() en donkerder () om ons een reeks kleurvarianten te geven.
Om ons verder te helpen, zullen we LESSHat gebruiken om ons te helpen schrijven minder code met zijn Mixins-verzameling. We zullen ook Remixins gebruiken, ontwikkeld door Christopher Ramírez. Remixins is een verzameling Mixins om te zetten px in rem eenheden in. De verzameling bevat de Mixins voor het opgeven lettertypegrootte, marge, vulling, breedte en hoogte, en CSS-positie (links, rechts, bodem, en top).
Daarnaast hebben we ook een tool nodig om LESS in reguliere CSS te compileren. In deze zelfstudie gebruiken we een app genaamd Koala, die beschikbaar is in Windows, OSX en Ubuntu. Je kunt natuurlijk elke compiler gebruiken die je wilt, maar met een beetje geluk kun je deze tutorial volgen, ongeacht het platform dat je gebruikt.
Raadpleeg deze tutorials voor meer informatie over LESS:
Standaard systeemlettertypen zoals Arial doen het vandaag gewoon niet voor mij. Dus in deze zelfstudie zal ik Google Fonts gebruiken. Ik heb Cantata One gekozen voor de kop en Open Sans voor de standaardtekst. Dit is een persoonlijke voorkeur, u kunt Google-lettertypen uitsluiten of alternatieven gebruiken als u dat wilt.
We zullen ook lettertypepictogrammen gebruiken voor een beetje decoratie op onze website. Tegenwoordig hebben we een heleboel opties voor lettertypepictogrammen. Tijdens mijn zoektocht was ik echter behoorlijk verrast dat slechts enkele van deze lettertypen het Behance-pictogram in hun verzameling bevatten. Voor deze tutorial gebruiken we in ieder geval Foundation Icon Fonts 3, omdat deze het Behance-pictogram bevat en ook beschikbaar is via een CDN.
In de hoofdmap van ons project, laten we een aantal nieuwe mappen met de naam maken minder en css (die de uitvoermap van het LESS-bestand zal zijn). Maak een nieuw bestand met de naam style.less en pak Remixins en LESShat. Zet deze drie LESS stylesheets in de minder map. In dit stadium zou de lijst met bestanden en mappen in onze projectdirectory er als volgt uit moeten zien:
| - css | - index.html '- less | - lesshat.less | - remixins.less' - style.less
Voeg vervolgens Normalize, de Foundation Icon Fonts en ons Google Font-stylesheet toe aan de hoofd tag, samen met style.css, welke het uitvoerbestand zal zijn van style.less.
Open ook de Koala-app (of welke vorm van compileren dan ook die je wilt) en voeg onze projectdirectory eraan toe.
De projectdirectory in KoalaVoordat we stijlen schrijven, voegen we een paar pictogrammen toe aan onze website. Eerst voegen we het kaartlocatieteken naast het locatie-element van de gebruiker toe met de fi-marker klasse. Voeg deze klasse toe naast de profile-locatie klasse zoals zo:
...user.city, user.country...
Dit zal een toevoegen :voor pseudo element voor de div, injecteren van het markeringspictogram in via onze Foundation-pictogrammen. Vervolgens voegen we het Behance-logo toe aan het footer-gedeelte met de fi-sociaal-Behance klasse.
...Behance
...
Laten we onze style.less openen en zowel lesshat.less als remixins.less importeren met behulp van de (referentie) Mark.
@import (referentie) 'lesshat.less'; @import (referentie) 'remixins.less';
De (referentie) merk werd geïntroduceerd in MINDER 1.5. Het betekent dat LESS het bestand alleen als referentie zal gebruiken, het zal de inhoud niet compileren en uitvoeren in het bestand. Het is een zeer krachtige functie die dubbele en onnodige stijlen minimaliseert.
Binnen style.less voegen we de volgende variabelen toe die het kleurenpalet en de lettertypefamilie van onze website opslaan.
@ bg-body: #fafafa; @ bg-header: # 303746; @ color-base: # 353537; @ kleurnaam: # e0e0e0; @ colour-title: # 6b919f; @ font-body: 'Open Sans', Arial, sans-serif; @ font-name: 'Cantata One', Georgia, Times, serif;
Het plaatsen van deze variabelen op één plek werkt als een soort stijlgids, maar helpt ons ook om onze stijlen op een gemakkelijkere manier te behouden. Als er bijvoorbeeld iets in de website is dat we willen wijzigen, kunnen we eenvoudig de waarde binnen deze variabelen wijzigen. Het is een veel veiliger manier om stijlen aan te passen, in plaats van "Zoeken en vervangen" uit te voeren.
Hoewel we Normalize hebben toegevoegd dat onze elementenstijlen heeft gestandaardiseerd, hebben we nog steeds een paar stijlen die aangepast moeten worden om aan onze specifieke behoefte te voldoen. Om te beginnen, zullen we de box-sizing wijzigen, waarbij alle elementen (inclusief de pseudo-elementen) worden ingesteld op border-box. Dit geeft onze dimensies een veel beter beheersbare basis om vanuit te werken.
We kunnen dit toepassen met de .box-sizing Mixins uit de LESSHat-bibliotheek, als volgt:
*, *: before, *: after .box-sizing (border-box);
Vervolgens stellen we de html lettergrootte naar 62,5%, wat een benadering is om relatieve eenheden beter beheersbaar te maken.
html font-size: 62.5%;
62,5% wordt hier gemeten tegen de browserstandaard van 1em die 16px is; dus 62.5% van 16px is gelijk aan 10. Op deze manier kunnen we eenvoudig de conversie van. berekenen rem in px door het te vermenigvuldigen met 10. 1.2rem, bijvoorbeeld, is gelijk aan 12px enzovoort. Als we daarnaast naar de bron remixins.less kijken, vinden we de basislettergrootte in @ Base-font-size-px variabele is ingesteld op 10.
U kunt deze artikelen doorverwijzen voor meer informatie over de relatieve eenheid van CSS:
We gebruiken een figuur element om de portfoliobeeldomslag te bevatten. Maar onze figuur element heeft margerwaarden geërfd van Normaliseren, wat leidt tot onbedoelde witruimte tussen de portfolio-afbeeldingen. Dus hier zullen we de marge verwijderen van de figuur element.
figuur marge: 0; / * Normalize.css standaardstijl overschrijven * /
Het gebruik van een clearfix-hack is een populaire methode als een beroep op een aantal lay-outproblemen veroorzaakt door zwevende elementen die hun onderliggende elementen niet wissen. Dus hier zullen we de clearfix-tip toevoegen van Nicolas Gallagher die we in MINDER hebben omgezet.
.clearfix * zoom: 1; &: before, &: after content: ""; weergave: tafel; &: na clear: both;
Als u onze HTML-structuur bekijkt, hebben we toegevoegd Clearfix klasse voor sommige elementen.
Voor de lichaam, we stellen de lettertypestijlen in die van toepassing zijn op de hele pagina. Deze stijlen omvatten de tekengrootte, de kleur van het lettertype, het lettertype, de lettertypefamilie en de achtergrondkleur. Hier gebruiken we de .lettertypegrootte() mixin van de Remixins-bibliotheek om de lettergrootte te genereren. Alle Mixins in de Remixins-bibliotheek genereren een px unit fallback, handig voor browsers die de .niet ondersteunen rem eenheid.
body .font-size (16px); achtergrondkleur: @ bg-body; kleur: @ color-base; font-family: @ font-base; font-gewicht: 300;
Nadat het bestand is opgeslagen, compileert Koala automatisch de uitvoer. En de bovenstaande code zou er zo uit moeten zien in reguliere CSS.
body font-size: 16px; font-size: 1.6rem; achtergrondkleur: #fafafa; kleur: # 353537; font-family: 'Open Sans', Arial, sans-serif; font-gewicht: 300;
Vervolgens zullen we de stijlen voor de header van de website als volgt toevoegen.
.portfolio-header .padding (50px, 0); achtergrondkleur: @ bg-header; text-align: center; .profile-avatar img .size (80px); grensradius: 50%; .profile-name .font-size (24px); .margin bodem (10px); kleur: @ kleurnaam; font-family: @ font-name; font-gewicht: 400; .profile-fields .max-width (320px); .font formaat (14 pixels); kleur: lichter (@ bg-header, 50%); marge links: auto; marge-rechts: auto; .veld-lijst opvulling: 0; .field-item display: inline-block; &: na content: ','; &: last-child: after content: "; .profile-location .font-size (14px); color: lighten (@ bg-header, 30%); &: before .margin-right (10px); .font-size (18px);
Dit is een behoorlijk stuk syntaxis, dus laten we het in stukken verdelen en onderzoeken wat het doet. Ten eerste hebben we achtergrondkleur in de kop toegevoegd met de kleur die is opgeslagen in onze @ Bg-header variabel. We gebruiken .padding () Mixins van Remixins om opvulling aan de boven- en onderkant van de kop toe te voegen, waardoor meer verticale witruimte wordt opgeleverd. We hebben ook toegevoegd text-align: center dus onze inhoud ziet er beter uit.
.portfolio-header .padding (50px, 0); achtergrondkleur: @ bg-header; text-align: center; ...
We hebben de avatarafbeeldingsgrootte van de gebruiker ingesteld met .grootte() Mixins en circlular gemaakt door de grensradius in te stellen op 50%. Je kunt zien dat deze stijlen worden gedeclareerd .profiel-avatar img.
.profiel-avatar img .size (80px); grensradius: 50%;
Hieronder staan de regels voor de naam van de gebruiker. Hier stellen we de lettergrootte in met een .lettertypegrootte() mixin. We hebben de @ Kleur-naam variabele voor de lettertypekleur en de lettertypefamilie doorgegeven met de @ Font-family variabel. En tenslotte hebben we toegevoegd font-gewicht: 400; om het lettertype er brutaler uit te laten zien dan de rest.
.profielnaam .font-size (24px); .margin bodem (10px); kleur: @ kleurnaam; font-family: @ font-name; font-gewicht: 400;
Vervolgens bekijken we de regels voor het gebied voor gebruikersadvertentievelden waarmee we targeten .profile-velden. In Behance kunt u zoveel vaardigheden of veldspecialiteiten toevoegen als u wilt. Dat betekent dat elke gebruiker korte of hele lange vaardigheidsbeschrijvingen kan hebben. Ik heb daarom besloten om de breedte in te stellen met een Maximale wijdte. We hebben de lettertypekleur voor 50% lichter ingesteld met de achtergrond van de koptekst lichter (@ bg-header, 50%).
Verder wordt elk van de velditems gescheiden door een komma die we hebben geleverd via een :na pseudo-element. Logisch gezien zou het laatste item geen komma moeten hebben, dus we hebben het laatste item geselecteerd met :laatste kind en stel de inhoud eigenschap om leeg te zijn inhoud:".
.profielvelden .max-width (320px); .font formaat (14 pixels); kleur: lichter (@ bg-header, 50%); marge links: auto; marge-rechts: auto; .veld-lijst opvulling: 0; .field-item display: inline-block; &: na content: ','; &: last-child: after content: ";
Hieronder volgen de stijlregels voor het stylen van de gebruikerslocatie. Hier stellen we de kleur iets lichter in dan de achtergrondkleur, 30% om precies te zijn. En we hebben ook het verschil tussen de tekst en het markeringspictogram van Foundation Icon Fonts enigszins uitgebreid door toe te voegen margin-right naar de :voor pseudo-element.
.profiel-locatie .font-size (14px); kleur: lichter (@ bg-header, 30%); &: vóór .margin-right (10px); .font formaat (18 pixels);
Na het toevoegen van deze stijlen, zou de kop er nu ongeveer zo uit moeten zien:
Het volgende fragment bevat alle stijlen voor onze portfolio.
.portfolio-gebied . margin (50px, auto); .max breedte (960); breedte: 100%; .portfolio-lijst padding-links: 0; .portfolio-item .margin-bottom (30px); .height (320px); .padding (0, 15px); zweven: links; list-style-type: none; breedte: 33,33333333333333%; .portfolio-inhoud text-align: center; .portfolio-cover width: 100%; .portfolio-image border: 8px solid #fff; max. breedte: 100%; .portfolio-title .font-size (14px); kleur: donkerder (@ kleurentitel, 10%); text-transform: hoofdletter maken; vertical-align: middle; breedte: 100%; .portfolio-fields .font-size (12px); kleur: donkerder (@ bg-body, 30%); .veld-lijst opvulling: 0; .field-item display: inline-block; &: na content: ','; &: last-child: after content: ";
Veel van de bovenstaande stijlen zijn decoratief. Maar hier zijn een paar belangrijke dingen die het vermelden waard zijn:
Eerst hebben we de .portfolio-area breedte tot 100%, maar behoud de maximale breedte op 960 px. Hierdoor kan de breedte netjes worden aangepast in kleinere viewport-afmetingen. Zoals je hierboven kunt zien, hebben we ook de .portfolio-post breedte tot 33,33333333333333%. Dit komt omdat we drie items op elke rij zullen weergeven. De 33,33333333333333% is afgeleid van de verdeling van 100% met 3.
De .portfolio-cover breedte is ingesteld op 100%, het vult dus de breedte van de bovenliggende. De .portfolio-image is ingesteld met max-width: 100% dus de afbeelding zal de bovenliggende breedte niet overschrijden, ongeacht de grootte. Al deze breedte-instellingen zullen ons helpen onze website vloeiend te maken.
Nu zou de portfolio-sectie er zo uit moeten zien.
Vervolgens zullen we de stijlen voor de voettekst toevoegen. De voettekst is eenvoudig en duidelijk; het bestaat alleen uit "Powered by" -tekst en een Behance-pictogram van Foundation Icon Fonts. Hieronder staan alle stijlregels voor de voettekst.
.portfolio-footer . margin (30px, auto); .max breedte (960); text-align: center; breedte: 100%; .power-by .font-size (12px); kleur: donkerder (@ bg-body, 30%); text-transform: hoofdletters; .power-logo .width (36px); .height (36px); kleur: # 1769ff; weergave: inline-block; marge: 0 auto; overloop verborgen; positie: relatief; tekstdecoratie: geen; tekst-inspringing: 100%; white-space: nowrap; &: vóór .line-height (38px); .font-size (36px); weergave: inline-block; hoogte: 100%; links: 0; positie: absoluut; tekst-inspringing: 0; boven: 0; breedte: 100%;
Net als bij de portfolio-sectie, stellen we de Voettekst-breedte in op 100% en richten deze op het midden van het browservenster met marge: 0 auto;. We stemmen ook alle inhoud op het centrum af zodat het er ordelijk uitziet. Vervolgens verbergen we de tekst erin .power-logo de Kellum-methode gebruiken en alleen het Behance-logo weergeven met zijn merkkleur, blauw # 1769ff.
Notitie: Behance heeft een hele ontwikkelaarssectie over hun merkrichtlijnen als je een kijkje wilt nemen.
De voettekst moet er nu redelijk compleet uitzien, zoals zo.
We hebben een vloeiende lay-out, maar nu gaan we onze webpagina responsief maken. Gelukkig is onze website slechts één pagina-website met een heel eenvoudige lay-out. Het vereist dus geen lange code om het responsief te maken. Om te beginnen zullen we de (cruciale) metatikport toevoegen aan de hoofd label.
Vervolgens voegen we wat Mediaquery's toe, als volgt.
@media alleen scherm en (min-breedte: 768px) en (max-breedte: 959px) .portfolio-gebied .portfolio-item width: 50%; @media only scherm en (max-width: 767px) .portfolio-gebied .portfolio-item height: auto; breedte: 100%;
Deze mediaquery's geven twee items op een rij weer tussen 959 px en 768 px viewport width en één item wanneer de viewportbreedte 767 px is en lager.
Onze portfoliowebsite in verschillende viewportmatenNa de esthetiek van onze pagina gestileerd te hebben, hoef je alleen maar wat flair toe te voegen. In het volgende en laatste deel van deze serie laten we bezoekers op elke miniatuur klikken en een grotere versie bekijken, plus voegen we wat CSS3-animaties toe om de ervaring te verbeteren.
Accentsconagua