Develop a template for the site on Squarespace 6

SquareSpace is a commercial CMS that combines a convenient WYSIWYG editor, a blog platform, an online store functionality and hosting. I hope the author of this post will hope to tell about all the advantages of this product, as he promised - well, I would like to tell you the minimum that will help you quickly navigate when developing a site on Squarespace for yourself. If it is interesting to you how to start development as soon as possible - I ask for cat.


When creating a website on SquareSpace, you can use more than a dozen built-in templates. All of them are very well developed, have a mobile version. Thanks to the settings and the visual editor (right on the page you can change the css-code) you can quickly achieve the desired result, and simple designs or simple landing pages will turn out quickly, in fact, just by clicking the mouse. But if you like to keep everything under control and understand what is going on "under the hood", and the design is complicated - you need to go to the Developer tab in your account settings (except if you immediately registered a paid one) and register as a developer.

Now you can start developing - your site is now always available, only at the address is a stub, offering to enter a captcha or login / password to enter. For ease of understanding when creating a site, you can use the “bare” template for the developer, or you can go for a little trick - choose a template that resembles the future design and functionality, and only then turn on the developer’s site mode in the settings, which can significantly reduce development time how-what is implemented).
')

Enable the developer site mode

After switching on, we will see information with data for connection, basic information about the template, used collections, Githistory and so on. On the same page, the main errors will be visible if something goes wrong during the development process.

Basic information after enabling developer mode

So, as you can see, we have two ways to connect and debug: Git and SFTP. It's more convenient for someone (or as an employer requires), but for simple projects I personally find it easier to use SFTP, although a definite plus of Git is an opportunity to navigate through well-commented commits, what went wrong and go back to an earlier version. So just set up an SFTP connection in your favorite IDE or editor and synchronize the local and remote versions (for IDEA users and products from JetBrains, everything is very simple - Tools-> Deployment -> Type: SFTP -> Host / Port / Login / Password -> select the site root. Also, do not forget to zap the root of the local project on the Mappings tab, if you want to enable Automatic Upload with Ctrl + S).

All sites developed on SquareSpace, by default contain: html5shiv.js , modernizr.js , and normalize.css , the things you need, take care of this we do not need. The Less-preprocessor also works out of the box on the server side — you can safely use the Less syntax, you can create css-styles in different files — the server will be given one combined css-file to the user. The same goes for Javascript - the YUI3 framework is used by default, but you can connect your favorite framework or scripts - they will also be minified to a single file at the output. The default template is Json-T .

The template structure looks like this:

Template structure

1.Main template.conf configuration file

I will start from the root of the project, since this is where the most important settings for displaying the site are located. The heart of the template is the configuration file template.conf . In this file, the template name and authorship are set according to your wishes, as well as indicate the layout ( Layouts ) of your site, the navigation (navigation) on the site and the styles used for display. It looks like this:

{ "name" : "Something", "author" : "michael", "layouts" : { "Default" : { "name" : "Default", "regions" : [ "header", "content", "footer" ] }, "Home" : { "name" : "Homepage", "regions" : [ "header", "contenthome", "events", "footer" ] }, "SidebarLeft" : { "name" : "WithLeftSidebar", "regions" : [ "header", "contentwithsidebar", "footer" ] }, "SidebarLeft2" : { "name" : "WithLeftSidebar2", "regions" : [ "header", "contentwithsidebar2", "footer" ] } }, "navigations" : [ { "title" : "Main Navigation", "name" : "mainNav" }, { "title" : "Secondary Navigation", "name" : "secondaryNav" } ], "stylesheets" : [ "base.less", "typography.less" ] } 

Content template.conf

As you can see, already at this stage it is desirable to assume how the pages of the site will look like, what the content will be and so on. This will allow you to immediately select and set the desired markup and regions ( Regions ) for the pages. In this particular case, the following layouts are defined:

• Default . The regions “header”, “content”, and “footer” will be connected to it. Will be used by default when creating any pages.
• Home . Connected are the "header", "contenthome", "events", "footer" regions. It was convenient for me to create this markup separately for the home page, as it contains separate blocks that are not repeated anywhere else and their design is very different from the rest of the site.
• SidebarLeft This includes the “header”, “contentwithsidebar” and “footer” regions.
• SidebarLeft2 Essentially the same as SidebarLeft, but the content of the sidebar itself is very different - so it was decided to render it as a separate markup.

In the future, when creating a page, you can select one or another markup already in visual mode.

Navigation is called for the convenience of displaying these sections directly in the admin panel of the site, and then you need to connect it by the name that you gave. It is advisable to set several sections if you have for example different navigation blocks, say, in the header of the site and basement or sidebar.

In the last paragraph of the template.conf file, you specify which styles from the styles folder to use. By default, this folder already contains reset.css (aka normalise.css ) and it is not necessary to specify it, it will connect and so.

2. Regions files

In the simplest case, the markup may consist of one region, let's call it site.region . Its contents would be approximately as follows:

 <!doctype html> <html> <head> {squarespace-headers} </head> <body class="{squarespace.page-classes}" id="{squarespace.page-id}"> <header id="header"> <h1><a href="/">{website.siteTitle}</a></h1> <squarespace:navigation navigationId="mainNav" template="navigation" /> </header> <div id="canvas"> <section id="page" role="main"> {squarespace.main-content} </section> <aside id="sidebar"> <squarespace:block-field id="sidebarBlocks" /> </aside> </div> </body> </html> 

Content site.region

Not much going into the SquareSpace tags and JSON-T syntax, and so it becomes clear that a minimal page layout is created with a header and sidebar. But I recommend functionally distinguishing certain areas of the site - this makes the project more followed, it is easier for you to make edits later, not to mention what a favor you do to a person who will have to work with it after / instead of you.

Thus, the header.region file could look like this:

 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <!--INCLUDE SQS SCRIPTS, META TAGS AND USER CONTENT FROM THE CODE INJECTION TAB--> {squarespace-headers} </head> <body id="{squarespace.page-id}" class="{squarespace.page-classes}"> <!--HEADER--> <header class="navbar navbar-default navbar-static-top navbar-inverse"> <div class="container fade-in"> <squarespace:navigation navigationId="mainNav" template="nav" /> </div> </header> 

Header.region file

Here the {squarespace-headers} construction includes meta tags for search engines and social networks, connects squarespace scripts and allows you to additionally insert code in visual mode. The <squarespace: navigation navigationId = "mainNav" template = "nav" /> tag connects the mainNav section using the nav.block file from the blocks directory as a template.

Other * .region files are created in the same way - create the necessary markup and connect the necessary Squarespace block. These blocks can be:

• files * .block . Like the example with header.region, you can connect, for example, a separate navigation section for the basement or sidebar (specifying the corresponding name)
• Squarespace tags . For example, specifying {squarespace.main-content} , we include the contents of the pages you create in the visual part of the site.
  
  Among the most useful tags I would highlight such:
  
  
  1. <squarespace: block-field id = "blockName" columns = "12" /> . Creates an empty block, specifying the number of columns = "12", we will stretch it to the full possible width of the parent element (yes, Squarespace has a 12-column grid-system like many popular frameworks, I’ll touch on this below). In this empty block in visual mode, you can later add any of the Squarespace widgets or your own html / js code.
  2. <squarespace: query collection = "blog" limit = "3"> </ squarespace: query> . Make a request to the specified collection (in this case blog ), it can be your gallery, blog, list of products and the like, and returns the number of objects specified in limit in JSON. Then simply parse them with the same JSON-T and display them on the main page, in the sidebar or wherever they like. At this time, query caching is not organized, it is recommended not to be zealous with this case.

3. Blocks

In fact, the blocks are the same as the regions. And everything said above is absolutely applicable to them, and if you wish, you can do without them. And yet I recommend using them - this is more obvious, more structured. Using separate * .block files for navigation templates is a nice thing. So let's take a look at hypothetical navigation.block and see what's what.



At once I will make a reservation that Bootstrap 3 was used here, therefore you see familiar / unfamiliar classes. Here JSON-T markup is thoroughly used, let us specify what is responsible for what.

 {.section website}<a class="navbar-brand" href="/">{.section logoImageUrl}<img src="{logoImageUrl}?format=original" alt="{siteTitle}"/>{.end}{.end}</a> 

With this design, we "opened" the global scope of our site, checked whether the logo was set (loaded in the visual settings) and actually displayed it.

 {.section items} <div class="collapse navbar-collapse navbar-ex1-collapse middle"> <ul class="nav navbar-nav navbar-right"> {.repeated section @} {.folder?} <li class="folder dropdown"> <a class="{.if folderActive}folder-active{.end}" role="button" data-toggle="dropdown" href="#">{collection.navigationTitle}<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> {.repeated section items} {.collection?} <li class="{collection.typeLabel}-collection" role="presentation"> <a href="{collection.fullUrl}" class="{.section active}active{.end}" role="menuitem" tabindex="-1">{collection.navigationTitle}</a> </li> {.end} {.section externalLink} <li class="external-link"> <a href="{url}"{.section newWindow} target="_blank"{.end}>{title}</a> </li> {.end} {.end} </ul> </li> 

Here we refer to the {.section items} construct to all our pages on the site, which you have placed in the visual settings in the navigation section. Next we turn on the “cycle” - {.repeated section @} in which each item will be polled (page, folder with pages, blog, collection, gallery, products, or something else you have created additionally). Actually, {.folder?} And {.collection?} And test what the current item is .
If this is a folder, then a link to it is created and another {.repeated section items} cycle is started , in which the content of this folder is now polled (and this can be just pages, collections, or materials with an external link) . It should be noted here that at the moment only one level of nesting is supported, so if you have many levels in the menu, then you need to be cunning.
An opportune moment - you can test whether this folder or link is active with {.if folderActive} folder-active {.end} and {.section active} active {.end} and assign the required class to them (and describe the necessary styles). Very convenient - no need to create your own bike with a comparison of the current address and addresses of links in the navigation.

 {.or} {.collection?} <li class="{collection.typeLabel}-collection"> <a href="{collection.fullUrl}" class="{.section active}folder-active{.end}">{collection.navigationTitle}</a> </li> {.end} {.section externalLink} <li class="external-link"> <a href="{url}"{.section newWindow} target="_blank"{.end}>{title}</a> </li> {.end} {.end} {.end} </ul> </div> {.end} 

This last piece of code does the same thing that we cranked inside the folder's poll cycle — it checks the remaining elements, creates links to them, setting the necessary classes and attributes (for external links). It is important to ensure that all sections are closed ( {.end} ), otherwise it will not work correctly.

4. Collections

Collections in Squarespace - this is the essence of the same folder, only the contents of its one type. The most striking example is the blog: all posts are essentially the same, only their contents are different. Depending on the template, different collections are available, but they all have the same device, only the markup inside is different.
So, ideally, the collection consists of three files (we are considering a blog):

• blog.conf . Contains the basic collection settings
• blog.list . Responsible for displaying a list of all items in the collection. In the case of a blog, this is for example a list of short excerpt articles with links to the full version, pagination, if required.
• blog.item . Responsible for displaying a specific item in the collection. In the case of a blog, the full text of the article, links to the previous / next article, block of comments, social buttons, and so on.

Minimally for the collection to work, you need the files * .conf and * .item .

Then I will give the contents of these files without explanation, I think if you read it here, you caught the meaning of building templates (the comments and section names speak for themselves).

5. Styles ( Styles catalog)

First of all, I note that Squarespace has its own grid of 12 columns. The markup is similar to Bootstrap, so row = sqs-row , col-md-4 = sqs-col-4 . So it is quite possible to use this fact in the markup, but I did not see in the documentation the descriptions of these built-in styles, so you need to “reach” yourself. And even if you impose your styles or use some kind of framework - Squarespace "likes" to wrap your markup with its blocks - in general, this doesn’t interfere at all, but if something goes wrong as intended, just look in the inspector - and not added something in the markup. Otherwise, everything is usually, use valid LESS or CSS syntax.

The trick is that in styles you can use tweaks (tweaks), which make it possible to change the parameters you specify within the specified limits in the visual style editor built into Squarespace. It is very convenient - the client himself can then tweak something, adjust it, and most often it is often easier to reconfigure something that way, rather than clinging via SFTP.
Tweaks are based on LESS variables and JSON objects, in which the necessary parameters and boundaries are set. We look:

 // tweak: { "type" : "value", "title" : "Logo Size", "min" : 50, "max" : 150 } @logoHeight: 75px; .logo { max-height: @logoHeight; } 

Tweak for resizing a logo

Or let's change the color (a convenient Color picker will pop up):

 // tweak: { "type" : "color", "title" : "Text Color" } @textColor: #444444; body { color: @textColor; } 

Tweak to change text color

Tweaks can be grouped by properties and categories - as a result, in the visual editor you will get something like this:

Style editor

6. Assets

The folder of assets serves for storage of resources, and you are free to keep here the necessary graphics, plugins, scripts and, in general, what your heart desires.

7. Scripts

Here we store scripts. By default, a site.js file has been created here in which YUI3 is initialized. All the scripts that stores this directory, you can (and should) be loaded through the loader - in this case, your site will give one minifitsirovanny script. It is done this way (for example, we insert it into the basement of the site):

 <squarespace:script src="plugin.js" combo="true" /> <squarespace:script src="site.js" combo="true" /> 

Download scripts through the bootloader

8. Pages

This directory stores static pages that are not changed in the visual editor - it is convenient to use for readme.page, where you can specify the main parameters, blocks and settings of the template, contacts, and so on.

Conclusion

Squrespace is a very convenient platform, it may well be considered as an option if your customer is willing to pay. At the same time you get a handy tool that provides a reduction in development time and convenient service.

I hope the above will help to quickly master the platform and begin development.