Share
Ik heb onlangs het genoegen gehad om twee weken door te brengen in Maleisië op de 2012 Envato Meetup. Wat een plek! Tijdens ons verblijf daar maakte ik van de gelegenheid gebruik om een blik te werpen op de schouders van mijn collega's, terwijl ik tips en tricks opving terwijl ze aan het werk waren. Hier zijn vijf schitterende webdesigntips van het Envato-team waarvan ik denk dat je het geweldig zult vinden ...
Stu is een groot voorstander van het gebruik van CSS Preprocessors, met name Sass with Compass. Tijdens de Envato-conferentie liet hij ons zien hoe hij ze gebruikte bij het bouwen van de marktthema's, wat perfect aantoont hoe efficiënt Sass kan zijn bij het werken aan grote, multi-site projecten.
Onze marktplaatsen zijn allemaal varianten van hetzelfde thema:
Bij een standaard CSS-benadering bouwt u (bijvoorbeeld) basis stylesheets om het grootste deel van de structurele stijl te behouden, met extra stylesheets om de kleuren en afbeeldingen voor elke site te wijzigen. In het beste geval zou u meerdere exemplaren van zeer vergelijkbare (zo niet identieke) CSS-bestanden onderhouden.
Niet zo met Sass. Door een enkele set SCSS-stylesheets (partials) te schrijven, plus een Sass-variabelenbestand voor elke sitevariant, ziet uw projectstructuur er ongeveer zo uit:
Partials zijn stukjes stijlregels die kunnen worden opgenomen in uw hoofdbestand - ze kunnen ook in andere bestanden worden gebruikt. Door de bestandsnaam vooraf te laten gaan met een "_" worden de gedeeltelijke SCSS-bestanden niet zelf in de implementeerbare CSS gecompileerd, ze dragen gewoon bij aan de toepassingsbestanden die u wilt bouwen.
U kunt bijvoorbeeld een Sass-bestand hebben dat alle formulierstijlen binnen uw project dicteert. U noemt het bestand "_forms.scss" en brengt het in uw applicatiebestand zonder het onderstrepingsteken of de bestandsextensie:
@import "formulieren";
Er wordt geen "_forms.css" gegenereerd, maar de regels binnen "_forms.scss" dragen bij aan het bestand waarin u het hebt getrokken.
Uw variabele bestanden stellen alle aspecten van het thema in die kunnen veranderen, zoals linkkleuren, logo's enz. Ze zien er bijvoorbeeld als volgt uit:
/ * themeforest variabelen * / $ link_color: # FFE59E;
Deze waarde kan vervolgens worden gebruikt in het hoofdbestand Sass-bestand, of alle partials die worden geïmporteerd:
een color: $ link_color;
Om een geheel nieuw thema te genereren hoeft u alleen maar de variabelen in één bestand te wijzigen (of een andere _variables.scss in te slepen). Als u een functie voor alle thema's wilt wijzigen, hoeft u alleen maar te onderhouden een het dossier; de gedeeltelijke waar die specifieke stijl voorkomt.
We hebben Sass en Compass al eerder geïntroduceerd op Webdesigntuts +, dus kijk eens of je nog moet springen.
Cameron heeft het zijn persoonlijke kruistocht gemaakt alles we reageren. Hij heeft zijn RWD-markering al op de nieuwe Rockable Press en Creattica-sites achtergelaten en zal binnenkort zijn magie op Tuts + werken ...
Hier is een goede tip om u te helpen uw weblay-outs, in meerdere resoluties, in seconden te visualiseren.
Ga naar de site van Benjamin Keen, waar hij een geweldige JavaScript-test met responsieve ontwerptest laat zien. Wijzig de grootte van de viewports die u wilt testen en genereer vervolgens de bookmarklet.
Het enige dat u nu hoeft te doen, is de koppeling naar uw bladwijzers slepen. Telkens wanneer u een site in de browser bekijkt, raakt u de bookmarklet aan en verschijnt de lay-out in alle verschillende resoluties!
Maar wacht! Er is meer! Cameron heeft dit nog een stap verder en heeft een sneltoets toegewezen aan deze bookmarklet; alles wat hij nu hoeft te doen is de juiste uitdrukking (bijvoorbeeld "rwd") in de urlbalk typen en de bookmarklet wordt actief. Perfect als u (zoals ik) liever geen omvangrijke bladwijzerwerkbalk op het scherm hebt staan.
Cameron gebruikte Firefox, waarmee u sneltoetsen voor bladwijzers kunt toewijzen met de handige functie Slimme zoekwoorden. Ik werk meestal in Chrome, maar helaas ontbreekt deze functie. Er is echter een manier om dit te omzeilen, omdat het is mogelijk om sneltoetsen toe te wijzen om zoekmachines te activeren. Laten we nu onze bookmarklet toevoegen aan Chrome op deze manier:
Klik eerst met de rechtermuisknop op de URL-balk en ga naar "Zoekmachines bewerken ..."
Dan krijgt u de mogelijkheid om een zoekmachine of query toe te voegen. Dit zal fungeren als uw sneltoets, dus geef het een naam (wat u maar wilt), wijs een zin toe (zoals "rwd" van Cameron) en plak de JavaScript-bladwijzer in de laatste invoer.
Notitie: Uw bookmarklet moet URL-gecodeerd zijn, dus zorg ervoor dat het er zo uitziet:
javascript: document.write ( '% 3C DOCTYPE% 20html% 3E% 3Chtml% 3E% 3Chead% 3E% 3Cmeta% 20charset =% 22utf-8% 22% 3E ...!
niet dit:
Accentsconagua
javascript: document.write ('... Erik Meyer heeft een handige tool voor het coderen van URL's als je het nodig hebt.
Dus dat is het! Ga naar de pagina waar je aan werkt, typ het trefwoord in je URL-balk en knal! Directe RWD-test!
Pinterest niet macho genoeg voor jou? Heerlijk ook ... (wacht, gebruiken mensen nog steeds heerlijk?) Heb je een manier nodig om een bladwijzer voor de echte inhoud te maken, een back-up te maken op je Dropbox en visueel te laten inspireren door wat anderen als bladwijzer gebruiken? Rodney denkt dat er niets beters is dan Gimme Bar:
De modulaire interface zal een vertrouwd gezicht zijn voor degenen onder u die een pincode en bladwijzer maken voor andere services. Volgen, favoriet, back-up maken en vervolgens delen via alle sociale kanalen die u hebt aangesloten ...
Bekijk wat Rodney nog meer bereikt op Twitter en Dribbble!
Hier gaat het om; toen ik Jacob om een snelle tip vroeg, stelde hij lamely een lorem ipsum-uitbreiding voor, die je zal helpen bij het pompen van vullertekst in je ontwerpen.
Maar Jacob heeft me tijdens de Envato-conferentie onbewust een alternatieve, onschatbare les geleerd: "Vertrouw je iPad niet toe aan Jess Hooper". Jess werkt op het kantoor in Melbourne en is lid van het reviewteam. Ze bood vriendelijk aan om voor mijn iPad te zorgen toen ze de groep verliet en op een avond naar het hotel terugkeerde.
De volgende dag, terwijl ik me een weg door de jungle van Maleisië vocht, kwam dit door op iemands mobiel:
Een tumblog gewijd aan mijn iPad en zijn shenanigans die noodlottige dag.
Een grapje terzijde, Jacob is een zeer getalenteerde ontwerper. Je hebt zijn werk gezien in plaatsen zoals de miljoen.envato.com en 1.000 WordPress Themes-sites, samen met veel van de Marketplace-bundels en Rockable-sites. De tip om hier afstand van te nemen is:
Bouw een Tumblog wanneer je de kans hebt.
Het is ongecompliceerd, het is snel, het is leuk en je kunt je themavaardigheden oefenen. Jess, ik zal je terughalen.
Kijk hoe Jeff werkt en, zelfs als hij je niet lesgeeft, zul je van hem leren. Wat ik deze keer van hem heb opgepakt klinkt misschien niet als de grootste tijdbesparing ter wereld, maar hier is het:
U hoeft uw lijstitem-tags niet te sluiten, laat de browser het voor u doen! *
* zeker niet verplicht ...
Dit voelt nogal onnatuurlijk, een beetje als het weglaten van de aanhalingstekens van je html-attributen:
maar ontspan, het is prima. De volgende keer dat je merkt dat je lijstitems aan het karnen bent, probeer het dan als volgt:
Veel aspecten van HTML-markup waarvoor we zijn opgeleid om het als verplicht te beschouwen, zijn in feite volledig optioneel. We hebben de neiging om dit als ongeldig te beschouwen vanwege de manier waarop XHTML-validatie wordt gebruikt om ons erboven te slaan. Als u liever weggaat markeert, als het je tijd bespaart, sloot ze. Browsers weten nog steeds precies wat u bedoelt.
Hetzelfde geldt voor , en
Nou, ik hoop dat je deze willekeurige tips nuttig vond in een bepaald opzicht (ik weet het wel) ...
