Southstreet
Filament Group's core tools & workflow for delivering rich cross-device web applications
Top Related Projects
NOTE: use Picturefill instead. An Experiment with Mobile-First Images that Scale Responsively & Responsibly
A mystical CSS icon solution.
Quick Overview
Southstreet is a responsive web design (RWD) framework developed by Filament Group. It provides a collection of tools and techniques for creating flexible, adaptive websites that work across various devices and screen sizes. Southstreet focuses on progressive enhancement and performance optimization.
Pros
- Emphasizes progressive enhancement, ensuring a solid base experience for all users
- Includes performance optimization techniques for faster loading times
- Offers a modular approach, allowing developers to use only the components they need
- Provides a set of well-tested, production-ready RWD patterns and solutions
Cons
- Limited documentation and examples compared to some other popular RWD frameworks
- Smaller community and ecosystem compared to frameworks like Bootstrap or Foundation
- May require more custom styling and configuration for complex layouts
- Less frequent updates and maintenance compared to more actively developed frameworks
Code Examples
<!-- Responsive image example -->
<img src="small.jpg"
srcset="medium.jpg 1000w, large.jpg 2000w"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt="Responsive image">
This code demonstrates a responsive image using the srcset and sizes attributes to serve different image sizes based on viewport width.
/* Mobile-first media query example */
.container {
width: 100%;
}
@media (min-width: 48em) {
.container {
width: 46em;
margin: 0 auto;
}
}
This CSS snippet shows a mobile-first approach to styling a container, using a media query to adjust the layout for larger screens.
// Conditional loading of resources
if (window.matchMedia("(min-width: 48em)").matches) {
loadEnhancement("desktop-features.js");
}
This JavaScript code demonstrates conditional loading of resources based on screen size, enhancing performance by only loading necessary features for larger screens.
Getting Started
To get started with Southstreet:
-
Clone the repository:
git clone https://github.com/filamentgroup/Southstreet.git -
Include the necessary CSS and JavaScript files in your HTML:
<link rel="stylesheet" href="path/to/southstreet.css"> <script src="path/to/southstreet.js"></script> -
Start using Southstreet's components and patterns in your HTML markup. Refer to the documentation and examples in the repository for specific usage instructions.
-
Customize and extend Southstreet's styles and functionality to fit your project's needs.
Competitor Comparisons
NOTE: use Picturefill instead. An Experiment with Mobile-First Images that Scale Responsively & Responsibly
Pros of Responsive-Images
- Focused specifically on responsive image solutions
- Provides a more comprehensive approach to image handling
- Includes polyfills for broader browser support
Cons of Responsive-Images
- Less actively maintained (last update was several years ago)
- More complex implementation compared to Southstreet
- Limited to image-related functionality
Code Comparison
Responsive-Images:
<picture>
<source srcset="large.jpg" media="(min-width: 800px)">
<source srcset="medium.jpg" media="(min-width: 600px)">
<img src="small.jpg" alt="A responsive image">
</picture>
Southstreet:
<div class="responsive-container">
<img src="image.jpg" alt="A responsive element">
</div>
Responsive-Images focuses on providing multiple image sources for different screen sizes, while Southstreet offers a more general approach to responsive design. Responsive-Images requires more markup but provides finer control over image delivery, whereas Southstreet's approach is simpler but less image-specific.
Both repositories aim to improve responsive web design, but they tackle different aspects of the problem. Southstreet provides a broader framework for responsive layouts, while Responsive-Images concentrates on optimizing image delivery across devices.
A mystical CSS icon solution.
Pros of grunticon
- Automated SVG to PNG fallback generation
- Customizable CSS output for better control over icon styles
- Supports data URI embedding for reduced HTTP requests
Cons of grunticon
- Requires Grunt as a build tool dependency
- More complex setup process for beginners
- Limited to icon-specific functionality
Code Comparison
Grunticon configuration:
grunticon: {
myIcons: {
files: [{
expand: true,
cwd: 'src/icons',
src: ['*.svg'],
dest: 'dist/icons'
}],
options: {
enhanceSVG: true,
pngfolder: 'png',
compressPNG: true
}
}
}
Southstreet usage:
<link rel="stylesheet" href="css/enhanced.css" media="(min-width: 40em)">
<script>
// Southstreet enhancement
yepnope({
test: Modernizr.mq('(min-width: 40em)'),
yep: 'js/enhanced.js'
});
</script>
While grunticon focuses on icon management and optimization, Southstreet is a broader responsive design framework. Grunticon offers more specialized tools for working with icons, including SVG optimization and fallback generation. Southstreet, on the other hand, provides a comprehensive approach to progressive enhancement and responsive design, making it more suitable for overall project structure and performance optimization across different devices and browsers.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
:warning: This project is archived and the repository is no longer maintained.
SouthStreet Workflow
Our tools and workflow for building fast and accessible cross-device web applications
SouthStreet is a set of tools that combine to form the progressive enhancement workflow we use on projects at Filament Group. This workflow is designed to help us deliver modern web experiences that are accessible to the widest range of devices possible.
While we have many open-source projects related to cross-device usability, SouthStreet is focused particularly on the process of delivering enhancements efficiently so that users receive a page that works as soon as possible.
Our SouthStreet workflow utilizes the following tools, all of which are independent Github projects themselves.
- Enhance: a small JavaScript boilerplate designed to help determine if a browser is capable of handling additional user interface enhancements, and load specific enhancements for that browser as fast and simply as possible.
- loadCSS: A function for loading CSS asynchronously.
- loadJS: A function for loading JS asynchronously.
- cookie: Get, set, or forget cookies.
- criticalCSS: A command-line tool for extracting critical CSS for a page. (we use this with grunt-criticalCSS)
- Grunticon: A grunt-based tool to make it easy to use SVG graphics with fallbacks for older browsers.
- AjaxInclude: a plugin that is designed for modular content construction, that runs on jQuery (or our Shoestring DOM utility)
- Picturefill: A responsive images polyfill.
Together these tools form the core of Filament Group's progressive enhancement workflow. The scope of these individual projects vary widely, but they all share a common goal of serving front-end code faster, either by preventing or deferring the loading of code and assets that are not essential to the device, or by offering light-weight alternatives to common patterns.
For demonstration purposes, the Demo page of this repository contains a working example of these tools working together.
Please note that while these tools do represent key components of our overall approach, their applicability to a particular project always varies, and these particular projects are not always the best tool for the job at hand. Depending on whether a particular tool makes sense for the problem we're solving, we will often use alternative tools that provide similar functionality instead. For example, we commonly use jQuery instead of Shoestring (below), as Shoestring provides a small subset of jQuery's featureset, and is not always appropriate for the needs of our projects. In essence, the projects in SouthStreet are developed with a goal of ease of use and compatibility, but they should always be evaluated against other potential solutions.
Let's break down the role that each one plays.
Initial Page Load Tools
The following SouthStreet tools are used in the initial page load step.
Enhance (v2)
Enhance is a tiny JavaScript boilerplate designed to help developers keep overhead low while delivering enhancements to differing devices and device categories. Technically speaking, the role of Enhance is to determine if a browser is broadly capable of handling additional JavaScript and CSS enhancements, and then load specific enhancements for that browser as fast and simply as possible. Enhance is designed to be delete-key-friendly, but it includes a few other SouthStreet projects inside it for convenience (namely, loadCSS, loadJS, and cookie).
Typically, a site that uses Enhance will start by including enhance.js directly in the head of the page -inline, not an external reference. Within enhance.js, the following steps are often taken:
- Define some variables and functions for loading assets and accessing information about the browser and markup
- Run one or more tests to see if a browser is qualified to load and render additional enhancements
-
- A. If it's not qualified, exit early and do nothing more
- B. If it is qualified, proceed on to load additional assets, add classes to the document, etc.
For an example of how this process actually breaks down in JavaScript, check out the enhance.js file in this repository.
CriticalCSS
Critical CSS is a task we typically run during a build process. We use the task to evaluate every unique template in a site to determine the subset of styles in a site's CSS that are necessary to render the top portion of the page. As these styles are determined, we write them to files that are intended to be included directly in the head of each template, on the server-side. Inlining only these most critical of styles allows us to avoid making render-blocking requests from the head of the page, which dramatically increase the time it takes for a page to be usable. Once included in a template, we use EnhanceJS to request the rest of the site's CSS in a single request, and to set a cookie that tells the server on subsequent visits that the full CSS file is most likely cached now and can be referenced from the head of the page (instead of inline styles).
Inlining CSS this way is designed to optimize the first visit to any page on a site, aiming to render a usable page in less than a second on a modern connection. It follows the recommendations from Google's Pagespeed Insights. Check out our own site's score on PSI to see how well it works in action.
For examples of how we recommend configuring the head of a page to use EnhanceJS and CriticalCSS together, check out the EnhanceJS readme, or explore the demo files in this project.
Grunticon
Grunticon is a Grunt-based tool to make it easy to use SVG graphics with fallbacks for older browsers. We run Grunticon alongside our other build-time tasks to create CSS files that include our icons, which we then load asynchronously using Grunticonâs generated loader script, or by using our own scripts like loadCSS.
Secondary Enhancement JavaScript Files
The following SouthStreet scripts are typically loaded in a qualified manner by EnhanceJS, after bundling them in a single file amongst any other scripts we may need. These are part of SouthStreet purely because they serve the purpose of facilitating further enhancements to a page (by fetching assets conditionally).
AjaxInclude
AjaxInclude shapes the way we think about content and document construction in a major way. AjaxInclude uses the jQuery (or Shoestring if you don't otherwise need jQuery) API to bring the concept of an "include" to HTML, allowing us to deliver lightweight web pages that contain only the most essential content, and lazy-loading additional content automatically via JavaScript.
AjaxInclude works by referencing external fragments of HTML content via HTML5 data attributes. For example:
<a href="articles/latest/" data-before="articles/latest/fragment">Latest Articles</a>
In this case, we have an ordinary link to external content, which is essential for accessibility across all devices, but the link is also tagged with a data-before attribute that references a URL that contains a fragment of that external content to pull into the page. The AjaxInclude plugin will see this and include that content before the link.
You can add these attributes to elements in your page anywhere non-essential fragments of content can be included from an external URL. jQuery-api-like qualifiers like data-after, data-before, data-append, and data-replace are all supported. Also, the data-threshold attr allows a min width for this to apply.
Note: these attributes can be placed on any element, not just anchors. You might find data-append to be most useful on container elements.
Once the DOM is ready, you can apply the plugin like this:
$("[data-append],[data-replace],[data-after],[data-before]").ajaxInclude();
Picturefill
Picturefill, while listed last in the SouthStreet lineup is one of the most critical pieces of all with regards to delivery optimization. Picturefill allows us to reference several sources for a particular image in an HTML document, and based on which source's media query matches, Picturefill will load only one image appropriate to that context (and reevaluate whenever the viewport dimensions change as well).
Recap
The tools above combine to form the backbone of the SouthStreet workflow. Now that you understand the foundations, seeing it all in action should bring additional clarity. This repository includes a demo (_demo.html) that uses "Enhance" and "QuickConcat" to conditionally load a set of JavaScript and CSS files. If you check out the repo and run it on a web server, you'll get the full effect. We'll look to improve the demo further to utilize Shoestring and AjaxInclude as well soon, but this should give you a good idea of how things can work.
You can find more projects at our website as well. Filament Group, Inc
Top Related Projects
NOTE: use Picturefill instead. An Experiment with Mobile-First Images that Scale Responsively & Responsibly
A mystical CSS icon solution.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot