Share
Recent am avut plăcerea de a petrece două săptămâni în Malaezia, la Envato Meetup. Ce loc! În timpul șederii noastre am avut ocazia să mă uit la umerii colegilor, să iau sfaturi și trucuri în timp ce lucrau. Iată cinci sfaturi strălucitoare de design web de la echipa Envato pe care le consider că vă place ...
Stu este un avocat mare în utilizarea procesoarelor CSS, în special Sass cu Compass. În cadrul conferinței Envato, ne-a urmărit cum le-a folosit atunci când a construit temele de pe piață, demonstrând perfect cât de eficientă poate fi Sass atunci când lucrează la proiecte de mari dimensiuni.
Piețele noastre sunt toate variante ale aceleiași teme:
O abordare CSS standardă vă va oferi (de exemplu) foile de stil de bază pentru a ține cea mai mare parte a stilului structural, cu foi de stil suplimentare pentru a modifica culorile și grafica pentru fiecare site. În cel mai bun caz, veți păstra mai multe copii ale unor fișiere CSS foarte asemănătoare (dacă nu identice).
Nu așa cu Sass. Prin scrierea unui singur set de foi de stiluri de bază SCSS (partiale), plus un fișier cu variabile Sass pentru fiecare variantă de site, structura proiectului ar arăta mai degrabă astfel:
Paralele sunt bucăți de reguli de stil care pot fi incluse în fișierul dvs. principal - pot fi reutilizate și în alte fișiere. Prin precederea numelui fișierului cu un "_", fișierele SCSS parțiale nu vor fi compilate în CSS implementabile, ele vor contribui doar la fișierele de aplicații pe care le alegeți să le construiți.
De exemplu, este posibil să aveți un fișier Sass care să dicteze toate stilurile de formă din cadrul proiectului dvs. Numele fișierului "_forms.scss" și aduceți-l în fișierul de aplicație fără subliniere sau extensie de fișier:
@import "formulare";
Nu va fi generat "_forms.css", dar regulile din "_forms.scss" vor contribui la fișierul pe care l-ați tras în.
Fișierele dvs. variabile vor stabili toate aspectele temei care pot fi modificate, cum ar fi culorile link-urilor, logo-urile etc. Ele pot arăta astfel, de exemplu:
/ * variabilele temelor pădure * / $ link_color: # FFE59E;
Această valoare poate fi apoi utilizată în fișierul principal Sass sau în orice alte partiale importate:
o culoare: $ link_color;
Pentru a genera o temă cu totul nouă, tot ce trebuie să faceți este să modificați variabilele dintr-un fișier (sau să trageți într-un alt _variables.scss). Pentru a modifica o caracteristică în toate temele, trebuie doar să vă mențineți unu fişier; partea parțială în care apare stilul respectiv.
Am introdus Sass și Compass pe Webdesigntuts + până acum, deci aruncați o privire dacă nu ați făcut încă saltul.
Cameron a făcut o cruciadă personală pe care să o facă Tot noi facem raspuns. El și-a lăsat deja marca RWD pe noile site-uri Rockable Press și Creattica și va lucra în curând la Tuts + ...
Iată un sfat excelent pentru a vă ajuta să vizualizați layout-urile web, la mai multe rezoluții, în câteva secunde.
Ia-te pe site-ul lui Benjamin Keen unde are un excelent JavaScript "Responsive Design Testlet Booklet". Modificați dimensiunile ferestrelor de vizualizare pe care doriți să le testați, apoi generați marcatorul de carte.
Tot ce trebuie să faceți acum este să trageți link-ul furnizat în marcajele dvs. Ori de câte ori vizualizați un site în browser, apăsați marcatorul de carte și aspectul va apărea în toate rezoluțiile!
Dar asteapta! Mai este! Cameron a făcut acest lucru cu un pas mai departe și a alocat o cheie hotkey la acest bookmarklet; tot ce trebuie să facă acum este să tastați fraza potrivită (de exemplu "rwd") în bara url și setul de marcaj să aibă efect. Perfect dacă (ca mine) preferați să nu aveți în permanență o bara de instrumente pentru marcaj voluminoase.
Cameron folosea Firefox, care vă permite să atribuiți tastele rapide marcate cu caracteristica inteligentă a cuvintelor cheie inteligente. De obicei lucrez în Chrome, care, din păcate, nu are această funcție. Cu toate acestea, există o cale în jurul valorii de acest lucru, pentru că este posibil pentru a atribui taste rapide pentru a declanșa motoarele de căutare. Să adăugăm acum bookmarklet-ul nostru în Chrome astfel:
Mai întâi, dați clic dreapta pe bara url și accesați "Editați motoarele de căutare ..."
Apoi vi se va oferi opțiunea de a adăuga un motor de căutare sau o interogare. Acest lucru va acționa ca o cheie rapidă, așa că dați-i un nume (indiferent ce doriți), atribuiți o frază (cum ar fi "rwd" lui Cameron), apoi lipiți bookmarklet JavaScript în intrarea finală.
Notă: Marcajul dvs. de marcaj va trebui să fie codat pe adresa URL, așa că asigurați-vă că arată astfel:
javascript: document.write ( '% 3C DOCTYPE% 20html% 3E% 3Chtml% 3E% 3Chead% 3E% 3Cmeta% 20charset =% 22utf-8% 22% 3E ...!
nu asta:
javascript: document.write (“...
Erik Meyer are un instrument util pentru codarea adreselor URL dacă aveți nevoie de el.
Deci asta este! Vizitați pagina pe care lucrați, introduceți cuvântul cheie în bara dvs. de url și faceți clic pe bang! Testul RWD instant!
Pinterest nu e destul de macho pentru tine? Delicios de asemenea ... (așteptați, oamenii încă mai folosesc delicios?) Aveți nevoie de o modalitate de a marca conținutul actual, de a le salva în Dropbox-ul dvs. și de a vă inspira vizual din ceea ce alții marcaj? Rodney consideră că nu este nimic mai bun decât Gimme Bar:
Interfața modulară va fi o viziune familiară pentru cei care vă trimit și marchează cu alte servicii. Urmați, preferați, copiați backup, apoi partajați-vă prin toate canalele sociale pe care le-ați conectat ...
Vedeți la ce altceva Rodney se ridică la Twitter și Dribbble!
Iată ce este; când l-am întrebat pe Jacob pentru un sfat rapid, el a sugerat cu greu o extensie lorem ipsum, care vă va ajuta să pompați materialul de umplutură în desenele dumneavoastră.
Dar Jacob ne-a învățat involuntar o lecție alternativă, neprețuită în timpul conferinței Envato: "Nu-ți încredința iPad-ul la Jess Hooper". Jess lucrează în biroul din Melbourne și este membru al echipei de examinare. Ea a oferit cu plăcere să aibă grijă de iPad-ul meu când a părăsit grupul și sa întors la hotel într-o seară.
În ziua următoare, în timp ce mă luptam prin jungla Malaeziei, aceasta a venit pe mobilul cuiva:
Un Tumblog dedicat iPad-ului meu și shenanigans sale acea zi fateful.
Gheata la o parte, Jacob este un designer foarte talentat. Veți vedea lucrările sale în locuri precum milion.envato.com și 1.000 de site-uri WordPress Themes, împreună cu multe dintre pachetele Marketplace și site-uri Rockable. Sfaturile care trebuie luate de la acest lucru sunt:
Construiți un Tumblog ori de câte ori aveți șansa.
E drept, este rapid, este distractiv si poti practica abilitatile tale. Jess, te voi aduce înapoi.
Uita-te la munca lui Jeff și, chiar dacă nu te învață, vei învăța de la el. Ceea ce am luat de la el de data aceasta nu s-ar părea ca cel mai mare economizor de timp din lume, dar aici este:
Nu trebuie să închideți etichetele elementului de listă, lăsați browserul să o facă pentru dvs.! *
* nu este obligatoriu ...
Acest lucru se dovedește a fi ceva nenatural, un pic ca și omiterea ghilimelelor din atributele html:
dar relaxează-te, e bine. Data viitoare când vă aflați în situația de a lovi în evidență articolele din listă, încercați să le faceți astfel:
Multe aspecte ale marcajului HTML pe care am fost instruiți să le considerăm obligatorii, sunt de fapt opționale în întregime. Tindem să ne gândim la acest lucru ca fiind nevalid din cauza modului în care validarea XHTML ne-a bătut peste el. Dacă preferați să plecați etichete, dacă vă economisește timp, ștergeți-le. Navigatorii vor ști totuși exact ce vrei să spui.
Același lucru este valabil și pentru , și
Sper că ați găsit aceste sfaturi aleatoare utile în vreun fel (știu că am făcut-o) ...
Accentsconagua