Share
Sunteți mulțumit cu oricare dintre bibliotecile de grilă CSS disponibile? Nu? Nu te învinovățesc. Introduceți Susy, un plugin pentru cadrul Compass CSS, care vă permite să vă creați propriul cadru de grilă personalizat, minimizând cheltuielile aeriene, făcându-l mai ușor de utilizat. Sună bine, nu? Să mergem imediat.
Nu mă voi preocupa prea mult de Compass sau de SCSS (limbajul pe care îl scrieți în CSS), dar nu ezitați să vă referiți la cursul de întreținere CSS cu Sass și Compass Premium, dacă doriți să aflați despre ele.
Puteți crea trei tipuri diferite de grile: statice, fluide și magice.
Bibliotecile populare de grilă de astăzi par a fi scurte într-un fel sau altul. Grilele precum 960 și Blueprint sunt ambele grile statice cu valori ale pixelilor foarte specifice. Vizualizarea acestor grilă pe ecrane care au o lățime de până la 950 pixeli are ca rezultat bare de derulare orizontale -.
Soluțiile de fluid sunt greu de obținut, dar există câteva. Cele mai multe grile fluide lucrează cu procente în loc de pixeli, dar au tendința de a avea o dimensiune maximă și fac imposibilă extinderea unei lățimi maxime respectabile. Prin ele însele, un aspect fluid este aproape la fel de rău ca un aspect fix, deoarece, în timp ce obțineți o acoperire mai bună a computerelor desktop, dispozitivele mobile tind să sufere cu un aspect mai rău. În această situație particulară, o rețea statică vă oferă o experiență mai bună. Da, trebuie să parcurgeți orizontal pe dispozitive cu o rezoluție mai mică, dar sistemele bazate pe procente se termină, de obicei, cu o coloană care este, de exemplu, 10% din 480 px. Aceasta determină o divizare verticală în text.
O soluție la această problemă este CSS solicitări media. Unele dintre cele mai populare biblioteci, cum ar fi "grilă 1140" și "grila de schelă Bootstrap", vin cu interogări presetate. Grila 1140 are o structură fluidă, dar dimensiunile mici ale ecranului determină ca coloanele să se suprapună una peste cealaltă.
Grilajele fluide sunt dificil de obținut ...
Botieră de schelă Bootstrap, pe de altă parte, încorporează mai multe layout-uri statice. Pe măsură ce dimensiunea ecranului se modifică, Bootstrap modifică aspectul la cea mai potrivită pentru dimensiunea ecranului curent. Odată ce ajungeți la o dimensiune a ecranului mobil, Bootstrap încarcă aceeași configurație ca rețeaua 1140, un aspect fluid, cu toate coloanele stivuite unul peste celălalt.
Ce e în neregulă cu alegerea unuia dintre acestea? Ei bine, nimic tehnic, dar acestea nu sunt personalizate pentru aplicația dvs. specifică. Acest lucru vă forțează să vă construiți aplicația în grilă și să lucrați în jurul limitelor cadrului. Puteți modifica întotdeauna cadrele lor, dar ar putea să vă creați propriile dvs. și să radeți caracteristicile care nu sunt necesare.
După cum am menționat mai sus, Susy este un plugin pentru cadrul Compass care aduce o gamă largă de mix-uri pentru crearea propriilor rețele CSS. Pur și simplu specificați numărul implicit de coloane și câteva opțiuni de dimensiune (lățimea coloanei, umplutura de grilă etc.), iar Susy calculează procentele corecte pentru elementele dvs. Aceasta vă oferă puterea de a modifica numărul de coloane și dimensiunile acestora.
Puteți crea trei tipuri diferite de grile: statice, fluide și magice.
Știți deja care sunt grilele statice și fluide; să aruncăm o privire la ceea ce vă oferă grilele "magice". Rețelele magice au o elasticitate exterioară și un fluid interior. Cu alte cuvinte, exteriorul grilei (lățimea maximă) se ajustează în funcție de mărimea implicită a fontului browserului (browserele de desktop au de obicei implicit aproximativ 16 pixeli). Grilele interioare sunt redimensionate pe baza lățimii reale a browserului. Această combinație oferă site-ului dvs. un aspect mai consecvent în cadrul browserelor, în timp ce susține încă ecrane mai mici.
Susy oferă un amestec numit "at-breakpoint", care vă permite să setați CSS personalizat în funcție de dimensiunea ecranului. Acest amestec realizează acest lucru cu interogări media CSS. De exemplu, puteți să rearanjați coloanele să se suprapună unul pe altul, ca în cadrele discutate anterior, și puteți chiar să eliminați conținutul care nu se potrivește unui dispozitiv mobil.
Presupun că ai deja instalat Compass, dar dacă nu, poți să te referi la seria video a lui Jeffrey. Pentru a instala Susy, trebuie doar să deschideți o linie de comandă Ruby și să tastați următoarele:
sudo gem instala susy
Apoi creați un proiect Compass. Introduceți următoarele:
busola crea nume_proiect -r susy -u susy
Ar trebui să vedeți o pagină de informații, detaliind cum să începeți.
În directorul nou creat, ar trebui să vedeți două dosare împreună cu un fișier de configurare. Veți edita fișierele care locuiesc în Sass director; Compasul compilează aceste fișiere pentru a scoate CSS-ul final în dosarul stilurilor.
Pentru a economisi timpul de compilare a fișierelor CSS după fiecare actualizare, puteți utiliza Compass ' ceas comanda pentru a face Compass să vă recompileze automat fișierele de fiecare dată când salvați o actualizare. Deci, în fereastra terminal introduceți următoarea comandă:
ceas de compas
Compasul va începe acum să monitorizeze și să re-compileze fișierele din Sass pliant. Rețineți că trebuie să țineți fereastra terminalului deschisă pentru a monitoriza dosarul; dacă utilizați terminalul pentru editarea fișierelor (adică vim), atunci trebuie să deschideți o altă fereastră.
Acum că aveți totul setat, să aruncăm o privire la demo-ul meu rapid. Am de gând să păstrez HTML-ul scurt pentru că este CSS că suntem aici. Demo-ul este un manager al evenimentului, care listează oaspeții invitați și ține evidența celor care au răspuns la RSVP. Este o idee simplă care prezintă multe dintre conceptele pe care le-am discutat.
În mod HTML, va exista o zonă de antet urmată de un rând cu numele evenimentului, unele controale și, în final, lista actuală a oaspeților. Puteți să aruncați o privire la imaginea de mai jos pentru a înțelege mai bine aspectul.
Aici este întreaga pagină HTML pentru demo:
Planificați-o! Manager de eveniment
Lista de oaspeți - nunta lui John
Adăugați din Contacte Adăugați un nou invitat
Nume Telefon celulă Starea RSVP Dave K. Samten [email protected] 708-6777 360-234-1192 Confirmat Bob Renper [email protected] 537-4267 621-124-4294 Confirmat Kevin D. Turner [email protected] 942-2674 930-654-4144 RSVP
Susy folosește min lățime pentru interogările media în mod prestabilit; deci, începeți prin definirea CSS pentru cel mai mic aspect și apoi extindeți treptat aspectul cu mărimea ecranului în creștere. Versiunea "mobilă" separă sloganul și butoanele pe propriile linii și facem totul să umple lățimea paginii.
Folosesc un alt plugin Compass, numit Sassy Buttons, pentru a genera butoanele "CSS". Nu este parte integrantă a acestei demonstrații, dar o puteți instala tastând următoarele într-un terminal:
gem instala butoane sassy
Apoi adăugați următoarea linie la dvs. config.rb fişier:
necesită 'butoane sassy'
Să definim aspectul. Deschis _base.scss în Sass pliant. Acest fișier conține toate import declarațiile și variabilele de care avem nevoie mai târziu. Înlocuiți totul în interiorul fișierului cu următoarele:
@import "susy"; // dacă doriți să utilizați butoanele plugin @import "sassy-buttons"; // acesta este numărul implicit de coloane $ total-coloane: 5; // lățimea fiecărei coloane $ column-width: 4em; // spațiu între coloane $ grosime-lățime: 1em; // spațiul din dreapta și din stânga rețelei $ grid-padding: $ gutter-width; // alternate layout breakpoints $ tabletă: 8; $ calculator: 55 de 12;
În sine, un aspect fluid este aproape la fel de rău ca un aspect fix ...
totalul de coloane menține numărul implicit de coloane pentru cel mai mic afișaj în aspectul dvs..
Am mers cu trei planuri totale: mobil, tabletă și calculator. Punctele de blocare ale lui Susy vă permit să faceți lucruri precum setarea dimensiunilor min și max pentru interogările media și puteți adăuga chiar și suport special pentru Internet Explorer. Voi păstra acest exemplu simplu și vor acoperi doar două tipuri.
Punctul de întrerupere a tabletei se activează atunci când ecranul se potrivește cu opt coloane. Punctul de întrerupere al computerului se activează atunci când ecranul are o lățime de cel puțin 55 de cai și 12 în $ calculator: 55 de 12; spune Susy să treacă la douăsprezece coloane.
Acum salvați acest fișier și deschideți-l screen.scss. Ștergeți totul din fișier și importați fișierul de bază. De asemenea, definim containerul principal:
@import "bază"; corp fundal: # F7F3E8; a text-decoration: none; .container @ include container ($ total-columns, $ tablet, $ computer);
Observați că nu aveți nevoie de subliniere sau extensie de fișier atunci când importați baza fişier. În interiorul clasei de containere, folosim primul amestec Susy care definește diferitele aspecte ale grilajului. Apoi, este doar SCSS regulat pentru aspectul mobil:
Accentsconagua
#header font-weight: 700; font-size: 72px; span font-greutate: 300; font-size: 18px; afișare: bloc; #controls #button margin-bottom: 5px; #phonebook @ include sassy-button ("simplu", 6px, 14px, # 337EC4); #newguest margin-top: 5px; @ includeți butonul sassy ("simplu", 6px, 14px, # D93131); tabel lățime: 100%; thead culoare: #FEFEFE; fundal: # 000; th text-aliniere: stânga; font-weight: 500; padding: 10px; tbody graniță: 3px solid # 000; tr fundal: # E5E5E5; tr.alt background: #EEEEEE; .buttoncell .confirm @include butonul sassy ("simplu", 6px, 14px, # F39B06); .confirmați @include butonul sassy ("plat", 6px, 14px, # 3BA06F); .email display: none; .phone display: none; După cum puteți vedea în ultimele două rânduri, ascund coloanele de e-mail și de telefon din tabel, astfel încât pagina să se potrivească în mod normal pe un dispozitiv mobil. Ca o bună practică, dați utilizatorului o modalitate diferită de a vizualiza informațiile complete (adică, modal, altă pagină), dar lăsăm acest lucru din motive de simplitate a acestui exemplu.
Acum avem CSS-ul de bază finalizat pentru site-ul mobil și putem începe modificarea aspectului cu puncte de întrerupere. Iată o captură de ecran rapidă pe care am luat-o pe iPhone-ul versiunii mobile:
Primul punct de întrerupere de care trebuie să implementăm este versiunea tabletei; amintiți-vă, trebuie să începem mai întâi cu cel mai mic aspect. Dimensiunea tabletei este suficient de mare pentru a pune linia pe linia proprie și putem afișa și coloana de e-mail. Din păcate, încă nu este suficient de mare pentru a pune numele evenimentului și butoanele pe aceeași linie. Iată SCSS pentru acest punct de întrerupere:
@ include at-breakpoint ($ tabletă) body .container #header span display: inline; table .email display: cell-cell;
Nu există comenzi magice aici, doar SCSS standard într-un amestec Susy. Iată o captură de ecran dintr-un iPad a aspectului tabletei:
În sfârșit, să implementăm versiunea pentru desktop. Cu siguranta avem mai mult spatiu suficient pentru toate coloanele; așadar, așezăm masa pe ambele părți astfel încât să nu aibă prea mult spațiu gol. De asemenea, mutăm butoanele pe aceeași linie cu numele evenimentului, aliniindu-l spre partea dreaptă, pentru a centra masa (cel puțin vizual). Aici este acel cod:
@ include at-breakpoint ($ computer) body .container #controls #menutitle @ include span-coloane (5); margin-top: 5px; butoane text-align: right; @ includeți span-coloane (5 omega); tabel @ include prefix (1); @ include sufixul (1); .cell display: table-cell;
Aceasta este prima dată când folosim deschideri-coloane se amestecă în. Susy ia valoarea pe care o accepți pentru a calcula procentajul de lățime al containerului. omega cuvântul cheie spune Susy că aceasta este ultima coloană din rând. Aceasta face ca Compass să plutească coloana spre dreapta și să înlăture marginea dreaptă.
prefixșisufixmix-urile împing containerul x cantitatea de coloane din dreapta și respectiv din stânga.
Acum puteți salva acest fișier și îl puteți compila în CSS. Dacă ați adăugat pluginul butonului sassy după lansarea acestuia ceas de compas comanda, trebuie să opriți comanda de urmărire (comanda rapidă: CTLR-C) și reporniți-o pentru a compila SCSS.
Aceasta este o scurtă introducere în Susy. Pentru o listă mai completă a funcțiilor, puteți vizita documentația lui Susy.
Sper că v-ați bucurat de acest articol și vă mulțumesc că ați citit. Ca întotdeauna, nu ezitați să lăsați comentarii sau întrebări în secțiunea de comentarii. De asemenea, puteți să mă contactați pe Twitter - @GabrielManricks și voi încerca să vă revin cât mai curând posibil.
