Bootstrap 3 gebruiken met Sass

Bootstrap wordt geleverd met Responsive Grids en enkele algemene webcomponenten die we kunnen ophalen om snel een responsieve website te bouwen . Als je onze vorige berichten op Bootstrap hebt gezien, weet je waarschijnlijk dat Bootstrap-stijlen zijn samengesteld met LESS.

Hoewel LESS krachtiger is geworden met nieuwe functies die zijn geïntroduceerd in versie 1.5, zijn sommigen van u wellicht beter bekend met Sass / SCSS. Er kunnen ook enkele functies in Sass zijn waar je niet zonder kunt, maar ze zijn (nog) niet aanwezig in MINDER. Als je met Thomas McDonald aan Boostrap en met Sass wilt werken, kun je dat omdat Bootstrap is geporteerd naar Sass / SCSS .

Installatie

Er zijn een paar manieren om Bootstrap + Sass te gebruiken . Ten eerste, omdat het is opgenomen als een Ruby-edelsteen, kun je het via Terminal installeren met de volgende opdrachtregel:

 gem installeer bootstrap-sass 

Je kunt het ook samen met Compass gebruiken met onderstaande opdracht. Het is op dezelfde manier als hoe we Zurb Foundation installeren. Houd er echter rekening mee dat deze manier alleen de _variables.less bevat die Bootstrap-variabelen bevat, en styles.less waar u uw eigen stijlregels neerzet .

 compass create my-new-project -r bootstrap-sass - using bootstrap 

Als alternatief kunt u het eenvoudig downloaden van de Github-repo.

Wat is er nieuw in Bootstrap 3

Hier zijn een paar nieuwe functies gevonden in Bootstrap 3.

Plat ontwerp

De verandering die u direct kunt zien in de nieuwe versie, Bootstrap 3, is dat het nu om een ​​plat ontwerp gaat. De verlopen en schaduwen die we in de componenten van de vorige versie hebben gevonden, zijn nu verdwenen.

Grid in Bootstrap 3

Bootstrap introduceert ook een reeks nieuwe klassen en nieuwe rasterconstructies. In versie 3 zijn er grote, middelgrote, kleine en extra kleine rasters om tegemoet te komen aan verschillende viewportgroottes. Laten we het volgende HTML-voorbeeld bekijken:

Linker kolom
Middelste kolom
Rechterkolom

We hebben drie kolommen. Elke kolom heeft een gelijke breedte als deze in een grote viewport-grootte wordt bekeken (op een desktopscherm of liggend op de tablet). De grootte wordt toegepast met col-md-4 class.

Wanneer de schermgrootte kleiner wordt, wordt de kolombreedteverdeling aangepast met de col-sm-* -klasse, zodat de kolombreedte in de juiste verhouding kan blijven in plaats van alleen maar te worden gestapeld, zoals in de vorige versie van Bootstrap.

Nieuwe componenten

Er zijn ook enkele nieuwe componenten toegevoegd in versie 3. Dit omvat Pager (gebruikt voor het bouwen van Next-en-Prev type navigatie), List Group, Panels en Page Header .

Gebruik maken van Sass-functies

Technisch gezien kunnen we Bootstrap-klassen gewoon toevoegen aan de HTML-elementen om de lay-out van de website te maken, zoals we in het bovenstaande voorbeeld hebben gedaan. Maar bij het gebruik van CSS Pre-processors, zoals Sass, kunnen we sommige functies gebruiken om een ​​schonere en meer semantische HTML-structuur te bereiken in plaats van gevuld te zijn met betekenisloze klassenamen.

Gegeven het vorige voorbeeld, kunnen we zowel de structuur als klassenamen veranderen in iets als dit:

Dit is de inhoud.
Dit is de zijbalk.
Dit is de navigatie.

Binnen de stylesheet kunnen we de Sass @extend richtlijn gebruiken om de lay-out te bouwen. Met @extend worden de selectors @extend die dezelfde stijlregels delen.

 .main-area {@extend .row; } .column {@extend .col-md-4; } .content {@extend .col-xs-6; @extend .col-sm-6; } .sidebar {@extend .col-xs-4; @extend .col-sm-4; } .side-nav {@extend .col-sm-2; @extend .col-sm-2; } 

Als alternatief kunt u ook Sass @include die de stijlregels van mixins zal kopiëren en opnemen in onze class selectors.

 .main-area {@ include make-row; } .content {@ include make-xs-column (6); @ include make-sm-column (6); } .sidebar {@ include make-xs-column (4); @ include make-sm-column (4); } .side-nav {@include make-xs-column (2); @ include make-sm-column (2); } .column {@include make-md-column (4); } 

Bekijk het nu in de browser en u krijgt uw responsieve lay-out.

Conclusie

Bootstrap en Sass vormen absoluut een geweldige combinatie. Met Bootstrap kunt u binnen enkele uren een functionerende responsieve website bouwen . En functies in Sass zoals @extend en @include kunnen ons helpen slankere, programmeerbare en onderhoudbare CSS te schrijven . Voor meer informatie over Sass, kunt u dit artikel raadplegen: Aan de slag met Sass: installatie en de basisprincipes.

Dus, heb je Bootstrap + Sass geprobeerd?

Showcase van mooie zwart-witte websites

Het bepalen van de beste pasvorm uit zee van kleuren kan soms een moeilijke oproep zijn voor webontwerpers. Maar het goede nieuws is dat we, toen we tegen het kleurkeuze- en matching-blok aanliepen, tools als Adobe Kuler hebben om ons te helpen bij het nemen van beslissingen. Hoe zit het met het ontwerpen van een Black and White-website

(Technische en ontwerptips)

SplitDown: een Ghost-achtige editor voor WordPress

Ghost, een nieuw blogplatform is enkele maanden geleden uitgebracht en we hebben besproken hoe je het op Mac kunt installeren. Het is klaargestoomd als puur voor bloggen en heeft een minimalistische content-editor die goed werkt met Markdown, en snelle previews aan de zijkant om je een geweldige en effectieve blogervaring te bieden

(Technische en ontwerptips)