Share
inuit.css is een krachtig, schaalbaar, op Sass gebaseerd, BEM, OOCSS-raamwerk. Dit artikel is een korte introductie tot inuit.css; hoe het is gebouwd, wie het zou moeten gebruiken en waarom.
Hallo, ik ben Harry, de maker van een onlangs herschreven CSS-framework met de naam inuit.css. Dit artikel zou hopelijk moeten dienen als een snel intro voor wat inuit.css is, waarom het anders is en hoe je het meteen kunt gebruiken ...
Ten eerste, ik weet wat je denkt; een ander CSS-framework ?! Welnu, het korte antwoord is ja ... Het lange antwoord is 'Ja, maar er is een reden voor deze ...'
CSS-kaders zijn op dit moment tien-en-een-penny met veel mensen die op vrij regelmatige basis hun kijk op het CSS-kader vrijgeven. Het probleem met de meeste van deze frameworks is dat ze erg eigenwijs zijn; CSS is een stijltaal, dus elk CSS-raamwerk houdt zich inherent bezig met cosmetica en look-and-feel. inuit.css, echter, niet.
Een CSS-raamwerk dat veel ontwerpbeslissingen neemt, is geweldig als je een ontwikkelaar bent die iemand of iets anders nodig heeft om het ontwerp voor je af te handelen, maar wat als je een ontwerper bent die een hand met CSS nodig heeft? Het gebruik van een raamwerk zou betekenen dat je de ontwerpbeslissingen en -visies van een ander moet verdragen of veel en veel code gaat verwijderen; of allebei! Het ontwerp van iemand anders zal waarschijnlijk volledig ongeschikt zijn voor uw project, waardoor het bijna helemaal zinloos is. Dit is verre van ideaal, wat we nodig hebben, is een CSS-raamwerk dat een zero-styling toepast; een raamwerk dat veel zwaar tillen doet.
inuit.css is een krachtige kleine verzameling van ontwerpvrije objecten en abstracties die het skelet van elke site construeren, die u vervolgens vervolgens kunt ontwerpen. inuit.css werkt op een OOCSS manier, wat betekent dat je alles in structuur en huid kunt breken; inuit.css doet de structuur en u kunt uw eigen cosmetica over de top aanbrengen!
inuit.css heeft ook een bestand vol variabelen die de typografische schaal van uw gehele project zullen instellen; ze zijn volledig aan jou en zullen worden gebruikt om een hele reeks componenten te bouwen rond waarden naar jouw keuze.
inuit.css sorteert veel styling hoofdpijn, maar het laat je totale controle over de styling zelf ...
Natuurlijk is Twitter's Bootstrap de belangrijkste concurrent voor iedereen in de CSS-raamwerkmarkt. Bootstrap is uitstekend als je hebt iets nodig om de ontwerpkant van dingen te hanteren; het is snel in te stellen en je kunt allerlei soorten vooraf ontworpen componenten naar believen in een project laten vallen. Perfect voor de ontwerp-uitgedaagde ontwikkelaar die snel een front-end bij elkaar moet gooien, maar zonder een designer die zijn eigen idee van cosmetica heeft, maar een helpende hand nodig heeft met een paar lastiger stukjes CSS.
Gebruik Boostrap! Als u een ontwerp nodig hebt of een snelle, off-the-shelf oplossing. Als je creatieve vrijheid nodig hebt, maar een schaalbare, ontwerpvrije, uitbreidbare en krachtige helper, zou je misschien inuit.css kunnen overwegen ...
inuit.css is een klein framework gebouwd voor websites van elke omvang; van eenvoudige one-pagers tot gigantische, door content beheerde giganten die moeten groeien en groeien.
inuit.css is eigenlijk bij uitstek geschikt voor grote websites en grote teams, en het is gebouwd op een paar principes om deze stijl van ontwikkeling te ondersteunen.
Allereerst is inuit.css een OOCSS-raamwerk. Ik ben een groot voorstander van de OO-manier van denken; Ik schrijf en praat veel over OOCSS. OOCSS is een fantastische manier om grotere builds te benaderen; hergebruik van codebasis op functie, abstracting van gewone / herhaalde ontwerppatronen, code UITdrogen, code efficiënt en draagbaar houden. Al deze ideeën zijn in essentie gebakken in inuit.css, het framework is eigenlijk gewoon een bibliotheek met nuttige objecten en abstracties zoals de nav abstractie, het media-object, het eilandobject en een lot meer.
Is dit idee van het scheiden van structuur en huid waardoor inuit.css zo goed geschikt is voor projecten waarbij een ontwerper of ontwerpers betrokken zijn. inuit.css biedt ontwerp-vrije, structurele ontwerppatronen, het ontwerpteam legt hun behandeling erover heen.
De ideeën van DROOGHEID, efficiëntie en abstractie zijn wat inuituit.css zo goed leent voor grootschalige websites. CSS blijft slank, abstracties blijken nuttiger en builds zijn efficiënter; dit zijn dingen die echt helpen bij grotere projecten.
inuit.css is gebouwd op een SMACSSeque manier. Het is niet zo korrelig of compleet (omdat inuit.css geen modules bevat en SMACSS niet nodig omgaan met abstracties en OOCSS) maar het deelt een aantal gemeenschappelijke principes ...
Het idee om CSS in specificiteitsvolgorde te schrijven is iets dat inuit.css zeer serieus neemt; code die zichzelf herdefinieert of ongedaan maakt over een project is meestal slecht nieuws, dus het ontwerpen van CSS op een manier die dit vermijdt is van het grootste belang, vooral bij grotere builds. inuit.css 'bestandsstructuur betekent dat elke regelset altijd bijdraagt aan de vorige regels, het maakt ze nooit ongedaan.
Allereerst beginnen we met onze standaard reset / herstart; inuit.css reset de marges en paddings maar definieert ook enkele nuttige standaardinstellingen voor verschillende browsers. Dit is ground zero, je startpunt, het absoluut meest basale.
Vervolgens importeert inuit.css niet-geclassificeerde elementen, dit zijn dingen zoals rubrieken (h1-h6) die zijn ingesteld op het verticale ritme dat u hebt gedefinieerd in uw variabelenbestand ... Hiermee kunt u aan de slag gaan met eenvoudige, vanille HTML-elementen die allemaal zijn gestileerd volgens de door u gekozen variabelen.
Daarna voegen we objecten en abstracties toe ... Dit zijn de dingen die je HTML-elementen uitbreiden (met behulp van klassen) en heel veel zwaar tillen. Deze objecten en abstracties zijn alle elementen agnostisch en kunnen daarom op bijna alles worden toegepast. Dit houdt ze ongelooflijk draagbaar, herbruikbaar en, nog belangrijker, bruikbaar!
Zodra u bent begonnen met het uitbreiden van inuit.css om aan uw eigen project te werken, zijn de volgende dingen die u wilt importeren, uw componenten of modules. Dit zijn dingen die zijn opgebouwd uit objecten en abstracties en hun relevante extensies (bijvoorbeeld het media-object omzetten in een afbeelding van een gebruikersprofiel en bio).
Ten slotte haalt inuit.css alle helperklassen en 'stijltroeven' binnen. Dit zijn zaken als breedte en push / pull-klassen voor uw rastersysteem, uw merkkleur en -gezicht als bruikbare klassen en zelfs een debug-modus voor ontwikkeling.
BEM is een immens krachtige front-endmethodologie bedacht door de ontwikkelaars van Yandex. BEM is simpel gezegd een manier om CSS-klassen te benoemen om ze strenger, duidelijker en krachtiger te maken. inuit.css gebruikt een BEM-methodologie met een naamgevingsconventie op basis van werk van Nicolas Gallagher.
BEM staat voor blok, element, wijziger.
Een blok is als een component, een element is iets dat in de richting gaat van het bouwen van een blok als geheel, en een modifier is een variatie op een blok, bijvoorbeeld:
.comment / * Block * / .comment__body / * Element * / .comment - guest / * Modifier * /
Hier hebben we een .commentaar blok dat een element kan bevatten met de naam .comment__body. We kunnen ook zien dat er een variatie is van .commentaar riep .commentaar - gast. Alleen van de klassen kunnen we opschonen wat elk ding doet en wat hun relaties zijn met elkaar; .comment__body moet leef binnen .commentaar, terwijl .commentaar - gast heeft om een variatie op te zijn .commentaar.
De __, -- notatie vertelt ons veel over een object. Dit is vooral handig in grotere teams omdat het helpt communiceren hoe, waar en wanneer klassen moeten worden gebruikt.
Een goede analogie van hoe BEM werkt zou kunnen zijn:
.persoon .person - woman .person__hand .person__hand - left .person__hand - right
Hier kunnen we zien dat het basisobject dat we beschrijven een persoon is en dat een ander type persoon een vrouw kan zijn. We kunnen ook zien dat mensen handen hebben; dit zijn onder-delen van mensen, en op hun beurt zijn er verschillende varianten hiervan, zoals links en rechts.
Sass wordt om een aantal redenen gebruikt, voornamelijk omdat:
Inuit.css verplaatsen naar een pre-processor was geen gemakkelijke beslissing, maar ik ben blij dat ik die heb gemaakt. Het combineren van OOCSS met Sass is van onschatbare waarde gebleken, en het gebruik van variabelen om uw eigen project in te stellen betekent dat geen enkele inuit.css-build ooit hetzelfde lijkt te zijn.
Het opzetten van een project op inuit.css kan niet eenvoudiger. Ervan uitgaande dat uw project een zeer eenvoudige structuur heeft, zoals dit:
+ css / + img / + index.html
Dan is je eerste stap om inuit.css in die CSS-map te krijgen. Er zijn twee manieren om dit te doen:
Accentsconagua
CD in de projectdirectory en klonen met Git: git clone https://github.com/csswizardry/inuit.css.git css && cd css / && rm -rf .git / && cd ... /. Dit zegt in feite 'het inuit.css-project klonen in een opgeroepen map css, ga dan naar binnen css / en verwijder de Git-versie van de inuit.css-bestanden en ga terug naar de projectdirectory '.
Als je dat eenmaal hebt gedaan, ziet je project er ongeveer zo uit:
+ index.html + css / + inuit.css / + _vars.scss + README.md + watch.sh + your-project.scss + img /
Ten eerste kun je volledig verwijderen README.md. Wijzig vervolgens de naam your-project.scss naar wat je maar wilt, bijvoorbeeld style.scss.
Notitie: Als je CodeKit of een andere interface gebruikt om je Sass te compileren, spring dan naar het einde van de tutorial waar we snel een inuit.css-project opzetten..
Nu moet je openen watch.sh, waar je zoiets zou moeten vinden als dit:
#! / bin / sh # Verander alle instanties van 'jouw-project' in wat je de # styles-stylesheet, 'cd' hebt genoemd naar de map waarin dit bestand leeft en # gewoon 'sh watch.sh'. # Geen verkleining #sass --watch your-project.scss: your-project.css --style expanded sass --watch your-project.scss: your-project.min.css --style gecomprimeerde exit 0
Hierin moet je elke instantie van wijzigen your-project.scss naar de naam die je hebt gekozen. Dit kleine bestand neemt de pijn weg bij het bekijken van Sass-bestanden vanaf de opdrachtregel.
Om nu uw projectbestanden te bekijken, hoeft u alleen maar een terminalvenster te openen, CD naar de CSS-map van het project en gewoon uitvoeren sh watch.sh. Voila, je project is nu opgezet op inuit.css.
Zoals vermeld, bevat inuit.css een aantal variabelen die een hele lading dingen doen, als je opent _vars.scss je zou ze allemaal moeten zien ...
$ Debug-mode is handig voor projecten in ontwikkeling; hierdoor wordt de debug-plug-in aangeroepen die bij inuit.css wordt geleverd en wordt visueel in de browser een markering weergegeven van mogelijk ontoegankelijke of problematische code.
$ Base-font-size en $ Base-line-height zijn redelijk voor zichzelf sprekend maar ongelooflijk belangrijk. Gegeven deze twee stukjes informatie alleen, kan inuit.css beginnen met het opzetten van je gehele verticale ritme (zie de lettertypegrootte() mixin in _mixins.scss voor meer informatie).
De rest van de variabelen zijn vrijwel alleen lettergroottes voor uw koppen. Deze, in combinatie met jouw $ Base-font-size en $ Base-line-height variabelen, is wat uw verticale ritme completeert. Probeer deze variabelen te veranderen en kijk wat er gebeurt!
De volgende stap vind ik erg handig; open inuit.scss en je zult een enorme inhoudsopgave en een lange lijst van geïmporteerde deelstukken vinden. Het is een goede gewoonte om alle objecten en abstracties meteen te becommentariëren en ze van commentaar te voorzien wanneer je ze nodig hebt. Dit betekent dat je ze opzettelijk moet bellen wanneer ze nodig zijn en dat je niet veel ongebruikte CSS bundelt.
Met je bestanden in de gaten, je variabelen ingesteld en je ongebruikte objecten becommentarieerd, je bent helemaal klaar met inuit.css ...
De kans is groot dat u niet direct met de opdrachtregel werkt. In dat geval kunt u een van de vele beschikbare toepassingen gebruiken voor het compileren van Sass. CodeKit is zo'n voorbeeld en gedraagt zich (in termen van wat we hier nodig hebben) heel erg zoals elke andere compiler, op welk platform je ook draait.
Dus, om een inuit.css project op te zetten, moet je eerst de bronbestanden uit de GitHub-repository pakken:
Nadat u de bestanden hebt uitgepakt, organiseert u ze in een vertrouwde projectlay-out, zoals bijvoorbeeld:
Zoals je kunt zien, gooide ik de inhoud van de inuit-bronmap naar a css map. Ik ben ook ontdaan van de README.md en watch.sh bestanden.
Open vervolgens je compiler (CodeKit in dit geval) en geef hem de opdracht om je projectmap te bekijken. In de meeste OS X-compilers is dit slechts een geval van het slepen van uw projectmap naar het toepassingsvenster. Zoals je hieronder kunt zien, kijkt CodeKit naar mijn inuit.css-meester map en heeft de .scss-bestanden gemarkeerd die direct worden gecompileerd. Elk bestand met een voorafgaand onderstrepingsteken zal geen eigen CSS-bestand genereren, maar het kan wel in andere bestanden worden geïmporteerd.
Ik heb in dit geval niets anders hernoemd, maar dat zie je wel your-project.scss is ingesteld om te compileren naar zijn .css naamgenoot. Alles wat ik nu moet doen is dat CSS-bestand aan mijn index.html koppelen:
Mijn eigen inuit-project Tunngahugit (welkom, in Inuit)
Telkens wanneer ik mijn projectbestanden opsla in een codebewerker, compileert CodeKit het project opnieuw voor mij en laadt het het browservenster direct opnieuw.
Het uitbreiden van inuit.css is iets dat we in het tweede deel van deze tutorial kunnen bespreken, maar voorlopig is alles wat je moet weten dat het zo simpel is als your-project.scss vertelt je:
/ ** * Ze is helemaal van jou, cap'n ... Begin hier je spullen te importeren. * /
