Graphical editors for Bootstrap themes that only modify CSS/LESS?
July 29, 2016 5:14 PM Subscribe
I'm looking for recommendations for a graphical or WYSIWYG-ish editor that can be used to create custom Bootstrap themes by only modifying CSS/LESS code.
Background:
We have a website that was initially sketched out using one of the default bootstrap themes. All of the high level design elements (header, menu, two columns of content, footer) are solid. Now we need to modify the theme to more closely match the look of a desktop application that we already have deployed (Windows, WPF). These changes will almost exclusively involve things controlled by CSS: font, color, border, corner radius, gradients, padding, etc.
Use Case:
The bulk of this work we be done by our Graphic Artist (GA) and I will be acting in the supporting role of Code Monkey (CM). This is GA and CM's first Bootstrap site and we are hoping to shortcut the old school process where mock ups are generated by GA via Photoshop and the resulting images are sliced up and coded by CM. Ideally we'd like to find a tool that can take a web page as input, render it, provide a toolbar like Photoshop or Gimp that adjusts the various CSS-controlled options in real time, and output the modified web page code. My googling turned up a ton of somewhat-related options, and the closest match I've been able to find is Bootstrap Live Customizer, which seems to have all of the features we're looking for except for the GA-friendly user interface.
I don't have time to sift through and evaluate all of the tools out there so I'm hoping the hive mind can help me narrow things down. Can you offer some recommendations that fit this use case? Open source and/or in-browser tools are preferred but not required, if it works and has a great user interface please let me know!
Background:
We have a website that was initially sketched out using one of the default bootstrap themes. All of the high level design elements (header, menu, two columns of content, footer) are solid. Now we need to modify the theme to more closely match the look of a desktop application that we already have deployed (Windows, WPF). These changes will almost exclusively involve things controlled by CSS: font, color, border, corner radius, gradients, padding, etc.
Use Case:
The bulk of this work we be done by our Graphic Artist (GA) and I will be acting in the supporting role of Code Monkey (CM). This is GA and CM's first Bootstrap site and we are hoping to shortcut the old school process where mock ups are generated by GA via Photoshop and the resulting images are sliced up and coded by CM. Ideally we'd like to find a tool that can take a web page as input, render it, provide a toolbar like Photoshop or Gimp that adjusts the various CSS-controlled options in real time, and output the modified web page code. My googling turned up a ton of somewhat-related options, and the closest match I've been able to find is Bootstrap Live Customizer, which seems to have all of the features we're looking for except for the GA-friendly user interface.
I don't have time to sift through and evaluate all of the tools out there so I'm hoping the hive mind can help me narrow things down. Can you offer some recommendations that fit this use case? Open source and/or in-browser tools are preferred but not required, if it works and has a great user interface please let me know!
Have you considered using JUST a web browser? Right click an element on the page, choose 'inspect' or 'inspect element', and begin modifying the applicable styles: the element will change in real-time (I guess that's WYSIWYG). You can even try it here on this page. The only thing missing is the ability to export the altered css code easily - you may have to manually do it.
posted by destructive cactus at 3:04 AM on July 30, 2016
posted by destructive cactus at 3:04 AM on July 30, 2016
Chrome lets you actually modify local files in the inspector so no export is necessary.
posted by michaelh at 6:11 AM on July 30, 2016 [1 favorite]
posted by michaelh at 6:11 AM on July 30, 2016 [1 favorite]
This might be just to the left of what you're looking for, but:
Designing in Sketch rather than Photoshop or Illustrator makes it easier to export “slices” (among other web design conveniences not baked in to the Adobe apps) ... and there's a plugin for Sketch called Zeplin, which automatically provides specs for developers with element sizes, colors, margins and CSS suggestions.
Here's an overview from a UX director: Sketch and Zeplin: Helping Designers and Developers Collaborate
...So your design changes would still need to be made in Sketch, but the “slices” and specs and CSS suggestions would be updated instantly when re-exported thru Zeplin.
posted by D.Billy at 7:04 AM on July 30, 2016 [1 favorite]
Designing in Sketch rather than Photoshop or Illustrator makes it easier to export “slices” (among other web design conveniences not baked in to the Adobe apps) ... and there's a plugin for Sketch called Zeplin, which automatically provides specs for developers with element sizes, colors, margins and CSS suggestions.
Here's an overview from a UX director: Sketch and Zeplin: Helping Designers and Developers Collaborate
...So your design changes would still need to be made in Sketch, but the “slices” and specs and CSS suggestions would be updated instantly when re-exported thru Zeplin.
posted by D.Billy at 7:04 AM on July 30, 2016 [1 favorite]
For this I do as suggested above, make dynamic changes using Google Inspector. Once I have my new values, I go to the css file and hard code them.
posted by humboldt32 at 8:35 AM on July 30, 2016
posted by humboldt32 at 8:35 AM on July 30, 2016
I don't think he's referring to hot loading or messing with Chrome. He literally wants no coding and the designer to export the web page from a Photoshop comp. From the way I read it they want to literally get rid of the coder from the equation.
posted by geoff. at 2:50 PM on July 30, 2016
posted by geoff. at 2:50 PM on July 30, 2016
This thread is closed to new comments.
posted by geoff. at 2:52 AM on July 30, 2016