Responsiville

What is Responsiville

Responsiville is a responsive HTML/CSS/Javascript frontend web development framework with responsive behaviour.

• It is mobile first
• It has an elastic grid system
• It has a CSS reset and typographic elements
• It provides common web components
• It is touch enabled

Responsive behaviour

This means that everything in Responsiville is aware of their responsive state. The responsive state refers to the breakpoint dimensions that the current browser window lies in at any particular moment, be it a desktop, laptop, tablet or mobile device. Each breakpoint in Responsiville has a name, so that the developers can refer to it in CSS and Javascript and define its behaviour.

Thus, the following declarations are feasible in CSS:

            /* The .element styling in the tablet breakpoint and upwards . */
            .tablet .element {
                font-size: 16px;
                padding: 5px;
            }

            /* The .element styling in the desktop breakpoint and upwards . */
            .desktop .element {
                font-size: 20px;
                padding: 10px;
            }
        

And, respectively, in Javascript:

            // Acquire the Responsiville singleton instance.
            var responsiville = Responsiville.Main.getInstance();

            // Do something when the current breakpoint changes.
            responsiville.on( 'change', function () {

                // The "this" scope refers to the responsiville instance.
                console.dir( 'The breakpoint has changed to => ' + this.currentBreakpoint.name );

            });

            // Do something when entering the tablet breakpoint.
            responsiville.on( 'enter.tablet', function () {

                // The "this" scope refers to the responsiville instance.
                console.dir( 'The breakpoint has changed to "tablet"' );

            });
        

All the Responsiville classes and modules use these breakpoints and build upon this responsiville behaviour.

Breakpoints

Responsiville defines and uses the following screen size/browser viewport breakpoints by default:

• small : 0 => 320px
• mobile : 321 => 600px
• tablet : 601 => 1023px
• laptop : 1024 => 1280px
• desktop : 1281 => 1440px
• large : 1441 => 1600px
• xlarge : 1601 => infinity

These choices are based on Mydevice.io, Viewport Sizes and Device Metrics.

Mobile first

Responsiville is mobile first. This means that the framework's styles cascade from the smallest screen sizes to the bigger ones and that the developer styles should also cascade in the same way for consistency. For example:

            /* The .element has default a font size of 16px starting from the smallest of screens. */
            .small .element {
                font-size: 16px;
            }

            /* The .element gets a font size of 16px for screens of 601px (tablet breakpoint) and upwards. */
            .tablet .element {
                font-size: 20px;
            }

            /* The .element gets a font size of 24px for screens of 1281px (desktop breakpoint) and upwards. */
            .desktop .element {
                font-size: 24px;
            }
        

Browser support

• FF
• Chrome
• Opera
• Safari
• Android3+
• IE9+

External dependencies

The minimum set of external Javascript library depedencies.

• jQuery for obvious reasons
• Velocity.js for better animations
• Hammer.js for mobile touch events