Squarespace Themes: Understand the differences
Have you heard the names ‘Brine’ or ‘Ishimoto’ doing the rounds in Squarespace circles? Rebecca Harpain discusses the differences between all of the Squarespace template families.
Squarespace Themes and Templates: Why it matters
Squarespace has a ton of fabulous premade website styles, designed to help anyone launch a gorgeous site right out of the box. While I make it my mission to help you style those websites even further, I first had to learn how Squarespace built so many different options. It turns out these use a theme and template system; every theme has a specific set of elements to it, that behave a specific way. Templates are the different versions of those themes with unique styles.
Why People Love Brine
In the communities and forums I participate in, people kept talking about Brine templates being the best, the most versatile. When I first got started, I didn't understand why these folks didn’t just make some code changes to get any template to do what they wanted. Then I had my light bulb moment.
CSS is Cascading Style Sheet
This means you can only change the style of a site, but not the functionality or the structure. Forcing any website, Squarespace or otherwise, to do something outside of its normal functions isn’t that easy, and doesn’t always look great, especially on responsive sites… but I will save that rant for another article. The long story made short, a majority of the Squarespace developers I trust use Brine templates and I am now one of them. This theme has a lot of flexibility and virtually all of the functionality I could want has already been coded, so I get to focus on making it pretty.
They all can be updated
All that being said, using custom CSS in Squarespace is a fabulous way to change or update any site to match the look of your brand. But, if a CSS code isn’t working it might be because it was written for a different theme.
But you just said….
Yup, I did say they can all be changed with CSS. But not every template uses the same name for the same thing. The page content is a great example of this. In Brine templates, the name for the main page content is Main. In Bedford templates, it’s called #siteContent and in Pacific templates, it’s referred to as #page. The good news is that a majority of other things, like text, buttons and even quote blocks, use the same name. In my Custom CSS tutorials I try to specify the theme for the code I am sharing, so make sure you know the theme you are using! Use the chart below to look up your template name and confirm which theme you are using:
Don’t know your template name? Here is how you find out!
| Theme Name | Template Name | IMHO |
|---|---|---|
| Adirondack | Adirondack | |
| Avenue | Avenue | |
| Aviator | Aubrey, Aviator, Encore (discontinued) | |
| Bedford | Anya, Bedford, Bryant, Hayden | Bedford is the first theme I started with, and still a strong favorite for easy to use layouts and styles |
| Brine | Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West | Brine is one of the most versital themes so I test all of my codes here! |
| Farro | Farro, Haute | |
| Five | Five | |
| Flatiron | Flatiron | |
| Forte | Forte | |
| Galapagos | Galapagos | |
| Ishimoto | Ishimoto | |
| Momentum | Momentum | |
| Montauk | Julia, Kent, Montauk, Om | |
| Native | Native | |
| Pacific | Bryler (discontinued), Charlotte, Fulton, Horizon, Naomi, Pacific | Pacific & York are great templates for single page designs |
| Skye | Foundry, Indigo, Ready, Skye, Tudor | |
| Supply | Supply | |
| Tremont | Camino, Carson, Henson, Tremont | |
| Wells | Wells | |
| Wexley | Wexley | |
| York | Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York | York & Pacific are great templates for single page designs |
Finding the right codes
Once you know your theme, you can add that theme name to your code searches to make sure you are finding resources that are written for you! I try to use at least one Bedford code as well as one Brine code in my tutorials, and a lot of other quality instructors out there do the same.
CSS is all about style.
A general rule of thumb for anyone working with CSS is if you can see it, you can style it. So no matter what theme you went with, aside from element name, you can apply just about any snippet of clever CSS to your site to make it look as amazing as you want it to.
