Wednesday
02Sep2009
J. KillNew Template: Usonian
Introducing our newest template (with 4 styles): Usonian
Usonian was a term used by the late Frank Lloyd Wright to refer to his clean, efficient, beautiful architecture for the masses.
In the same way, this template provides a solid framework for nearly any website. It is a clean, professional base that just needs your personal or corparate branding.
A few highlights:
Full-Width Headers and Footers - background colors and banner images run seam-to-seam on the canvas for a really sharp effect.
Block-Style Sidebar Links - full-width links increase hit space and make for great looking hovers.
How do you get Usonian? It's already been added system-wide, just log in and browse the system templates [Style Editing Mode > Templates]...enjoy!
Reader Comments (27)
Looks great Josh! Can't wait to play with it.
Super smooth and clean. Really awesome template!
Great job! How can you implement the block style sidebar stuff to other templates?
@Jason
/* makes sidebar links full-width, increases usability */
.content-passthrough .archive-item-list-pt li a, .section ul li a { display:block; }
Looks great!
Would be super helpful to see how you (or someone else with high level SqSp design and coding chops like yourself) would approach this template to further customize, using its inherent strengths as a base for development. Maybe use a fictitious company as a case study to show how they take this base template and modify it to achieve custom branding and functionality for their specific business needs and goals (i.e. with the full headers and footers setup, create a graphic with these properties, this dimension, make sure you don't do this... and do that, because that way the graphic achieves this desired result etc.)
I really appreciate your taking the time to explain the behind the scenes details that give non-coder types access to the process and steps. Your team can never do enough of that because there are just so many ways to customize and implement the tool sets SqSp has built, so keep the great tools and tips coming.
Cheers,
M
Looks very nice. A couple of minor items: In screen capture, left margins for "Guestbook" and "File Storage" hover highlights appear to be different. Like "Guestbook" spacing better. First character ("S") in "Sidebar Menu" and "Search" appears to have left edge clipped.
I like it. Looking forward to taking it to the lab for experimentation!
I've already switched my template from the Engineering to this one. Thanks for something new! I like it pretty simple & clean too. I will probably be experimenting with a wide image header soon as well. ; )
LOVE the full-width banner. Going to check it now!
I concur. Great work Josh. Simplicity and flexibility in one nice package. My immediate test with any Squarespace template is to change the widths of it and apply a background color. With a lot of other SQ templates, the background color usually doesn't apply properly across the width of the template as expected. With Usonian, it displays exactly how I'd assume it would. Well done indeed! For any design work I'll be doing in the future, I'll be using Usonian as a starting point. Kudos!
I really like this new template - thanks!
Team Squarespace keeps hitting the sweet spot for all my needs and wants for website design. Usonian is versatile and has a "Kill"er look.
I love it. It's a great start as a base template.
LOVE IT! Thanks, team Squarespace!
looks awesome dude! time to revamp...
I just need more features!
I like it! keep them coming! :)
Looking great - good job SQSPers!
I switched over to this template today but there seems to be compatiblity issues with IE7 ... It was reported to me by a reader and I've done compatibility checks with lots of browsers and all appear to be fine except for IE7 which gives an error: "Internet Explorer cannot open the Internet Site http://churchbytes.me/. Operation aborted.
I really like this template and want to work with it, but lots of readers use IE, so if I can't get this fixed I'll have to switch to my old template.
Thanks!
@Shawn - Usonian has been fully tested in IE7... your problem is likely an issue with the multiple 3rd-party widgets and javascript chunks you have added. The best way to diagnose the problem is to remove everything and add them back one at a time, testing each time, until you find the culprit.
How do I get the header to do a full width? If I have a sidebar the image will not go across the sidebar?
My question is the same as the last post. How do I get the site title area to be full width across the page. Anyone have the CSS code I can copy into my site?
@nightfilla, @andrew - there was a bug on two of the styles when launched that resulted in an incorrect number being returned for the Banner Image width...it ended up being short by 2 x External Content Padding.
The best solution is to "upgrade" your old copied styles by grabbing the template css (in Custom CSS) from the system template, then pasting over the template css on your copied style.
Or you can just do the math to calculate the correct banner width.
Which SquareSpace template is the SquareSpace blog based on?
Hi. Just used this template to do a new blog for my photos and illustrations. Works great. I am a designer but just used the template - no banner designs or anything like that. Nice and clean.