The Boomstrap! Overview

Geeks rejoice! Korporat is built on the Boomstrap! framework. By geeks, for geeks. Its going to help you bulid complete Bootstrap sites in Joomla, fast. No flashy sliders or drag and drops. You'll build responsive designs in one go from your template settings. Never has creating complex layouts been so easy. This page describes the features of this template. To see a detailed documentation of the template and its options, go here.

∞ Module Positions

You also have unlimited module positions. That's right. Unlimited. Here's how.

We've given you 9 sections to add your modules.

  1. Drawer
  2. Big Slider - You cant add modules. Its just a special position where you can put full width, responsive sliders above the menu.
  3. Above Slider
  4. Slider - A place where you can put your banners or sliders.
  5. Below Slider
  6. Above Content (just above the content and sidebars, known as maintop)
  7. Above Content
  8. Below Content
  9. Below Content (just below the content and sidebars, known as mainbottom)
  10. Above Footer
  11. Footer

Each section can have as many rows as you want. For example, in your template settings, you have the Above Content position. All you need to do is type in your grid size for each column, separated by commas. Like so:

module-grid-position

You've just created one row in the drawer section, with three module positions, which will be drawer-row1-1, drawer-row1-2, drawer-row1-3. Just add modules in these positions and be on your way. Likewise, in the Below Slider area, you have 3 rows, with two columns in each. Just make sure each line adds up to 12, which is the number of columns Bootstrap's grid provides. You can create all the rows for your entire site in one template style. On pages which dont have modules in a certain row or position, that position will simply not be shown.

Mega Menus, as elaborate or as simple as you want.

Screen Shot 2013-02-24 at 9.44.07 AM
Screen Shot 2013-02-24 at 9.44.50 AM

 

Truly Responsive

Bootstrap was built to be responsive. But our additions make it even more practical. Our mega-menu is switched off on smaller screens and bootstrap's default, clean responsive menu takes its place. You don't need to do any extra work.

On larger screens like retina displays, we've increased the font and the baseline slightly so text appears clear and readable even on super large, high density displays.

We've added some responsive functionality to Bootstrap's tabs. On smaller displays, you see the active tab with left and right arrows to navigate between the various tabs. Small change, but big difference.

We've added the awesome "TinyNav" plugin so that your sidebar menus will change to a mobile friendly select field, which appears great on Android and iOS devices. Just add the 'tinynav' class to the module class suffix and your menu will degrade to a select field. Now all your menus are responsive.

The footer menu gracefully degrades from a sitemap to a simple menu which users can jump to the respective sections.

Baseline Typography

Has you always wondered if you could get the elements on your site to line up vertically just like the various grid systems work to line things up horizontally? We added a fluid typographic scale that sticks to the baseline. We needed to make sure that the grid works both ways. Vertically and horizontally. Have a look at the typography page.

What is Baseline CSS?

Baseline CSS is where various textual elements such as headings, paragraphs & lists conform to a preset baseline height. You can read more about what Baseline is at Wikipedia. We've mishmashed various baseline CSS technologies from around the web to acheive what we think is the best possible solution. Technologies borrowed from:

  1. Baseline CSS - Gave us the initial insipration to use Baseline (GitHub)
  2. Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit (GitHub)
  3. The LESS Baseline Calculator - by John Faulds (GitHub)

Google Fonts

Choose from the hundreds of Google fonts you'd like for your headings and body text.

Screen Shot 2013-02-23 at 5.19.19 AM

Extra Search Engine Friendliness & Traffic Retention

  • Customize the way your page titles look
    We've built in features from the Title Manager Joomla! plugin right into the template settings. Your front page can be "Welcome to Korporat, the super-flexible, super-easy template" And your inside pages can have the site name appended in the end, like "About Us | Korporat Inc". We've been building sites for many clients and this would greatly improve the way your pages are displayed on the search engines.

    Screen Shot 2013-02-24 at 2.40.17 PM
  • Easy Google Analytics
    We've give you options in the template settings for adding Google Analytics, without you needed to edit any code. Just put in the Analytics ID, and the template adds in the necessary javascript, and loads it asynchronously as recommended.

  • Performance Boosts
    Sites that perform snappier perform better on search engines. Have a look at the "performance boosts" below to see what we've included.

  • Functional 404 pages
    Use any article as your 404 page. Insert modules, and have a 404 page thats is just as configurable as any normal Joomla page. The default Joomla 404 page doesn't really do much in terms of visitor retention. We hope we've changed that. Check out the 404 page.

Beautifully Validated Contact Forms by AlfContact

  • Have one form for all departments. Set the corresponding email address for each department and visitors can use one contact form to choose who to contact
  • Using jQuery validation plugin. Tweaked for Bootstrap's style.
  • Customizable error & success messages, with optional redirection to another page.
  • Basically everything you need in a contact us form.

Screen Shot 2013-03-02 at 7.38.28 PM


Other Goodies

  • Auto Generated Table of Contents module

    A table of contents module that gets auto generated based on the content in the page. Style your content with simple headings and paragraphs, and the DBYTOC plugin does the rest. Based on the awesome TOC jQuery plugin by Greg Allen. The project is on GitHub. Its been modified for Bootstrap by us. You can see it powering the module on the left of this page. Its banked to the top on smaller devices. Just add the module to the sidebars (or anywhere else you need it) and it will auto-generate a table of contents based on your heading tags in the content.

  • Short Codes

    Powered by the RokCandy plugin, insert icons, buttons, YouTube & Vimeo videos within your content by using shortcodes. You can also try your luck with creating your own shortcode macros.

  • K2 Integration

    The versatile K2 component has been included, bootstrap style. Its clean, and functional. We've included some sweet template overrides. You can see it being used in the Blog page as well as the Portfolio page. We've also included a module styling for the default K2 news module to display as a Bootstrap Carousel as you can see in the "Latest Projects" module on this page.

  • Photo Galleries for every device

    The excellent JoomGallery Component has been restyled to fit any device. Based on David deSandro's jQuery Masonry plugin, you can see the gallery layouts in action below. Resize your screen to see how it fits on various device widths. Its also fused with the SwipeBox lightbox by @scottjehl thats built for tomorrow's touch devices. Click/Touch an image to view it in a CSS3 powered lightbox. See the Modules demo page for more info.

  • Pin Your Sidebar for Usability

    Pin sidebars (like Bootstrap's affix plugin, but for the entire sidebar). We were unhappy with the affix plugin as it caused issues with multiple modules in the sidebar, so we wrote our own. You can see this in action on this page.

  • Responsive Sliders, multiple styles options with a intuitive drag drop GUI

    The awesome DBY Slider module, which we think needs its own page to explain its features. Head over there and watch the video of the backend. The versatile module is included free of charge in this template. Build responsive sliders in no time. Head over to the slider's dedicated page to find out more and see the demo.

  • Easy Tabs - group modules into Tabs!

    This module shows other Joomla! modules as Bootstrap Tabs. Choose modules to be converted to a tabbed interface. Each module gets its own tab and even Font-Awesome icons are supported in the tab names. You can position the tabs on the top, sides or bottom. See the Modules demo page for more info.

  • Responsive Footer Menu

    The footer menu collapses into a select input field smaller devices. This triggers the native select menus on various mobiled devices - very usable.

  • Include Modules in Content by ID

    That missing feature that everyone needs. You can see there's been a few modules included within the content on this page. Joomla's built in way of laoding module positions instead of ID is a big problem. Using this plugin, you can include modules by ID. This is much more functional as you load modules from anywhere based on their relevance rather than their positions.

  • Slabtext Super Responsive Rubbery Headings

    Just add the slab-text class to the headings you want to make responsive.

    This Heading Has Been Slab-Texted And Will Resize To The Width Of Its Parent Automatically

Performance Boosts - Hyperdrive for your Joomla! site

Going Live with a Joomla site has always been a multi-step process. Many a time, developers don't do the essentials for the smaller sites, like compressing the css and javascript for example. We'll we've covered that too. Boomstrap! does it for you.

  • MooTools Annhilation
    Complete MooTools removal has been made an easy option. Why load an extra library worth a hundred kilobytes when you have jQuery? If you still need MooTools just switch this option off.

  • JHCOptimize, intelligent compression & caching
    We've included the JCHOptimize plugin that compresses your javascript & css files, and gzips them automatically without any extra work on your side. This site neatly sits under 200kb on the first page load (CSS + Javascript + HTML). On subsequent loads, only a few kilobytes are needed to be transferred. We've also spruced up the default .htaccess file to maximize browser side caching. This gives a noticeable boost in page load time. All in all, you don't need to reinvent the wheel, its all included. Just switch on the Joomla! cache and the JCHOptimize plugin to be on your way.

  • Asynchronous Scripts Loading
    We've taken extra care to make sure all external javascript loaded is being done asynchronously.

  • Get Started In No Time
    Get up and running with your development as soon as you get your hands on the template. We've included a kickstart package that allows you install the whole site (Joomla included) with all the modules & plugins that you see on this demo site, pre-configured just the way you see here . You should not be spending time on setting things up. We've done it for you.