Tommy did it again. He's produced some new stacks and hidden them away in DeFliGra's store.
Today I discovered Boxing, the ideal suite of stacks to present any sort of collection, be it a portfolio with links to further information or an online shop.
DeFliGra bills Boxing as a page layout stack and, let's face it, if you're putting a portfolio or a shop online, it will probably take up most of a page. Boxing arrives with a total of eight stacks and three pre-built User Stacks that you may use as reference or as a basis for your layout. To be honest, without the User Stacks, you'd need to fiddle around for quite a while to find out how Boxing works. The suite positions a grid of images with a text and button below each image in an accentuated block.
First off, we have the Boxing stack itself – a container in which the other stacks are placed and which, as we will see, controls the other stacks.
To start, a Boxing BottomStick – short for sticker – is inserted into the Boxing stack for each item in the grid. It provides a container for the other stacks while at the same time being the accentuated block.
Should you wish the whole container to be coloured, you can now drop in a Boxing Box Stack to house your content, otherwise, drop your image and text, along with a Boxing Flat Button, if needed, directly into the BottomSticker. The Boxing Flat button has a text box attached to it in which you may insert a short description and or a price next to the button. For longer descriptions, however, you'll want to use the Boxing Txt Match.
You can round off your design by placing a double coloured line above the Sticker. The line can also be used as a spacer. If you are satisfied with your first box drag it, using the 'Alt' key and copy it into the other Boxing Stack fields. You can edit the duplicates much faster than you can rebuild them.
All formatting is carried out with the Master Boxing Stack – the container in which we just dropped all the other stacks. Via its HUD you set the number of items in your grid (limited to 128), you can change the size and colour of each and every element within your grid collectively – a swift method of formatting a page. Take your time and study the HUD carefully – it has a lot of controls and a stack of options for custom CSS.
The best thing about Boxing is that it is fully responsive. The grid reflows to fit different screen sizes and scales up to fit mobile devices. I also like the idea that once I have designed a portfolio or a shop, I can copy and paste it into another stacks page and reformat the whole thing with a couple of mouse clicks.
In a more traditional world, a web page has one or two columns of information and, on the right, a sidebar. Look at this blog page, for instance.
On a responsive website the page becomes narrower when viewed on mobile devices, so that the designer will have to make decisions regarding the priority of information presented. Usually this means that the three column design will break and slide so that column two appears underneath column one; the sidebar is either switched off on a smartphone or it slides down to the bottom of the page, just above the footer. I've had customers call to tell me that they can't see their site's sidebar on a smartphone. Oh, it was there all right, they just hadn't scrolled far enough down the page.
There are occasions when the information contained within the sidebar is not of a secondary nature.
Flex3 from DeFliGra to the rescue …
Flex3 is a three column stack with column widths that can be set individually and let the third column slide into second position when a breakpoint is reached. It also has a floating middle column. If, for instance, you set all three Flex3 columns to 30% as illustrated below, there will be ten percent left to account for. Flex3's middle column is a floating column, so you can decide to float it to the left – directly next to column one, with a gutter defined in pixels – to the right – directly next to column three, again with a pre-defined gutter, or centred between the two.
When the breakpoint is reached, i.e. when the page is viewed on a mobile device, the middle column then slides down and is displayed underneath column three.
A Breakpoint lets you define at exactly which viewport width the columns swap place and there is a setting 'Breakspace' which allows you to set a space at the bottom of the first and second column after the break has occurred. I hardly need to mention that CSS settings can be set for the container and for each column — that transpires with DeFliGra stacks as a matter of course.
You can set the maximum stack width for Flex3, so that it doesn't need to be placed within a restraining stack. In fact, I can envisage complete pages being built with just this one stack for the main content. Which is probably what Tommy had in mind when he designed the stack.
Single page websites are trending at the moment and I expect them to be with us for a while yet.
It is no surprise then that One Little Designer has released a single page theme called Sweep.
Sweep is a theme that, at the moment, is aimed specifically at Stacks pages. It works to an extent with standard RapidWeaver pages, the contact form works well for instance, but otherwise the results are not ideal – purely and simply because standard RapidWeaver pages have to be placed as external pages and not within the single page layout. Sweep includes a theme and three stacks. The stacks are Sweep Page, Sweep External Link and Sweep Slider.
Sweep Page is the primary stack – it holds your page contents. Each time you place a Sweep Page stack, a new page is added, vertically, to your site. Sweep Pages are configured – as are all one page sites – to fill 100% of the current viewport. It is important, therefore, to work within the restraints of this layout. Don't place too much information on each page, as it will be cut off at the bottom of the screen.
Sweep External Link is a link that will appear in your site's navigation bar, we shall look at the navigation later.
As you are probably aware, single page websites scroll vertically to the next or previous page.
Sweep Slider lets you position pages horizontally within a Sweep Page, you can then navigate to the left or right to view the next or the previous page.
Sweep allows you to choose between two different navigation forms in the theme settings. The navigation can be set either to a traditional navigation menu that remains static at the top of the page, or it can be set to a minimalistic vertical bullet menu.
Font Awesome is integrated into the theme. As such, the navigation can be set to display icons in both the traditional and the bullet menu. When either the navigation bar or the bullets are clicked, the display scrolls down to the appropriate Sweep Page and bounces to announce its arrival there.
Sweep theme offers a choice of 17 different fonts for both headlines and paragraphs. What surprised me, however, was the built-in lightbox, not because it is included, but the way it works. At first I couldn't find out how it was triggered. Jeremy's demo page uses 1LD's Responsive Grid to house his images. If you click on an image, a lightbox opens. Responsive Grid never did that on my pages!
I eventually worked out that if images are named 'lightbox-1', 'lightbox-2' etc. any image on the page will display inside the lightbox when clicked. Very impressive.
I like Sweep's simplicity. Impressive sites can be built quickly and personalised easily. I haven't used a 'prefabricated' theme in ages. This might just change in the near future.
Let's say, you'd like to have an inspirational quote in your site's header, or to publish testimonials for your business, what better way, than a quotes slider?
To date we've used Will Woodgate's randomiser Stack, the problem being that the quote only changes when the page is reloaded. But what if you want the quote to change every 30 seconds or so?
Well, you could drop the standard Stacks Quote stack into a slider, or you could use 1LD's CleanQuotes or, since yesterday, you could use Will Woodgate's very versatile QuoteSlider.
QuoteSlider is billed as the most feature-rich, dedicated quotes slider on the market and it most certainly has the longest HUD. The most astonishing thing about QuoteSlider is its use of HTML. When you come to enter a quote, you get a window of code. Now if you don't want to mess around with HTML, you can just replace the standard quotes and citations with your own, while leaving the tags intact. If, however, you are adept at HTML coding, you can format the quotes to match your design concept exactly.
The HUD supplies all the other settings you need – You don't get any themes, but you do get total control over the stack's presentation. Firstly you can choose to have the stack automatically placed into an Extra Content Area or, if you're Using Stacks4Stacks' FreeStyle stack, into your page header. You can, of course, place the stack anywhere else you please on the page and multiple copies can be placed on the same page.
The quotes that QuoteSlider loads can be warehoused so that you may easily change the quotes regularly without having to republish your RapidWeaver page. They can also slide horizontally or vertically with transition times and pause times set in milliseconds, with the maximum pause-time being one minute.
It is possible to set the slider to begin with a random quote from your collection or to begin with a specific quote. The quotes are set to loop infinitely, but you may also set them to remain stationary once the last quote is displayed.
If you like the standard settings, you are ready to go once you have inserted your own quotes to replace those of Sir Winston Churchill. If not you can set up maximum widths, breakpoints and change the colour and alignment of practically everything within the stack.
Next time I want to publish testimonials, I have a difficult choice to make!
It's a funny thing with Tommy, it isn't often that he officially announces a new stack.
The reason for this is that he develops a stack for his own use, uses it for a while and then realises that it isn't on his website. By the time the stack does make its way to the website, Tommy can't remember if it's a new stack or not.
The other day, I noticed that Tommy had added 170 new words to his site and deleted 103. No news from Tommy, though, what was happening …
Just by chance, he had released three new stacks. Did you get a newsletter? I didn't.
GoogleMap Expander [GME] is a stack that I've had in my collection for a while now although, until two days ago, it had never been officially released. GME lets you place an active Google Map as the background image to your site. In the HUD, you can set the viewport height and the map transparency. The stack has a drop zone for further stacks. The width of the drop zone can be set in Pixel, Em or %. As usual with DeFliGra stacks, you get a number of options for setting custom CSS values and z-index.
GME is ideal for contact pages, where you have the address details of your business and perhaps a contact form.
NiceFrame is, at first glance, a simple iFrame stack. Tommy writes that it is ideal for placing a blog page on any stacks page. I dropped the stack into a test page alongside another iFrame and couldn't see any difference — until I looked at the HUD. Set the viewport height of your iFrame using a Pixels, Em or the standard setting – %; then use the supplied Calc function to subtract from that height, e.g. a 30px border. Minimum/Maximum height can be set for NiceFrame, as can a Maximum width.
If you are inserting a blog-page into your NiceFrame, then scrollbars will probably be necessary. The HUD has settings for the scrollbar colour, the slider colour and size.
NiceFrame gives you an extra set of settings for the iPad/iPhone, along with custom CSS possibilities.
SideCar is a responsive, two-column stack with a difference. One of the columns, left or right – it's your choice – can be set to a static width. This is one of those stacks, where I thought 'Yeah, big deal' until I tried it out. Now it will probably find its way onto a number of my pages.
Once more, the size of the static column can be set in px or %. Set 320 px, for instance, and the width fits the iPhone screen exactly, the flexible column would then slide down to fit underneath the first.
Images placed within the flexible column are responsive.
As with so many DeFliGra stacks, the columns already have grey background colours set. These can be switched on or off so that a background image might be inserted.
Three new stacks with no related functions, but all three well worth looking at. Who knows, we might even see them in a newsletter soon.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16