1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 ">
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6
+ < title > Baseline.js by Daneden</ title >
7
+ < meta name ="description " content ="A simple jQuery plugin for restoring vertical baselines thrown off by odd image sizes ">
8
+ < meta name ="author " content ="daneden ">
9
+ < meta name ="robots " content ="index, follow ">
10
+ <!-- Canonical URL -->
11
+ < link rel ="canonical " href ="https://codehimblog.github.io/jquery-plugins/baseline-js-by-daneden.html ">
12
+ <!-- Favicon -->
13
+ < link rel ="icon " href ="/favicon.ico " type ="image/png ">
14
+ <!-- Bootstrap CSS -->
15
+ < link href ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css "
rel ="
stylesheet "
>
16
+ <!-- Bootstrap Icons -->
17
+ < link href ="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css " rel ="stylesheet ">
18
+ < link rel ="stylesheet " href ="/css/styles.css ">
19
+ </ head >
20
+ < body >
21
+ <!-- Navbar -->
22
+ < nav class ="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
23
+ < div class ="container ">
24
+ < a class ="navbar-brand " href ="https://codehimblog.github.io ">
25
+ < i class ="bi bi-box-seam me-2 "> </ i > CodehimBlog
26
+ </ a >
27
+ < button class ="navbar-toggler " type ="button " data-bs-toggle ="collapse " data-bs-target ="#navbarNav " aria-controls ="navbarNav " aria-expanded ="false " aria-label ="Toggle navigation ">
28
+ < span class ="navbar-toggler-icon "> </ span >
29
+ </ button >
30
+ < div class ="collapse navbar-collapse " id ="navbarNav ">
31
+ < ul class ="navbar-nav ms-auto ">
32
+ < li class ="nav-item ">
33
+ < a class ="nav-link " href ="https://codehimblog.github.io/ "> < i class ="bi bi-house-door me-1 "> </ i > Home</ a >
34
+ </ li >
35
+ < li class ="nav-item ">
36
+ < a class ="nav-link " href ="https://codehimblog.github.io/projects/ "> < i class ="bi bi-box me-1 "> </ i > Projects</ a >
37
+ </ li >
38
+ < li class ="nav-item ">
39
+ < a class ="nav-link " href ="https://codehimblog.github.io/about.html "> < i class ="bi bi-book me-1 "> </ i > About</ a >
40
+ </ li >
41
+ < li class ="nav-item ">
42
+ < a class ="nav-link " href ="https://codehimblog.github.io/contact.html "> < i class ="bi bi-envelope me-1 "> </ i > Contact</ a >
43
+ </ li >
44
+ </ ul >
45
+ </ div >
46
+ </ div >
47
+ </ nav >
48
+
49
+ <!-- Breadcrumbs -->
50
+ < div class ="container mt-4 breadcrumbs ">
51
+ < nav aria-label ="breadcrumb ">
52
+ < ol class ="breadcrumb mb-0 ">
53
+ < li class ="breadcrumb-item "> < a href ="https://codehimblog.github.io/ "> Home</ a > </ li >
54
+ < li class ="breadcrumb-item "> < a href ="https://codehimblog.github.io/jquery-plugins/ "> jQuery Plugins</ a > </ li >
55
+ < li class ="breadcrumb-item active " aria-current ="page "> Baseline.js</ li >
56
+ </ ol >
57
+ </ nav >
58
+ </ div >
59
+
60
+ <!-- Schema Markup for Breadcrumbs -->
61
+ < script type ="application/ld+json ">
62
+ {
63
+ "@context" : "https://schema.org" ,
64
+ "@type" : "BreadcrumbList" ,
65
+ "itemListElement" : [
66
+ {
67
+ "@type" : "ListItem" ,
68
+ "position" : 1 ,
69
+ "name" : "Home" ,
70
+ "item" : "https://codehimblog.github.io/"
71
+ } ,
72
+ {
73
+ "@type" : "ListItem" ,
74
+ "position" : 2 ,
75
+ "name" : "jQuery Plugins" ,
76
+ "item" : "https://codehimblog.github.io/jquery-plugins/"
77
+ } ,
78
+ {
79
+ "@type" : "ListItem" ,
80
+ "position" : 3 ,
81
+ "name" : "Baseline.js" ,
82
+ "item" : "https://codehimblog.github.io/projects/{{packageSlug}}"
83
+ }
84
+ ]
85
+ }
86
+ </ script >
87
+ <!-- Main Content -->
88
+ < div class ="container mt-3 ">
89
+ < div class ="row ">
90
+ <!-- Main Details -->
91
+ < main class ="col-md-8 site-main p-0 ">
92
+ < article >
93
+ <!-- Project Name & Description -->
94
+ < h1 id ="packageName "> Baseline.js</ h1 >
95
+ < p id ="packageDescription " class ="text-muted "> A simple jQuery plugin for restoring vertical baselines thrown off by odd image sizes</ p >
96
+
97
+
98
+
99
+ <!-- Statistics -->
100
+ < div class ="stat-row d-flex justify-content-around align-items-center text-center mb-2 ">
101
+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
102
+ < i class ="bi bi-star-fill text-warning mb-2 "> </ i >
103
+ < div >
104
+ < span id ="stargazersCount " class ="stat-value "> 698</ span >
105
+ < p class ="stat-label mb-0 "> Stars</ p >
106
+ </ div >
107
+ </ div >
108
+
109
+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
110
+ < i class ="bi bi-box-arrow-in-down mb-2 "> </ i >
111
+ < div >
112
+ < span id ="repoSize " class ="stat-value "> 0.15 MB</ span >
113
+ < p class ="stat-label mb-0 "> Size</ p >
114
+ </ div >
115
+ </ div >
116
+
117
+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
118
+ < i class ="bi bi-arrow-repeat text-secondary mb-2 "> </ i >
119
+ < div >
120
+ < span id ="forksCount " class ="stat-value "> 55</ span >
121
+ < p class ="stat-label mb-0 "> Forks</ p >
122
+ </ div >
123
+ </ div >
124
+
125
+ < div class ="stat-box d-flex align-items-center flex-column-mobile ">
126
+ < i class ="bi bi-exclamation-circle text-danger mb-2 "> </ i >
127
+ < div >
128
+ < span id ="openIssuesCount " class ="stat-value "> 3</ span >
129
+ < p class ="stat-label mb-0 "> Open Issues</ p >
130
+ </ div >
131
+ </ div >
132
+ </ div >
133
+
134
+
135
+ < div class ="ad-unit ad-apt ">
136
+ < script async src ="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419 "
137
+ crossorigin ="anonymous "> </ script >
138
+ <!-- CodehimBlog APT -->
139
+ < ins class ="adsbygoogle "
140
+ style ="display:block "
141
+ data-ad-client ="ca-pub-7089100907045419 "
142
+ data-ad-slot ="4990741913 "
143
+ data-ad-format ="auto "
144
+ data-full-width-responsive ="true "> </ ins >
145
+ < script >
146
+ ( adsbygoogle = window . adsbygoogle || [ ] ) . push ( { } ) ;
147
+ </ script >
148
+ </ div >
149
+
150
+ < div class ="row mb-4 ">
151
+ <!-- Tabs (Left) -->
152
+ < div class ="col-12 col-md-6 d-flex justify-content-start mb-3 mb-md-0 ">
153
+ < ul class ="nav nav-tabs " id ="infoTabs " role ="tablist ">
154
+ < li class ="nav-item " role ="presentation ">
155
+ < button class ="nav-link active " id ="installation-tab " data-bs-toggle ="tab " data-bs-target ="#installation " type ="button " role ="tab " aria-controls ="installation " aria-selected ="true ">
156
+ < i class ="bi bi-file-earmark-text "> </ i > Readme
157
+ </ button >
158
+ </ li >
159
+ < li class ="nav-item " role ="presentation ">
160
+ < button class ="nav-link " id ="changelog-tab " data-bs-toggle ="tab " data-bs-target ="#changelog " type ="button " role ="tab " aria-controls ="changelog " aria-selected ="false ">
161
+ < i class ="bi bi-journal-text me-2 "> </ i > Changelog
162
+ </ button >
163
+ </ li >
164
+ </ ul >
165
+ </ div >
166
+
167
+ <!-- Action Buttons (Right) -->
168
+ < div class ="col-12 col-md-6 d-flex align-items-center justify-content-end ">
169
+ < a href ="https://github.com/daneden/Baseline.js/archive/refs/heads/master.zip " class ="btn btn-primary me-2 action-btn " id ="downloadBtn ">
170
+ < i class ="bi bi-cloud-download me-2 "> </ i > Download ZIP
171
+ </ a >
172
+ < a href ="https://github.com/daneden/Baseline.js " target ="_blank " class ="btn btn-outline-secondary action-btn " id ="githubBtn ">
173
+ < i class ="bi bi-github me-2 "> </ i > Fork on GitHub
174
+ </ a >
175
+ </ div >
176
+ </ div >
177
+ < div class ="tab-content mt-3 " id ="infoTabsContent ">
178
+ < div class ="tab-pane fade show active " id ="installation " role ="tabpanel " aria-labelledby ="installation-tab ">
179
+ < h1 > Baseline.js</ h1 >
180
+ < p > Baseline.js is a simple jQuery / Zepto plugin for restoring baselines thrown off by odd image sizes.</ p >
181
+ < p > Simply call the plugin like so, passing the height of your baseline as a variable. It even works on responsive designs!</ p >
182
+ < pre class ="prettyprint linenums lang-language "> < code > $('img').baseline(24); // Apply a 24px baseline to all images on the page
183
+ $('.content img').baseline(30); // Apply a 30px baseline to all images inside .content</ code > </ pre >
184
+ < p > You can also define multiple baselines for different breakpoints. Perfect for responsive design!</ p >
185
+ < pre class ="prettyprint linenums lang-language "> < code > $('.content img').baseline({ '0px': 24, '700px': 30 }); // Apply a 24px baseline for all widths, 30px for widths above 700px</ code > </ pre >
186
+ < p > Or you can pass a function that must return a number which is used as the grid size.</ p >
187
+ < pre class ="prettyprint linenums lang-language "> < code > $('.content img').baseline(function() {
188
+ // Get the current font-size from the HTML tag – the root font-size `rem` –
189
+ // which may change through to some CSS media queries
190
+ return parseFloat(getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
191
+ });</ code > </ pre >
192
+ < p > The used CSS may look like:</ p >
193
+ < pre class ="prettyprint linenums lang-language "> < code > html { font-size: 12px; }
194
+ @media (min-width: 480px) {
195
+ html { font-size: 13px; }
196
+ }
197
+ @media (min-width: 720px) {
198
+ html { font-size: 14px; }
199
+ }
200
+ @media (min-width: 1024px) {
201
+ html { font-size: 15px; }
202
+ }
203
+
204
+ body {
205
+ /* This one is a computed value based on the given root em
206
+ * and is used as the final font-size for body copy. */
207
+ font-size: 1.2rem;
208
+ }</ code > </ pre >
209
+ < h2 > Vanilla JS</ h2 >
210
+ < p > Baseline.js is also available without jQuery or Zepto.</ p >
211
+ < pre class ="prettyprint linenums lang-language "> < code > baseline('img', 24); // Apply a 24px baseline to all images on the page
212
+ baseline('.content img', 30); // Apply a 30px baseline to all images inside .content
213
+ baseline('.content img', {0:24, 700:30}); // Apply a 24px baseline for all widths, 30px for widths above 700px</ code > </ pre >
214
+ < p > The first parameter accepts either a selector string or one or more elements, e.g. selected through < code > document.getElementById()</ code > .</ p >
215
+ < p > The vanilla JS version was initially created by the rocking < a href ="https://twitter.com/benhowdle "> Ben Howdle</ a > .</ p >
216
+ < h2 > License</ h2 >
217
+ < p > Baseline.js is licensed under the < a href ="http://sam.zoy.org/wtfpl/ "> WTFPL license.</ a > </ p >
218
+ </ div >
219
+
220
+ < div class ="tab-pane fade " id ="changelog " role ="tabpanel " aria-labelledby ="changelog-tab ">
221
+ < ul id ="changelogList ">
222
+ No changelog available.
223
+ </ ul >
224
+ </ div >
225
+
226
+ </ div >
227
+
228
+ < div class ="tags mb-2 mt-2 ">
229
+
230
+ </ div >
231
+
232
+ </ article >
233
+
234
+
235
+ </ main >
236
+ <!-- Sidebar -->
237
+ < aside class ="col-md-4 p-0 ">
238
+ < div class ="sidebar ">
239
+ <!-- Owner Section -->
240
+ < div class ="sidebar-item mb-4 ">
241
+ < div class ="ad-unit ">
242
+ < script async src ="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419 "
243
+ crossorigin ="anonymous "> </ script >
244
+ <!-- CodehimBlog Sidebar -->
245
+ < ins class ="adsbygoogle "
246
+ style ="display:block "
247
+ data-ad-client ="ca-pub-7089100907045419 "
248
+ data-ad-slot ="8929986923 "
249
+ data-ad-format ="auto "
250
+ data-full-width-responsive ="true "> </ ins >
251
+ < script >
252
+ ( adsbygoogle = window . adsbygoogle || [ ] ) . push ( { } ) ;
253
+ </ script >
254
+ </ div >
255
+ < div class ="d-flex align-items-center ">
256
+ < img src ="https://avatars.githubusercontent.com/u/439365?v=4 " alt ="Owner Avatar " class ="rounded-circle me-2 owner-avatar ">
257
+ < a href ="https://github.com/daneden " target ="_blank " id ="ownerName " class ="sidebar-link "> daneden</ a >
258
+ </ div >
259
+ </ div >
260
+
261
+ <!-- Metadata Section -->
262
+ < div class ="sidebar-item mb-2 ">
263
+ < div class ="metadata-item d-flex align-items-center ">
264
+ < i class ="bi bi-calendar me-2 "> </ i >
265
+ < strong > Created At:</ strong >
266
+ < span id ="createdAt " class ="ms-1 "> June 20, 2012</ span >
267
+ </ div >
268
+ < div class ="metadata-item d-flex align-items-center mt-2 ">
269
+ < i class ="bi bi-pencil-square me-2 "> </ i >
270
+ < strong > Last Updated:</ strong >
271
+ < span id ="updatedAt " class ="ms-1 "> November 20, 2024</ span >
272
+ </ div >
273
+ < div class ="metadata-item d-flex align-items-center mt-2 ">
274
+ < i class ="bi bi-file-earmark-code me-2 "> </ i >
275
+ < strong > Language:</ strong >
276
+ < span id ="language " class ="ms-1 "> JavaScript</ span >
277
+ </ div >
278
+
279
+ < div class ="metadata-item d-flex align-items-center mt-2 ">
280
+ < i class ="bi bi-shield-check "> </ i >
281
+ < strong > License:</ strong >
282
+ < span id ="license " class ="ms-1 "> Unknown</ span >
283
+ </ div >
284
+ < a href ="http://daneden.me/baseline " target ="_blank " class ="btn btn-outline-dark btn-sm " id ="homepageBtn ">
285
+ < i class ="bi bi-house-door me-2 "> </ i > Visit Homepage
286
+ </ a >
287
+
288
+ </ div >
289
+
290
+ < div class ="sidebar-item mb-2 ">
291
+ < li > No dependencies!</ li >
292
+ </ div >
293
+
294
+ < div class ="sidebar-item ">
295
+ < h5 class ="sidebar-title "> Contributors</ h5 >
296
+ < ul class ="p-0 " id ="contributorsList ">
297
+ < ul class ="list-group list-group-flush " id ="contributorsList "> < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/439365?v=4 " alt ="daneden " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/daneden " target ="_blank " class ="text-decoration-none fw-bold "> daneden</ a > < p class ="mb-0 text-muted small "> 12 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/1138459?v=4 " alt ="RadLikeWhoa " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/RadLikeWhoa " target ="_blank " class ="text-decoration-none fw-bold "> RadLikeWhoa</ a > < p class ="mb-0 text-muted small "> 4 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/96311?v=4 " alt ="vsr " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/vsr " target ="_blank " class ="text-decoration-none fw-bold "> vsr</ a > < p class ="mb-0 text-muted small "> 2 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/81224?v=4 " alt ="coreyward " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/coreyward " target ="_blank " class ="text-decoration-none fw-bold "> coreyward</ a > < p class ="mb-0 text-muted small "> 1 contributions</ p > </ div > </ li > < li class ="list-group-item d-flex align-items-center contributor-item "> < img src ="https://avatars.githubusercontent.com/u/249872?v=4 " alt ="zmmbreeze " class ="rounded-circle me-3 " style ="width: 40px; height: 40px; "> < div > < a href ="https://github.com/zmmbreeze " target ="_blank " class ="text-decoration-none fw-bold "> zmmbreeze</ a > < p class ="mb-0 text-muted small "> 1 contributions</ p > </ div > </ li > </ ul >
298
+ </ ul >
299
+
300
+ </ div >
301
+
302
+ < div class ="ad-unit ">
303
+ < script async src ="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419 "
304
+ crossorigin ="anonymous "> </ script >
305
+ <!-- CodehimBlog Skyscrapper -->
306
+ < ins class ="adsbygoogle "
307
+ style ="display:block "
308
+ data-ad-client ="ca-pub-7089100907045419 "
309
+ data-ad-slot ="7469565592 "
310
+ data-ad-format ="auto "
311
+ data-full-width-responsive ="true "> </ ins >
312
+ < script >
313
+ ( adsbygoogle = window . adsbygoogle || [ ] ) . push ( { } ) ;
314
+ </ script >
315
+ </ div >
316
+
317
+ </ div >
318
+ </ aside >
319
+ </ div >
320
+ </ div >
321
+ <!-- Footer -->
322
+ < footer class ="bg-dark text-white text-center py-3 page-footer ">
323
+ < div class ="container ">
324
+ < p class ="mb-2 "> © 2024 CodehimBlog - Powered by GitHub</ p >
325
+ < nav >
326
+ < ul class ="list-inline mb-0 ">
327
+ < li class ="list-inline-item ">
328
+ < a href ="/privacy-policy.html " class ="footer-link "> Privacy Policy</ a >
329
+ </ li >
330
+ < li class ="list-inline-item ">
331
+ < span class ="text-white "> |</ span >
332
+ </ li >
333
+ < li class ="list-inline-item ">
334
+ < a href ="/terms-and-conditions.html " class ="footer-link "> Terms and Conditions</ a >
335
+ </ li >
336
+ </ ul >
337
+ </ nav >
338
+ </ div >
339
+ </ footer >
340
+ <!-- Bootstrap Bundle JS -->
341
+ < script src ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/js/bootstrap.bundle.min.js "
> </ script >
342
+ < script src ="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js "> </ script >
343
+ < script src ="/js/script.js "> </ script >
344
+ <!-- Google tag (gtag.js) -->
345
+ < script async src ="https://www.googletagmanager.com/gtag/js?id=G-FG2ZX76XGT "> </ script >
346
+ < script >
347
+ window . dataLayer = window . dataLayer || [ ] ;
348
+ function gtag ( ) { dataLayer . push ( arguments ) ; }
349
+ gtag ( 'js' , new Date ( ) ) ;
350
+
351
+ gtag ( 'config' , 'G-FG2ZX76XGT' ) ;
352
+ </ script >
353
+ </ body >
354
+ </ html >
0 commit comments