If you take a look at the Journal demo pages – Photography, Travel and eJournal, you'll find that the Photography and the Travel Journal categories may be navigated via the large slider images (JW's Moving Box) at the top of the page, whilst the simpler eJournal demo displays a list of articles with the slider toggled to 'off'.
The About page displays an info panel with a single image and there is a Contact and a Disclaimer page. Each page has a search button above the menu bar with which the content can be explored.
As with previous Rapidpages projects, Journal's contemporary design is down-to-earth, focusing on content rather than flashy presentation, making the project ideal for displaying a portfolio, or a travel blog without distractions.
The blog content is divided into Categories, e.g. Paris, or Architecture and subcategories, e.g. Day One, Day Two; or Buildings, Interior. The admin pages (five in all) are clearly layed out and Jochen has thoughtfully provided explanations for their usage. Each admin page has a sidebar menu that allows you to move from one page to the next and the slider and images may be toggled on or off when not needed.
Journal is another great starting point for Total CMS newbies (setting up the blog can be confusing), but it's also an ideal solution, if you're looking to build a client site.
During the WSC, Marten built a very attractive page using only Big White Duck stacks. There were comments during the conference that Marten's feature was slow, but hey! Designing Every Element is a slow process.
At the end of the presentation, however, a chorus of voices shouted "I want to be able to do the same."
Well, if you digested what Marten explained, you can.
If you found it too complicated, Marten promised at the end of his talk to deliver the project module he created online.
He's kept his promise, but instead of delivering a single module, he's submitted 154 (one hundred and fifty-four) of them!
Sadly, this means that you'll never again have to design a page section on your own — ever!
Maximal Design Style Modules. Subtitled Duck Soup – using Marten's own words "the design modules solve a common problem for Weavers struggling to stay relevant in a highly competitive market: how to quickly and easily add real professional style to a project to make it stand out from the crowd."
Duck Soup is a bundle containing five packs for Foundation users: Chico, Harpo, Groucho, Gummo and Zeppo. Each pack is duplicated based on the universal Blank Theme (included with the project) for those that don't use Foundation.
Each pack is a project file containing five stacks pages of uniquely designed modules. Each project page contains Multiple modules. And each of the modules contains perfectly paired combinations of Google Fonts for the headers and content.
To use one of the modules in your project, simply copy it from the Duck Soup project, paste it into your own page and replace the text and images with your individual content.
Quick, simple, awe-inspiring results are guaranteed!
Of course, the modules don't necessarily need to be utilised 'as is', but can be used as a schematic to jumpstart your new project. Adjust a few settings here and there and with just a few minutes work, you have your very own module.
The 'Universal' modules should work with virtually any theme, but given the large number of old and new themes out there, this obviously can't be guaranteed. Depending on the responsive theme of your choice, the settings may require a little refinement.
Marten has obviously spent many hours studying his collection of BWD stacks and he puts them to use expertly. Some of the effects he achieves are quite amazing and a lot of thought has gone into designg each and every element.
Big White Duck Stacks:
Button Plus 2
It goes without saying that you will also need RW 6+ and Stacks 3+
Each of the five project packs is available as a separate purchase, or you can buy the complete bundle collection with a 25% reduction – that's less than 50¢ per module.
Trivia: How did the modules get their names? Duck Soup was a film made in 1933. Chico, Harpo, Groucho, and Zeppo – The Marx Brothers – were the stars of this film while Milton 'Gummo' Marx was the four brothers' manager. What better name then, for a series of projects featuring BWD stacks exclusively, than Duck Soup?
Curtains is an animated splash screen for your more informal site. As you can see below, upon loading the site an overlay appears which will slide out of view to reveal the page below.
Curtains is simple to use, but first you'll need a suitable image – so off you trot to Photoshop, or your favourite image editor and divide your image into two halves.
In Photoshop this is simple – drag a vertical guide into your image and you'll find that it will magnetically anchor itself to the centre of the image when it arrives there.
Hit 'C' for crop and crop the either the left, or the right half with the help of the guide. Save the cropped half and undo the last action – repeat the process for the second half.
When saving, set the jpg compression to around 4, or 5, then drag the images onto ImageOptim, JPEGmini etc, to further reduce the size.
You are now ready to drag Curtains into your Stacks page. Drop it at the top of your page so that it can load as the first stack. Now drag the left and right 'drapes' that you just created into the image wells and you're finished. Or not quite…
… In the stack's container, you'll see an intro text. Replace the text with your own greeting.
Start Delay sets the time that the splash screen will be displayed before the Headline fades and the curtains open.|
Fade Speed and Slide Speed can be set independently.
Cookie Expiration. It's often annoying to see the same animation every time you return to a website. Cookie Expiration can be set to n days (default), or changed to hours, preventing Curtains from reappearing during the defined period of time.
Asynchronous Mode. If async is set, the Curtains script is executed asynchronously with the rest of the page, i.e. the script will be executed while the page continues the parsing. If async is not set, the Curtains script will be executed when the page has finished parsing.
Overlay Style. The default setting is CSS Gradient. The Options are Dragged and Dropped, or Warehoused images.
Tile Images to Fill Drape. If your images are smaller than the page, they may be tiled.
Text Colour, Text Shadow Text Size, Bold Curtain Text and Italicised Curtain Text are all self explanatory.
Curtain Shadow is activated by default.
Now you're set to go!
Why the Curtains Icon is a shower head, I can't say, but Curtains is a free stack and you don't look gift horses in the mouth!
You can watch the animation above again by reloading the page.
Now for something entirely different…
You may (or may not) have wondered about the dummy text in the animation above. I'm going to tell you about it anyway!
When building a new website, whether for yourself, or for a client, it's an advantage to be able to see what the layout will look like when filled with various text formatting and images. LorumUtility will assist you by quickly adding dummy content to your page.
Now, as every standard text, or paragraph stack already contains some form of Ipsum text, I asked myself why on earth I would need a stack that does exactly the same, but is otherwise useless?
Because LorumUtility is extremely versatile.
When you drag LorumUtility onto a Stacks page, you will simply see the word 'Paragraphs' in edit mode and when you switch to preview, you will find five paragraphs of the standard and complete Lorum Ipsum text (seldom beginning with 'Lorum Ipsum').
You can choose between 14 Ipsum Dictionaries, ranging from Bacon Ipsum to Yorkshire Ipsum. Cockney Ipsum is sadly missing, but here's Cupcake Ipsum:
Marzipan halvah caramels carrot cake sugar plum bear claw chocolate bar jujubes croissant pie liquorice macaroon sweet roll brownie dessert tootsie roll icing pastry muffin fruitcake tart donut cheesecake candy canes oat cake gummies soufflé dragée tiramisu gummi bears topping sweet cookie lemon drops caramel corn pudding apple pie powder biscuit danish chocolate cake candy ice cream toffee jelly wafer jelly-o cake chupa chups jelly beans gingerbread sesame snaps cotton candy lollipop cupcake applecake chocolate bonbon marshmallow soufflé apple pie sweet caramels brownie sugar plum biscuit bear claw cupcake danish applecake cake caramel corn tart lollipop marzipan!
But LorumUtility doesn't stop here. It doesn't just allow you to add n number of Paragraphs, but also Blockquotes, Headers, Images (CSS and Photos), Ordered and Unordered Lists, a Paragraph with n words, a Sentence with n words, or n number of words without punctuation.
LorumUtility Formatting will allow you to set the Colour Definition, Font Definition – Inherited, or Custom, Font Size, Paragraphing – Size; Inherited, or Custom and the Text Alignment.
If you are pressed for time and need to demonstrate a new website layout, LorumUtility will allow you to do so speedily and efficiently. You can effortlessly generate a variety of different content elements, with the option to either use the styling inherited from your RapidWeaver theme, or experiment with custom styling applied to the written content. There is no limit to the number of LoremUtility stacks that can be used on the same webpage.
Email was released a couple of days ago, but you'll have to search for it. There's no mention of it on Joe Workman's website – his blog is only updated annually – but hey! I found the link for you!
Email has quietly secured its own web page.
So what's all the hype about? Email is a Foundation based set of stacks that will allow you to build fully responsive marketing campaigns using your favourite app – RapidWeaver, in combination with Stacks 3. If you know how to build a simple web page, then you already know how to build a marketing campaign or a newsletter.
In a similar fashion to Foundation the suite includes a Theme and more than 15 stacks. The stacks will allow you to create a single, or multiple column design with the addition of buttons and CTA's.
When setting out to build an email template, you need to check a couple of things first:
When you drag the Styles stack onto your page and open the stack settings, you'll see a to-do list. An 'Implementation List' that instructs you to Set the Email Theme; Disable Advanced General Settings; Set Title To Subject (the subject of your mail); Set Slogan To Description; Use Only Email Stacks.
Yes, should only use the stacks from the Email suite. Why? Although your email will be HTML, the HTML format that mail apps can render has failed to evolve alongside the www since the turn of the century, hence modern stacks will fail to render correctly.
The Email suite consists of the Styles stack, which has a very similar structure to that of the Foundation Styles; One, Two, Three and Four-Column stacks; a Button; a Callout (CTA); a Divider; an HTML and a Markdown stack; a Header; an Image stack; a Link List; a Spacer; a Visibility stack; a Wrapper and of course a Text stack.
Using the above stacks, you won't be able to replicate a client's website exactly (remember HTML for email is still stuck in the 90's), but you will be able to get pretty damned close – a lot closer than any of the online tools from MailChimp etc. will let you get. And working with Email is a lot easier than the online editors too.
And when you're finished, you can upload your template to one of the online mail services and send it out.
Email has gained only positive comments on the forums since its release and is already widely accepted as the mail template 'app' to use!
Don't know where to start? On the Email homepage, you'll find 15 great templates to download free of charge, with the promise of more to come…
MailChimp & Co, here we come!
T4 is also extremely useful as a demo for Paddy.
Whether the Paddy Suite was named because the first stack was to add padding, or whether it's because Gary is in fact Irish, I can't say. What I can say, however, is that the Paddy suite is an impressive set of stacks.
The Paddy stack, as the name implies, adds padding between stack elements – responsive padding. Paddy is compelling because of the versatile settings it presents. Other padding stacks offer either a fixed height set in pixels, or a responsive height set using a percentage of the width of the container they are placed within.
Paddy is different – you may choose a proportional height in % of Browser Height; % of Parent Height; % of Browser Width, or a fixed pixel height. Advanced users can, as an option, apply a Custom Class to Paddy, or add Inline CSS directly. For ease of use, the settings you have chosen are displayed in edit mode. I can see the setting % of Browser Height becoming very useful.
PaddyPlus will also add proportional spacing to your Rapidweaver Project, but is a little different to Paddy. The proportional units may be set as % Browser Height, or % Browser Width, but you are able to add and edit the proportions at two breakpoints. Setting 0 at either of the breakpoints will effectively remove PaddyPlus for the specified viewport. You can apply a Custom Class to PaddyPlus.
PaddyCol is a single column stack that can be set to the Browser Width in percent. A Maximum Width can be defined in pixels. An interesting concept – for instance: If you set the Browser Width to 100%, the Maximum Width to 960px and a Breakpoint of 640px, the column's outer padding will be removed at a viewport width of 640px and the column expands to full screen width. The reverse, obviously, is also possible – padding may be added at specific breakpoints.
Paddy2Col is a 2 column stack with advanced features. It has no gutters or padding, but will allow you to easily build complicated layouts. The column division is set in %. Paddy2Col has two breakpoints that allow you to decide exactly when the columns break to be displayed above each other. In addition, via a push/pull function, the order of the stacks may be altered after the break, i.e. column 2 can be set to appear above column one. A Custom Class may be applied to Paddy2Col.
Paddy3Col adds three equal width columns to your stacks page – with a single breakpoint, but without padding or gutters. Again, you can add a custom class to the stack. Paddy3Col is the ideal accompaniment to Paddy2Col as together the most complicated responsive layouts become possible – take a look at the demo page.
PaddyColPad is the stack that should be implemented into the Foundation Site Styles! To date, I have used Blueball's Alt Width stack on nearly every site I built. Why, because it allows me to set the padding for each breakpoint.
And this is exactly what PaddyColPad does. Let's say you have a page/stack/column that has 10% padding left and right on a desktop monitor. The padding is often too large when viewed on a tablet and definitely much too large for a mobile device. PaddyColPad allows you to set e.g 5% for tablets and 3% for mobiles – just what the doctor ordered! The padding can be set in % (default) or px and you can add a custom class.
PaddyVis is probably the simplest visibility stack available. When dropped into your project, it has two stacks containers. The upper content will be displayed above your defined breakpoint, the lower content is displayed below the breakpoint. The containers may be left empty and combined with a second instance of the stack for more complicated setups. The settings are displayed within the stack, so you'll know at a glance which content will be displayed when.
PaddyVisPlus is the more advanced version of Vis. It has three containers, allowing you to display different content for each breakpoint. Otherwise the setups just as simple as Vis.
PaddyHeight lets you define the Maximum and Minimum Heights of the content placed within it. A Custom Class may also be set.
PaddyNotes. Sometimes your page setup can get so complicated that it's useful to make notes of what has been done. PaddyNotes is just the stack for the job. Drop it into your project, add a title, add your notes (in Markdown) then hide them until you need to refer to them again. Gary's Templates, for instance, contain complete setup instructions within PaddyNotes. Don't worry – your notes will never be published!
PaddyBalls is a page loader animation. Two dancing balls that morph into squares. Drop Balls into the top of your Stacks page and define the colour of the background and of each ball. That's it.
PaddyShad is a versatile shadow stack. Unlike other shadow stacks, you can not only set the Colour and the Width of the shadow, but you can also set a second Width for a breakpoint and a Custom Class.
PaddyButt. The standard Stacks Button is simple to set up, but doesn't allow much customisation. PaddyButt changes that! Drop the S3 Button into PaddyBut and customise away to your heart's content. Set the Static Colour and the Hovered Colour for top and bottom and the Static and Hovered Text Colours. Set the padding for both the Height and the Width and the Border Radius. You may also choose Ghost Button and if that's still not enough customisation, set a Custom Class or define an Inline CSS Style directly within the stack settings!
Finally, PaddyWidth allows you to define a set width in pixels for stack contents above and below two break points. As always the advanced user may set a Custom Class. Inline CSS Styles may also be added directly within the stack's settings.
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