Best Developer Workflow? How do you edit CSS & Preview....there must be a better way - please help

Permalink 1 user found helpful
Okay - I am self taught web designer and dev. I now work with C5 for 90% of sites. I have custom themes and generally find myself setting up the site structure locally with C5 and then tweaking my theme CSS.

I work with Coda2 but its lame. Lets say I want to change some colouring. I.....

>> preview in Chrome (needed because Coda's Preview system always try to look at the source file e.g. main.css - not a compiled CMS output such as index.html - unless I am missing something)
>> test the changes I am making in Chrome Dev tools - but I cannot save these changes to my stylesheet (I try saving with Chrome Dev Tools in the elements window, the save asetrisk goes, but the theme stylesheet isn't updated)
>> I then have to go back to Coda, implement my tested updates to my CSS and then return to Chrome to check I did it all right and tweak.

I am convinced my workflow is lame and there must be a better way but I don't know how.

I have looked at the Google Chrome Addons - the most promosing of which is -

That looks like the dream but sadly it will not save my stylesheets at all.

I have disabled all caching in C5 so at least the theme based CSS sheets aren't cached, but still no joy.

Any suggestions of how to make my life (mainly CSS editing) easier so I can preview and commit changes easily would be hugely appreciated.


View Replies:
mikeyt55 replied on at Permalink Reply
Have you tried running a local server to create the themes?
this way you just install concrete onto your local server and then just save your theme in themes folder as usual.

Then when you make changes to your css or page-types they will save and you wont need to upload every time.

This might not be what you are trying to do, apologizes if it is not.
mnakalay replied on at Permalink Reply
Or you could get yourself the sublime text editor with ftp plugins and auto refresh. That way, your code is uploaded automatically when you save and the browser is refreshed.

I think Notepad++ also does it and Bracket seems very promising in that field too. Both free.
burbleweb replied on at Permalink Reply
Thanks for the reply

Yeah I run MAMP as my localhost setup and have files locally for quicker development, when I am not editing to a remote site.

I have downloaded Sublime and then an addon called Browser Refresh but the problem is still similar - albeit a little quicker.

I would like to be able to save my CSS edits in Google Chrome Developer Tools and commit them to my theme main.css / typography.css or suchlike. So I can run the C5 install in my browser (cos Coda wont do this) and edit the CSS in Dev tools and then when I have got it correct, commit those changes to my theme directly. It seems it is built to do this but cannot reference the original file.

Tincr seems to be aimed at doing this and I have tried it for static HTML / CSS sites and it works well but it seems the file structure of C5 isn't yet catered for - I'm going to ask them now.

Any one else solved this?
mesuva replied on at Permalink Reply
Perhaps check out Espresso
(It's my main coding tool.)

It's got live CSS editing features, where you open up a URL and then you can directly edit a stylesheet and see it change live. You can even do this to any URL, where it extracts the CSS and allows you to tinker. It's also got quick a nice inspector and since it used webkit to do the previewing it also has all of Safari/webkit's inspector tools.

I used to use Coda (and still think highly of it), but moved to Espresso because of some of these features. Espresso just works with my workflow a bit better than coda's. Sublime is great too, but I've personally not used it for serious work (yet).

My _actual_ workflow involves MAMP, Sass driven CSS, Espresso, CodeKit and either Safari or Chrome, where Sass edits in Espresso auto-compile to CSS and auto refresh the browsers's style. This is for local development and for pushing updates to a live site where I've got a very close mirror, but for server only updates (i.e. a site I didn't develop), I'll still fall back to Espresso's live css editing.

I second the suggestion to look at Brackets, it's a project to keep your eyes on I reckon. (It's just lacking right some things I personally need like solid project support and Sass support).
mnakalay replied on at Permalink Reply
I am very jealous of all the great apps that are Mac only.
burbleweb replied on at Permalink Reply
Thanks mesuva - that's really interesting and helpful.

I have looked at Espresso and will check it out properly ASAP (got to update my OSX first!) - did you check that tincr tool as it looks pretty nifty?

So the one giant leap I need to make is to learn Sass or Less and get that setup working for me. I had been thinking or going with Less as Bootstrap uses it? That having been said it seems every 1page website is built on bootstrap and sites are weirdly looking more samey than ever. Do you recommend Sass over Less?

Also should I look at a framework built on SASS to build my themes? Is there one you recommend (e.g. Gumby, Bourbon or others )?? Do I need it and what extra do they add??? They look kind of handy.
burbleweb replied on at Permalink Reply
ps - do you have a tool that push's your updated MYSQL from a localhost C5 install to a remote one? I end up having to manually update the database with and import so invariably I get a site up remotely, tweak it online for the client (cos I invariably cocked something up) and then I end up with some amends on my remote CMS not on my local and getting a bit confused!

Syncing the C5 database would also be a game changer.
mesuva replied on at Permalink Reply 1 Attachment
Tincr does look quite handy, one to keep in mind. I've also used livereload.js (not the app, the javascript), but Codekit handles this reloading for me now.

If you are choosing a preprocessor I'd recommend Sass over Less, it's really just got more power and in my opinion more useful/sophisticated tools. Sass has Compass (which is essential to understand if you learn Sass) and some really great grid and framework libraries available. Once you use nesting (especially for breakpoints), variables, mixins and things like 'extends', you wonder how you ever wrote plain CSS.

Longer term, I'm finding I'm able to organise my css into 'partials' and re-use them across projects. I've got partials for things like the form block, navigation and a fairly big set for components of eCommerce. These partials help me to avoid having to re-investigate the markup of elements I'm styling every time I start a new project. I've also got partials that complement jQuery plugins like flex slider that I can drop in to a project instead of having separate stylesheets.

With Bootstrap, although it's a wonderful css framework and I use it myself on certain projects, I actually feel that it's really been misunderstood. Bootstrap is amazing for creating prototypes or for styling web systems/administrations, but for styling normal websites it's perhaps not really what it was _originally_ intended for. When you use Bootstrap, you include all the styles it includes whether you need them or not, all which browsers have to read and process. It's great for systems where people are building components for it and you want to ensure that all elements will be styled consistently (i.e. it's great that concrete5 uses it for the dashboard) but I personally think it's too heavy to use as a starting point for a normal website design.

Mnakalay has mentioned using semantic grids instead of putting classes throughout your html and that's my preference too. My preference for a grid system is Susy -, (I think it's pretty similar in nature to Bourbon Neat).

My 'start point' for a concrete5 theme is set up to have a file for typographical styles, one for base styles (things like a very simple grid, header, footer), susy and some other third party libraries sitting ready to be used if needed, with it all configured to use compass functions if necessary (I've attached a screenshot of my 'start point'). I prefer to keep it simple and add in stuff as I need it rather than having feature rich framework like bootstrap that I have to wade through, override and tear down.

Here's how I manage typography in concrete5 using Sass:

I particularly like Susy as I can create any type of grid system I want, widths, columns breakpoints, etc. But the way that it works I also find that it's great to help with the mobile responsive consideration of the order that content is displayed when reflowed on a mobile. Sometimes you want to switch the order of two areas of content for a mobiles (so you don't have a sidebar displaying before the main content). With some grid systems you can't really do this nicely, but with Susy you can simply swap around your HTML divs/areas but the columns remain in the same order on your normal desktop view. I'd be battling with this problem for a while and when I learnt Susy handled this I was blown away.

Sass also has encouraged me to improve my normal CSS understanding as well, especially when it comes to specificity and how to create CSS that is modular. I NEVER use IDs any more in my css for example and I look to use the nesting of SCSS in ways to ensure I am targeting elements appropriately.

I recommend reading - there's a big difference between knowing CSS, versus knowing CSS best practices.

I'm rambling a lot about Sass and CSS here, but these are aspects I've found I've been able to become more productive in, on top of having apps that streamline dev.

In terms of syncing MySQL databases, I haven't got a process/tool that I use here, I tend to only push sites up to a live/staging environment when they are fairly feature complete!
justrj replied on at Permalink Reply
I'm just now seeing this, but wanted to weight in. I've been using to manage my client git remotes and I find that works really well for pushing changes to my remote environment from my local and keeping them in sync. Basically you put something like "d:[all, development, staging, production or server]" into your commit message and it will push those changes to your remote via ssh, or even ftp/sftp.

I've seen quite a few posts on whether or not to compile you sass locally and they're good reads to think about, like this one:

I used to use espresso, but it crashed a lot there for a while while they were working on layercake, or slicy; whatever they're calling that app. I switched to Sublime Text 3, but I tricked it out like espresso and added a few things espresso doesn't have and am happy with that part of my workflow now.
mnakalay replied on at Permalink Reply
I use bourbon a lot because it's easy to use and it also has a semantic grid plugin called neat that I like a lot. I tend to try to use semantic grids rather than col4 and the like.

You can also look for a framework called rock-hammer that includes a lot of elements from bootstrap as well as other stuff. It's pretty good and allows for a lot of customization. It's mobile first and uses bourbon as well.
burbleweb replied on at Permalink Reply
Thankyou all for this. I did change the way I worked and I have now learned / am still learning SASS.

I bought Espresso and Codekit to do the compiling and the nice bonus is it auto refreshes my browser so an amends are live. Whilst editing basic HTML sites tincr, is genius as you test your code and change it all at once. SASS is a weird one because in many ways it slows one down. but now I can get my specific selectors working without having to think anywhere near as much and it really is the future.

Localhost environments are clearly the way forward, my only confusion gets to posting a site up for testing and then having to track database amends locally.

I would say (and this really would be an ace addon) - if there was some app to sync a local database with a remote one and to dump from local to remote or vice versa, then the completion of a website snagging would be amazing.

going to lodge a request for this and see. For those who don't know SASS (or like me have a clue what it even was) take 2 days to learn it and you wont look back.