Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
bgColor#ABF5D1

Squarespace is a slick CMS, that is hosted as a Service (by the company).

  • It’s made with a design focus and can be used for portfolio building, brand strategies etc.

  • It’s a design-first philosophy (design has prio, functionality comes second)

  • Unlike WordPress, it cannot be extended with PHP

    • you can add custom CSS and JavaScript

  • Its API is very limited

My use-case for it is creating a beautiful design-first front page for my think tank space.

Table of Contents

Upload custom assets (use Chrome)

The upload of custom assets within

  • Target site XYZ → Website → Website Tools → Custom CSS

can not be done with Microsoft Edge. Chrome works fine.

Custom CSS with advanced typography

Squarespace CSS isn’t easy. You will likely have to invest time into custom CSS. That came as a surprise to me. For version 7.1 the CSS ID list is here.

...

To use a CSS selector:

  • Target site XYZ → Website → Website Tools → Custom CSS

Note: I have licensed this web font. Everyone can download any embedded web front via browser dev tools. This is a 20 Euro font. You can also just use Adobe Fonts directly because these are integrated into Squarespace. Don’t copy-paste the link or use unlicensed fonts.

gist.githubusercontent.com/norandom/fe83c643ed9b35e4f042a2b87960f617/raw/1786d76f9e16855deca24462bdc2988095b76dcd/squarespace_custom.css

To-do:

  •  integrate drop caps
  •  clean mobile fonts
  •  line spacing for meta elements in blog (question)
  •  iOS Safari consistency issues

Child pages (Children Display)
allChildrentrue
style
sortAndReverse
first0