Skip to content

nbrignol/responsive-class

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ResponsiveClass

Quick start

  1. Add special class-* attributes to any of your HTML element.
  2. Associate your formats to a custom media-query or use the built-in formats.
  3. On start and on each window's resize, ResponsiveClass will apply the class of the matched formats.
  4. Enjoy.

In your HTML :

<article class="rc" class-small="firstVariant" class-medium="secondVariant" class-large="thirdVariant"> ... </article>

In your javascript :

var rc = RC.make();

More infos

  • You must add the trigger "rc" class to let the lib know that you want to use it on this element.
  • You can redefine all/some/none of the built-in formats (small, medium, large) (see below)
  • Your media queries can overlap. The classes are stacked.
  • You can define multiple classes in the class-* attributes.

Config

You can configure lots of things by passing an object to the "make" method:

  • registerSelector is the trigger selector for each element. Default is '.rc'
  • attributeNamePrefix is the prefix used for special attribute. Default is 'class-'
  • onResizeTimeOut is the time (in ms) wait before refreshing the classes after each resize. Default is 100
  • showLog control the output in console. Default is false
  • withDefaultFormats initiate the instance with default formats and media-queries (see below). Default is true
  • autoStart delay or not the first start. Useful when you want to redifine formats before starting the lib (you must call the "start" method when you are ready). Default is true.

Redifining formats and media-queries

You can define as many formats as you want by using the setClassFormat method. By default, we define these 3 formats for you :

var rc = RC.make();

rc.setClassFormat("small", '(max-width: 600px)');

rc.setClassFormat("medium", '(min-width: 601px) and (max-width: 1100px)');

rc.setClassFormat("large", '(min-width: 1101px)');

rc.start();

You can define or redifine whatever formats you want.

About

No description or website provided.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages