Getting Started with Basscss

[realph]

I'm trying to get to grips with Basscss to use it on a project I'm working on during the holidays. It's worth noting that it's my first time using Rework, but for some reason runs for cover I can't seem to understand how it all fits together even after reading through the docs. I wondered if someone on here could help answer a few questions?

• Is gulp dev the command I want to run when developing a page? I ask this, because if I edit the ./index.html file and run gulp dev later, it reverts the changes I've made to the page. Is there a different command I should be running when developing?
• While running the watch-css task changes made to ./src/basscss.css are saved out to ./css/basscss.css and ./css/basscss.min.css, I take it ./src/basscss.css is the primary CSS file I should be editing?
• What's with the ./scss directory then?
• What would be a typical workflow for using something like Basscss?

Sorry if these questions border on stupidity. I'd really appreciate if someone could help point me in the right direction. Any help is appreciated.

Thanks!

[jxnblk]

First off, you might want to start off with the boilerplate https://github.com/jxnblk/bassplate which doesn't have all the tasks for building the Basscss site and docs. I'll try to answer your questions in order:

1. gulp dev handles several tasks, including the Swig templating, so if you edit the compiled index.html, it will be overwritten. To edit the src templates, see the /docs/src/templates/ folder. To just compile the css, use gulp basswork.
2. Yes, the /src folder is the source for all Basscss styles, which pulls in the modules available through NPM. For a list of all the modules, see http://www.basscss.com/docs/modules/
3. The /scss folder contains Sass partials that have been compiled from the /src folder. Those are provided as a convenience for inclusion in other Sass projects, but are not used to compile Basscss itself. A typical use case might be to install Basscss with Bower, then import the files found in /scss.
4. I try to provide multiple ways to use Basscss, including using Rework, Sass, or just plain CSS. For more on creating custom builds, you might want to check out http://www.basscss.com/docs/custom-builds/

And thanks for these questions – they help me know where the docs need some clarification :)

Let me know if you have any other questions.

[realph]

Thanks for shedding a bit more light on this for me, @jxnblk. I'm going to go through this right now.

[realph]

@jxnblk Sorry if I'm being an idiot here. But if I'm importing the Bower files like so:

@import 'basscss/scss/defaults';
@import 'basscss/scss/base-reset';

then what is the point of the files found in ./scss? And which scss files should I be making edits to? Surely not the ones found in bower_components if those are the ones being imported?

[jxnblk]

Not sure if I understand the first question, but those import statements are using the files in /scss so that's the point of them.

As a general rule, you shouldn't edit vendor libraries, NPM packgages, or Bower components. You might set up your own Sass base file like this:

@import 'my-variables';
@import 'basscss/scss/defaults';
@import 'basscss/scss/base-reset';
@import 'my-custom-styles';

If you want to edit files from Basscss, you'd have to manually copy and paste the files you want to edit, but then you lose the benefit of getting updates.

Let me know if that answered your questions.

[realph]

Sorry I mean I've installed Basscss via Bower, and added bower_components/basscss/scss as an includePaths option. And I was importing them into my base Sass file like this:

@import 'basscss/scss/defaults';
@import 'basscss/scss/base-reset';

I then noticed there's an scss file in the root directory, so what's the benefit of me importing these files over the files found in bower_components/basscss/scss?

[jxnblk]

Sorry for the slow response.

The bower_components folder should contain all the packages you've installed with Bower, including Basscss if you ran bower install basscss. Basscss only has one scss folder at its root, and those are the files you're importing. When you use the includePaths option, that just provides shortcuts to folders.

Just to clarify, did you use bower install basscss in a new folder or another repo (i.e. not a cloned version of Basscss)?