Stacks Image 2250

Focus

Create beautiful buttons that morph into magnificent modal popups. Focus provides a powerful, responsive tool for creating a unique way to display your content.

Colorful

The color of your button determines the modal popup's backdrop. We also provide color pickers for the button's label, the modal's content text and links.

Responsive

Set the width of your button at the iPhone, iPad and Desktop breakpoints. Each breakpoint can use either a fixed or percentage based width.

Shape Up

Choose to have your button be rounded and pill-shaped or nice and squared off. The shape of the button influences the morph effect.

Collapsible

Use the built-in collapse mode to shrink up your modal content during edit mode to provide a cleaner work environment.

Iconic

What would a button be nowadays without an icon? We provide over 100 different icons to choose from to adorn your button design.

Requirements

Focus requires Stacks version 3+ and RapidWever version 6+ due to its use of the latest features in both of these product's APIs.

Samples

Below are a variety of samples, from the most basic setup, to more complex layouts within the modal popup. Click each to see how the Focus stack works and get a few quick ideas of the fun things you can use this marvelous new stack for. We look forward to seeing the amazing things you come up with for this marvelous tool!

Basic Sample

This sample consists of the most basic elements. We've added a couple of standard header stacks and some plain text stacks to the Focus stack's modal content area. While the content may be pretty simplistic in this example it focuses your visitor's attention on exactly what you want them to see.

You can use the usual stylings of the text stack, creating bolded text, italicized text, and more more, including adding links to your text.

We've filled out the rest of this sample, below, with a bit of lore opossum dummy text to pad out the space.

Lorem Ipsum Sample Text

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
Close
Stacks Image 314

Columns Sample

In this sample we've built a nice responsive columnized layout using some responsive columns, some headers, text and images. Focus allows you to build unique layouts in a modal popup that really grabs your visitor's attention. This unique experience is a show stopper!

An Important Headline

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

An Important Headline

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Close

An Important Headline

This sample consists of some basics mixed with some more advanced stacks. While we've used the standard text and header stacks again, we've also built a nice accordion below that allows users to click on the labels to expand them for more information. We also made use of the Margins stack in order to narrow our layout a bit at the desktop breakpoint.
  • Accordion Label
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
  • Accordion Label

    Markdown

    Writing in Markdown format is a simple and fast way to add styled text to your web pages.

    • Ordered and Unordered Lists.
    • Simple Links: Stacks Cloud uses Markdown Syntax too.
    • Simple formatting: Bold and Italic.
    • Code snippets: 10 PRINT "HELLO WORLD"
  • Accordion Label
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
  • Accordion Label
    Stacks Image 3425
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
    Stacks Image 3430
    Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Open all Close all
Close
  • Stacks Image 3450
  • Stacks Image 3456
  • Stacks Image 3454
  • Stacks Image 3460
  • Stacks Image 3458

Orbit Slider Sample

In this example we've added our Orbit slider to the modal popup content for this Focus stack. We've setup Orbit to auto play and populated it with some stunning photos. Below we've also included a button using our Flat Button stack, which takes you to the Orbit page.

The slider works nice and smooth inside of the Focus modal popup, giving us another great way to show off our work.

With this example we've also used our square button style for the button, as well as included an icon on our button using one of the over 100 different built-in icons!
Close

Page Sample

In this example we've recreated one of the pages from the Capsule Stack's live preview site. We've incorporated a variety of different stack in they design from images and text to the Margins stack as well as the Capsule stack itself. This is a pretty complex layout, and it is all contained within the modal popup of the Focus stack!
Stacks Image 4089

CAPSULE

BUILD TIDY PAGES. Capsule allows you to place content on your pages that can be shown and hidden by your visitors using stylish toggles. You can even use multiple content sections and multiple toggles to control your content.

Features

Toggles

You can place toggles on your page, for opening and closing content, separately from your content. This allows you free reign to design your pages as you see fit.

Multiples

You can use multiple toggles for one Capsule content area. You can setup multiple content areas to be opened by a single toggle.

Icons & Images

We provide a few built-in icons for use as your toggle. This allows you to get up and running quickly. But we've also built-in drop zones for your own custom images, allowing a great deal of design flexibility.

Styling

We've included settings for padding in the Capsule stack. This lets you change the look and feel of the stack's content a bit. We've also included an inset shadow toggle which can give the content a nice inset look.

Pre-built Images

We've included a set of on and off toggles as Stack Media Libraries, which install when you install the stack.

Start Open

You can choose to have the content area of the Capsule stack start open when the page loads.

These are just a few of the many different features we've packed into the Capsule stack! Capsule comes loaded with a lot of different options to customize it to your specific needs!

Close

Bloom Sample

In this example we've built a beautiful layout using some standard stacks along with our very own Bloom stack, which helps you to build portfolios, product pages and much more. We've mocked up a sample layout using variations of the Bloom stack

Professional portfolios

Create vibrant, easy to use portfolio pages to show off your work and show your visitors what you're truly capable of.

Beautiful bodegas

Sell your wares to the masses. Design an easy to use, fun to navigate, online shop using Bloom to make your pages really pop.

There are so many features and uses for the Bloom stack! It comes loaded with a lot of different options to customize it to your specific needs depending on what project you're using it for!

Close

For more information on Focus, as well as a video tutorial, screenshots and more details, be sure to checkout Focus' product page.