Built on a mobile-first twelve-column grid system, bundled with an endless list of components, utilities and helpers, and add in the fact that it is easy to customize and extend, it is no wonder that web designers and developers continue to use and love Bootstrap. It truly is the perfect framework for quickly getting started on any type of web project.

To help make life easier for you, we have collected forty of the best free Bootstrap 5 templates for you to use on your next project. We have purposefully omitted all of those starter and barebones templates from this collection, of which there is already a multitude available on the web. Instead, we have focused on highlighting all of those fully-featured, beautifully designed, and of course, free Bootstrap templates that you can use straight away.

All of the responsive templates come packaged with pre-styled ‘ready to use’ components, and many have come bundled with additional extras, like charting libraries, pricing tables, tabs, and much more. All of these templates will save you hours of extra work and are all waiting for you to add your content and creativity.

If you’re new to Bootstrap, the best place to learn how to use the framework is to follow the steps on the official quick start guide, and you’ll be up and running in no time.

You might also our collections of Bootstrap Admin templates and Bootstrap UI kits.

The post The 40 Best Free Bootstrap Themes for 2024 appeared first on Speckyboy Design Magazine.

So why use Bootstrap? With Bootstrap, you know exactly what you’re getting. It’s a mobile-first framework that is relatively easy to customize, with pre-built design patterns and a vast library of components and widgets. More importantly, your Bootstrap build will be consistent across all screen sizes, devices, and browsers. It makes sense to use something that you know will work well when building the dashboard or admin panel of your web application.

The free Bootstrap admin and dashboard templates below have been pre-built as complete solutions, allowing you to rapidly create the front-end dashboard of your application. They include all of Bootstrap’s widgets and many additional addons, plugins, and features for charts, graphs, calendars, file managers, and more—everything you need to build powerful, professional, and responsive dashboards.

You might also like our collection of Bootstrap UI kits and Bootstrap templates.

The post 25 Free Bootstrap Dashboard & Admin Templates for 2024 appeared first on Speckyboy Design Magazine.

Bootstrap offers a wide range of UI kits and templates that are perfect for any design project, from minimal startup websites to complex admin screens. With its responsive design, you can create stunning web pages and applications that look great on any device.

If you’re looking for inspiration or need a head start on your next web project, take a look at our collection of free Bootstrap UI kits (version 4 and version 5 of Bootstrap). Whether you’re a designer or developer, these UI kits can help you create beautiful and functional web pages and applications quickly and easily.

You might also our collections of Bootstrap templates and Bootstrap Admin themes.

The post 20 Free Bootstrap UI Kits appeared first on Speckyboy Design Magazine.

Now in existence for over 10 years, the self-described “front-end open source toolkit” is used on over 22% of all websites. And we see it included everywhere from customized UI kits to WordPress themes.

Why has Bootstrap been able to reach such heights? For one, it comes packed with virtually everything designers need to craft a clean, responsive UI. Plus, the fact that it continues to be actively developed and evolve means that web professionals can reliably come back to it again and again.

With a decade under its belt, this is a good time to look at the overall impact Bootstrap has had on the web. Has it been a blessing, curse, or somewhere in-between?

A Tool for Rapidly Implementing an Established Look and Feel

The biggest advantage Bootstrap provides is the ability to implement an established look and feel. Right out of the box, you have a set of UI elements and components that cover just about every use case. It doesn’t matter if you’re selling t-shirts or blogging about your favorite video games – the framework gives you a massive head start on the design.

In addition, Bootstrap is extensible. It’s built with customization in mind, making it a fairly straightforward process to change various components to meet your needs. Creating your own components is also possible.

That goes beyond individuals performing one-off tweaks for a specific project. It also extends to theme developers. They can leverage the framework to bring a familiar front-end UI to content management systems (CMS).

Yet, customization is still optional. If your goal is to design and deploy a project quickly, just installing Bootstrap (or an offshoot UI kit) and familiarizing yourself with its contents is all you need.

This level of convenience and flexibility has undoubtedly played a large role in Bootstrap’s enduring popularity.

The Bootstrapping of the Web

Bootstrap does its intended job quite well. Perhaps a little too well.

As we mentioned, the usage statistics point to nearly a quarter of all websites utilizing the framework. When a UI is so widespread, it’s bound to lead to some sameness when it comes to design.

Much like the early days of the CMS, it’s often easy for the trained eye to pick out elements of Bootstrap within a website. You start to notice the same buttons, navigation styles, and pricing tables. Even sites that don’t use it may well attempt to duplicate certain aspects of the look.

To be sure, it’s generally clean, accessible, and easy to read. While that can be considered a good thing, there’s also a bit of a downside. And it isn’t necessarily an issue with Bootstrap itself.

Rather, it’s about designers either accepting its default styles or changing them only minimally. The result is a web that is becoming increasingly homogeneous.

Inspiring a New Category of Frameworks

Perhaps it’s a testament to how well put together Bootstrap is. There aren’t a bunch of shortcomings that need fixed. Everything works as intended right from the start.

With that, some designers may not feel the need to radically change anything. One could even argue that it goes against the very point of the framework in the first place.

Unlike a lot of tools aimed at the web design community, Bootstrap has a universal appeal. There is no particular niche that it can’t fit into. That’s a key to its massive adoption rate. And it has inspired an entire category of CSS and JavaScript frameworks.

Other worthy competitors have popped up in recent years, such as Tailwind CSS. It has a similar appeal. However, it differs in that it’s more “utility” based. The various elements are all there, but depend on the designer to customize them to fit a need.

Bootstrap is unabashedly opinionated in its design. Tailwind CSS goes in the opposite direction. If anything, this provides designers with two great options, depending on their own preferences.

Design from the ground up or implement a completely polished UI – the choice is yours.

A Behind-the-Scenes Powerhouse

Maybe the most impressive aspect of Bootstrap’s 10-year rise is that it’s a completely developer-focused tool. That is, you interact with its code and view the results on the front end. That’s opposed to, say, WordPress, where users create content and install custom functionality via a back-end dashboard.

The framework is generally of interest to professionals. Thus, it relies on web designers for growth. It doesn’t have the same public-facing profile of a CMS.

That says a lot about what Bootstrap has done right over the past decade. To win over a sizeable portion of this industry is no small task. To maintain it and continue to grow for this long is even more telling.

What will the future bring? We don’t have all the answers. But, whatever happens, it’s likely Bootstrap will still play a significant role in web design for years to come.

The post Bootstrap Turns 10: A Look at Its Impact on the Web appeared first on Speckyboy Design Magazine.

The newer Bootstrap 4 is super easy to use and it even works with many free templates you can find online. But the team has made quite a few changes to BS 4 and there’s a lot of new goodies.

These snippets are some of the coolest examples to showcase what BS4 has to offer. If you want to dive into this newly updated framework, then you’ll love this collection.

1. Life’s A Beach

Take a look at this beachy concept theme created by developer Edd Yerburgh. It shows that you can have a lot of fun working with Bootstrap if you know your way around the library.

In this demo you’ll find page elements for pretty much everything. Cards, buttons, grids, you name it. And the whole thing runs on the latest version of BS4, so the aesthetics are marvelous.

Note this isn’t a theme for Bootstrap, but rather a starting point. You could think of it as a mini-theme showing what Bootstrap has to offer.

2. What’s New In BS4

Here’s another really cool example showing off the goodies in Bootstrap. In this pen you’ll find a minimalist layout with tons of little tidbits on the latest & greatest UI elements.

The code itself is pretty easy to dig through so you can find lots of examples to rework for your own sites.

But the coolest part is lower on the page with links to components and sample page elements. These are great for working into your own projects since they’re clean & easy to restyle.

Certainly a cool snippet but it’s also just a taste of what you get with Bootstrap.

3. Pricing Table

Online sales would plummet without great pricing tables. And thanks to this free snippet by Daniel Zawadzki we can all make killer responsive pricing tables on the BS4 codebase.

This design is really simple and doesn’t use too much color. It’s the best way to rework a template from scratch since you don’t have to worry about changing too much outside of the layout.

4. BS4 Grid rem Demo

Developer Nicholas Cerminara created this grid demo using Bootstrap 4 and the newer rem unit.

The code works primarily in CSS, but there is a small bit of JavaScript so you can switch between font sizes. This way you can see how the grid auto-scales to suit the needs of your fonts. Pretty cool!

And it’s even cooler since this runs natively in the Bootstrap framework. If you dig into the code on this one, you’ll learn a lot about rems in CSS.

5. NgAudio Player in BS4

The ngAudio script is used in Angular projects for audio players. It’s a popular choice for sounds on the web and this cool snippet combines the ngAudio script with a Bootstrap 4 layout.

Awesome? Totally. Useful? Depends on your project.

If you aren’t a big AngularJS user then this probably won’t interest you. But it’s an interesting merger of the BS4 frontend along with the Angular controller.

6. Profile Card

Here’s a pretty simple project that’s a great practice piece for anyone new to Bootstrap. Developer Nicola Pressi created this profile card with just HTML and CSS code, all of which is based off this Dribbble shot.

I’ve gotta say, it’s pretty darn accurate!

Granted you wouldn’t need Bootstrap to make this from scratch. But it certainly helps to save time, and it’s a great example of BS4 in action.

7. Dynamic Loading Bar

For this demo Noriyo Akita created a progress bar using some jQuery and Bootstrap code. However this one still runs with the BS4 Alpha 3 release so it’s using a slightly outdated version before the beta came out.

Still, I have to say this thing is cool. It doesn’t use the default HTML5 progress element and instead uses buttons that fill up depending on where you click.

This could work with any type of project from basic form steps to checkout pages.

8. Floating Label Fields

It seems like floating labels have quickly become the hottest trend on the modern web. These often save space in your forms and they animate around each input field once the user starts typing.

Have a look at this example coded by Anton Staroverov for a demo running on Bootstrap. It comes with all the typical behaviors you’d expect of floating labels, but with the added benefit of Bootstrap’s awesome framework.

9. BS4 Starter Template

Looking for a simple way to dive into Bootstrap & start playing around? Then check out this starter template and see what you think.

It’s super short and really basic. However, it’s probably the best template you’ll find offering clean BS4 code and very few customizations. That means what you see is mostly the default BS4 style. Cool right?

10. Navbar With Dropdowns

For something a little more complex have a gander at these awesome dropdowns coded with Bootstrap 4. Developer Paweł Wojtas is using some jQuery along with custom animations to create menus that drop into view with style.

Plus the navbar itself stays fixed while you scroll, so the dropdowns are easy to access from anywhere.

This can make a fantastic template if you aren’t sure where to start with your next Bootstrap project.

In fact, the same can be said for all of these superb BS4 code snippets!

The post 10 Super-Useful Bootstrap 4 Code Snippets appeared first on Speckyboy Design Magazine.

But there will be times when the bundled components are not enough for your needs. That is where this article comes in. We have a collection of plugins, addons, and components that will allow you to extend Bootstrap further.

Rather than group the extensions and components into relevant categories, as we usually would, we have instead opted to create an A-Z listing, which should make it much easier for you to find the particular addon you are looking for.

Everything you could need is included below, from buttons, breadcrumbs, and calendars, to tree menus, video players, and WYSIWYG editors.

Accessibility

Accessibility Plugin – This plugin adds accessibility mark-up to the default components of Bootstrap. Components include Alert, Tooltip, Popover, Modal Dialog, Dropdown Menu, Tab Panel, Collapse, and Carousel.

Breadcrumbs

Bootstrap-Breadcrumb – A Bootstrap JavaScript plugin that allows you to programmatically manipulate breadcrumb navigation.

Calendar

Bootstrap-Calendar – A Full view calendar based on Bootstrap.

Carousel

Bootstrap Modal Carousel – A collection of plugins for displaying a carousel in fullscreen modal window.

Checkbox

prettyCheckable – A jQuery plugin for replacing the default checkboxes and radio inputs.

Color Picker

Simple Color Picker – A very simple and lightweight (200 lines of JavaScript and 100 lines of CSS) jQuery color picker for Bootstrap.

Combobox

Bootstrap Combobox – A combobox plugin that integrates well with Bootstrap.

Contact Form

Bootstrap-Contact – A simple PHP contact form using Bootstrap and the jQuery validation plugin.

jQuery Gridform – A jQuery plugin for creating complex table-based forms with Bootstrap.

Datepicker

Datepicker – A plugin for adding a date picker field to any element.

Date Range Picker – This date range picker component creates a drop-down from which you can select a range of dates.

ClockPicker – A unique clock-style timepicker for Bootstrap.

Dialog Boxes & Alerts

Bootbox.js – A small JS library that allows you to create programmatic dialog boxes using Bootstrap’s modals.

Bootstrap Prompts – An plugin to replace the alert(), prompt(),confirm() notifications on the browser when using Twitter Bootstrap with modals.

Bootstrap Confirmation – A plugin that replaces popovers with confirmation dialogs.

File Upload

jQuery File Upload – A file upload widget that features multiple file selection, drag & drop, progress bars, validation and preview images.

Form Validation

BootstrapValidator – A jQuery plugin for vaildating forms within Bootstrap.

jqBootstrapValidation – Another jQuery validation framework for Bootstrap forms.

Validator – A simple and user-friendly form validator plugin for Bootstrap.

HTML Tables

Tablecloth.js – Building off Bootstrap, this is is a jQuery plugin that helps you easily style HTML tables.

Navigable Table – A Bootstrap plugin for smooth navigation across table inputs.

Image Gallery

Image Gallery – This plugin shows images and videos in the modal dialog of the Bootstrap. It features swipe, mouse & keyboard navigation, transition effects, fullscreen support, and on-demand content loading.

In-Place Editing

X-editable – A library that allows you to create editable elements on your Bootstrap page.

Layout Grid

jQDrawBootstrapGrid – A simple jQuery plugin that draws grid columns to a Bootstrap enabled layout.

Magnify

Magnify – A JS plugin for adding a magnifying glass to images on mouseover.

Modal Windows

Bootstrap Modal – This plugin extends Bootstrap’s native modals to provide additional functionality (responsive, stackable, Ajax…).

Bootstrap Scroll Modal – A modification of the Bootstrap Modal plugin that allows for unlimited modal height with full page scrolling.

Navigation

Contextmenu – A context menu plugin for Bootstrap.

Pagination

bootpag – A jQuery plugin helps you create dynamic pagination with Bootstrap.

Progress Bars

Bootstrap Progressbar – A multi-color progress bar component for Bootstrap.

Ratings

Bootstrap Star Rating – A jQuery star rating plugin for Bootstrap that supports fractional star fill and RTL input support.

Social Buttons

Social Buttons for Bootstrap – A pure CSS social sign-in button library.

Selects

bselect – A plugin for styling the <select> element in Bootstrap.

Bootstrap Multiselect – A jQuery-based plugin for using select inputs with the multiple attributes.

MultiSuggest – A useful plugin that extends the default Bootstrap Typeahead component.

Tags

Bootstrap Tags – A jQuery plugin for adding tagging functionality Bootstrap.

Tokenfield – An advanced tagging jQuery plugin for Bootstrap with its focus on keyboard navigation and copy/paste support.

Table of Contents

Tocify – A jQuery plugin that dynamically generates a table of contents. It can be optionally styled with Bootstrap or jQueryUI Themeroller.

Tabs

Tabcordion.js – A simple jQuery plugin that transforms a set of Bootstrap tabs into a Bootstrap accordion.

tabcollapse – A plugin that switches the Bootstrap Tabs component to collapse for small screens.

Tree Menu

EasyTree – A very basic tree-view jQuery plugin for Bootstrap.

BootstrapTreeNav – A Javascript plugin for Bootstrap for creating tree navigation menus.

Website Tour

Bootstrap Tour – A quick and easy way to build your product tours with Bootstrap Popovers.

WYSIWYG

bootstrap-wysihtml5 – A Javascript plugin that makes it easy to create simple WYSIWYG editors.

Summernote – A simple WYSIWYG editor for Bootstrap.

The post 45 Plugins, Addons & Components for the Bootstrap Framework appeared first on Speckyboy Design Magazine.

You specify which HTML element for Masonry to do its magic on, and the children of that element are all positioned the way a mason positions stones.

Now, while Masonry is absolutely fantastic, it is lacking a few features. One of the biggest is the fact that it is not possible to dynamically filter elements by class name. You can’t say, “Only show elements with class ‘show'”.

Now, imagine a plugin that has that, and some more mixed in. That plugin is called Isotope. Isotope is essentially Masonry, but with some nifty features thrown in, such as filtering and custom layout modes.

In this post, I will show you how to use Isotope to create a magical layout of your own, and how to dynamically filter which elements are displayed.

You’ll learn to:

• Apply isotope to an element correctly
• Make it responsive
• Be able to dynamically filter an element with more than one filter
• Use hash history to save the current state

Before you begin, download Bootstrap, because we’ll use that to make a navigation bar that will control the stuff on the page.

Step 1: The HTML

Before we can use Isotope, we need to create acontainer div that will hold some child elements.

<section id="main" class="container">

</section>

Now, just add a bunch of divs with different classes and text.

<section id="main" class="container">
    <div class="box cat1 cat2">
    Odd future 3 wolf moon twee, cliche marfa post-ironic pop-up master cleanse next level pickled gentrify. Direct trade small batch YOLO, pitchfork lomo PBR high life intelligentsia readymade letterpress flexitarian tousled. Direct trade pitchfork hoodie twee, yr pour-over Austin marfa 90's flexitarian food truck mlkshk helvetica +1 trust fund.
    </div>

    <div class="box cat3">
    Bushwick marfa craft beer, wes anderson you probably haven't heard of them locavore tousled carles pork belly synth DIY blog cray. Farm-to-table craft beer typewriter, polaroid keytar intelligentsia cliche mcsweeney's ethnic mustache cred DIY. Typewriter semiotics raw denim, organic vinyl sustainable meggings beard carles banh mi you probably haven't heard of them. Vinyl salvia brooklyn, four loko biodiesel meh scenester lomo.
    </div>

    <div class="box cat1">
    Try-hard thundercats food truck, shoreditch mlkshk polaroid truffaut ugh small batch cred vice mixtape williamsburg stumptown street art. Cliche intelligentsia cred high life, trust fund meggings leggings. Blog swag banksy freegan, ethical selfies ennui cray helvetica cliche literally umami vinyl. Banh mi post-ironic mixtape, food truck PBR pickled vinyl umami.
    </div>

    <div class="box cat2">
    Dreamcatcher actually pug, bushwick occupy semiotics banjo. Sartorial pop-up PBR, etsy truffaut post-ironic marfa carles banksy helvetica. Leggings mixtape chambray gluten-free pickled cred american apparel, shoreditch church-key synth gastropub pinterest semiotics twee messenger bag.
    </div>

    <div class="box cat2 cat3">
    Odd future sriracha fixie disrupt, helvetica ugh ennui semiotics selfies. Pitchfork blog food truck art party ethical, skateboard flannel hella. Wes anderson thundercats squid four loko art party chillwave +1, leggings scenester fashion axe trust fund photo booth meggings direct trade 90's. Squid sriracha 3 wolf moon, Austin wayfarers biodiesel put a bird on it food truck try-hard street art pop-up mustache retro.
    </div>

    <div class="box cat2">
    Mustache flannel whatever blue bottle stumptown terry richardson swag scenester, retro ugh pop-up tonx ennui kogi chillwave. Craft beer skateboard tattooed cray, high life scenester marfa salvia american apparel twee pitchfork master cleanse leggings banksy four loko. You probably haven't heard of them skateboard banksy beard.
    </div>

    <div class="box cat1 cat3">
    Butcher etsy vinyl skateboard photo booth, wolf gastropub twee. Pork belly williamsburg disrupt, art party deep v mcsweeney's flannel vinyl master cleanse cliche. PBR intelligentsia vice small batch.
    </div>

    <div class="box cat3">
    Mcsweeney's freegan readymade, fingerstache pitchfork organic food truck mixtape odd future single-origin coffee PBR. Four loko selfies PBR church-key, twee vice locavore art party. Brunch blog beard direct trade, fixie readymade cosby sweater. Marfa wayfarers fixie, squid selfies hashtag trust fund cliche.
    </div>


    <div class="box cat1 cat3">
    Odd future 3 wolf moon twee, cliche marfa post-ironic pop-up master cleanse next level pickled gentrify. Direct trade small batch YOLO, pitchfork lomo PBR high life intelligentsia readymade letterpress flexitarian tousled. Direct trade pitchfork hoodie twee, yr pour-over Austin marfa 90's flexitarian food truck mlkshk helvetica +1 trust fund.
    </div>

    <div class="box cat2">
    Bushwick marfa craft beer, wes anderson you probably haven't heard of them locavore tousled carles pork belly synth DIY blog cray. Farm-to-table craft beer typewriter, polaroid keytar intelligentsia cliche mcsweeney's ethnic mustache cred DIY. Typewriter semiotics raw denim, organic vinyl sustainable meggings beard carles banh mi you probably haven't heard of them. Vinyl salvia brooklyn, four loko biodiesel meh scenester lomo.
    </div>

    <div class="box cat3">
    Try-hard thundercats food truck, shoreditch mlkshk polaroid truffaut ugh small batch cred vice mixtape williamsburg stumptown street art. Cliche intelligentsia cred high life, trust fund meggings leggings. Blog swag banksy freegan, ethical selfies ennui cray helvetica cliche literally umami vinyl. Banh mi post-ironic mixtape, food truck PBR pickled vinyl umami.
    </div>

    <div class="box cat1">
    Dreamcatcher actually pug, bushwick occupy semiotics banjo. Sartorial pop-up PBR, etsy truffaut post-ironic marfa carles banksy helvetica. Leggings mixtape chambray gluten-free pickled cred american apparel, shoreditch church-key synth gastropub pinterest semiotics twee messenger bag.
    </div>

    <div class="box cat2 cat1">
    Odd future sriracha fixie disrupt, helvetica ugh ennui semiotics selfies. Pitchfork blog food truck art party ethical, skateboard flannel hella. Wes anderson thundercats squid four loko art party chillwave +1, leggings scenester fashion axe trust fund photo booth meggings direct trade 90's. Squid sriracha 3 wolf moon, Austin wayfarers biodiesel put a bird on it food truck try-hard street art pop-up mustache retro.
    </div>

    <div class="box cat3">
    Mustache flannel whatever blue bottle stumptown terry richardson swag scenester, retro ugh pop-up tonx ennui kogi chillwave. Craft beer skateboard tattooed cray, high life scenester marfa salvia american apparel twee pitchfork master cleanse leggings banksy four loko. You probably haven't heard of them skateboard banksy beard.
    </div>

    <div class="box cat2 cat3">
    Butcher etsy vinyl skateboard photo booth, wolf gastropub twee. Pork belly williamsburg disrupt, art party deep v mcsweeney's flannel vinyl master cleanse cliche. PBR intelligentsia vice small batch.
    </div>

    <div class="box cat1">
    Mcsweeney's freegan readymade, fingerstache pitchfork organic food truck mixtape odd future single-origin coffee PBR. Four loko selfies PBR church-key, twee vice locavore art party. Brunch blog beard direct trade, fixie readymade cosby sweater. Marfa wayfarers fixie, squid selfies hashtag trust fund cliche.
    </div>

    <div class="box cat2 cat1">
    Odd future 3 wolf moon twee, cliche marfa post-ironic pop-up master cleanse next level pickled gentrify. Direct trade small batch YOLO, pitchfork lomo PBR high life intelligentsia readymade letterpress flexitarian tousled. Direct trade pitchfork hoodie twee, yr pour-over Austin marfa 90's flexitarian food truck mlkshk helvetica +1 trust fund.
    </div>

    <div class="box cat2">
    Bushwick marfa craft beer, wes anderson you probably haven't heard of them locavore tousled carles pork belly synth DIY blog cray. Farm-to-table craft beer typewriter, polaroid keytar intelligentsia cliche mcsweeney's ethnic mustache cred DIY. Typewriter semiotics raw denim, organic vinyl sustainable meggings beard carles banh mi you probably haven't heard of them. Vinyl salvia brooklyn, four loko biodiesel meh scenester lomo.
    </div>

    <div class="box cat1">
    Try-hard thundercats food truck, shoreditch mlkshk polaroid truffaut ugh small batch cred vice mixtape williamsburg stumptown street art. Cliche intelligentsia cred high life, trust fund meggings leggings. Blog swag banksy freegan, ethical selfies ennui cray helvetica cliche literally umami vinyl. Banh mi post-ironic mixtape, food truck PBR pickled vinyl umami.
    </div>

    <div class="box cat3">
    Dreamcatcher actually pug, bushwick occupy semiotics banjo. Sartorial pop-up PBR, etsy truffaut post-ironic marfa carles banksy helvetica. Leggings mixtape chambray gluten-free pickled cred american apparel, shoreditch church-key synth gastropub pinterest semiotics twee messenger bag.
    </div>

    <div class="box cat1 cat3">
    Odd future sriracha fixie disrupt, helvetica ugh ennui semiotics selfies. Pitchfork blog food truck art party ethical, skateboard flannel hella. Wes anderson thundercats squid four loko art party chillwave +1, leggings scenester fashion axe trust fund photo booth meggings direct trade 90's. Squid sriracha 3 wolf moon, Austin wayfarers biodiesel put a bird on it food truck try-hard street art pop-up mustache retro.
    </div>

    <div class="box cat3">
    Mustache flannel whatever blue bottle stumptown terry richardson swag scenester, retro ugh pop-up tonx ennui kogi chillwave. Craft beer skateboard tattooed cray, high life scenester marfa salvia american apparel twee pitchfork master cleanse leggings banksy four loko. You probably haven't heard of them skateboard banksy beard.
    </div>

    <div class="box cat1 cat3">
    Butcher etsy vinyl skateboard photo booth, wolf gastropub twee. Pork belly williamsburg disrupt, art party deep v mcsweeney's flannel vinyl master cleanse cliche. PBR intelligentsia vice small batch.
    </div>

    <div class="box cat3">
    Mcsweeney's freegan readymade, fingerstache pitchfork organic food truck mixtape odd future single-origin coffee PBR. Four loko selfies PBR church-key, twee vice locavore art party. Brunch blog beard direct trade, fixie readymade cosby sweater. Marfa wayfarers fixie, squid selfies hashtag trust fund cliche.
    </div>

</section>

Now, you have a big page full of text. Each div has a class of box so that we can style each one appropriately. Now, look at the other classes – either cat1, cat2, or cat3. These are the classes based on which we’ll be filtering.

Let’s add the navigation bar which will contain the links that filter the content.

<nav class="navbar navbar-default" role="navigation">
        <div class="container group">

            <a class="navbar-brand" href="#">Learning to use Isotope.js</a>
            
            <ul class="nav navbar-nav navbar-left" id="controls">
                <li><a href="#cat1">Category 1</a></li>
                <li><a href="#cat2">Category 2</a></li>
                <li><a href="#cat3">Category 3</a></li>
            </ul>
        </div>
</nav>

<!-- the boxes are after this -->

This is just a typical Bootstrap navbar, take a look at the bootstrap page for more info.

At this point, we have all the HTML necessary – now, we can make it look pretty.

Step 2: The CSS

The first thing you want to do, always, before you start writing CSS, is include a CSS reset. I personally like to use Eric Meyer’s fantastic CSS reset, but it’s up to you what you would like to use.

Next, we can make the typography look a bit better.

body {
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

While the text looks fine, the boxes themselves… don’t even really look like boxes. Let’s make them look good as well.

.box {
/* if not using border-box 
width: 218px; 
*/
width: 250px;
background: #ffffff;
border: 1px solid #999;
padding: 15px;
margin: 10px;
float: left;

-webkit-border-radius: 5px;
border-radius: 5px;

-webkit-box-shadow: 0px 0px 5px 1px #aaa;
box-shadow: 0px 0px 5px 1px #aaa;
}

We want the boxes to be 250px wide, so that’s what we set. Keep in mind, however, that Bootstrap applies box-sizing: border-box by default – this allows everything to work a bit more intuitively.

I write width: 250px and that’s how wide the box is. However, in case you don’t want to use that property, use width: 218px instead. Check out CSS-Tricks’ explanation for more details.

The page seems a little cramped; let’s shift the boxes down just a bit.

#main {
margin-top: 10px;
}

The last thing we need to do with the CSS is add some styles to the isotope boxes so that they animate properly.

.isotope-item {
  z-index: 2;
}
 
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
 
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
 
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}
 
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

Now, the page should look good.

Step 3: The JavaScript

Now, the fun begins.

$(document).ready(function(){

//substr so there isn't a '#'
var hashFilter = location.hash.substr(1);

var mainEl = $('#main');
var transitionDuration = 800;
var columnWidth = 270;

mainEl.isotope({
    filter: hashFilter,
    animationEngine: 'best-available', //CSS3 if browser supports it, jQuery otherwise
    animationOptions: {
        duration: transitionDuration
    },
    containerStyle: {
        position: 'relative',
        overflow: 'visible'
    },
    masonry: {
        columnWidth: columnWidth
    }
});     

Let me explain, step by step. hashFilter takes the hash and gets rid of the ‘#‘ character.

For example, if the hash was #.cat1, hashFilter would be .cat1. If the hash is just ‘#‘ or even just an empty string, ”, hashFilter would also be an empty string. If the filter option receives an empty string, '', as the value, then Isotope just displays everything.

mainEl is the element that we want to isotope. transitionDuration is, unsurprisingly, the duration of the animation when the boxes are dynamically filtered. columnWidth is the width of each column.

The next code block actually isotopes the element. It filters it by the hash, since we will implement hash history functionality. animationEngine is set to best-available, which means that isotope uses CSS3 to animate the boxes if the browser supports it, and jQuery if the browser does not support CSS3.

Isotope knows what the browser supports or doesn’t support by using modernizr. In animationOptions, we say that the duration is transitionDuration. The defaults in containerStyle are position: relative and overflow: hidden, but we tell overflow to be visible, because if the overflow is hidden, that makes for some ugly-looking animations where boxes pop out of nowhere.

Lastly, under “masonry”, we say that the columnWidth is columnWidth.

Next, we create a function that resizes the “isotoped” element and the navbar so that they are both centered on the page.

function setSizes(){
    var availableSpace = $(window).width();
    var potentialColumns = availableSpace/columnWidth;
    potentialColumns = Math.floor(potentialColumns);
    
    var newWidth = potentialColumns * columnWidth;
    $('.container').width(newWidth);
}

setSizes();

Here, availableSpace is the width of the window, because that’s the only thing that might constrain the size of the main element. potentialColumns is simply the amount of columns that would be able to fit.

However, we can’t have a decimal number of columns, so we’re going to have to round down. That’s what Math.floor does. Rounding up would not work since then we’d have more columns than actually fit. newWidth takes the number of columns and multiplies it by the width of each column to get the total width.

Lastly, we give $('.container') the new width. Both the navigation bar and the main container have a class of .container so we can modify them both together. Lastly, we actually call the setSizes() function so that when the page loads, everything has the correct width.

Before we continue, I would like for you to try something. Resize your browser so that only 3 columns fit. Now, quickly make your browser wider to the point where 4 columns would be able to fit.

Notice how there are still only 3 columns? This is because mainEl, the “isotoped” container uses CSS3 transitions to smoothly change its width, and when you finish moving your mouse to make the browser window wider, the animation hasn’t finished yet, so Isotope thinks that the mainEl isn’t wide enough for there to be another column.

function layoutTimer(){

        setTimeout(function(){
        mainEl.isotope('reLayout');
    }, transitionDuration);
    
}

layoutTimer();

This code waits the duration of transitionDuration, and then executes isotope’s reLayout function. By waiting the duration of the animation of the main container resizing, this guarantees that the element will have completed the animation by the time isotope “reLayouts” again.

However, the code snippet above is kind of useless the way it is now. This snippet needs to happen every time the window is resized.

$(window).resize(function(){
    
    setSizes();
        
    layoutTimer();
        
});

I also added setSizes() into there so that that works when the window is resized.

At this point, everything works except for the part that actually filters the content – clicking the links doesn’t do anything right now.

We’ll make multiple filtering work by using an array to store what mainEl is currently being filtered by. One possibility that the array might look like is “[“.cat1”, “.cat2”, “.cat3″]”.

We’ll store this array in the hash every time a link is clicked, and will withdraw the value from the hash whenever the page is loaded.

When the page loads, we need to create an array based on what the hash is.

var currentCats = hashFilter.split(".");

Remember the hashFilter variable we used above to filter the mainEl when the page loads? Here, we’re taking that and converting it into array. Basically, every time the browser sees a “.” inside the hashFilter string, it creates a new array element at the point.

For example, if hashFilter was .cat1.cat2, the split() function would create an array that looks like this: “[“”, “cat1”, “cat2″]”. There are two things that are wrong with this: there’s an empty element at the beginning, and the other elements inside the array have no dots. Fortunately, both of these issues are easy to fix.

var currentCats = hashFilter.split(".");
//splice because the first element will be just an empty '', so we get rid of it
currentCats.splice(0, 1);

for (current in currentCats){
    currentCat = currentCats[current];
    
    //Since it splices based on the '.', each '.' disappears, so we need to re-add it
    currentCats[current] = '.' + currentCat;

}

In order to get rid of the first empty element, we use the split function. The two parameters are position, length. In this case, we are starting to delete stuff at position 0, and we only delete 1 thing.

The next thing is a for loop. Basically, it goes through each element inside the currentCats array where current is the current position in the for loop. currentCat is the text at the “current” position, for example “cat1”.

Then, we take the current text, add a dot to the beginning and put it back into the array at the same position. This way, an array that looks like “[“cat1”, “cat2”, “cat3″]” is converted into “[“.cat1”, “.cat2”, “.cat3″]”.

The last thing we need to do is handle clicks on the links in the navbar.

$('#controls a').click(function(){
    //Change '#cat1' into '.cat1'
    var catClass = '.'+$(this).attr('href').substr(1);
        
    //If the current category is not in the array, add it and make the link active
    if($.inArray(catClass, currentCats)==-1){ 
        currentCats.push(catClass);
        $(this).parent().addClass('active');
    }
    //If the current category is in the array, get rid of it and remove the 'active' class
    else {
        //position of the current category in the array
        position = $.inArray(catClass, currentCats); 
        currentCats.splice(position,1);
        $(this).parent().removeClass('active');
    }
});

Whenever a link inside the “controls” is clicked, catClass takes its href attribute, for example #cat1, and turns it into .cat1 by getting rid of the first character, #, and prepending a dot.

Next, we use jQuery’s inArray function to check whether or not catClass is inside the currentCats array. If the inArray function returns a value of “-1”, that means that catClass is not inside the array.

Otherwise, inArray returns the position of the element inside the array. If currentClass is not inside the array, we add it by using the push function, and we take the parent li of the link and make it active.

If it is in the array, we remove it by using the splice function and we remove the active class from its parent.

Now, we need to actually filter mainEl.

$('#controls a').click(function(){
    //Change '#cat1' into '.cat1'
    var catClass = '.'+$(this).attr('href').substr(1);
        
    //If the current category is not in the array, add it and make the link active
    if($.inArray(catClass, currentCats)==-1){ 
        currentCats.push(catClass);
        $(this).parent().addClass('active');
    }
    //If the current category is in the array, get rid of it and remove the 'active' class
    else {
        //position of the current category in the array
        position = $.inArray(catClass, currentCats); 
        currentCats.splice(position,1);
        $(this).parent().removeClass('active');
    }
        
    var newFilter = "";
        
    //generate a 'newFilter' string that will be saved into the hash
    for (current in currentCats){
        currentCat = currentCats[current];
        newFilter = newFilter + currentCat;
    }
        
    location.hash = newFilter;
        
    mainEl.isotope({
        filter: newFilter
    });
        
    return false;
        
});

The last part creates a string, “newFilter“, and appends each element of the array onto it. It then sets “newFilter” as the hash of the page, and filters the “mainEl” based on that. Then, it returns false so that the browser doesn’t actually follow the link.

Finished!

Congratulations; you have reached the end of this tutorial! Hopefully, this helped you learn how to use isotope. If you have any questions or comments, please post them below :)

The post Dynamically Filtering Layouts with Isotope & Bootstrap appeared first on Speckyboy Design Magazine.