In previous theme projects I’ve tried to put some effort into customizing my editor-style.css to match the themes so the user get a WYSIWYG feeling when writing posts and pages.
Now in roots this seems to be a bit of a hack. The included css file is from the the getbootstrap.com customizer.
Wouldn’t it be nicer to have the grunt script compile an editor.less with the required bootstrap files and my own customizations? I’ll try to set this up for myself but just thought perhaps I’m not alone and this is something that would be beneficial to all roots users.
On the most recent project I’ve been working on I’m just using main.min.css for the editor style and so far it’s working pretty good. It’s not perfect, but at least generic styles show up to match your site better. Might try making it the default for Roots 7.0.0.
Have been using fontdeck and it works to do a @import of the fontdeck css in my editor.less file and I get my custom fonts in the editor.
I’ve created an editor.less file and imported the following bootstrap less files:
The Core variables and mixins
Reset
Core css
All from the bootstrap directory.
I added editor.less to the gruntfile so it is monitored and compiled into a editor-styles.css. I’ve added overrides for editor specific issues (margins, body width etc) in this file. There will be issues with the styling of images with captions if you use the main.min.css since the markup differs between front and back end.
I’ve created a shared-styles.less file that gets imported by both my app.less and my editor.less so that if i choose to override bootstrap styles that affects styles used both in front end and back end they are only defined in one place.
I’ll post about my experiences if anyone is interested.
