Share
Är du nöjd med något av CSS-nätverksbiblioteken? Nej? Jag klandrar dig inte. Ange Susy, ett plugin för Compass CSS-ramverket som låter dig skapa ditt eget anpassade rutnätverk, minimera överhead, samtidigt som det blir mer förståeligt att använda. Låter bra, eller hur? Låt oss hoppa rätt in.
Jag kommer inte att dyka mycket in i Compass eller SCSS (det språk du skriver CSS in), men gärna hänvisa till vår Underhållande CSS med Sass and Compass Premium kurs, om du vill lära dig om dem.
Du kan skapa tre olika typer av nät: statisk, flytande och magisk.
Dagens populära nätbibliotek verkar bli korta på ett eller annat sätt. Grids som 960 och Blueprint är båda statiska rutor med mycket specifika pixelvärden. Att titta på dessa nät på skärmar som är under 950 pixlar breda resulterar i horisontella rullningsfält - banans webben.
Fluidnät är knepigt för att få rätt, men några finns existerande. De flesta fluidnätverk arbetar med procentandelar istället för pixlar, men de tenderar att ha en maximal storlek och gör det omöjligt att skala över en respektabel maximal bredd. En vätskeformat är i sig nästan lika illa som en fast layout, för när du får bättre täckning av stationära datorer tenderar mobila enheter att drabbas av en sämre layout. I det här läget ger ett statiskt rutnät en bättre upplevelse. Ja, du måste rulla horisontellt på enheter med lägre upplösning, men procentbaserade system slutar vanligtvis med en kolumn som till exempel är 10% av 480px. Detta medför en vertikal uppdelning i din text.
En lösning på detta problem är CSS mediafrågor. Några av de mer populära biblioteken, som "1140-nätet" och "Bootstrap-ställningsnätet", kommer med förinställda mediafrågor. 1140-nätet har en vätskeformat, men små skärmstorlekar orsakar att kolumnerna staplar ovanpå varandra.
Fluidnät är knepigt för att få rätt ...
Bootstraps ställningsnät innehåller däremot flera statiska layouter. När skärmstorleken ändras ändrar Bootstrap layouten till den som passar bäst för den aktuella skärmstorleken. När du har kommit till en mobil skärmstorlek laddar Bootstrap samma inställning som 1140-nätet, en vätskelayout med alla kolumner staplade ovanpå varandra.
Vad är det för fel på att välja en av dessa? Tja, tekniskt ingenting, men de är inte skräddarsydda för din specifika app. Detta tvingar dig att bygga din app i deras rutnät och arbeta runt ramverkets begränsningar. Du kan alltid ändra sina ramar, men du kan också göra din egen och raka bort de onödiga, överliggande funktionerna.
Som jag nämnde tidigare är Susy ett plugin för Compass-ramen som ger ett brett utbud av mix-ins för att skapa egna CSS-rader. Du anger bara standard antal kolumner och några storlekar (kolumnbredd, rutnät, etc.), och Susy beräknar de korrekta procentsatserna för dina element. Detta ger dig möjlighet att ändra antalet kolumner och deras storlekar.
Du kan skapa tre olika typer av nät: statisk, flytande och magisk.
Du vet redan vad statiska och flytande nät är; låt oss ta en titt på vilka "magiska" nät ger dig. Magiska galler har en elastisk utsida och en vätska inuti. Med andra ord, justerar utsidan av rutnätet (max bredd) enligt webbläsarens standard teckenstorlek (skrivbords webbläsare brukar ha en standard på ca 16px). Nätets insida ändras baserat på webbläsarens faktiska bredd. Denna kombination ger din webbplats ett mer konsekvent utseende över webbläsare medan du fortfarande stöder mindre skärmar.
Susy tillhandahåller en mix-in som heter "at-breakpoint", som låter dig ställa in anpassad CSS beroende på skärmens storlek. Denna blandning uppnår denna prestation med CSS-mediafrågor. Så till exempel kan du omorganisera kolumnerna för att stapla ovanpå varandra som i de tidigare diskuterade ramarna, och du kan även ta bort innehåll som inte passar en mobil enhet.
Jag antar att du redan har Compass installerad, men om inte, kan du se Jeffreys videoserie. För att installera Susy, öppna bara en Ruby-kommandorad och skriv följande:
sudo gem installation susy
Skapa sedan ett kompass-projekt. Skriv följande:
kompass skapa projektnamn -r susy -u susy
Du bör se en informationssida, och ange hur du kommer igång.
Inuti den nyskapade katalogen borde du se två mappar tillsammans med en config-fil. Du kommer att redigera filerna som är bosatta i sass katalog; Kompass sammanställer dessa filer för att mata ut den slutliga CSS-filen till stylesheets-mappen.
För att spara tid att sammanställa CSS-filerna efter varje uppdatering kan du använda kompass " Kolla på Kommando att göra Compass automatiskt omkompilera dina filer varje gång du sparar en uppdatering. Skriv sedan följande kommando i terminalfönstret:
kompassklocka
Kompass kommer nu att börja övervaka och omregistrera filerna i sass mapp. Tänk på att du måste hålla terminalfönstret öppet för att övervaka mappen; Om du använder terminalen för filredigering (dvs. vim), måste du öppna ett annat fönster.
Nu när du har allt setup, låt oss ta en titt på min snabba demo. Jag kommer att hålla HTML-korten för att det är CSS som vi verkligen är här för. Demoen är en händelsegästschef som listar de inbjudna gästerna och håller reda på vem som RSVP'd. Det är en enkel idé som visar många av de begrepp vi diskuterade.
HTML-vis kommer det att finnas ett rubrikområde följt av en rad med namnet på händelsen, några kontroller och slutligen den faktiska listan med gäster. Du kan ta en titt på bilden nedan för att bättre förstå layouten.
Här är hela HTML-sidan för demo:
Planera det! Evenemang Gästchef
Gästlista för - Johns bröllop
Lägg till från kontakter Lägg till ny gäst
namn E-post Telefon Cell RSVP-status Dave K. Samten [email protected] 708-6777 360-234-1192 bekräftat Bob Renper [email protected] 537-4267 621-124-4294 bekräftat Kevin D. Turner [email protected] 942-2674 930-654-4144 RSVP
Susy använder min-bredd för mediafrågorna som standard; så börjar du med att definiera CSS för den minsta layouten och sedan gradvis expandera layouten med den ökande skärmstorleken. Den "mobila" versionen skiljer tagline och knappar på egna linjer, och vi gör allt fyller bredden på sidan.
Jag använder en annan kompass-plugin, kallad Sassy Buttons, för att generera knapparnas CSS. Den är inte integrerad i den här demoen, men du kan installera den genom att skriva följande i en terminal:
gem installera sassy-knappar
Lägg sedan till följande rad i din config.rb fil:
kräver "sassy-knappar"
Låt oss definiera layouten. Öppna _base.scss i sass mapp. Den här filen innehåller alla importera uttalanden och variabler som vi behöver senare. Byt ut allt i den filen med följande:
@import "susy"; // om du vill använda knapparna plugin @ import "sassy-knappar"; // Detta är standardnumret för kolumner $ totalt kolumner: 5; // bredden på varje kolumn $ kolumnbredd: 4em; // mellanslag mellan kolumner $ gutter-bredd: 1em; // mellanslag till höger och vänster om gallret $ rutnätning: $ rännbredd; // alternativa layout brytpunkter $ tablett: 8; $ dator: 55em 12;
I sig är en flytande layout nästan lika illa som en fast layout ...
De totala-kolonner har standardnumret för kolumner för den minsta skärmen i din layout.
Jag gick med tre layouter totalt: mobil, tablett och dator. Susys brytpunkter gör att du kan göra saker som att ställa in min- och maxstorleken för mediefrågorna, och du kan till och med lägga till speciellt stöd för Internet Explorer. Jag ska hålla det här exemplet enkelt och täcka bara två typer.
Tabletterbrytningspunkten aktiveras när skärmen kan passa åtta kolumner. Datautbrottpunkten aktiveras när skärmen är minst 55 bred och den 12 i $ dator: 55em 12; berättar Susy att byta till tolv kolumner.
Spara nu den här filen och öppna screen.scss. Radera allt i filen och importera basfilen. Låt oss också definiera huvudbehållaren:
@import "bas" kropp bakgrund: # F7F3E8; en text-decoration: none; .container @ include container ($ total-kolumner, $ tablett, $ dator);
Observera att du inte behöver underskriften eller filtillägget när du importerar bas fil. Inuti behållarklassen använder vi den första Susy-blandningen som definierar de olika layouterna för gallret. Då är det bara vanlig SCSS för mobillayouten:
Accentsconagua
#header font-weight: 700; typsnittstorlek: 72px; span font-weight: 300; typsnittstorlek: 18px; display: block; #controls #buttons margin-bottom: 5px; #phonebook @include sassy-knappen ("enkelt", 6px, 14px, # 337EC4); #newguest margin-top: 5px; @include sassy-knappen ("enkel", 6px, 14px, # D93131); tabell bredd: 100%; thead color: #FEFEFE; bakgrund: # 000; th text-align: left; font-weight: 500; padding: 10px; tbody border: 3px solid # 000; tr bakgrund: # E5E5E5; tr.alt bakgrund: #EEEEEE; .cnappcell .bekräfta @include sassy-knappen ("enkel", 6px, 14px, # F39B06); .unbekräfta @include sassy-knappen ("platt", 6px, 14px, # 3BA06F); .email display: none; .phone display: none; Som du kan se i de två sista raderna, döljer jag kolumnerna för e-post och telefon i tabellen så att sidan passar normalt på en mobilenhet. Som bästa praxis, ge användaren ett annat sätt att se hela informationen (det vill säga modal, annan sida), men jag lämnar det ut för det här exemplet är enkelhetens skull.
Vi har nu den grundläggande CSS som slutförts för mobilwebbplatsen, och vi kan börja ändra inställningen med breakpoints. Här är en snabb skärmdump Jag tog på min iPhone i mobilversionen:
Den första brytpunkten vi behöver implementera är tablettversionen; kom ihåg, vi måste börja med den minsta layouten först. Tabletterstorleken är tillräckligt stor för att placera taglinjen på egen linje, och vi kan även visa kolumnen e-post. Tyvärr är det fortfarande inte tillräckligt stort för att placera evenemangets namn och knappar på samma rad. Här är SCSS för denna brytpunkt:
@include at-breakpoint ($ tablett) body .container #header span display: inline; tabell .email display: tabell-cell;
Inga "magiska" kommandon här, bara standard SCSS i en Susy-mix-in. Här är en skärmdump från en iPad i tablettlayouten:
Till sist, låt oss implementera skrivbordsversionen. Vi har definitivt mer än tillräckligt med utrymme för alla kolumner; Därför lägger vi in bordet på båda sidor så att det inte har för mycket tomt utrymme. Vi flyttar också knapparna på samma linje som händelsens namn, anpassning till höger, för att centrera bordet (visuellt, åtminstone). Här är den här koden:
@include at-breakpoint ($ computer) body .container #controls #menutitle @include span-kolumner (5); margin-top: 5px; #buttons text-align: right; @ inkludera span-kolumner (5 omega); tabellen @ include prefix (1); @ inkludera suffix (1); .cell display: tabell-cell;
Det här är första gången vi använder span-kolonner blanda i. Susy tar det värde du passerar för att beräkna behållarens breddprocent. De omega sökord berättar Susy att detta är den sista kolumnen i raden. Detta gör att Compass svävar kolumnen till höger och tar bort rätt marginal.
De
prefixochändelsemix-ins tryck behållaren x mängd kolumner in från respektive vänster respektive höger.
Du kan nu spara den här filen och kompass kompilera den i CSS. Om du lagt till sassy-knappens plugin efter att ha startat kompassklocka kommando måste du stoppa klockkommandot (genväg: CTLR-C) och starta om det för att kompilera SCSS.
Detta är en mycket kort introduktion till Susy. För en mer komplett lista över funktioner kan du besöka Susys dokumentation.
Jag hoppas att du haft den här artikeln och tack för att du läste. Som alltid, var god att lämna några kommentarer eller frågor i kommentarfältet. Du kan också kontakta mig på Twitter - @GabrielManricks och jag kommer att försöka komma tillbaka till dig så snart som möjligt.
