Simplify ITCSS integration

[luboskmetko]

@jakub300 @arturkot @marcinkrzeminski current options for the amount of ITCSS styling can be confusing as it's not documented anywhere. Also differences between the Full styling without style guide and Minimal are very small. So I suggest that we agree on some common ITCSS styling and remove this option completely from scaffolding.

First, I would move the whole styleguide thing to the Chisel recipes repo. If anyone still wants to use it, they can copy it from there. Maybe in the future we can think of some automatic styleguide generation from available components but for now it 's not a live thing so I don't think it's very useful or used often.

Regarding Full vs. Minimal, I think some things which are not in Minimal, like Layout object are useful in real projects, so I'd like them to appear in the common ITCSS. But I'm willing to make compromises for the sake of simplicity and clarity. Anything from the full which doesn't get to the common ITCSS, can live in the recipes repo.

Here is a comparison of what each option has:

Common for each option:

• settings
• tools
• generic
• elements

Minimal has the above plus:

• objects/_wrapper.scss
• components/_header.scss
• components/_footer.scss
• utilities/_hide.scss

Full has all above plus:

• objects/_layout.scss
• objects/_list-bare.scss
• objects/_list-inline.scss
• objects/_media.scss
• objects/_table.scss
• components/_btn.scss
• utilities/_align.scss
• utilities/_clearfix.scss
• utilities/_color.scss
• utilities/_spacing.scss

Full with style guide has all above plus

• components/_style-guide.scss
• various Twig templates - style-guide.twig, templates/elements, templates/objects, etc.

What we should have in the common ITCSS in your opinion?

[marcinkrzeminski]

Hi,

I'm OK with moving the style guide out of the standard bundle. As for the groups, I think what's missing in the Full package is the components/_mian-nav.scss. The rest seems to be right for me.

Just wondering but I think for me personally it would be the best if I could choose one by one from objects, components, and utils :).

The other nice feature could be adding the file from whatever group it is while developing because it's hard to know from the beginning if you're going the use one package or another. What I mean is something like yo chisel:itcss add objects/_layout - isn't that cool? :)

[luboskmetko]

@marcinkrzeminski that's a good idea :) Reminds me #266 so we could make something which would cover the both cases. Then we can have a list of available objects/components in documentation.

Also you're right about _main-nav.scss, I forgot about WP components, there are _post.scss, _comment.scss, and _comment-form.scss yet. On WP projects we need all those.

[luboskmetko]

@jakub300 @arturkot @marcinkrzeminski hey, guys, I'm going to work on this and would like to suggest that common ITCSS implementation consist of the following:

• settings
• tools
• generic
• elements
• objects/_layout.scss
• objects/_list-bare.scss
• objects/_list-inline.scss
• objects/_media.scss
• objects/_table.scss
• objects/_wrapper.scss
• components/_btn.scss - a sample component
• components/_header.scss
• components/_footer.scss
• utilities/_align.scss
• utilities/_clearfix.scss
• utilities/_hide.scss

Plus on the WP projects:

• components/_main-nav.scss
• components/_post.scss
• components/_comment.scss
• components/_comment-form.scss

So this removes style guide related stuff, then utilities/_spacing.scss, utilities/_color.scss

Let me know if that's ok, or you'd like remove some of objects/components yet. If so, we can move them to the recipes repo. Thanks

[marcinkrzeminski]

Look good to me, however the utilities/_align.scss shouldn't be removed if it's on the list above.

[luboskmetko]

Right, thanks, I wanted to remove utilities/_spacing.scss. Fixed.

Regarding spacing, we could add some more advanced system like https://seesparkbox.com/foundry/manageable_utility_systems_with_css_variables to the recipes.

[marcinkrzeminski]

The spacing utility seems fine, whatever we decide on as a team is fine for me. At the moment I use my own that works for me

.u-margin-top-1x
.u-margin-top-1x-on-small
.u-margin-top-2x ...