One Little Designer
In the beginning there was RapidWeaver, a theme-based layout software for building websites. The resulting websites looked great, but soon we discovered RapidWeaver’s restrictions and wanted more flexibility.
Isaiah Carew developed first Blocks then Stacks as Plugins for RapidWeaver that allowed users to position content more flexibly. JonasThemes produced BlocksBox Air – a freestyle theme for Blocks – but sadly Blocks didn’t catch on, Stacks was instantly recognised as being far more versatile and quickly became the staple diet of all Weavers; at last, we could build our pages just as we wanted them – or could we? We were still restricted to the confines of the theme. Charlie Lockhart solved the problem of freestyle websites using Stacks by releasing FreeStack, a theme that wasn’t a theme as such, but a suite of stacks that allowed us to do exactly what we wanted with our pages. We were happy at last. Except…
Except mobile devices were accessing the web more and more frequently and had to be catered for. At which point, Charlie’s FreeStack Responsive came to the rescue, while behind the scenes others were also working on the future of the internet and they too realised that mobile devices were taking over the web. Twitter developed Bootstrap, a column based responsive framework. Yabdab came to our aid and adapted Bootstrap for RapidWeaver. Zurb developed Foundation – also a column based responsive framework and Joe Workman took that framework under his wings. Yahoo developed PureCSS and I mentioned in passing a few months ago that 1 Little Designer had developed a suite of stacks around it.Yahoo Pure is still at version 0.6.0 but, just this week, Jeremy released an update to Pure which caused me to take a deeper look at his suite of seventeen stacks and seven templates.Freestyle themes always involve a learning curve. Some steeper, some shallower. Jeremy’s website explains most of what you need to know about Pure and it pays to take a look at those pages.
A Pure Core stack is required on each page to enable the use of the other stacks. It adds the core CSS elements to your site. Pure Fonts and Pure Font Awesome can be added to the core stack and enable the use of local fonts and font icons.
Pure is grid based, so before you can add any other elements to your page, you’ll need to add a Pure Grids stack. ILD’s Pure is based on a grid of six columns. Each column is activated or deactivated in the HUD by setting its proportion in relation to the other columns 1/4-25% : 3/4-75%, for instance. Asymmetric settings, such as 25% : 50%, are also possible as long as the total doesn’t exceed 100%.
Pure Grids have a Sticky option which can also be set to ‘Hide’. With these settings the grid will stick to the top of the page when scrolled down, or will be hidden and appears again – and will stick – when the user scrolls back up. The most common usage for Sticky stacks is for menus and Pure Menus work perfectly with these settings.
Pure Menus have eight standard settings to adjust their appearance, including ‘Vertical’. The menus are automatically formatted with the same font as Headlines. The font size can be set independently, as can the menu width and the padding. As with most of Pure’s stacks, shadows can also be set.Your next stack will most likely be a Pure Text stack which can be set as a headline or paragraph. The HUD supplies all the settings needed in each case; including spacing, link-hover-colours, and shadows.
Pure Images are responsive and can be set to facilitate retina screen resolutions. With the click of a mouse, they can also be set to display in a lightbox. A cool feature that I first saw in 1LD’s Sweep theme. Responsive or not, you’ll still need to optimise your images before uploading – there is no option to upload separate image versions for mobile devices.
Five stacks – a base stack and four function stacks – are included for forms. The base stack supplies the mail settings but also contains the option for Advanced Styling. Advanced Styling gives you extensive options for the width and colours of the form elements. Radio Buttons, Check Boxes and Drop-Down Options are all available, but there is no option for validation.
Pure Include will let you import other RapidWeaver pages into your design. As such, you can easily insert a standard Header and/or Footer into Pure pages. Pure Include utilises PHP to import the pages from your server, so the page suffix .php is crucial.
A Pure Tables stack has been included, so the purchase of additional stacks for basic tables is unnecessary. Tables are automatically configured with a header and definition column.
An added goody with this week’s update is Pure Preload, a new stack is now which allows you to place pre-loading images on your pages before the content is fully loaded.
As previously mentioned, Pure includes seven template stacks. These incorporate multi-column examples, a footer example, a sticky menu examples and two Pure Slider examples. The slider examples not only have images, but also an example of multiple columns and buttons.
Jeremy has thoughtfully placed four different projects online, which can be used as ‘Themes’ and substantially reduce the learning curve. One of the projects – Metro – is a single-page website with each successive element linked to the menu bar.