Member Access

About The Author

Nollind Whachell is a designer living in Vancouver, BC, Canada who uses design culture and systems thinking to change people's beliefs of what is possible and behaviors of how things can be done.

This is an example author's bio.


Evolution Beta

Cliff jumping time!

The Evolution beta period will hopefully be short but the primary focus is to fix as many issues within it as possible, so as to stabilize it for further development. While you can use it on your live site if you want, it isn't recommended as dramatic changes to the Evolution script code may be required. Therefore, if changes do occur to the underlying code, you may have to change some of the CSS class activators on your site.

For feedback and support, please register an account and login, so that you can post within the Support forum area. For general comments (i.e. horay, it works!), feel free to make those here.

My hope at the end of the beta is that I'll have worked out a lot of the kinks within Evolution, created a variety of tutorials covering most subjects, and will have also created a home page that covers the primary features of Evolution in a highly visual way.

Update: I've decided I'm going to revert the promoted hero content back to the old way I did it before, as I find it more stable. This means no longer being able to use SQ slideshows as promoted content. That said though, I plan on introducing my own approach for slideshows, as I find SQ's current V5 slideshow approach lacking (i.e. options and having to create a gallery to insert a slideshow). I'm envisioning a solution that basically would be as simple as inserting a bunch of photos one after the other and then inserting a simple CSS activator to turn them all into a slideshow.

Update: All development on hold until further notice, as I need time to work on a more important project.


The Splash

Exploring the magazine splash feature in Evolution

One of the core focuses of the Evolution framework was to allow for the creation of professional magazines upon the Squarespace platform. During my initial research in this area, one of the most striking features that I liked about print magazines was their use of splash imagery at the start of an article with the accompanying title, deck, and author text overlaying the image. After experimenting with this in different ways, I believe I've finally found a fairly easy and customizable solution for the Web.

To begin with, a splash-enabled article starts out as nothing more than an article with a promoted image. Then with the injection of a ".splash" CSS class activator, the promoted image evolves into a promoted splash image, with the pre-title tag line, title, deck, and post-title tag line overlaying the promoted image.

In addition, you also have the option to horizontally and vertically position the overlaying text via two other CSS class activators. The ".halign" CSS class activator allows you to horizontally align the overlaying text to the left, center, or right. The ".valign" CSS class activator vertically aligns the overlaying text to the top, center, or bottom. Note that if you don't apply a ".valign" or ".halign" CSS class activator then they both default to being centered.

And finally, a ".text-invert" CSS class activator can be added if you want to invert your text color to white for certain images that have a darker background, as the promoted splash image above shows in this article.

Update: Slideshows can now be utilized as a splash background.

Photo by KillTheBird


Promoted Content

Promoting your heroic content to the top

Over the years, I've admired a variety of websites (i.e. that have had promoted content, like a photo or video, that sits above the journal article title, rather than below it within the article body. Yes, Squarespace Version 6 finally has this feature but I thought it would be nice to bring it along to Version 5 as well.

To make content promoted in a journal article, a ".promoted" CSS class activator is simply applied to the appropriate content container which moves it to the very start of the journal article. In addition, if desired, an additional ".hero" CSS class activator can also be applied which expands the promoted content to full site width when it is the topmost article within a journal list view or when the article is viewed by itself singularly.

To see an example of this heroic shift and resizing, just click the "Promoted Content" article title above to view this article by itself. When you do so, you'll see the promoted image shift and resize itself appropriately to fill the site width. This is achieved by CSS styles that resize certain images and videos to the full width of their container. So if the container expands, so does the image or video.

Photo © Marvel


Pushing, Pulling, & Moving Content

Break out of the box and set your content free

For those who've been around since Squarespace Version 4, you know the frustrations that were had in trying to move a sidebar section to create a third column on your Squarespace website. With Evolution, this is no longer the case, as the framework provides a variety of CSS activator classes to actually move content to and from a variety of different areas (rather than just sliding it positionally via CSS).

Evolution does this in three ways. It allows the pushing, pulling, and moving of content. Pushing is when you activate the shift at the source location, thus you're pushing it away. Pulling is when you activate the shift at the destination, thus you're pulling it to you. And finally, moving is when you activate it from a location completely different from the source or destination area.

A simple live example of a move action on this website is the navigational bar at the bottom near the site footer. Note though that while a single ".move-sidebar2-postbody" CSS class activator (inserted in the site footer) was utilized to move the sidebar element, the template itself needs to be stylized to display the content appropriately. In this template I'm using, I've arranged the sidebar sections side by side with each section having a width as defined by the Sidebar 2 Width in the Style > Banner & Navigation > Change Widths area.

Again, as stated earlier, Evolution is a unified solution that requires the Javascript, XHMTL code, and Cascading Styles Sheets found with a template to all work together in harmony. That said though, if you load the Evolution javascript file by itself on your existing site, it shouldn't mess anything up by default, as it tries to retain backwards compatibility until you activate a command known to Evolution.


LayoutEngine Emulation

Creating complex professional layouts

What a lot of people aren't aware of is that below the surface of the V6 LayoutEngine is a flexible 12 column grid system. Evolution, in comparison, utilizes a similar flexible 12 column grid system, inspired by Zurb's Foundation, that also allows for the nesting of grids within each other to create highly complex grid layouts.

As grid layouts are a necessity today for professional websites, the inclusion of grids within Evolution was essential. While I had created a variant solution in the past called Gridder, I found it not very flexible, as it put a huge burden on the end user to remember the pixels widths for each varying grid block width.

Layout grid inspiration via Monocle Alpino

With grids in Evolution, this is no longer the case as they use an easy to remember twelve column grid naming system that works the same at any nested level. You basically inject your content first via the WYSIWYG editor and then insert the grid containers via HTML code afterwards. A row is simply a .row class and columns are defined using a combination of two column CSS class designators (i.e. .one .column, .two .columns, etc).

Below is an example of a three grid blocks that are each four columns wide (thus twelve columns in total), something that would typically be used for displaying product or service information on a business website.




And now the exact same layout but with the inner grid block being nested with more grid blocks. Note that the inner nested grids blocks aren't two columns each (i.e. half of the outer four column grid blocks) but rather six columns each, as each nested layer creates a whole new row of twelve columns each (i.e. six + six = twelve).








How Does Evolution Work?

Extending the Squarespace platform

I'm not sure why but I've occassionally encountered people over the years who had initially assumed that any developer could change the underlying functional code of Squarespace to get it to work the way they wanted. This simply is impossible to do with Squarespace, even with Version 6. The Squarespace team programs the platform's functionality and external developers have to work within that functionality. That said though, there are ways to work within the system and still change its functionality, at least on the surface.

What this means is that I can't change any functionality inside the Squarespace WYSIWYG Editor, nor the Style Editor, or even the backend administration area. What I can change though is how these things appear to work on the surface. For example, if I wanted with Evolution, I could change every bolded word so it was capitalized and in the color purple. So even though the system outputs a regular bolded word (i.e. <strong>bolded</strong>), Evolution can dynamically change how it appears.

Now while changing simple things like how bolded words appear is easy, adding additional functionality is a whole lot more complex. In effect, how can you add functionality without being able to change the interface or functionality of the existing system? You simply have to work on another level. And with Evolution, these three alternate levels are HTML code, CSS classes, and Contextual Behaviors.

Evolution is a framework extension that is built on top of the Squarespace platform. Therefore, instead of actually changing the features and functionality of the actual Squarespace platform, it's changing the behavior of how it works by default. The way this is achieved is through a combination of jQuery, Javascript, and CSS classes called "activators" that signal the Evolution framework scripts to work.

With that in mind, Contextual Behaviors allow Evolution to translate the context of elements used in the WYSIWYG Editor into a behavioral activator.

Also realize though that I've taken into consideration that utilizing CSS class activators and HTML code isn't an optimal situation for everyone, particulary those who have absolutely zero coding skills. With that in mind, Contextual Behaviors allow Evolution to translate the context of elements used in the WYSIWYG Editor into a behavioral activator.

For example, if I'm continually writing journal articles with an opening deck element then I could tell Evolution to treat any first paragraphs that are italicized and increased in size to 140% to be activated as an opening deck magazine element and thus moved below the article's H2 title. Same goes for the opening lead paragraph which can get activated as a lead if it is increased in size by 120%.

While this can be an extremely powerful feature if utilized properly, realize though that it does have it limits. Currently, I can't see any way of utilizing contextual behaviors to activate grid layouts. Thus people will still have to use HTML code to get LayoutEngine emulation on Squarespace Version 5. That said though, if you think other platforms make this any easier (other than the V6 LayoutEngine), you might want to take a look at how grid layout shortcodes work within Wordpress.


Why Build Evolution Now?

The rise of natural selection

The obvious question for some people is “Why build Evolution for Squarespace Version 5 now that Version 6 of Squarespace has been released?” It's because Version 6 of Squarespace completely changes the functionality, workflow, and relationship with the platform and I personally feel that the previous approach was much more flexible and easier to use.

Don't get me wrong though. The return of access to the back-end template code in Version 6, that was lost in Version 4 of Squarespace, is great to see and the upgrading of technologies is even better (i.e. LESS, HTML5, CSS3, JSON, etc). And without a doubt, the LayoutEngine is the single greatest achievement of Version 6 and the CMS design industry as a whole, as it finally gives content layout power to the non-coding user.

That if anything is probably the single greatest irony of the release though. You have the introduction of the LayoutEngine and at the same time the loss of so many other empowering features that were comparable to it in Version 5. The ability to easily drag and drop post tag elements within the Post Display Configuration area of the Journal configuration area is a perfect example of this, as this now requires the hand coding of a template to change in Version 6.

In the interim though, as someone told me the other day, Version 5 still kicks ass in comparison.

Some developers believe that once the Developer Platform is fully understood and realized then this will all change and everything will be better. I disagree because the functionality that's needed is not embedded within the templates but how the templates interact with the user on the front end. There needs to be more user friendly interfaces to easily manipulate the site layout elements, just as the LayoutEngine has achieved this ease of use on the internal content level.

All said and done, this is why Evolution is being built upon Squarespace Version 5. It's because I'd rather give up all of the Version 6 back-end technological improvements and front-end LayoutEngine in exchange for maintaining the flexibility, control, and workflow of Version 5. Again though, if Squarespace makes the right key functional improvements to their front-end user interfaces in Version 6 then I could easily see myself jumping to it. In the interim though, as someone told me the other day, Version 5 still kicks ass in comparison.


What is Evolution?

A unified solution for many different needs

Evolution is the culmination of my personal and professional experiences using the Squarespace web publishing platform. It strives to add features to it that I always wanted to see but, more often than not, never got implemented, or at least not implemented in the way I wanted them to be. Most important of all though, Evolution strives to give you both more flexibility and control, rather than sacrificing one for the other.

The idea and inception for Evolution actually started out years ago when I was much more involved in the Squarespace community forums. At that time, I kept seeing different people coming forward with the same problems and yet nothing ever got fully resolved or made easier. While I tried to help people out solving specific problems, I found that it was like sticking a finger in a dam that kept sprouting one leak after another.

I realized that solving singular problems wasn't the answer. So instead, I started working on some different solutions that tried to solve many different problems all at once. The first one I built, which never got publicly released, was Relativity. The second and third ones I built, which I eventually released on the forums, were Teleporter and Gridder.

With Evolution, all three of these different solutions have now been brought together into a unified solution with each aspect being renamed for more clarity. Gridder is now simply called Grids. Relativity is now called Styles. And Teleporter is now called Placement. Even better, much of their functionality has been reworked and improved as well.


Create complex professional
layouts with 12 column,
nestable grids.


Explore more design possibilities
with a larger palette of
style elements.


Set your content free by moving
it to a variety of new areas.

Last but not least, realize that even though I plan to release Evolution freely to the public, it is first and foremost being built for myself, for my own needs. Therefore, while I will gladly listen to ideas from individuals to add additional features, I must balance them with my own needs and the needs of the greater community as a whole. Again Evolution is about solving the many patterns of problems that seem to be occurring, rather than a specific individual's problem that may unique to them and them alone.

That said though, if you still need help on your unique problems (which I actually enjoy tackling), you can hire me out if you wish. More details can be found at my personal website.