Documentation

Documentation

Technical Integration & Compatibility

The script is built with jQuery and has been updated to maintain full compatibility with modern versions (jQuery 3.x+).

Key Specifications & Requirements

  • Modern jQuery Support: Native compatibility with jQuery version 3.0 and higher out of the box.
  • Legacy Version Support: Compatible with older jQuery releases (1.x / 2.x) by including the official jQuery Migrate plugin to bridge deprecated methods.

Add jQuery Script

Step 1: Include the jQuery Library

To begin, include the jQuery library in your document. The script requires a modern release (jQuery 3.x or higher) to function properly.

Add the following <script> tag inside your HTML <head> section or just before the closing </body> tag:

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Add the script reference

Step 2: Include the Responsify Script

Next, include the responsify.js script in your HTML file. This file contains the core functions required to handle the automated responsive resizing logic.

Add the following tag directly after your jQuery inclusion:

HTML

<script src="../responsify.js"></script>

Init the script

Step 3: Initialize and Configure the Script

The final step is to initialize the script and define your configuration settings.

Add the following initialization block after your script includes. This default configuration works well with most responsive layouts:

HTML

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('body').responsify({
      max_width: {
        lg: 1200,
        md: 979,
        sm: 768,
        xs: 480
      },
      text_scaling: {
        lg: 1200,
        md: 979,
        sm: 768,
        xs: 480
      },
      conserve_columns: 0,
      background_size: '100'
    });
  });
</script>

Configuration Options Breakdown

  • max_width: Defines the maximum width breakpoints (in pixels) for large (lg), medium (md), small (sm), and extra-small (xs) viewports.
  • text_scaling: Sets the scaling thresholds (in pixels) to maintain proportional typography across screen sizes.
  • conserve_columns: Toggle (1 to enable, 0 to disable) to prevent multi-column layouts from collapsing into single columns on smaller screens.
  • background_size: Controls the default sizing percentage for background assets.

Initialization Options

Max Width

The large max-width will be the one used when rendering the site full width. If your site is smaller than this defined width, it will be resized to full width. Therefore any images and background will adjust to the current max-width and above. The smaller widths are used for other devices as computer such as a tablet and a phone. You will have 4 choices of grid size. Those are required to be set for the initialization.

Text Scaling

The text scaling works just like the max-width section. This option is used to resize any font there is to a smaller ratio for the width defined within this setting. The ratio are 100%, 75%, 50% and 25%. The fonts are resizing accordingly as they appear when first rendered. Their size are taken from the CSS.

Conserve Columns

The conserve columns feature comes useful when you want to keep the current width of your columns and avoid adjusting them with percentages. When you set it to 0, the columns or section within the desktop and tablet view won’t be resized. However the phone view will resize those to 100% of the screen. When set to 1, all columns of the grid except the inline elements will have a defined width percentage.

Background Size

This option works with 2 mode. The first mode which is 100 for 100 % will redefine all the background images to fit in their appropriate boxes depending of their container proportion or parent container. The second option which is original will return the default CSS value for background without resizing anything. This can be useful when we are working with a site using many repeating patterns.