Share
Ben je blij met met een van de beschikbare CSS-rasterbibliotheken? Nee? Ik neem het je niet kwalijk. Voer Susy in, een plug-in voor het Compass CSS-raamwerk waarmee u uw eigen aangepaste rasterconstructie kunt maken, overhead kunt minimaliseren en het begrijpelijker maakt om te gebruiken. Klinkt goed, toch? Laten we er meteen in springen.
Ik ga niet veel in Compass of SCSS duiken (de taal waarin je de CSS schrijft), maar kijk gerust naar onze onderhoudbare CSS met Sass en Compass Premium-cursus, als je er meer over wilt leren..
Je kunt drie verschillende soorten roosters maken: statisch, vloeiend en magisch.
De populaire rasterbibliotheken van vandaag lijken op de een of andere manier tekort te schieten. Rasters zoals 960 en Blueprint zijn beide statische rasters met zeer specifieke pixelwaarden. Het bekijken van deze rasters op schermen die minder dan 950 pixels breed zijn, resulteert in horizontale schuifbalken - de vloek van het web.
Vloeiende roosters zijn lastig om goed te krijgen, maar er bestaan er wel een paar. De meeste vloeibare rasters werken met percentages in plaats van pixels, maar hebben de neiging om een maximale grootte te hebben en maken het onmogelijk om voorbij een respectabele maximale breedte te schalen. Op zich is een vloeiende lay-out bijna net zo slecht als een vaste lay-out, want terwijl je een betere dekking krijgt van desktopcomputers, hebben mobiele apparaten de neiging om te lijden aan een slechtere lay-out. In deze specifieke situatie geeft een statisch raster u een betere ervaring. Ja, je moet horizontaal scrollen op apparaten met een lagere resolutie, maar op percentages gebaseerde systemen eindigen meestal met een kolom die bijvoorbeeld 10% van 480px is. Dit veroorzaakt een verticale splitsing in uw tekst.
Een oplossing voor dit probleem is CSS mediaquery's. Sommige van de meer populaire bibliotheken, zoals het "1140-raster" en het "Bootstrap steigerrooster", worden geleverd met vooraf ingestelde mediaquery's. Het 1140-raster heeft een vloeiende lay-out, maar kleine schermformaten zorgen ervoor dat de kolommen op elkaar worden gestapeld.
Vloeistofroosters zijn lastig om goed te krijgen ...
Het steigerrooster van Bootstrap bevat daarentegen meerdere statische lay-outs. Naarmate de schermgrootte verandert, verandert Bootstrap de layout in de lay-out die het best geschikt is voor de huidige schermgrootte. Zodra u de mobiele schermgrootte bereikt, laadt Bootstrap dezelfde instellingen als het 1140-raster, een vloeiende lay-out met alle kolommen op elkaar gestapeld.
Wat is er mis met het kiezen van een van deze? Nou, technisch gezien niets, maar ze zijn niet op maat gemaakt voor jouw specifieke app. Dit dwingt je om je app in hun grid te bouwen en de beperkingen van het framework te omzeilen. Je kunt hun framework altijd aanpassen, maar je kunt er net zo goed zelf mee werken en de onnodige overheadfuncties wegscheren.
Zoals ik eerder al zei, is Susy een plug-in voor het Compass-framework dat een breed scala aan mix-ins biedt voor het maken van uw eigen CSS-rasters. U geeft eenvoudig het standaard aantal kolommen en enkele opties voor de grootte op (kolombreedte, rasterpadding, enz.) En Susy berekent de juiste percentages voor uw elementen. Dit geeft u de mogelijkheid om het aantal kolommen en hun afmetingen te wijzigen.
Je kunt drie verschillende soorten roosters maken: statisch, vloeiend en magisch.
Je weet al wat statische en vloeibare roosters zijn; laten we eens kijken naar wat "magische" rasters je geven. Magische rasters hebben een elastische buitenkant en een vloeistof binnenin. Met andere woorden, de buitenkant van het raster (max. Breedte) past zich aan de standaard lettertypegrootte van de browser aan (desktopbrowsers hebben meestal een standaardwaarde van ongeveer 16px). De binnenzijde van het raster wordt gewijzigd op basis van de werkelijke breedte van de browser. Deze combinatie geeft uw site een consistenter uiterlijk in browsers en ondersteunt nog steeds kleinere schermen.
Susy biedt een mix-in genaamd "at-breakpoint", waarmee u aangepaste CSS kunt instellen op basis van de grootte van het scherm. Deze mix bereikt deze prestatie met CSS-mediaquery's. U kunt bijvoorbeeld de kolommen opnieuw rangschikken om op elkaar te stapelen, zoals in de eerder besproken frameworks, en u kunt zelfs inhoud verwijderen die niet op een mobiel apparaat past.
Ik neem aan dat je Compass al hebt geïnstalleerd, maar als dat niet het geval is, kun je de videoreeks van Jeffrey raadplegen. Om Susy te installeren, opent u gewoon een Ruby-opdrachtregel en typt u het volgende:
sudo gem install susy
Maak vervolgens een Compass-project. Typ het volgende:
kompas create project_name -r susy -u susy
U zou een infopagina moeten zien met details over hoe u aan de slag kunt gaan.
In de nieuwe map moet u twee mappen zien samen met een configuratiebestand. U gaat de bestanden bewerken die zich in de sass directory; Compass compileert deze bestanden om de uiteindelijke CSS naar de stylesheets-map te sturen.
Om tijd te besparen bij het compileren van de CSS-bestanden na elke update, kunt u Compass 'gebruiken kijk maar commando om Compass automatisch uw bestanden opnieuw te laten compileren telkens wanneer u een update opslaat. Dus, typ in het terminalvenster de volgende opdracht:
kompas kijken
Compass begint nu met het controleren en opnieuw compileren van de bestanden in de sass map. Houd er rekening mee dat u het terminalvenster open moet houden om de map te kunnen controleren; als u de terminal gebruikt voor het bewerken van bestanden (zoals vim), moet u een ander venster openen.
Nu je alles hebt ingesteld, laten we eens kijken naar mijn snelle demo. Ik ga de HTML kort houden, want het is de CSS waar we echt voor zijn. De demo is een evenementengastheer die de genodigden opslaat en bijhoudt wie RSVP heeft. Het is een eenvoudig idee dat veel van de concepten die we hebben besproken, weergeeft.
HTML-wijs, er zal een header-gebied zijn gevolgd door een rij met de naam van de gebeurtenis, enkele besturingselementen en ten slotte de werkelijke lijst met gasten. U kunt de onderstaande afbeelding bekijken om de lay-out beter te begrijpen.
Hier is de volledige HTML-pagina voor de demo:
Plan het! Evenement Gastmanager
Gastenlijst voor - John's Wedding
Toevoegen uit Contacten Nieuwe gast toevoegen
Naam Telefoon Cel RSVP-status Dave K. Samten [email protected] 708-6777 360-234-1192 bevestigd Bob Renper [email protected] 537-4267 621-124-4294 bevestigd Kevin D. Turner [email protected] 942-2674 930-654-4144 RSVP
Susy gebruikt min-width voor de mediaquery's standaard; U begint dus met het definiëren van de CSS voor de kleinste lay-out en breidt vervolgens de lay-out geleidelijk uit met de toenemende schermgrootte. De 'mobiele' versie scheidt de tagline en knoppen op hun eigen regels en we zorgen ervoor dat alles de breedte van de pagina vult.
Ik gebruik een andere Compass-plug-in, genaamd Sassy Buttons, om de CSS van de knoppen te genereren. Het is geen integraal onderdeel van deze demo, maar u kunt het installeren door het volgende in een terminal te typen:
gem installeer sassy-buttons
Voeg vervolgens de volgende regel toe aan uw config.rb het dossier:
vereisen 'sassy-buttons'
Laten we de lay-out definiëren. Open _base.scss in de sass map. Dit bestand bevat alle importeren verklaringen en variabelen die we later nodig hebben. Vervang alles binnen dat bestand door het volgende:
@import "susy"; // als u de knoppen wilt gebruiken plugin @import "sassy-buttons"; // dit is het standaard aantal kolommen $ totaal-kolommen: 5; // breedte van elke kolom $ kolombreedte: 4em; // spatie tussen kolommen $ gootbreedte: 1em; // spatie rechts en links van het raster $ rasteropvulling: $ gootbreedte; // alternatieve lay-outbreekpunten $ tablet: 8; $ computer: 55em 12;
Op zichzelf is een vloeiende lay-out bijna net zo slecht als een vaste lay-out ...
De totaal-kolommen bevat het standaard aantal kolommen voor de kleinste weergave in uw lay-out.
Ik ging met in totaal drie indelingen: mobiel, tablet en computer. De onderbrekingspunten van Susy stellen u in staat dingen te doen zoals het instellen van de min- en max-formaten voor de mediaquery's en u kunt zelfs speciale ondersteuning voor Internet Explorer toevoegen. Ik ga dit voorbeeld eenvoudig houden en slechts twee typen dekken.
Het breekpunt van de tablet wordt geactiveerd wanneer het scherm in acht kolommen past. Het breekpunt van de computer wordt geactiveerd wanneer het scherm ten minste 55em breed is en de 12 in $ computer: 55em 12; vertelt Susy om over te schakelen naar twaalf kolommen.
Sla dit bestand nu op en open screen.scss. Wis alles in het bestand en importeer het basisbestand. Laten we ook de hoofdcontainer definiëren:
@import "base"; body achtergrond: # F7F3E8; een text-decoration: none; .container @ include container ($ total-columns, $ tablet, $ computer);
Merk op dat u het onderstrepingsteken of de extensie niet nodig hebt bij het importeren van de baseren het dossier. Binnen de containerklasse gebruiken we de eerste Susy-mixin die de verschillende lay-outs voor het raster definieert. Dan is het gewoon een gewone SCSS voor de mobiele lay-out:
Accentsconagua
#header font-weight: 700; lettergrootte: 72 px; span font-weight: 300; lettergrootte: 18px; weergave: blok; #controls #knoppen margin-bottom: 5px; #phonebook @inclusief sassy-knop ("simple", 6px, 14px, # 337EC4); #newguest margin-top: 5px; @ include sassy-knop ("simple", 6px, 14px, # D93131); tabel width: 100%; thead color: #FEFEFE; achtergrond: # 000; th text-align: left; font-weight: 500; padding: 10px; tbody border: 3px solid # 000; tr background: # E5E5E5; tr.alt background: #EEEEEE; .buttoncell .confirm @ include sassy-button ("simple", 6px, 14px, # F39B06); .unconfirm @inclusief sassy-knop ("plat", 6px, 14px, # 3BA06F); .email display: none; .phone display: none; Zoals je kunt zien in de laatste twee regels, verberg ik de e-mail- en telefoonkolommen in de tabel, zodat de pagina normaal op een mobiel apparaat past. Als een beste oefening, geef de gebruiker een andere manier om de volledige informatie (dat wil zeggen modaal, andere pagina) te bekijken, maar ik laat dit achterwege omwille van de eenvoud van dit voorbeeld.
We hebben nu de basis-CSS voltooid voor de mobiele website en we kunnen beginnen met het aanpassen van de lay-out met onderbrekingspunten. Hier is een snel screenshot dat ik op mijn iPhone van de mobiele versie heb gemaakt:
Het eerste breekpunt dat we moeten implementeren, is de tabletversie; vergeet niet dat we eerst met de kleinste lay-out moeten beginnen. Het tabletformaat is groot genoeg om de tagline op zijn eigen regel te plaatsen en we kunnen ook de kolom voor e-mail weergeven. Helaas is het nog steeds niet groot genoeg om de naam van het evenement en de knoppen op dezelfde regel te plaatsen. Hier is de SCSS voor dit breekpunt:
@inclusief at-breakpoint ($ tablet) body .container #header span display: inline; table .email display: table-cell;
Geen 'magische' opdrachten hier, alleen standaard SCSS in een Susy-mix-in. Hier is een screenshot van een iPad van de tabletlay-out:
Laten we ten slotte de desktopversie implementeren. We hebben zeker meer dan genoeg ruimte voor alle kolommen; daarom laten we de tafel aan beide zijden inspringen zodat deze niet te veel lege ruimte heeft. We verplaatsen ook de knoppen naar dezelfde regel als de naam van het evenement, en lijn het uit aan de rechterkant om de tafel te centreren (ten minste visueel). Hier is die code:
@inclusief at-breakpoint ($ computer) body .container #controls #menutitle @ include span-columns (5); margin-top: 5px; #knoppen text-align: right; @ include span-columns (5 omega); tabel @include prefix (1); @ include suffix (1); .cell weergave: tabelcel;
Dit is de eerste keer dat we de overspanning columns Meng in. Susy neemt de waarde die u doorgeeft om het breedtepercentage van de container te berekenen. De omega sleutelwoord vertelt Susy dat dit de laatste kolom in de rij is. Hierdoor drijft Kompas de kolom naar rechts en verwijdert de rechtermarge.
De
voorvoegselenachtervoegselmix-ins push de container x aantal kolommen van links en rechts respectievelijk.
U kunt dit bestand nu opslaan en het in kompas laten compileren in CSS. Als u de plug-in sassy-buttons hebt toegevoegd na het starten van de kompas kijken opdracht, moet u de opdracht watch (sneltoets: CTLR-C) stoppen en opnieuw opstarten om de SCSS te compileren.
Dit is een korte introductie in Susy. Voor een completere lijst met functies, kunt u de documentatie van Susy bezoeken.
Ik hoop dat je dit artikel leuk vond en bedankt voor het lezen. Zoals altijd, voel je vrij om opmerkingen of vragen achter te laten in de comments sectie. U kunt ook contact met mij opnemen op Twitter - @GabrielManricks en ik zal proberen zo snel mogelijk contact met u op te nemen.
