Git Product home page Git Product logo

rrssb-plus's Introduction

Ridiculously Responsive Social Sharing Buttons Plus

Social sharing buttons that you can drop into any website with attractive SVG-based icons, small download, and browser compatibility. RRSSB+ automatically adjusts to different screen sizes by tweaking sizes, splitting buttons evenly onto multiple rows and hiding the labels.

The library offers consistently styled buttons for all sites. No 3rd-party scripts (such as from Facebook), with the inherent overheads and different button designs.

Two rows of buttons with prefix and label   Small buttons   Vertical align

Developed by AlbanyWeb. Based on RRSSB "Ridiculously Responsive Social Sharing Buttons" by KNI.

Installation instructions

If you use the Drupal CMS then you can automatically install this library with a module — see demo.

Otherwise, you can examine the source of the demo page to see how to do it. Search for <div class="rrssb"> to find the HTML for the buttons. You need to load rrssb.min.js and rrssb.css. To configure this library, make a call to rrssbConfigAll.

Main changes from RRSSB

  • Allow buttons to split onto multiple rows, ensuring the rows stay even.
  • Buttons size automatically stays usable and clear. As a rule we don't want huge buttons on a huge screen or tiny ones on a tiny screen, which you can get with RRSSB. RRSSB+ offers a configurable default size, and a configurable percentage allowable shrink.
  • Whitespace around icons and text is consistent at all sizes. With RRSSB, the spacing varies with button size. At "normal width" there is lots of space, hence smaller fonts and icons that are harder to read. Grow the screen, and you see the "large format", and it's different — and we think a better balance. By default, RRSSB is similar to the large format, but with slightly larger icons.
  • Uniform responsiveness applied simultaneously to all buttons. In contrast RRSSB hides the labels one-by-one. That's not an approach we are familiar with on mainstream websites, and we feel it looks odd, as if there is a bug.
  • Support button prefix text such as "Share this page". The RRSSB demo page has text like that although not responsive, and hard-coded into the page rather than being part of the library.
  • Configurable settings to control appearance.

Performance changes

  • Use background image instead of inline SVG. Gives smaller page sizes, reduced server load and smaller caches.
  • Smaller JS and CSS files for faster download.
  • Simpler script executes a lot less lines of code for smoother resizing.
  • Reduced DOM size: store working data as data() not attr().

Compatibility changes

  • Compatible with older releases of jQuery - remove specific requirement for jQuery 1.10
  • Designed for integration into CMS such as Drupal.

rrssb-plus's People

Contributors

dbox avatar joshuatuscan avatar adamps avatar connorwyatt avatar iancaunce avatar andrewicarlson avatar odbol avatar scottaohara avatar pascalwa avatar mysticaltech avatar visnu avatar rynaro avatar cerdic avatar hugronaphor avatar geofftidey avatar jdorfman avatar iamlacroix avatar qwp6t avatar chibicode avatar gitter-badger avatar sp4r74cus avatar eiselems avatar jsmoriss avatar shash7 avatar rbu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.