Share
Als u Sass gebruikt, geniet van het gebruik van Bourbon en een smart grid-framework wilt gebruiken voor lichtgewicht lay-outs, kan Neat in de nabije toekomst heel goed uw vertrouwde partner worden. In dit korte introductiestuk geef ik je een paar verstandige redenen om dit niet-gedecoreerde rasterwerk een kans te geven.
Bourbon Neat is bedacht door Reda Lemeden en maakt deel uit van de fantastische Bourbon-suite. Het is een lichtgewicht, responsief rasterframe, gebouwd op Sass en Bourbon. Het project zelf wordt ondersteund door thoughtbot en hun ontwerpers zorgen ervoor.
Voordat we iets installeren, wil ik u een paar goede redenen geven om ernaar te kijken. Er zijn talloze frameworks die beloven een stabiel frame te leveren voor het ontwikkelen van uw ontwerpen. En de meesten van hen slagen zeker op de een of andere manier. Maar in welke mate? Vraag jezelf:
Als de antwoorden op een van de bovenstaande problemen alarmbellen afgeven, wil ik u verzekeren dat dergelijke hoofdpijn tegenwoordig gemakkelijk kan worden vermeden. Het is zeer zeldzaam om een project tegen te komen dat de uitbetalingen zo goed in evenwicht brengt als Bourbon Neat (of kortweg "Neat"). Waarom? Hier zijn een paar goede redenen:
Bourbon wil je ook opties bieden, geen antwoorden. Wat ik vooral leuk vind, is dat het geen fabriek is voor generieke, voorgedefinieerde stijlen. Op die manier helpt het de ontwerpbeslissingen van de ontwerper zonder in de weg te staan.
Dit is een belangrijke kwestie, maar ik zal het kort houden: lelijk presentatieklassen en extra lege wrapper divs die je vaak tegenkomt in front-end bibliotheken zijn spoken uit het verleden (tenminste zij moeten geesten zijn). Nette speelt een belangrijke rol bij het overschrijden van deze gnarly semantische gewoonten. Het helpt u bij het schrijven van schone, onopvallende markeringen en laat al uw rasterstijlen netjes gescheiden in uw stylesheets door middel van mixins.
Waarom helemaal geen grid-framework? Nou, bij design draait alles om relaties en relaties kunnen moeilijk zijn. Grids maken ze eenvoudiger door u te helpen structuren op een zinvollere en meer georganiseerde manier met elkaar te verbinden. Ze vereenvoudigen, verminderen en stabiliseren -in essentie, ze helpen het vet uit ontwerpen te trimmen. Neat bereikt dit met slechts veertien mixins ...
Accentsconagua
reset-layout-richtingrichtingsgevoelige contextshift-in-contextweergave-contextbuitenste containeroverspanning columnsreset-schermfill-ouderalles resettenomegamediaverschuivingstootkussenrij... een enkele functie voor het instellen van onderbrekingen ...
new-breekpunt... en twaalf variabelen voor instellingen:
default-layout-richtingvisual roosterdeelbewegingseenheid opaciteitborder-box-sizingvisual-raster-indexdisable-waarschuwingenvisual-grid-colorstandaard optieroosters kolommenMaximale wijdtevisual gridkolomgootBoom, dat is alles! Vrij low-key, maar het rust je uit met veel pk's!
Verandering en de behoefte aan flexibiliteit zijn constante toekomstbestendige benodigdheden. Het opnemen van mediaquery's moet soepel en gemakkelijk te beheren zijn, maar ze kunnen snel een rommeltje worden als ze niet met zorg worden behandeld.
Bourbon Neat moedigt een DROOG aanpak voor het verwerken van uw breekpunten met de functie "nieuw breekpunt". Bewaar breekpunten in variabelen en gebruik ze waar u maar wilt. Het veranderen van een hoop mediaquery's op één plek is moeilijk te verslaan.
Om concreter te zijn, laat ik u een voorbeeld geven. Hier is een willekeurig Sass-fragment met de functie "nieuw breekpunt" voor mediaquery's:
$ mobiel: nieuw breekpunt (max. breedte 500px 4) .sidebar + span-kolommen (3) + media ($ mobiel) + span-kolommen (1) .inhoud + span-kolommen (9) + media ($ mobiel) + overspanning kolommen (3)
Voor nu, maak je niet teveel druk met de mixins die in dit voorbeeld worden gebruikt. In de komende tutorials zal ik dieper ingaan op de kern van dit alles. Wat in dit voorbeeld duidelijk moet zijn, is het gebruiksgemak als u beslist om uw mediaquery's te wijzigen. Door het gebruik van Sass-variabelen en deze functie beschikt u over één consistente, gezaghebbende plaats om uw responsieve lay-out te wijzigen en aan te passen, zonder elk element afzonderlijk aan te raken.
Nu je weet waar je aan begint, laten we deze schoonheid installeren:
Notitie: je hebt Sass nodig voordat je begint.)
Bekijk mijn tutorial over Bourbon als je deze stap moet volgen.
Dit gebeurt via RubyGems, zoals zo:
edelsteen installeer het netjes
Ga via de opdrachtregel naar een Sass-directory van uw keuze en voer vervolgens uit:
keurig installeren
Hiermee installeert u alle benodigde mixins, instellingen en functies in uw aangewezen directory.
@import 'bourbon / bourbon' @import 'grid-settings' @import 'netjes / netjes'
Notitie: de importvolgorde is hier belangrijk. Omdat Neat bovenop Bourbon werd gebouwd, moet je eerst Bourbon importeren. Hetzelfde geldt voor zijn raster-settings.
Als u Neat with Rails wilt gebruiken, moet u het volgende toevoegen:
juweel netjes
naar je Gemfile.
Voer dan uit:
bundel installeren
in uw terminal.
In "application.sass" moet u vervolgens het volgende toevoegen:
@import 'bourbon' @import 'grid-settings' @import 'netjes'
en je bent klaar om te gaan. Onthoud echter dat @importeren speelt niet leuk met Sprockets-richtlijnen en daarom moet je hun referenties verwijderen. In "application.sass", "require", "require_tree" en "require_self" moet je gaan.
Last but not least, hebben de fijne mensen bij thoughtbot ons een mooie interface van de bevellijn gegeven. Het wordt geleverd met drie zelfverklarende opdrachten:
keurige installatie keurige update keurig verwijder
Met behulp van intelligente tools zoals deze, is het een plezier om met grids te werken. Dit raamwerk doet geweldig werk bij het plannen van het geluk van ontwikkelaars (lange en korte termijn).
In de volgende tutorial zullen we een nadere, meer technische blik werpen op het gebruik van Neat.
