在根启动器主题中的何处以及如何添加/编辑CSS

Question

So i downloaded roots starter theme, installed node and run npm install etc. I have a working theme now. As i am modifying the PHP code my styles has to be synced with it. I do not understand where should i write my additional css and where should i edit existing css.

For example i created a footer menu and it markedup like

  <ul id="menu-footer" class="nav navbar-nav">
    <li class="menu-privacy-policy"><a href="#">Privacy Policy</a></li>
    <li class="menu-terms-conditions"><a href="#">Terms &amp; Conditions</a></li>
    <li class="menu-our-pledge"><a href="#">Our Pledge</a></li>
  </ul>

I have to add additional style to #menu-footer and edit bootstrap style of .nav navbar-nav It is my first time experience of looking at less, grunt , npm etc and i am in a feeling that i should not edit the assets/main.css files directly.

I want any reference link or advice what is the standard way of working with these type of files

Thanks

Answer 1

http://roots.io/roots-101/#theme-assets

Where you put your custom styles is going to vary on what your styling. For example, Roots comes with a .less file specifically for the homepage and another specifically for styling the header or footer. This allows you to keep your styles separated and easier to maintain.