Fluster is a single-page multi-purpose template designed to provide the you with simple, elegant and up-to-date modern standard website. Fluster is built on a customized version of Bootstrap 3. It brings you all of Bootstraps features and more.
Fluster comes loaded with all of Bootstraps features and many of its own. Here are a few to help you get started with the customization process.
Unlike other themes in the marketplace, Fluster is designed to be easy. We designed in a way that it is easy to navigate and easy for you to customize for what you need. To update any style, simply open the style.css file and modify any item to your liking using CSS.
Background Colors and Patterns
Fluster comes with a selection of colors and patterns that takes its customizability even further. Using a simple class, you can apply any pre-defined classes you like. To make it non- intrusive, we defined all classes to start with the abbreviation “bg.” To use a color as a background, you may simply call for the bg-[color] class (where [color] is replaced by a color of your choice). Similarly, the patterns option is also available using the same method bg-[pattern]. Below you will find a list of colors and patterns we have available.
<div class="bg-charcoal"> ... </div>
A list of available background colors:
A list of available background patterns:
You can also apply any of these colors and patterns to the tag.
Fluster is a responsive template. By making this theme responsive, you no longer have to have multiple versions of your site for each screen resolution. Rather, this template will adapt to fit the screen or device. Having an effective navigation in a responsive design is very important. On a monitor, the navigation will show as inline-block text that has a simple color change and border on hover. When the device resolution is 979px or lower, the navigation will turn into a select box automatically. You do not have to code or add any select box code. Instead, the theme will generate it for you based on the content in your navigation.
The navigation is based on unordered list placed between a
callout. This will allow you to organize the navigation without having to worry about floating or adding any unnecessary tags or CSS. A standard navigation code looks like this:
<ul id="top-menu"> <li><a href=”#”>Home</a></li> <li><a href=”#”>About</a></li> <li><a href=”#”>Work</a></li> <li><a href=”#”>Contact</a></li> </ul>
Just like any items on this template, you have the option to add additional features to the navigation. One feature is to automatically center the navigation when it goes into mobile mode. You can do this by adding the class “mobile-center” in the <nav>tag. Another is the ability to add selected state to the navigation item. You can add the selected class in the <a> tag like so:
<li><a href="#" class="selected">Work</a></li>
Fluster takes advantage of the brilliant jQuery Quicksand script. Quicksand is a jQuery plugin that helps filter and animate items in an HTML list, in this case, the portfolio. All of the backend work for the script has been completed for you. To update a filter category, you need to update the data-id attributes. This helps the plugin identify the same elements within source and destination collections. If elements exists in both collections (the same data-id), it’s the same to Quicksand. You can view the complete detail on the script at: http://razorjack.net/quicksand/docs-and-demos.html.
Fluster comes loaded with a customized Google Map. By default, the map is pointed to Chicago, IL, but you can easily update it to any destination you like. You will need to get the latitude and longitude of the location you want to point the map to and paste it in the link below in the custom.js file:
var chicago = new google.maps.LatLng(41.850033, -87.650052);
Coming Soon Page
While you work on customizing your website, wouldn’t it be nice to have a cool coming soon page? That’s what we thought and the reason why we included a FREE coming soon page with the Fluster theme. To update the release date and time, update the line below in the custom.js file.
var end = new Date('02/25/2014 02:00 AM');
Format: MM/DD/YYYY HH:MM AM/PM
Custom Error Page
To keep the sample branding throughout, Fluster comes pre-loaded with a custom error page. The error page is easy to use and update. You can update the text to use it for any type of error pages: 404, 405, 500, etc.
Fluster takes advantage of few wonderful fronts. First are the web-fonts gathered from Google Fonts library. Other is a font icon called FontAwesome. All fonts are loaded directly from the providers server therefore you don’t have to waste any of your own bandwidth.