nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


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?

Spotify voor Android zit nu achter de integratie van Lyrics

Spotify voor Android zit nu achter de integratie van Lyrics

In januari 2016 hebben Spotify en een muziekannotatiebedrijf genaamd Genius hun krachten gebundeld om achter de teksten te introduceren voor de iOS-versie van Spotify . In april 2017 heeft deze functie eindelijk zijn weg gevonden naar de Android-versie van Spotify . Meteen vanaf nu kunnen Android Spotify-gebruikers aanvullende informatie over een nummer zien op twee van Spotify's samengestelde afspeellijsten

(Technische en ontwerptips)

45 ongebruikelijke kunstwerken gemaakt van sigarettenboxen die u moet zien

45 ongebruikelijke kunstwerken gemaakt van sigarettenboxen die u moet zien

Er zijn verschillende materialen die kunnen resulteren in mooie en interessante creaties . Upcyclen is een geweldige manier om niet alleen creatief te worden, maar het helpt ook het milieu omdat er geen nieuwe items worden gebruikt. Normaal gesproken associeer je roken niet met kunst, maar je zou verbaasd zijn over wat een paar gerecycleerde sigarettenverpakkingen kunnen worden

(Technische en ontwerptips)