Using the Squarespace 7 Custom CSS Panel while in "DEV MODE"

This is a good thing to keep in mind, either for Developers handing-off client sites (for them to have CSS access) — or if you're a Designer who has hired a Developer to work on some advanced code in the Squarespace Developer environment, and you still want access to all or part of the template's CSS...

Fact: in "Developer Mode", you can still access the Custom CSS panel in Squarespace. 

This is handy to bring some of the styles-forward into the consumer-side of Squarespace. This can allow client access to a selection of styles. 

Additionally, this means that in "Developer Mode", any other developer can inspect the code in a browser and add his/her override classes to the CSS and add those overrides to the Custom CSS panel. 

Just know that the Squarespace Custom CSS panel code will load LAST, meaning that the overrides applied to the panel will "win" in the browser. (That's a cool bit of engineering, isn't it!?) 


This rather kludgy, unedited training video was recorded by Squareflair at the time of "development hand-off". While representative of the design and development available on the Squarespace platform, each project is unique and completely custom for each application.

Third party brands and images are copyright to their respective copyright holders. Copyright 2011-2014 Creative Component, LLC. | www.squareflair.com

Setting Up Squarespace 7 (Squarespace 6) Developer Platform with Espresso2 and LiveReload

Start styling templates locally by setting-up the Squarespace Developer platform.

In this video, I walk through setting-up the Squarespace Developer environment. This information applies to both Squarespace 6 and Squarespace 7. (Squarespace 7 is the same core CMS as Squarespace 6; the difference being that Squarespace 7 has a greatly-improved user interface. But all of the workflows are pretty-much identical between the two versions)

If you're familiar with Squarespace's architecture and HACKING the stock commercial templates with "CSS overrides", this video should help you go further in your front-end development by showing how you can do the same thing locally using MacRabbit's Espresso 2 to apply style overrides. 

What I cover here:

1. start with an existing template
2. convert the template to the Dev platform (turn-on Squarespace Developer mode) 
3. set-up SFTP on the Espresso2 app (very pleased with the app; get it here http://www.macrabbit.com/espresso/ )
4. making the connection to the site, basic template configuration, etc.


This rather kludgy, unedited training video was recorded by Squareflair at the time of "development hand-off". While representative of the design and development available on the Squarespace platform, each project is unique and completely custom for each application.

Third party brands and images are copyright to their respective copyright holders. Copyright 2011-2014 Creative Component, LLC. / squareflair.com