Skip to main content

The Cheeky Monkey Media Blog

A few words from the apes, monkeys, and various primates that make up the Cheeky Monkey Super Squad.

Working with Bootstrap's new responsive utility classes

Working with Bootstrap’s New Responsive Utility Classes

As an html/css purist at heart, my school of thought has always been having your representational layer separated from your markup. Sites like CSS Zen Garden taught us that you should never have to mix your design styles inside your markup with the idea being that well structured html will never have to change even on a complete re-design.

Bootstrap

2 years ago, I was forced to use a css framework for one of my project. Being the control freak that I am, I was reluctant to try new things and bloat my beautiful handmade custom css.

It took me a little over a year for me to embrace using a css framework and rely on existing css to style my markup, but I’ve learned so much by doing so from people a lot smaller than I am. And I’ve reduced more than half the need to write custom css as well as lowered production time.

Disclaimer: Some of these new classes will only work on the current alpha-2 release of bootstrap 4 and might change in the future since it’s still in heavy development. Use at your own risk.

Responsive Floats

Responsive floats are great for header elements among other things. I often come across designs that have search box right aligned on desktop, but are left aligned on tablet. Or main navigation that are floated to the left but move to the right and collapse on mobile.

Responsive floats works by using the pull-<breakpoint>-<direction> pattern.

<header>

  <form class=”pull-xs-left pull-md-right”>

     <input type="text" placeholder="Search">

  </form>

</header>

The above code will float the search bar left until the screen width reaches the “md” breakpoint, floating it to the right.

In conjunction with other components from the framework like navbar, spacing and setting your own variables in sass, we can easily come very close to the original design mockups without writing a single line of custom css. Like I said earlier, it took me a while to develop using these concepts but it opened my mind to write my code in a more modular fashion and reuse these components on every site I work on.

Responsive Text Alignments

This one I use often for content. On Desktop, the design’s text is aligned center inside articles but on mobile this makes for a weird looking effect and we’de much rather have it left aligned.

Bootstrap v4 introduces new responsive text alignment classes like this:

<article class=”text-md-center”>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit ex, semper quis eros sed,</p>

</article>

This will leave the text at its default left alignment on smaller breakpoints, but will align the text center on the medium breakpoint and up, removing the need to write a media query in your css.

If you prefer to have your text centered on all breakpoints you simply need to use text-xs-center

Conclusion

This is just the tip of the iceberg for new features that ships with the Bootstrap 4. Some other things that I’m really loving is the new card component and contextual colors and backgrounds creating custom ones is as easy as using the “bg-variant($parent, $color)” mixin.

If you haven’t already, I urge you to look at the documentation , but whatever css framework you chose to use, make sure you really dig in the documentation and use all the tools that are available to you. The investment will save you time in the long run.

 

Web Development

Would you like to know more about what we do?

View Our Services

Graphic Design Cheeky Monkey

Have a look at some our client work

View Our Work

Cheeky Monkey Discovery

Learn more about Cheeky Monkey Media

About Us

Comments