Filtering by Category: Squarespace

York


Happy to announce that a template, a long time in the making, is finally available to use in the Squarespace store. Introducing York:

http://york-demo.squarespace.com/

I'm announcing this here because I had a big hand in developing the template (writing most of the JavaScript), and I'm particularly excited about the AjaxLoader

This site will load all pages via AJAX to make for a snappy experience navigating between pages.  I plan on making this a plugin for others to use, at some point in the future.

Enjoy York!

No Comments

Use ES6 on your Squarespace site...Today!


Today I released a Gulp/Babel boilerplate to use on Squarespace sites.

The benefits of which are:

  • You can write ES6 on your Squarespace site using Babel
  • You can use modern versions of LESS instead of the Squarespace version of LESS
  • Upload your changes on save via SFTP to your developer site

Check it out here!

Couple points:

  1.  Make sure to add gulp-sftp-auth.js to your .gitignore!
  2.  Add main.css to the stylesheets array in template.conf
  3.  Include the main.js script in your site.region file

2/17/16: I have not tested this in full. I'm sure there are bugs. Please don't use this on your production site.  Make sure to do adequate testing on your developer site before pushing it to your live site.

 

No Comments

Chrome Extension: Squarespace Collection / Block Identifier


There are developers on Squarespace who take full advantage of the Developer Platform and build from scratch.  Then there are the more casual types (myself included) who only want to customize some CSS of a template without flipping on Dev Mode, downloading the repo, and pushing code.

Let's say you wanted to change the line height of an individual text block, or the background color of an individual page.  These are usually not options on Squarespace built templates.  Traditionally, the way to accomplish this would be to inspect the element of each page, and grab the Collection ID (the body ID) or the Block ID to write element specific CSS.  That's a pain.

So I've written a Chrome Extension that allows you to easily see and copy the Collection ID or the Block ID of the page you're viewing so you can forget about digging through the inspector.  Just turn on the extension, find the collection ID or the block ID, click the overlay button, and it's copied to your clipboard.

You can install it here

It should work when logged in or out. Feel free to email me if you find any bugs.

No Comments

Adirondack Style Header


Adirondack has a header/site title that shrinks on scroll.  It's a pretty simple effect to implement, but I figured I'd catalogue it here anyways.

Here's the CSS:

#header {
  width: 100%;
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  background-color: red;
  z-index: 999;
}
.site-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3em;
  letter-spacing: 0px;
  line-height: 1.6em;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
}

Basically, you're just fixing the position of the header, and then applying some typography styles to the site title class (usually the h1).  The transition will allow for that 'grow' and 'shrink' effect

Here's the JS:

function animateSiteTitle () {
  var siteTitle = Y.one('#header .site-title a');

  if(window.pageYOffset > 80){
    siteTitle.setStyle('font-size', '1em');
  }

  if(window.pageYOffset < 80){
    siteTitle.setStyle('font-size', '3em');
  }  
}

Y.one(window).on('scroll', animateSiteTitle);

The '80' in the if statements is just a magic scroll number.  Change that number to whatever you like. Quick and dirty, but it should work!

No Comments