Matadora: A fun-sized CSS framework for responsivity

1 minute read

Got a simple project (maybe a single-page or proof-of-concept), a working knowledge of CSS and no time to waste recreating the same old classes for responsivity? Meet Matadora.

Matadora for the win

Olee!

Matadora is a simple and very minimalistic CSS library for quick, responsive front-end development built by the amazing Lou Sousa. Being very clean, you can start using it right now in your project to make it work like a charm on mobile devices without needing to write the very plain old boring media-queries. (Really, why do these need to be so cumbersome?)

Installing it is as simple as installing any package via Bower. Simply do bower install matadora and you’re all set!

How do i use it?

Using Matadora is as simple as it gets. As documented in the project home page, you simply need to use .mtd-row to declare a row somewhere in your document. Then, you are ready to begin using Matadora’s awesome, super succint syntax to say whether a element should be visible and how much space it should in phones, tablets and desktops. For example, if you wanted an element to take 50% of the screen on laptops and desktops but be 100% wide in smartphone screens, all you have to do is add to it the classes .lg-050 and .lg-100! Check the project page for more examples.

Is Matadora it production-ready?

Sure it is! We at Bloom have been using it in many websites for some time now, and that includes our own page! You are free to use it however you want. If you find any problems with the library, or have any suggestions or complaints, make sure to create a issue or a pull request on the project page!

Why not simply using Bootstrap?

You seriously don’t need Bootstrap for every damn single website. Really, websites made with Bootstrap almost always look very similar, and not very creative at all. Give Matadora a try now, lets build a better looking and more diverse web!