Share
Er du fornøyd med noen av CSS-nettverksbiblioteker tilgjengelig? Nei? Jeg klandrer deg ikke. Skriv inn Susy, et plugin for Compass CSS-rammeverket som lar deg lage ditt eget tilpassede gridramme, minimere overhead, samtidig som du gjør det mer forståelig å bruke. Høres bra ut, ikke sant? La oss hoppe rett inn.
Jeg kommer ikke til å dykke mye inn i Compass eller SCSS (språket du skriver CSS i), men vær så snill å se vår Vedlikeholdbare CSS med Sass og Compass Premium kurs, hvis du vil lære om dem.
Du kan opprette tre forskjellige typer grids: statisk, væske og magi.
Dagens populære nettbiblioteker ser ut til å falle på en eller annen måte. Grids som 960 og Blueprint er begge statiske grensesnitt med svært spesifikke pikselverdier. Vise disse rutenettene på skjermbilder som er under 950 piksler, resulterer i horisontale rullefelt - banen på nettet.
Vannnett er vanskelig å få rett, men noen eksisterer. De fleste fluidnettet arbeider med prosentandeler i stedet for piksler, men de har en maksimal størrelse og gjør det umulig å skala forbi en respektabel maksimal bredde. I seg selv er en fluid layout nesten like ille som en fast layout, fordi mens du får bedre dekning av stasjonære datamaskiner, har mobile enheter en tendens til å lide med en verre layout. I denne spesielle situasjonen gir et statisk rutenett deg en bedre opplevelse. Ja, du må rulle horisontalt på enheter med lavere oppløsning, men prosentbaserte systemer utgjør vanligvis en kolonne som for eksempel er 10% av 480px. Dette fører til en vertikal deling i teksten.
En løsning på dette problemet er CSS media spørringer. Noen av de mer populære bibliotekene, som "1140 grid" og "Bootstrap stillasnett", kommer med forhåndsinnstilte medieforespørsler. 1140-nettet har en væskeformatering, men små skjermstørrelser fører til at kolonnene stabler oppå hverandre.
Væskenettet er vanskelig å få riktig ...
Bootstraps stillasgitter, derimot, inneholder flere statiske oppsett. Når skjermstørrelsen endres, endrer Bootstrap oppsettet til det som passer best for den nåværende skjermstørrelsen. Når du kommer til en mobil skjermstørrelse, laster Bootstrap samme oppsett som 1140-rutenettet, en væskelayout med alle kolonnene stablet ovenpå hverandre.
Hva er galt med å velge en av disse? Vel, teknisk ingenting, men de er ikke skreddersydd for din spesifikke app. Dette tvinger deg til å bygge appen din inn i rutenettet og arbeide rundt rammets begrensninger. Du kan alltid endre rammene sine, men du kan like godt lage din egen og barbere av de unødvendige, overhead-funksjonene.
Som nevnt tidligere, er Susy et plugin for Compass-rammeverket som bringer et bredt utvalg av mix-ins for å lage dine egne CSS-nett. Du angir bare standard antall kolonner og noen få størrelsesalternativer (kolonnebredde, rutenett, etc.), og Susy beregner de riktige prosentsatsene for elementene dine. Dette gir deg muligheten til å endre antall kolonner og deres størrelser.
Du kan opprette tre forskjellige typer grids: statisk, væske og magi.
Du vet allerede hva statiske og flytende nett er; la oss ta en titt på hva "magiske" rutenett gir deg. Magiske rister har en elastisk utvendig og en væske inne. Med andre ord, justerer utsiden av rutenettet (maks bredde) i henhold til nettleserens standard skriftstørrelse (skrivebordsbrowser har vanligvis en standard på ca. 16px). Rutenettets innvendige størrelser er basert på nettleserens faktiske bredde. Denne kombinasjonen gir nettstedet ditt et mer konsekvent utseende på tvers av nettleserne, mens den fortsatt støtter mindre skjermer.
Susy gir en innblanding som heter "at-breakpoint", som lar deg sette tilpasset CSS i henhold til skjermstørrelsen. Denne blandingen oppnår denne prestasjonen med CSS-medieforespørsler. Så for eksempel kan du omorganisere kolonnene for å stable oppå hverandre som i de tidligere diskuterte rammene, og du kan til og med fjerne innhold som ikke passer til en mobil enhet.
Jeg antar at du allerede har Compass installert, men hvis ikke, kan du se Jeffres videoserie. For å installere Susy, åpne bare en Ruby-kommandolinje og skriv inn følgende:
sudo perle installasjon susy
Deretter opprett et kompass-prosjekt. Skriv inn følgende:
kompass opprette prosjektnavn - r susy -u susy
Du bør se en info side, og detaljere hvordan du kommer i gang.
I den nylig opprettede katalogen bør du se to mapper sammen med en config-fil. Du vil redigere filene som er bosatt i sass katalog; Kompass kompiler disse filene for å sende det endelige CSS til stilarken.
For å spare tid på å kompilere CSS-filene etter hver oppdatering, kan du bruke Compass ' se kommandoen for at Compass automatisk skal kompilere filene hver gang du lagrer en oppdatering. Så, skriv inn følgende kommando i terminalvinduet:
kompass ur
Kompass vil nå begynne å overvåke og re-kompilere filene i sass mappe. Husk at du må holde terminalvinduet åpent for å kunne overvåke mappen; Hvis du bruker terminalen for filredigering (dvs. vim), må du åpne et annet vindu.
Nå som du har alt oppsett, la oss ta en titt på min raske demo. Jeg skal holde HTML kort fordi det er CSS som vi egentlig er her for. Demoen er en gjestegruppe som viser de inviterte gjestene og holder styr på hvem som RSVP'd. Det er en enkel ide som viser mange av konseptene vi diskuterte.
HTML-vis vil det være et overskriftsområde etterfulgt av en rad med navnet på hendelsen, noen kontroller og til slutt den faktiske listen over gjester. Du kan se på bildet nedenfor for å bedre forstå oppsettet.
Her er hele HTML-siden for demoen:
Planlegg det! Event Guest Manager
Gjesteliste for - Johns bryllup
Legg til fra kontakter Legg til ny gjest
Navn e-post telefon Celle RSVP Status Dave K. Samten [email protected] 708-6777 360-234-1192 bekreftet Bob Renper [email protected] 537-4267 621-124-4294 bekreftet Kevin D. Turner [email protected] 942-2674 930-654-4144 RSVP
Susy bruker en minstebredde for media spørringer som standard; så begynner du med å definere CSS for det minste oppsettet og deretter gradvis utvide layoutet med den økende skjermstørrelsen. Den "mobile" versjonen skiller tagline og knapper på egne linjer, og vi gjør alt fylle bredden på siden.
Jeg bruker et annet kompass-plugin, kalt Sassy Buttons, for å generere knappene 'CSS'. Det er ikke integrert i denne demonstrasjonen, men du kan installere den ved å skrive følgende i en terminal:
perle installere sassy-knapper
Deretter legger du til følgende linje i din config.rb fil:
krever 'sassy-knapper'
La oss definere oppsettet. Åpen _base.scss i sass mappe. Denne filen inneholder alle importere uttalelser og variabler som vi trenger senere. Erstatt alt i den filen med følgende:
@import "susy"; // hvis du vil bruke knappene plugin @ import "sassy-knapper"; // dette er standard antall kolonner $ totalt kolonner: 5; // bredde på hver kolonne $ kolonnebredde: 4em; // mellomrom mellom kolonner $ gutter-bredde: 1em; // mellomrom til høyre og venstre for rutenettet $ rutenett: $ rennebredde; // alternative layout breakpoints $ tablet: 8; $ datamaskin: 55em 12;
I seg selv er et væskeoppsett nesten like ille som et fast oppsett ...
De total-kolonner holder standard antall kolonner for den minste skjermen i layoutet ditt.
Jeg gikk med tre layouter totalt: mobil, nettbrett og datamaskin. Susys brytepunkter lar deg gjøre ting som å sette min og maks størrelser for medieforespørslene, og du kan til og med legge til spesiell støtte for Internet Explorer. Jeg skal holde dette eksemplet enkelt og dekke bare to typer.
Tabletterbruddspunktet aktiveres når skjermen kan passe åtte kolonner. Datautbruddspunktet aktiveres når skjermen er minst 55 bred, og 12 i $ datamaskin: 55em 12; forteller Susy å bytte til tolv kolonner.
Lagre denne filen nå og åpne screen.scss. Slett alt i filen og importer basisfilen. La oss også definere hovedbeholderen:
@import "base"; kropp bakgrunn: # F7F3E8; en tekst-dekorasjon: ingen; .container @ include container ($ total-kolonner, $ tablet, $ datamaskin);
Legg merke til at du ikke trenger underskriften eller filtypen når du importerer utgangspunkt fil. I containerklassen bruker vi den første Susy-blandingen som definerer de forskjellige layoutene for rutenettet. Da er det bare vanlig SCSS for mobiloppsettet:
Accentsconagua
#header font-weight: 700; skriftstørrelse: 72px; span font-weight: 300; skriftstørrelse: 18px; skjerm: blokk; #controls #buttons margin-bottom: 5px; #phonebook @include sassy-button ("simple", 6px, 14px, # 337EC4); #newguest margin-top: 5px; @include sassy-knappen ("enkel", 6px, 14px, # D93131); tabell bredde: 100%; Thead color: #FEFEFE; bakgrunn: # 000; th text-align: left; font-vekt: 500; padding: 10px; tbody border: 3px solid # 000; tr bakgrunn: # E5E5E5; tr.alt bakgrunn: #EEEEEE; .knappcell .bekreft @include sassy-knappen ("enkel", 6px, 14px, # F39B06); .unbekreft @include sassy-knappen ("flat", 6px, 14px, # 3BA06F); .email display: none; .phone display: none; Som du ser i de to siste linjene, skjuler jeg e-post- og telefonkolonnene i tabellen slik at siden passer normalt på en mobilenhet. Som en god praksis, gi brukeren en annen måte å se på hele informasjonen (dvs. modal, annen side), men jeg forlater det for å gjøre det enkle for dette eksemplet.
Vi har nå grunnleggende CSS gjennomført for mobilwebområdet, og vi kan begynne å endre layoutet med breakpoints. Her er et raskt skjermbilde Jeg tok på min iPhone av mobilversjonen:
Det første brytepunktet vi trenger å implementere er tablettversjonen; husk, vi må starte med det minste oppsettet først. Tablettstørrelsen er stor nok til å sette taglinjen på sin egen linje, og vi kan også vise e-postkolonnen. Dessverre er det fortsatt ikke stort nok til å sette hendelsesnavnet og knappene på samme linje. Her er SCSS for dette pausepunktet:
@include at-breakpoint ($ tablet) body .container #header span display: inline; tabell .email display: tabell-celle;
Ingen "magiske" kommandoer her, bare standard SCSS i en Susy-mix-in. Her er et skjermbilde fra en iPad av nettbrettoppsettet:
Til slutt, la oss implementere desktop-versjonen. Vi har definitivt mer enn nok plass til alle kolonnene; Derfor legger vi inn bordet på begge sider, slik at det ikke har for mye tomt plass. Vi flytter også knappene på samme linje som hendelsesnavnet, tilpasser det til høyre, for å sentrere bordet (visuelt, minst). Her er den koden:
@include at-breakpoint ($ computer) body .container #controls #menutitle @include span-kolonner (5); margin-top: 5 px; #buttons text-align: right; @include span-kolonner (5 omega); tabell @ include prefix (1); @include suffiks (1); .cell display: tabell-celle;
Dette er første gang vi bruker span-kolonner bland inn. Susy tar hva verdien du passerer for å beregne breddeprosent av beholderen. De omega Søkeord forteller Susy at dette er den endelige kolonnen på rad. Dette gjør Compass float kolonnen til høyre og fjerner høyre margin.
De
prefiksogsuffiksmix-ins skyver beholderen x antall kolonner inn fra henholdsvis venstre og høyre.
Du kan nå lagre denne filen og la kompass kompilere den til CSS. Hvis du la til sassy-knappens plugin etter å ha startet kompass ur kommando, må du stoppe klokken kommandoen (snarvei: CTLR-C) og starte den på nytt for å kompilere SCSS.
Dette er en veldig kort introduksjon til Susy. For en mer komplett liste over funksjoner, kan du besøke Susys dokumentasjon.
Jeg håper du likte denne artikkelen, og takk for at du leser. Som alltid, vær så snill å legge igjen noen kommentarer eller spørsmål i kommentarfeltet. Du kan også kontakte meg på Twitter - @GabrielManricks, og jeg vil prøve å komme tilbake til deg så snart som mulig.
