All you have to do is drop Responsivr into your project, and everything will be styled automatically. There is a minimal amount of classes to learn.
Responsivr comes packed with features, including styling for most elements, a grid, and some components, all in just 5kb.
The styles that come with Responsivr are clean and modern, dropping it into your project will give you a headstart in design.
You can install Responsivr in multiple ways, but it's as simple as installing to your project using
npm.
$ npm install responsivrHere is a guide of all the things styled by Responsivr, how to use the grid, and how to use some components.
Responsivr styles based on
rem units. All
rem units are converted to base 10, so
1rem is equal to
10px. By default, all headings, paragraphs, and code use system fonts, using the most modern one available on a user's
operating system.
Responsivr comes with a minimal, 960px, 12 column grid, with intuitive class names.
Responsivr styles buttons with two main styles, filled and outlined. These styles can easily be overwritten, and are there to provide a base for buttons.
Responsivr styles all common form elements with basic, clean styles.
Responsivr comes with a simple, customizable navigation component.
All items have a class of
nav-item, and an optional logo with the class of
nav-logo can be added. Combined with utilities (below) such as
fixed,
left,
right, or
center, a navigation can be customized to your needs.
Responsivr comes with a minimal, 960px, 12 column grid, with intuitive class names.
Responsivr provides some basic utility classes to speed up development.
text-center - center align textcenter - align items within element in the centerhorizontal-align - horizontally align an elementvertical-align - vertical align an elementleft - align children to the leftright - align children to the rightfull-screen - make element full screenfixed - make element full width and fixedhide-phone - hide elements on a phonehide-tablet - hide elements on a tablet