How are stylesheets set up in default theme?

[Stark Raving]

I have been trying to change the background and color of the menu in a copy of the default theme. The css file "foundation.min" is like one impossibly long, and unreadable sentence. This is so hard to edit! Although the "foundation.css" has the normal indentations for easy reading, it is not declared in the header? Duh? What am I missing?

I can't imagine why there has to be 3 css files I need to edit (the third being app.css). Can someone explain the whys and hows of the stylesheets' setup? I'm sure there's a good reason why.

Thanks.

[ningus]

My understanding is, that bolt's base-2013 theme is based on the Foundation front-end framework, both foundation.css files are part of that framework, containing some reset styles, styles for print and screen sizes (i.e. mobile devices). You ususally don’t need to edit these files. The only file you should edit is in fact app.css.

[Stark Raving]

Yes, I got that "app.css" is called last in the head, but looking at the others allows me to see what/how the stuff is styled. For the menu, in "sub_menu.twig", there are assigned classes like "dropdown", and "index"(?). The index class doesn't appear in the css files, but I assume it means the home page. And there are styles for the "active" link that are not obvious in "sub_menu.twig"; hence digging in the foundation files. If I don't know the class names, I won't know how to change things in "app.css" as that doesn't have all the styles listed.

For example, in "app.css" there is an override for the menu background colour. But when I changed those, the colour did not change the whole "row" where the menu resides. Yes, it probably was defined in "top-bar", but I couldn't be sure. So, I checked in "foundation.min.css" (Mistake! Use "foundation.css") to find if in fact the colour was defined in "top-bar" or somewhere else. I suppose I could just add backgound-color: #; and see what happens, and in this case it would work. But can you see why one would need to go to "foundation.css" when the class isn't listed in "app.css" ?

Am I making sense or no?

Thanks for clarifying, Ningus. It really helps.

[ningus]

Ok, you are definitely making sense. It is now in your example, that you want to alter a style that is defined in the framework styles (foundation.css). Problem is, you should not edit foundation.css. Solution: copy all relevant styles (i.e. menu styles) from foundation.css to app.css and edit them there and make them overwrite foundation styles. I think this is usual practice when you have to deal with framework files. Advantage is, that it remains possible to upgrade the framework by just replacing the foundation files without your own styles getting in the way.

[Stark Raving]

Makes complete sense. That's what I've started doing.

Cheers