Archiv

Sass Gulpfile mit Bourbon & Neat

Submitted by admin on Sun, 09/22/2019 - 11:16
Tags:
Webdesign
Sass

Bourbon / Neat ist für mich eines der besten Sass-Mixin Bibliotheken und Grid Frameworks. Bourbon ist eine Bibliothek mit Sass Mixins und Funktionen um effizient Stylesheets zu schreiben. Neat ist ein Grid Framework mit dem man sehr flexibel ein Rastersystem erzeugen kann. Die Dokumentation ist verständlich geschrieben, es gibt etliche Beispiele und wenn man sich etwas damit beschäftigt lässt es sich sehr einfach einsetzen. In diesem kurzen Tutorial stelle ich Ihnen ein Starterpaket zur Verfügung mit einem package.json und einem Gulpfile dass Sass in CSS kompiliert und Autoreload integriert. Es lässt sich überall einfach einbinden, sie benötigen lediglich Node.js um die Abhängigkeiten (Pakete) zu installieren.

Sie benötigen Node.js und git, dann kann es im Prinzip schon los gehen. Auf Github kann man das Git Repository herunterladen: Sass Bourbon Neat Starterkit. Nachdem das Starterkit heruntergeladen wurde, öffnen Sie ein Terminal wechseln in das Verzeichnis und tippen: $: sudo npm install gulp-cli -g um Gulp zu installieren. Nachdem Gulp installiert wurde installieren Sie alle Pakete, die im package.json File gelistet sind mittels: $: sudo npm install. Geschafft, alle abhängigkeiten sind installiert. Im Git Repository habe ich ebenfalls schon ein html file beigelegt und das Stylesheet eingebunden. Jetzt kann mit dem Sass schreiben begonnen werden, dazu tippen Sie im terminal nur noch gulp ein und Ihr Sass Code wird automatisch kompiliert. Im source Folder können Sie Ihre Ordner und Sass Struktur modular aufbauen.
{ "author": "will@mcmahan.me",
"bugs": "https://github.com/thoughtbot/gulp-bourbon-neat-example/issues",
"contributors": "will@mcmahan.me",
"dependencies": {
"bourbon": "^5.0.0-beta.8",
"bourbon-neat": "^2.1.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-connect": "^5.7.0",
"gulp-sass": "^3.1.0",
"node-sass": "^4.12.0"
},
"description": "An example project with Gulp using Bourbon and Neat",
"homepage": "https://robots.thoughtbot.com",
"keywords": [
"sass",
"bourbon",
"neat",
"gulp",
"starter"
],
"license": "ISC",
"main": "gulfile.js",
"name": "gulp-bourbon-neat-example",
"repository": "https://github.com/thoughtbot/gulp-bourbon-neat-example",
"version": "1.0.0"
}

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.