I'm currently trying to make my company use Bourbon/Neat/Bitters/Refills, the Toughtbot front-end stack often refered as the Bourbon family.
But while we use Ruby on most of our projects, we code static websites from time to time. On that kind of project, the scaffolding speed of Bitters could be very useful.
Thoughtbot released Bower packages for Bourbon and Neat, not for Bitters and Refills. Combined with Gulp for Sass pre-processing, Bower is perfect for small projects.
I can't find a reasonably reliable way to use Bitters and Refills for static websites. Any idea?
We don’t publish Bitters or Refills to Bower because we expect authors to change the code they come with. They are there are get you started.
For Bitters, I recommend using the gem, which comes with a CLI. We publish installation instructions on our GitHub: https://github.com/thoughtbot/bitters#installation
For Refills, you can also use the gem, or simply copy-paste from the website: https://github.com/thoughtbot/refills#installation
Related
Why do I need to install so much just to use Susy or about any sass framework?
I got really interested in using sass and sass frameworks but I can't figure out a right way to start using it. I don't get why I need to have so much installed to use just one thing. Also, I have never installed something through some sort of terminal so this freaks my out immensely, why can't I just download a zip file.
If know a useful tutorial on where to start, that would also help.
thanks in advance
Your Mac already comes with a version of Ruby (with Sierra even a recent enough version). Unless you are actively develping on different versions of Ruby, you don't need to install a custom Ruby (or even a ruby version manager).
You probably still need a compiler. Here, the xcode command line tools are sufficient. You can install them with xcode-select --install.
Generally, all these tools are comand-line oriented. It will help you tremendously if you try to get at least a high-level understanding of how the command line works and how you can use it with your tools. This will also help you when it comes to deploy your solution to a live-server, often running Linux with just the command line.
Compass is not required for Susy. In fact, Compass is no longer maintained, so I highly recommend against using it. Susy only requires Sass, but you can use any flavor of Sass - Libsass, Ruby Sass, Node Sass, Gulp Sass, etc. If it compiles Sass, it will work with Susy. There are instructions for various setups in the Susy docs.
Susy also doesn't require command-line knowledge itself, though Sass is often compiled that way. There are tools that provide GUI wrappers for Sass, if you aren't comfortable in the command line. I think CodeKit ships with Susy included.
I am new to SASS. I am using this as a guide to learn Bourbon -
http://www.git-tower.com/learn/bourbon-neat-bitters/getting-ready/introduction
I followed all the instructions and it displays fine on my local machine. But when I edit _layout.scss, it doesn't compile to styles.css. I installed Compass and had it watch the project folder, but same results. My changes won't take.
Am I missing a step?
This is likely more of a sass importing/file-name issue than anything specifically with bourbon. I'd check out http://sass-lang.com/guide . Sass-lang put together a really nice guide to sass that includes things like imports, etc.
Also, Compass app can bring some things to the party that can conflict with Bourbon. I'd recommend using the sass app or a desktop app like https://prepros.io which can be easier starting out.
Hope this helps 🍻
I've read that SASS uses Ruby to compile. I have a webhosting at One.com, I don't think they support Ruby. Am I able to run SASS on it?
You actually do not need to use ruby to compile sass. There are a few alternatives.
If you are using Laravel 5 you can do this with the new elixir feature which uses gulp to process tasks.
Or you could use gulp along side Laravel 4.
Or you could use grunt.
All of these options use libsass in the background instead of ruby.
Usually SASS is compiled in CSS in development and the production server only serves the CSS.
You would need Ruby if you wanted to compile SASS though. Sometimes that's needed to create more dynamic stylesheets although I'd generally advice against it because it slows down performance.
I recently bought Hammer for Mac.
I am making a static site, and want to use Bourbon + Neat, Bitters and Refills to style the page.
If I am correct, Bourbon is already included in Hammer, but Neat, Bitters and Refills aren't?
At the Hammer for Mac homepage, it says the following about installing Neat:
"If you're using the fantastic Bourbon Neat framework with Hammer, you'll need to download the Neat code from the Neat GitHub repository. The SCSS files for Neat are located inside the app/assets/stylesheets directory.
To use Neat in your project, simply copy the contents of app/assets/stylesheets into a folder in your project. Then just use #import "neat"; in your SCSS or Sass files to use Neat."....
Which I did. I took it as the same needed to be done to include Bitters and Refills.
I then try to use the #import "neat"; commands in my main.scss, but the build always fail.
Any idea on how to get this to work?
Thanks!
It's probably because Hammer for Mac uses a lower Sass version that's required to properly build Neat:
https://github.com/thoughtbot/neat/issues/174
(In other words, download Neat 1.5.1)
I'm just wondering if there is a way to integrate SASS into Jekyll. All that I need is an automatic .scss compilation into .css when I launch Jekyll.
I don't see anything wrong with compiling assets when you launch (which I take to mean run) jekyll. The whole point of running jekyll is to pre-compile your site, which is good for performance.
As for asset conversion-- there are many plugins available that focus on this. I like the Jekyll Asset Pipeline gem, which supports any language (e.g. Scss, Less, CoffeeScript, Erb, etc.) and has a bunch of features (e.g. asset tagging, compression, gzipping, etc.) that set it apart. It also seems to be the fastest growing Jekyll-related gem these days, which I take to mean that it is gaining traction in the community.
If you want to keep it as simple as compass watch you can use the Guard gem along with guard-jekyll and guard-compass (and if you like style injection, guard-livereload).
Guard bundles multiple 'watch' actions under a single terminal window, and is much easier to set up than a robust asset pipeline. Install the gems, configure the .guardfile according to the guard-compass and guard-jekyll instructions, cd to your directory and type guard. Any time a relevant file changes your sass files and/or jekyll site will be recompiled.
Native Sass, and CoffeeScript, processing debuted in Jekyll v2.0:
http://jekyllrb.com/docs/assets/#sassscss
Full disclosure: I am the lead dev behind this project.
The easiest way I've seen to setup Sass with Jekyll is with jekyll-compass. This gem will do exactly as you describe: Any time jekyll builds your website (jekyll build, jekyll serve, etc) your Sass will be compiled into the output folder along with the rest of your website. Check out the readme linked above for full usage details.
There's also some work under way currently by the Jekyll guys to get Sass support into the core of Jekyll so that everyone will have at least basic access to Sass and the wonderful feature-set it provides.