Pages Social presents a Pinterest-like card layout that you can use for any social feed/timeline. It is also responsive and works flawlessly in mobile devices.
Include the dependencies
Pages Social depends on the following jQuery plugins. Make sure you include them before calling the library functions.
<!-- Waits for the images to be loaded before applying the Isotope plugin -->
<script src="assets/plugins/imagesloaded/imagesloaded.pkgd.min.js"></script>
<!-- Isotope plugin arranges the card layout -->
<script src="assets/plugins/jquery-isotope/isotope.pkgd.min.js" type="text/javascript"></script>
<!-- Required for stepsForm plugin -->
<script src="assets/plugins/classie/classie.js" type="text/javascript"></script>
<!-- Creates the multi-step status update form -->
<script src="assets/plugins/codrops-stepsform/js/stepsForm.js" type="text/javascript"></script>
We recommend that you use the 'simple' theme instead of pages default theme (pages.css) together with Social for better experience.
HTML Source
The following shows the basic markup structure you have to follow when setting up the Social page. Components mentioned inside *** are further explained below. You may change the content inside each component without changing the main structure below.
Markup for cover
Markup for posts
Initializing Pages Social
Pages will auto-initialize Social if elements with following data-properties are found in the DOM. The following shows the default settings object for Social
If you wish to make the initialization programmatically, refrain from using the above data properties in the DOM. Set the classes/ids you defined in the DOM in $.fn.social.defaults object and then call the initialization script.
The minimum column width for Social is 300 pixels. If you wish to change it, you may have edit the .col1,.col2 and .col3 in the CSS accordingly. ex: If colWidth is 400, .col1,.col2 and .col3 will get 400px, 820pxand 1220px (Note the extra 20px reserved for gutter width)
<!-- START SOCIAL WRAPPER -->
<div class="social-wrapper">
<!-- START SOCIAL -->
<div class="social " data-pages="social">
<!--
*** SOCIAL COVER GOES HERE ***
-->
<div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
<div class="feed">
<!-- START DAY -->
<div class="day" data-social="day">
<!--
*** POSTS GO HERE ***
-->
</div>
<!-- END DAY -->
</div>
<!-- END FEED -->
</div>
<!-- END CONTAINER FLUID -->
</div>
<!-- END SOCIAL -->
</div>
<!-- END SOCIAL WRAPPER -->
