Paragraph Pro
Beautiful text, made easy
This page demonstrates Paragraph Pro used in the Demo Version of Flood Theme. Click the menu at the top for more information.
Responsive Size Control
Simple (2 way) and advanced (4 way) responsive size control means that your typography is always optimally displayed.
Type Setting Control
Easily adjust character and word spacing to correct for font display inadequacies. Adjust line-heights to correct for font baseline errors.
Vertical Rhythm
Easily apply page wide adjustments for vertical rhythm page wide using a single stack.
Newspaper Columns
Flow text over multiple columns. Lots of responsive options and layout possibilities.
Font Control & Loading
Support for default theme fonts, Google fonts or Web Fonts. This is the first stack enabled for the new Font Vaults.
Schema Vocabulary
Add a schema description for your content to help with SEO. See schema.org for more information.
Drop Capitals
Add drop capital letters to your text with one easy click. You can use a different font for the drop cap and control every aspect of its appearance, position and type face.
Read More
Add a readmore control to collapse a paragraph and enable a link to show and hide it. Lots of styling options and font-awesome icons.
Floating Images
Add floating images with lots of responsive control. Options to stack and re-scale for mobile. Easy CMS controllable.
smartCODE
Power, without the overhead.
Paragraph Pro does something quite unique, thanks to the power of stacks 3.
By making extensive use of Child stacks, only the code you use is added to your page. As normal text, it is pure CSS.
If, however you want to take advantage of the additional features like Drop Captials, Read More and Inline Images then these are added with a simple click of the plus button.
Then, and only then, is the additional javascript needed added to your page. Even then, the JS libraries are only added once per page and shared between all instances of the stack.
smartCODE
CLICK TO LEARN MORE
Examples
Below is just a small taster of what you can do with ParagraphPro.
Responsive Newspaper Columns
Making text flow over responsive columns only requires a few lines of CSS. It is therefore included in Paragraph Pro as a simple on/off switch with additional controls to specify the number of columns and breakpoints for different screen sizes. This saves extra stacks being added, keeps you markup cleaner and it the lightest weight solution possible.
I was like a pauper who moistens his dry crust with fewer tears if he assures himself that, at any moment, a total stranger is perhaps going to leave him the whole of his fortune. We are all of us obliged, if we are to make reality endurable, to nurse a few little follies in ourselves.
"There is no man," he began, "however wise, who has not at some period of his youth said things, or lived in a way the consciousness of which is so unpleasant to him in later life that he would gladly, if he could, expunge it from his memory. And yet he ought not entirely to regret it, because he cannot be certain that he has indeed become a wise man—so far as it is possible for any of us to be wise—unless he has passed through all the fatuous or unwholesome incarnations by which that ultimate stage must be preceded. I know that there are young fellows, the sons and grandsons of famous men, whose masters have instilled into them nobility of mind and moral refinement in their schooldays. They have, perhaps, when they look back upon their past lives, nothing to retract; they can, if they choose, publish a signed account of everything they have ever said or done; but they are poor creatures, feeble descendants of doctrinaires, and their wisdom is negative and sterile. We are not provided with wisdom, we must discover it for ourselves, after a journey through the wilderness which no one else can take for us, an effort which no one can spare us, for our wisdom is the point of view from which we come at last to regard the world. The lives that you admire, the attitudes that seem noble to you are not the result of training at home, by a father, or by masters at school, they have sprung from beginnings of a very different order, by reaction from the influence of everything evil or commonplace that prevailed round about them. They represent a struggle and a victory. I can see that the picture of what we once were, in early youth, may not be recognisable and cannot, certainly, be pleasing to contemplate in later life. But we must not deny the truth of it, for it is evidence that we have really lived, that it is in accordance with the laws of life and of the mind that we have, from the common elements of life, of the life of studios, of artistic groups—assuming that one is a painter—extracted something that goes beyond them.
Read More
Using the readmore control you can show and hide part or all of the content to save space on your page.
Simply click the add child + button and read more is instantly activated.
The read more dedicated settings allow you to easily control the behavior and appearance.
Read more works with other elements in your text such as lists and floating images.
You can launch readmore from external links and buttons, like the button below.
- Control the number of lines shown when collapsed
- Position the Read More link wherever you like
- Adjust the reveal speed
- Use any Font Awesome icons for the link symbol
- Option to scroll back to the top when closed for a better user experience.
- Use external launchers like this one where a button above is used for the reveal
Anatidae paleo gastropro authentic flexitarian fixie tote bag, scenester Chordate sweater irony locavore. Gentrify Aves Ayelsbury craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard mallards fap Terry Richardson XOXO. Sartorial vinyl passion, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Eider trust fund, grummage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, paddles ennui narwhal Tumblr platyrhynchos Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird up it.
As you can see with this paragraph, positioning of the readmore link is flexible.
It can be left, right or centered and you can also make fine adjustments to the position.
This paragraph also has the re-color option enabled which allows you to fade the color when the text is expanded and contracted.
This can be useful for drawing the eye to text that can be expanded, while preserving readability once it is shown.
Read More paragraphs can start expanded if required and also use borders, floating images and button style links. In fact you can style just about everything.
All this is achieved in a paragraph stack that you can add anywhere and everywhere with no code added at all if you don't enable Read More.
Thanks to the use of child stacks for JS elements, Paragraph Pro is absolutely identical to a standard Paragraph in Foundation when used as such.
This is a great option because it means that you can use it freely without compromise. If you discover later that you need to add one of the advanced functions then it is a simple click to do so. You don't need to start copying out text from one stack to another.
Drop Caps
Drop Caps child adds beautiful Drop Capital letters to your text with one easy click. You can use a different font for the drop cap and control every aspect of its appearance, position and type face. If you are using Google Fonts for the Drop Cap, you can choose to only download the single character that you need, this is called Font Subsetting and will dramatically improve page loading speeds.
Drop Caps can be responsively removed for small screens. The first example here demonstrates this. If you are viewing on smaller screens you will not see the drop cap, although you will on the paragraph below.
You can optionally add a selection of subtle text shadows or outlines to the Drop Cap in order to make it further stand out. You can choose from 3D (shown here), Drop Shadow and Outline (Stroke) which when used with transparent text can transform the look of your font.
Responsive Floating Images
Using the Floating Image child stack it is very easy to add a text wrapped image to your paragraph pro.
- Images are fully responsive.
- Hide or stack images for small screens.
- Option for full width when stacked.
- Proportional or fixed width.
- Local or warehoused image options.
- Fully CMS compatible.
The Image in the first example below is set to be stacked and full width at mobile landscape screen sizes.
Friends, Romans, countrymen, lend me your ears; I come to bury Caesar, not to praise him. The evil that men do lives after them; The good is oft interred with their bones; So let it be with Caesar. The noble Brutus Hath told you Caesar was ambitious: If it were so, it was a grievous fault, And grievously hath Caesar answer'd it. Here, under leave of Brutus and the rest-- For Brutus is an honourable man; So are they all, all honourable men--
Come I to speak in Caesar's funeral. He was my friend, faithful and just to me:But Brutus says he was ambitious; And Brutus is an honourable man. He hath brought many captives home to Rome Whose ransoms did the general coffers fill: Did this in Caesar seem ambitious? When that the poor have cried, Caesar hath wept: Ambition should be made of sterner stuff: Yet Brutus says he was ambitious; And Brutus is an honourable man. You all did see that on the Lupercal I thrice presented him a kingly crown, Which he did thrice refuse: was this ambition? Yet Brutus says he was ambitious; And, sure, he is an honourable man. I speak not to disprove what Brutus spoke, But here I am to speak what I do know.
Mark Antony
The Image in the second example below is set to be hidden completely for mobile portrait sized screens.
Friends, Romans, countrymen, lend me your ears; I come to bury Caesar, not to praise him. The evil that men do lives after them; The good is oft interred with their bones; So let it be with Caesar. The noble Brutus Hath told you Caesar was ambitious: If it were so, it was a grievous fault, And grievously hath Caesar answer'd it. Here, under leave of Brutus and the rest-- For Brutus is an honourable man; So are they all, all honourable men--
Come I to speak in Caesar's funeral. He was my friend, faithful and just to me:But Brutus says he was ambitious; And Brutus is an honourable man. He hath brought many captives home to Rome Whose ransoms did the general coffers fill: Did this in Caesar seem ambitious? When that the poor have cried, Caesar hath wept: Ambition should be made of sterner stuff: Yet Brutus says he was ambitious; And Brutus is an honourable man. You all did see that on the Lupercal I thrice presented him a kingly crown, Which he did thrice refuse: was this ambition? Yet Brutus says he was ambitious; And, sure, he is an honourable man. I speak not to disprove what Brutus spoke, But here I am to speak what I do know.
Mark Antony
About the smartCODEprinciple
Child Stacks
Many of you will now be familiar with Stacks 3 Child stacks. Header Pro uses these to achieve a wide feature set with extreme efficiency in code output.
If you do not enable a feature, zero code is added to your page. Previously this has been possible for CSS code and certain Javascript.
What is, however, normally added to the page are the shared libraries that all instances of a stack use. Now Header Pro and other BWD smartCODE stacks even removed them when they are not in use by enclosing them in child stacks.
For the first time, you can have a single stack with lots of features and power on demand but without the overhead for things you may not enable.
This means that with none of the features enabled, Header Pro actually adds no code at all to your page and will use your theme settings. All of the settings in the main stack are CSS only and only added to your page when enabled.
smartCODE
Activating the Features.
Because you don't want a lot of big blue "add child" plus buttons amongst your text stacks, Header Pro hides them by default.
To activate the effects and alter their settings, simply enable them with the button controls at the top of the stack settings.
If you have child feature stacks active and hidden, you will get an unobtrusive small blue bar at the bottom of the stack in edit mode.