I am getting more and more conversant with the Jade templating engine and Wintersmith. Which I hope, is, what was one of the intentions, of moving from Wordpress to Wintersmith. Well, trying my hands on to customise the theme, I found its extemely easy to just add another CSS to the layout template ie; layout.jade and start putting in the styles there. It can not be simpler than this. The base style is taken from the style definition at main.css. If you look at the layout.jade, it will look something as this.
link(rel='stylesheet', href='/css/main.css')If you are following this blog, I have mentioned previously how to configure Wintersmith so as to make it working from any domain or subdomain. So the layout.jade in my case, looks as below.
link(rel='stylesheet', href=locals.url+'/css/main.css')Whatever the condition may be, whether you are using default settings or my settings, the point is, just add another CSS file(theme.css) below the default CSS.
So the default setting will be as this.
link(rel='stylesheet', href='/css/main.css')
link(rel='stylesheet', href='/css/theme.css')In my case, I am using a theme CSS file as saumya.css and with my configuration change, it looks as this.
link(rel='stylesheet', href=locals.url+'/css/main.css')
link(rel='stylesheet', href=locals.url+'/css/saumya.css')Now do the customisation in the theme.css.
Hope you understand the best practice of overriding styles than manipulating directly the original CSS file.
Happy theming.