Code Documentatie: Nieuwe Strategieën met CSS Grid

0
42

Ik werk voor Supercool, een snel bewegende ontwerpbureau dat maakt custom-built sites voor kunsten klanten, aangedreven door de off-the-shelf systeem, Ambachtelijke CMS; het is een hoge spec-grafisch ontwerp met een relatief veeleisende typografie en art direction. De afgelopen maanden hebben we al verhuizen naar CSS grid. We zijn langzaam omschakelen, om onszelf te ontdekken, nieuwe paradigma ‘ s en ontwerp-methoden, in plaats van het simpelweg overdragen van oude gewoontes naar een nieuwe syntaxis.

Zo ver, we hebben een aantal heel bruikbare strategieën voor het bijhouden van de lay-out. Ik heb een paar van verrassend handige mixins, met benoemde gebieden en sjablonen, en we hebben op een aantal fundamentele conventies te maken van zeer leesbare code. Ik dacht dat het waardevol zou zijn om te lopen door middel van een volledig ontwikkelde productie-uitvoering van één van de belangrijkste componenten is het gebruik van het elektriciteitsnet, het graven in een aantal van de ontwerpen vragen het gooit en stuur je uit de buurt van een aantal valkuilen die we hebben aangetroffen. CSS grid is een grote spec, met veel mogelijkheden en veel van juiste manieren om dingen te doen, maar op een gegeven moment moet je om te vergrendelen van uw methode en voor het leven.

Ik verwacht een basiskennis van CSS, Sass, BEM, en enige interesse in de taak van prototyping volledig gerealiseerd, toegankelijke, aangepaste kaders met 50+ componenten van een Schets of Photoshop-type documenten op een strakke tijdlijn (zeg een week).

Laten we eerst identificeren en te scheiden van de vormgeving in aparte codering van taken en het plannen hoe we hen benaderen:

  1. Type: De ontwerper heeft al vastgesteld dat er een soort systeem.
  2. Kleuren: Eerst bouwen we een thema-model en vervolgens die in de gedeeltelijke.
  3. Inhoud: Welke elementen worden in dit blok? Wat zijn de variaties? Dit is waar onze BEM mixin komt.
  4. Lay-out: Dit is hoe de inhoud wordt geplaatst in het blok. Je zou willen overslaan rechtstreeks naar deze.
  5. Conventies: Dit is precies hoe we ervoor kiezen om te schrijven. Er zijn veel juiste antwoorden in CSS, dus wat belangrijk is, is dat we allemaal slechts instemmen met een verdrag, de regels van de weg. Dit is echt de eerste plaats komt, maar omwille van dit artikel, zullen we hier concluderen.

Type systeem

We gebruiken utility-klassen (bijvoorbeeld h-tekst–h1, h-tekst–badge) voor type stijlen. Er kan een honderden stijlen in een project. We exporteren stijlen, van Schets in onze Patternlab met Typex. Dat is een heel ander artikel op zijn eigen, dus laten we het maar een bepaald type, zoals behandeld. We zullen het niet brengen, typ in onze component gedeeltelijk.

Kleur gebruik

Zie de Pen
CSS Variabele uitwijkmogelijkheden mixin v2 door limograf (@Sally_McGrath)
op CodePen.

Thematisering is een paar kleine mixins gedaald, dus we idealiter niet een ton van de kleur van regels in onze gedeeltelijke. We bewaren ze allemaal samen in een _themer.scss gedeeltelijk in onze “Mixins en Modellen” bibliotheek, dus we kunnen er zeker van te volgen het ontwerp van de site. Op deze manier, als iemand gaat terug tot het bouwen, later, hebben ze een belangrijke referentie gedeeltelijke beschrijving van het design en branding regels. Bij het bouwen en onderhouden van talrijke sites in grote lijnen dezelfde markt — maar elk met verschillende merk spec — je moet zorg ervoor dat u niet te mengen tot een merk met een ander! Dus, zoals type, we abstract de kleur van regels uit de buurt van de gedeeltelijke. In essentie, we zijn echt alleen op zoek naar lay-out (zo veel mogelijk) in onze _header.scss bestand.

Gezien het feit dat wij het eens zijn met de conventie om altijd een thema met behulp van onze mixin, dit is hoe het zou worden opgenomen in een element:

@include (var$goederen, $value);

Dan zullen we het instellen van een thema-model, van hoe kleuren werken op deze bijzondere site en de toepassing van die thema op een component met:

@omvatten thema;

Hier is de voorbeeld thema model gaan we gebruiken deze pagina header. Het is super eenvoudig.

Zie de Pen
thema-model door limograf (@Sally_McGrath)
op CodePen.

We koppelen van een kleur met zwart of wit. We zijn afhankelijk van een contrast regel en spiegelen voor de nadruk, misschien op evenementen, zoals zweven, of een gemarkeerd call-to-action. Dit is alles wat we moeten doen om dat te laten gebeuren en nu hebben we een document van hoe de kleur moet echt werken op deze site. We kunnen gaan en te controleren tegen als we het nodig is om te debuggen of uitbreiden van de GEBRUIKERSINTERFACE.

We willen ook prep erfenis om ons te helpen, dus laten we identificeren een aantal handige conventies:

  • Stel het vult op SVG-iconen currentColor in uw pijplijn (en standaard grootte hen breedte: 1em; height: 1em; font-size: erven; in de CSS terwijl we toch bezig zijn).
  • Stel de <body> en <a> om currentColor) aan de basis.
  • Schrijven steno, het overnemen van grenzen (bijv. 1px solid of 1px solid currentColor).

Met behulp van deze thema-model, kunnen we het genereren van een aantal thema ‘ s, misschien is ze op te slaan als utility-klassen, of looping over een lijst van parameters in een component, of gewoon zodat de gebruiker in te stellen variabelen rechts op het blok in de CMS. Wanneer IE 11 daalt tot onder de 1% in onze statistieken kunnen we veel meer doen met variabelen, maar dit is genoeg voor onze huidige doeleinden.

Laten we niet afgeleid worden. Wat over het net?!

Inhoud componenten

Raster kunt ons beschrijven wat inhoud dat we hebben in elk gedeelte op een nieuwe manier. Het is echt een game changer voor ontwerpbureaus bouwen van nieuwe UI voor elk project en we ontdekken nieuwe (en leuke) toepassingen voor als we verkennen.

Te geven context: wij passen elke interface voor onze klanten, met aangepaste velden gemaakt die passen bij hun specifieke behoeften en hun inhoud-model met behulp van Ambachtelijke CMS. We hebben interne tools die trekken in de gebeurtenissen van ticketing Api ‘ s maken en posten van die data, die vervolgens kan worden bewerkt en uitgebreid (of volledig gemaakt) in de CMS. De klant kunt invullen of bewerken met de naam velden in permanente pagina de regio ‘ s, en ook in geheel ontworpen, branded content blokken in de lay-out van elke pagina zodra ze voor ze te bouwen.

Er is veel UI. De cliënten hebben een veel controle over de inhoud en hebben we een stuk van de controle over de HTML, zodat we kunnen zorgen voor een hoge standaard van toegankelijke, semantische code op de pagina. We ontwikkelen de inhoud model samen tijdens discovery en zet ’em los op de creatie van content. Ze voegen wat ze willen en wij zorgen dat het werkt en ziet er altijd rechts. Beter dan goed! Super. (Sorry! :P)

Dus, als ontwikkelaar, ik heb in evenwicht concurrerende prioriteiten:

  • Toegankelijkheid, bruikbaarheid
  • Huisstijl en grafisch ontwerp
  • Prestaties
  • Onderhoud en codebase gezondheid

Laten we eens kijken naar die één voor één door:

Bereikbaarheid

Toegankelijk, logische HTML is mijn jam. Op het minimum, ik moet een groene toegankelijkheid score op de Vuurtoren score voor mijn projecten. (Who am I kidding, ik wil die heerlijke 100!) Kern paden en pagina ‘ s worden getest met een paar screen readers, het tabblad toetsenbord, toetsenbord navigatie), low vision simulator, dasher, voice access en binaire switch. (Ik werk ook voor Robots en Cake, dus dit is een groot deel van mijn ontwikkeling.) Ik voeg reus klikbaar telefoonnummer en e-mail adressen om de pagina ‘ s over en voorbij. Ik wil gewoon mensen waar ze heen gaan.

Ik heb zorgen over de manier waarop de inhoud opnieuw kan worden besteld met een raster (en flexbox, voor die kwestie). Na gegaan door middel van een paar bouwt nu, ik denk eigenlijk dat raster kan ons helpen met dit probleem. Met CSS Grid, is er geen reden om te bewegen HTML in dienst van de lay-out. We kunnen weer aan het denken zetten over de gehele document als een logische, lineaire volgorde als onze eerste zorg.

Branding vs. Prestaties versus Onderhoud

Arts locaties vereisen kwalitatief hoogstaande grafische vormgeving, unified over print en web, en hebben voortdurend veranderende materialen (bijv. programma ‘ s, brochures, tickets, posters, microsites, enz.) ze moeten om eruit te komen van hun doelgroepen, waaronder contractuele marketing verplichtingen waaraan moet worden voldaan. Zoals u zich kunt voorstellen, we hebben veel van de grote afbeeldingen in hoge kwaliteit hebben we prioriteiten moeten stellen en meestal voorzien van sterke print-led branding. Dat betekent dat we kunnen worden waar ongeveer vijftien aangepaste lettertypen (met inbegrip van gewicht variaties, display gezichten, enz.) en complexe CSS aan de pagina. We hebben om onszelf zo mager als we kunnen. We zijn verzendkosten CSS-dat is ongeveer 20 MB nano Gzipped op het moment, maar ik ben bezig met het verminderen van het meer.

Echter, we houden het grid gebied namen de volle lengte door het verminderen van id ‘ s op false in onze PostCSS taak. Het is veel nuttiger om de lay-out kaarten beschikbaar in DevTools dan is het te redden die paar bytes. Voor onderhoud, self-documentatie, en het belang van je toekomstige zelf, die het debuggen van deze site zonder repo-toegang op een vertraging van de trein in Sowerby Bridge: houd de kaarten.

Code gezondheid

De manier om de balans van al deze concurrerende behoeften te formuleren en in te stemmen met conventies, zodat er minder op te lossen in het testen en dus dat de problemen opgelost verblijf opgelost. We onderzoeken alle onderdelen die wij bouwen en zorg ervoor dat ze altijd beginnen met een kop, die links gaan plaatsen, en knoppen voor het activeren van acties, die telbare objecten worden geleverd als een lijst en voorafgegaan door een mijlpaal rubriek, die navs <nav> en tijden zijn <time> en div soep wordt gegeten als ontbijt— de basis.

Met CSS Grid, er is geen excuus om te bewegen HTML in dienst van de lay-out. Uw content kunt altijd stroom logisch, terwijl veranderingen in de lay-out gebeurt in CSS. En, als er geen noodzaak voor marges of opvulling te maken van goten, kunt u eenvoudig verklaren:

.o-raster .o-raster { width:100%; }

…om zeker te zijn dat een aantal geneste groepen alle visueel bezetten dezelfde pagina raster. De HTML kan een duidelijker beeld van wat de dingen werkelijk zijn: een dichter document.

Zie de Pen
lock down semantische toegankelijk structuren door limograf (@Sally_McGrath)
op CodePen.

Er is een hoop te beheren tussen de kop en de actie, en het is mijn uitdaging om bij te houden van al deze velden in al die componenten en het beloopbaar, scanbare, linearizable, en gemakkelijk te lezen zijn in een soort van logische, begrijpelijke manier, terwijl ervoor te zorgen dat ik getrouw uitvoeren van de ontwerp-spec.

We brengen in mijn eerste, verrassend bruikbaar, raster mixin.

@mixin template($elementen,…) {
@elke $element in $elementen {
&__#{$element} {
grid-omgeving: $element;
}
}
}

Met behulp van deze mixin overal betekent dat:

  1. Elk onderdeel gedeeltelijke nu begint met een lijst van alle mogelijke elementen, dat is een zeer handig stuk van de documentatie, in het bijzonder wanneer Twigging de werkelijke front-end component.
  2. De mixin zorgt voor het toewijzen van het raster gebieden.
  3. Element en component namen verblijf consistent in de Schets, CSS en HTML en eventuele inconsistenties zal heel duidelijk zijn, als de lay-out zal mislukken. Ik ben stevig, maar fair.
  4. BEM naamgeving wordt automatisch afgedwongen, maar is het niet dat de dingen in de gedeeltelijke.

Nu, in de gedeeltelijke, wij zullen alleen te verklaren grid-template-gebieden, met behulp van de normale engelse woorden, wat ons een serie kaarten van de lay-outs die ook overeenkomen met de velden van de database. Super leesbaar!

Hier is een voorbeeld van deze mixin werken:

Zie de Pen
BEM ELEMENT AUTOMATISCH TOEWIJZEN door limograf (@Sally_McGrath)
op CodePen.

We besloten vast te houden aan genoemde gebieden voor interne netten want ik las in een groot artikel op deze site uit te leggen hoe Autoprefixer kan omgaan met raster voor IE 11 als u zich aan de genoemde ondersteund eigenschappen — en het komt voor het grootste deel. Als u deze test case met Autoprefixer toegepast in de super handige Debug Mode in een browser test, je zult zien dat het werkt.

Zo ver, zo goed.

Maar er zijn valkuilen! U moet instellen inline elementen te blokkeren en zorg ervoor dat ze altijd werken als grid cellen in IE 11. Het commentaar van de gemarkeerde regel in het voorbeeld om te zien wat er gebeurt anders:

Debug heeft gevangen een probleem.

Ouch! Wees voorzichtig met die blokken. U kunt vinden sommige versies van IE 11 zelfs niet halen van deze correctie, in welk geval u zou kunnen proberen alleen met behulp van duidelijke ol’ <p> tags,… zucht.

Ik heb geen display: raster in deze mixin, want er zijn scenario ‘ s waar de daadwerkelijke rooster is ingesteld op een innerlijke container, bijvoorbeeld, maar we zouden toch willen de grid-gebieden aan te passen op de juiste BEM klasse.

Dus:

.c-header{
@template(titel, pretitle, posttitle, producent, locatie -, krediet -, offerte -, nav infobalk, zoeken);
}

We leggen deze sukkels.

Indeling

Laten we identificeren een paar regels van de weg om te zorgen voor dit onderdeel dia ‘ s in een pagina lay-out, zonder gedoe. Op het moment van schrijven, is er geen subgrid) beschikbaar (maar er zal worden!), dus dit onderdeel weet niets van de ouder net it ‘ s leven in. Dit gebeurt overeenkomen met de BEM component aanpak goed als elk onderdeel wordt geschreven vlak, en de wees, te beperken erfenis. Ik ben niet pleiten voor BEM (of BEM-ish als we uiteraard gebruik) hier — ik zeg alleen dat als je al gebruik het, dit is een bonus.

In dit voorbeeld is de ontwerper heeft een pagina lay-out van 12 raster met 20px (1.25 rem) goten, voor de hele site, met geen offset stukken. Onze component is een pagina de regio en zal bezetten alle 12 grid van kolommen. In deze overgangsperiode, we zijn nog steeds met behulp van dit soort van set grid als we hebben een ton van systemen is nog steeds gebaseerd op het idee dat we moeten integreren. Dus, hier is onze conventie voor deze aandoening: voor een volledige breedte regio vallen de grip kloof en het schrijven van het raster sjabloon kolommen als fractionele eenheden (fr) 12.

Het doen van dingen op deze manier betekent:

  1. de zichtlijnen van deze interne raster grote lijnen van het raster het ligt binnen;
  2. het is gemakkelijk om te zien de onderliggende ontwerp regels in de code; en
  3. het is gemakkelijk om de lijn dingen precies, als dat nodig is.

Een korte opmerking over “voering”

Wacht… wat bedoel ik ‘dingen line-up precies’? Niet het al een line-up precies?

Twee gelijke kolommen split-midden-goot van de ouders van 12-raster.

Nou, nee. De fractionele eenheden aanpak verdeelt over de ruimte perfect, zodat je uiteindelijk in de goot. Twee zelfs de kolommen landt u aan de andere kant van de goot. Twee kolommen, waar is 2/3 en de andere is 1/3 zal split 1/3 van de manier in die goot, enzovoort.

Twee ongelijke kolommen (2fr en 1fr, respectievelijk) split-een derde van de weg in een goot van de 12-kolom ouder raster.

Het is niet echt moeilijk om op te lossen de uitlijning, zoals we weten is de breedte van onze pagina raster goot. Bijvoorbeeld, op een gelijke verdeling, mochten we het rooster gat.

Echter, we kunnen dat niet doen met een andere afdeling. Wat we kunnen doen is het toevoegen van die kloof een marge de marge is toegevoegd in geen kwestie wat het vak sizing die u hebt ingesteld. In dit voorbeeld hebben we drie kolommen (twee genoemde gebieden en een lege ruimte), het splitsen van onze goot in derde:

Dit is hoe de berekening van deze marges: Zorg ervoor dat de totale fr eenheden som resulteert in 12. Verdeel het rooster gat door het aantal kolommen in de ouder-grid, dan vermenigvuldigt u dat zo:

De rechter marge multiplier van n gelijk is aan de som van de fr-eenheden aan de rechterkant van n. De linker marge van n gelijk is aan de som van de fr-eenheden aan de linkerkant van n.

Dus, voor raster-template-kolommen met een waarde van 2fr 3fr 2fr 4fr 1fr:

2 3 2 4 1
0/10 2/7 5/5 7/1 11/0

Zie de Pen
naam spec binnen en aantal spec buiten — pagina de regio, desktop door limograf (@Sally_McGrath)
op CodePen.

Je zou zelfs kunnen schrijven dat als een mixin als je jezelf schrijven calc() veel. Iets als dit voor het uitlijnen van een innerlijke raster aan de ouder raster:

Zie de Pen
auto uitlijnen innerlijke raster ouder raster door limograf (@Sally_McGrath)
op CodePen.

…en iets als dit automatisch berekenen van de marges als de naam die is opgegeven in, maar het nummer is opgegeven buiten het raster:

Zie de Pen
naam spec binnen en aantal spec buiten — auto calc marges door limograf (@Sally_McGrath)
op CodePen.

Ik ben er zeker van dat je kunt bedenken van andere oplossingen, zoals het omschakelen naar de naam lijnen, of het toevoegen van extra vaste breedte, kolommen of zelfs het schrijven van kaarten met 12 genoemde gebieden per rij. Er zijn zo veel manieren waarop u kunt gaan met deze, maar ik denk dat veel van hen verwijderen het voordeel van de benoemde gebieden. Gebieden geven ons een leesbare lay-kaart bevat wat onze toekomst zelf moet weten. Het is code als documentatie.

Om duidelijk te zijn, het ontwerp probleem ik loop ons door niet één van de uitlijning. De uitlijning is eenvoudig met raster. Het is niet de vraag van het oplossen van de directe, triviaal, lay-out probleem, maar lossen op een manier die ondersteunt ons doel staat zijn om terug te komen in zes maanden en begrijpen:

  1. Welke elementen worden in het onderdeel.
  2. Hoe ze zijn uitgevoerd.
  3. Waarom de code is geschreven in op deze manier.

Het raster specificatie is enorm en het is gemakkelijk om te verdwalen in de mogelijkheden. Misschien is het een beter plan om opnieuw instellen op een 12-raster en het gebruik van het nummer spec (d.w.z. expliciet de link naar onze pagina grid, die gebruik maakt van het aantal spec) als absolute afstemming is nodig — maar ik heb het gevoel dat er een slimmer, eenvoudiger oplossing te wachten om te worden gevonden. Voor deze site kwamen we tot het schrijven van een pagina van een grid-object en toegevoegd geneste interne rastercellen met klassen: .o-pagina-raster__zijbalk.

Wat doen jullie allemaal denken? Ik zeker voorzien in verschillende perspectieven. 🤦♀️

Een echte, live grid!

Wij kunnen dit gebruiken om het maken van een generieke pagina header:

Zie de Pen
01 – Algemene Pagina header limograf (@Sally_McGrath)
op CodePen.

Of we kunnen het maken van een variatie van de homepage:

Zie de Pen
02 – persoonlijke pagina door deze limograf (@Sally_McGrath)
op CodePen.

Wat een held header die breekt uit onze container? Zeker! Of we kunnen leveren buiten de verpakking:

Zie de Pen
03 – Held door limograf (@Sally_McGrath)
op CodePen.

Wat is de volgende stap? Een thema-evenement kop met een volledige breedte info bar die stokken en een interne toets die overeenkomt met de zijbalk op de bovenliggende grid? U inzet. Ik zal zijn van een ouder raster zodat het makkelijker is om te zien:

Zie de Pen
04 – Evenement kop door limograf (@Sally_McGrath)
op CodePen.

Wat te denken van een zoekopdracht met een centrale afstemming? Laten we gebruik maken van een instortende kolommen techniek:

Zie de Pen
06 – Zoeken met centrale uitlijning door limograf (@Sally_McGrath)
op CodePen.

Hier is een demo van deze variaties allemaal als een gedeeltelijke. Ja, het is een kaart! En it ‘ s a wrap!

Verdragen

Phew, we vallen een heleboel! Maar je kunt zien hoe flexibel en zelf-documenterende een systeem als dit kan worden, toch?

  1. Het Type is behandeld met een apart soort systeem.
  2. Kleuren worden behandeld door een thema gedeeltelijke beschrijving van de onderliggende kleur regels van het ontwerp, in plaats van simpelweg kleuren elementen ad hoc.
  3. Elementen worden genoemd, wat ze ook zijn, in het engels, en opgenomen in een lijst aan de bovenkant van het gedeelte dat met de sjabloon mixin. Deze lijst kan worden genomen in Takje of een sjabloon als referentie.
  4. De juiste HTML-wordt altijd gebruikt en nesten niet breken raster. Dat betekent dat u kunt toepassen op een aantal geneste netwerken tot dezelfde lay-out van de ruimte door het instellen van een verdrag.
  5. Een nauwkeurige uitlijning is gedaan in een aantal spec, en niet een naam spec (maar merk op dat de uitlijning is mogelijk met naam spec).
  6. IE 11 wordt ondersteund.
  7. Ik heb nog een korte opmerking en het voorbeeld van een andere component gebouwd met benoemde gebieden. In dit voorbeeld zijn de kaarten niet regio ‘ s, maar onderdelen geplaatst in een grid, dus er is geen reden om het gebruik van de fr van 12-verdrag. U kunt rekenen op een media-object gedeeltelijke er zo uit te zien:

    .c-card {
    &–nieuws {
    uitlijnen-inhoud: start;
    grid-template-gebieden:
    “afbeelding”
    “datetime”
    “titel”;
    }

    &–search {
    rechtvaardiging-inhoud: start;
    grid-template-kolommen: 1fr 3fr;
    grid-template-gebieden:
    “afbeelding pagina”
    “image title”
    “beeld summary”;
    }

    &–merchandise {
    grid-gap: 0;
    grid-template-kolommen: $b 1fr 1fr $b;
    grid-template-gebieden:
    “image image image image”
    “. titel de titel .”
    “. samenvatting samenvatting .”
    “. prijs actie te zien .”;
    }

    &–donaties {
    // donaties bedankt knop is te lang en moet nemen meer ruimte in dan de input
    grid-gap: 0;
    grid-template-kolommen: $b 1fr 2fr $b;
    grid-template-gebieden:
    “image image image image”
    “. titel de titel .”
    “. samenvatting samenvatting .”
    “. input actie .”;
    }
    }

    // …