Social

Pages UI
Search…
Pages UI
v5.0.1 - Pages HTML
Social
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. 
​Isotope​
​Classie​
​StepsForm​
1
<!-- Waits for the images to be loaded before applying the Isotope plugin -->
2
<script src="assets/plugins/imagesloaded/imagesloaded.pkgd.min.js"></script>
3
<!-- Isotope plugin arranges the card layout -->
4
<script src="assets/plugins/jquery-isotope/isotope.pkgd.min.js" type="text/javascript"></script>
5
<!-- Required for stepsForm plugin -->
6
<script src="assets/plugins/classie/classie.js" type="text/javascript"></script>
7
<!-- Creates the multi-step status update form -->
8
<script src="assets/plugins/codrops-stepsform/js/stepsForm.js" type="text/javascript"></script>
Copied!
Include Pages Social Lib
Include pages.social.min.js below pages.js
1
<script src="pages/js/pages.social.min.js"></script>
Copied!
Include Stylesheet
We recommend that you use the 'simple' theme instead of pages default theme (pages.css) together with Social for better experience.
1
<link href="pages/css/themes/simple.css" rel="stylesheet" type="text/css" />
Copied!
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.
1
<!-- START SOCIAL WRAPPER -->
2
<div class="social-wrapper">
3
    <!-- START SOCIAL -->
4
    <div class="social " data-pages="social">
5
        <!--
6
            *** SOCIAL COVER GOES HERE ***
7
        -->
8
        <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
9
            <div class="feed">
10
                <!-- START DAY -->
11
                <div class="day" data-social="day">
12
                    <!--
13
                        *** POSTS GO HERE ***
14
                    -->
15
                </div>
16
                <!-- END DAY -->
17
            </div>
18
            <!-- END FEED -->
19
        </div>
20
        <!-- END CONTAINER FLUID -->
21
    </div>
22
    <!-- END SOCIAL -->
23
</div>
24
<!-- END SOCIAL WRAPPER -->
Copied!
Markup for cover
1
<!-- START SOCIAL COVER -->
2
<div class="jumbotron" data-pages="parallax" data-social="cover">
3
    <!-- START COVER PHOTO -->
4
    <div class="cover-photo">
5
        <img alt="Cover photo" src="assets/img/social/cover.png" />
6
    </div>
7
    <!-- END COVER PHOTO -->
8
    <!-- START COVER PHOTO INNER -->
9
    <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
10
        <div class="inner">
11
            <div class="pull-bottom bottom-left m-b-40">
12
                <h5 class="text-white no-margin">welcome to pages social</h5>
13
                <h1 class="text-white no-margin"><span class="semi-bold">social</span> cover</h1>
14
            </div>
15
        </div>
16
    </div>
17
    <!-- END COVER PHOTO INNER -->
18
</div>
19
<!-- END SOCIAL COVER -->
Copied!
Markup for posts
social.html
1
<!-- START PROFILE OVERVIEW -->
2
<div class="card no-border bg-transparent full-width" data-social="item">

3
    <!--
4
        SHOW ANY PROFILE OWNER DATA IN THE FIRST FULL-WIDTH ISOTOPE ITEM
5
        EX: NAME, CURRENT STATUS, LOCATION, ABOUT SECTION AND FRIENDS
6
    -->
7
    <!-- START CONTAINER FLUID -->
8
    <div class="container-fluid p-t-30 p-b-30 ">
9
        <div class="row">
10
            <div class="col-md-4">
11
                <div class="container-xs-height">
12
                    <div class="row-xs-height">
13
                        <!-- START USER PROFILE PICTURE -->
14
                        <div class="social-user-profile col-xs-height text-center col-top">
15
                            <div class="thumbnail-wrapper d48 circular bordered b-white">
16
                                <img alt="Avatar" width="55" height="55" data-src-retina="assets/img/profiles/avatar_small2x.jpg" data-src="assets/img/profiles/avatar.jpg" src="assets/img/profiles/avatar.jpg">
17
                            </div>
18
                            <br>
19
                            <i class="fa fa-check-circle text-success fs-16 m-t-10"></i>
20
                        </div>
21
                        <!-- END USER PROFILE PICTURE -->
22
                        <!-- START USER NAME -->
23
                        <div class="col-xs-height p-l-20">
24
                            <h3 class="no-margin">David Nester</h3>
25
                            <p class="no-margin fs-16">is excited about the new pages design framework</p>
26
                            <p class="hint-text m-t-5 small">San Fransisco Bay | CEO at Pages.inc</p>
27
                        </div>
28
                        <!-- END USER NAME -->
29
                    </div>
30
                </div>
31
            </div>
32
            <!-- START USER BIO -->
33
            <div class="col-md-4">
34
                <p class="no-margin fs-16">Hi My Name is David Nester, &amp; heres my new pages user profile page</p>
35
                <p class="hint-text m-t-5 small">I love reading people's about page especially those who are in the same industry as me.</p>
36
            </div>
37
            <!-- END USER BIO -->
38
            <!-- START USER'S FRIENDS -->
39
            <div class="col-md-4">
40
                <p class="m-b-5 small">1,435 Mutual Friends</p>
41
                <ul class="list-unstyled ">
42
                    <li class="m-r-10">
43
                        <div class="thumbnail-wrapper d32 circular b-white m-r-5 b-a b-white">
44
                            <img width="35" height="35" data-src-retina="assets/img/profiles/1x.jpg" data-src="assets/img/profiles/1.jpg" alt="Profile Image" src="assets/img/profiles/1.jpg">
45
                        </div>
46
                    </li>
47
                    <li>
48
                        <div class="thumbnail-wrapper d32 circular b-white m-r-5 b-a b-white">
49
                            <img width="35" height="35" data-src-retina="assets/img/profiles/2x.jpg" data-src="assets/img/profiles/2.jpg" alt="Profile Image" src="assets/img/profiles/2.jpg">
50
                        </div>
51
                    </li>
52
                    ...
53
                    <li>
54
                        <div class="thumbnail-wrapper d32 circular b-white">
55
                            <div class="bg-master text-center text-white"><span>+34</span>
56
                            </div>
57
                        </div>
58
                    </li>
59
                </ul>
60
                <br>
61
                <p class="m-t-5 small">More friends</p>
62
            </div>
63
            <!-- END USER'S FRIENDS -->
64
        </div>
65
    </div>
66
    <!-- END CONTAINER FLUID -->
67
</div>
68
<!-- END PROFILE OVERVIEW -->
69
​
70
<!-- START STATUS UPDATE FORM -->
71
<!-- 
72
    USE 'col1, col2, col3' TO SPECIFY CARD WIDTH 
73
    data-social="item" AUTO INIT THE CARD
74
-->
75
<div class="card col2 padding-20" data-social="item">
76
    <!-- 
77
        MULTI-STEP STATUS UPDATE FORM IS MADE POSSIBLE USING 'stepsForm' PLUGIN 
78
    -->
79
    <form class="simform no-margin" autocomplete="off" data-social="status">
80
        <div class="status-form-inner">
81
            <!-- START QUESTIONS -->
82
            <ol class="questions">
83
                <li>
84
                    <span>
85
                       <label for="status-q1">What's on your mind?</label>
86
                    </span>
87
                    <input id="status-q1" name="q1" type="text" />
88
                </li>
89
                <li>
90
                    <span>
91
                        <label for="status-q2">What are you feeling?</label>
92
                    </span>
93
                    <input id="status-q2" name="q2" type="text" />
94
                </li>
95
                <li>
96
                    <span>
97
                        <label for="status-q3">What's your location?</label>
98
                    </span>
99
                    <input id="status-q3" name="q3" type="text" />
100
                </li>
101
                <li>
102
                    <span>
103
                        <label for="status-q4">Who are you with?</label>
104
                    </span>
105
                    <input id="status-q4" name="q4" type="text" />
106
                </li>
107
            </ol>
108
            <!--END QUESTIONS -->
109
            <button class="submit" type="submit">Send answers</button>
110
            <!-- FORM CONTROLS. DO NOT REMOVE -->
111
            <div class="controls">
112
                <button class="next"></button>
113
                <div class="progress"></div>
114
                <span class="number">
115
                    <span class="number-current"></span>
116
                    <span class="number-total"></span>
117
                </span>
118
                <span class="error-message"></span>
119
            </div>
120
        </div>
121
        <!-- MESSAGE TO BE DISPLAYED AT THE END -->
122
        <span class="final-message"></span>
123
    </form>
124
</div>
125
<!-- END STATUS UPDATE FORM -->
126
<!-- START POST TYPE-1 -->
127
<div class="card status col2" data-social="item">
128
    <div class="circle" data-toggle="tooltip" title="Label">
129
    </div>
130
    <h5>David Nester updated his status
131
                            <span class="hint-text">few seconds ago</span></h5>
132
    <h2>Earned my first salary bonus for the best design of the year award.</h2>
133
    <ul class="reactions">
134
        <li><a href="#">5,345 <i class="fa fa-comment-o"></i></a>
135
        </li>
136
        <li><a href="#">23K <i class="fa fa-heart-o"></i></a>
137
        </li>
138
    </ul>
139
</div>
140
<!-- END POST TYPE-1 -->
141
<!-- START POST TYPE-2 -->
142
<div class="card share share-self col1" data-social="item">
143
    <div class="circle" data-toggle="tooltip" title="Label">
144
    </div>
145
    <div class="card-header clearfix">
146
        <div class="user-pic">
147
            <img alt="Profile Image" width="33" height="33" data-src-retina="assets/img/profiles/5x.jpg" data-src="assets/img/profiles/5.jpg" src="assets/img/profiles/5x.jpg">
148
        </div>
149
        <h5>Shannon Williams</h5>
150
        <h6>Shared a photo
151
           <span class="location semi-bold"><i class="fa fa-map-marker"></i> NYC, New York</span>
152
        </h6>
153
    </div>
154
    <div class="card-description">
155
        <p>Inspired by : good design is obvious, great design is transparent</p>
156
        <div class="via">via themeforest</div>
157
    </div>
158
    <div class="card-content">
159
        <ul class="buttons ">
160
            <li>
161
                <a href="#"><i class="fa fa-expand"></i>
162
                                    </a>
163
            </li>
164
            <li>
165
                <a href="#"><i class="fa fa-heart-o"></i>
166
                                    </a>
167
            </li>
168
        </ul>
169
        <img alt="Social post" src="assets/img/social-post-image.png">
170
    </div>
171
    <div class="card-footer clearfix">
172
        <div class="time">few seconds ago</div>
173
        <ul class="reactions">
174
            <li><a href="#">5,345 <i class="fa fa-comment-o"></i></a>
175
            </li>
176
            <li><a href="#">23K <i class="fa fa-heart-o"></i></a>
177
            </li>
178
        </ul>
179
    </div>
180
</div>
181
<!-- END POST TYPE-2 -->
182
<!-- START POST TYPE-3 -->
183
<div class="card share share-self col1" data-social="item">
184
    <div class="circle" data-toggle="tooltip" title="Label">
185
    </div>
186
    <div class="card-header clearfix">
187
        <div class="user-pic">
188
            <img alt="Profile Image" width="33" height="33" data-src-retina="assets/img/profiles/8x.jpg" data-src="assets/img/profiles/8.jpg" src="assets/img/profiles/8x.jpg">
189
        </div>
190
        <h5>Jeff Curtis</h5>
191
        <h6>Shared a Tweet
192
                                <span class="location semi-bold"><i class="fa fa-map-marker"></i> SF, California</span>
193
                            </h6>
194
    </div>
195
    <div class="card-description">
196
        <p>What you think, you become. What you feel, you attract. What you imagine, you create - Buddha. <a href="#">#quote</a> </p>
197
        <div class="via">via Twitter</div>
198
    </div>
199
</div>
200
<!-- END POST TYPE-3 -->
201
<!-- START POST TYPE-4 -->
202
<div class="card share share-other col1" data-social="item">
203
    <div class="circle" data-toggle="tooltip" title="Label">
204
    </div>
205
    <div class="card-content">
206
        <ul class="buttons ">
207
            <li>
208
                <a href="#"><i class="fa fa-expand"></i>
209
                                    </a>
210
            </li>
211
            <li>
212
                <a href="#"><i class="fa fa-heart-o"></i>
213
                                    </a>
214
            </li>
215
        </ul>
216
        <img alt="Quote" src="assets/img/social/quote.jpg">
217
    </div>
218
    <div class="card-description">
219
        <p>Like if you agree</p>
220
    </div>
221
    <div class="card-footer clearfix">
222
        <div class="time">few seconds ago</div>
223
        <ul class="reactions">
224
            <li><a href="#">5,345 <i class="fa fa-comment-o"></i></a>
225
            </li>
226
            <li><a href="#">23K <i class="fa fa-heart-o"></i></a>
227
            </li>
228
        </ul>
229
    </div>
230
    <div class="card-header clearfix">
231
        <div class="user-pic">
232
            <img alt="Profile Image" width="33" height="33" data-src-retina="assets/img/profiles/7x.jpg" data-src="assets/img/profiles/7.jpg" src="assets/img/profiles/7x.jpg">
233
        </div>
234
        <h5>Tracy Brooks</h5>
235
        <h6>Shared a photo on your wall</h6>
236
    </div>
237
</div>
238
<!-- END POST TYPE-4 -->
239
<!-- START POST TYPE-5 -->
240
<div class="card share share-self col1" data-social="item">
241
    <div class="card-header ">
242
        <h5 class="text-complete pull-left fs-12">News <i class="fa fa-circle text-complete fs-11"></i></h5>
243
        <div class="pull-right small hint-text">
244
            5,345 <i class="fa fa-comment-o"></i>
245
        </div>
246
        <div class="clearfix"></div>
247
    </div>
248
    <div class="card-description">
249
        <h3>Ebola outbreak: Clinical drug trials to start next month as death toll mounts</h3>
250
    </div>
251
    <div class="card-footer clearfix">
252
        <div class="pull-left">via <span class="text-complete">CNN</span>
253
        </div>
254
        <div class="pull-right hint-text">
255
            Apr 23
256
        </div>
257
        <div class="clearfix"></div>
258
    </div>
259
</div>
260
<!-- END POST TYPE-5 -->
Copied!
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
1
$.fn.social.defaults = {
2
        cover: '[data-social="cover"]',
3
        day: '[data-social="day"]',
4
        status: '[data-social="status"]',
5
        item: '[data-social="item"]',
6
        colWidth: 300
7
    }
Copied!
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)
1
$(document).ready(function() {
2
    $.fn.social.defaults = {
3
        cover: '.cover', // Cover element
4
        day: '.day', // Day element
5
        status: '.status', // Status update box element
6
        item: '.item', // Post item
7
        colWidth: 300 // minimum column width for cards
8
    }
9
    $('#social').social();
10
});
Copied!
Apps - Previous
Calendar
Next - Apps
Last modified 2yr ago
Copy link
Contents
Include the dependencies
Include Pages Social Lib
HTML Source
Markup for cover
Markup for posts
Initializing Pages Social