Getting Started with Basscss about basscss HOT 6 CLOSED

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.

from basscss.

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

from basscss.

@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?

from basscss.

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.

from basscss.

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?

from basscss.

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)?

from basscss.