-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfoundation.html
More file actions
6452 lines (4938 loc) · 253 KB
/
Copy pathfoundation.html
File metadata and controls
6452 lines (4938 loc) · 253 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html><html><body><title>Foundation Tutorial</title>
<h1>Foundation Tutorial</h1>
<p>Foundation is one of the advanced front-end frameworks for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugin. The tutorial is divided into sections such that each section contains related topics with simple and useful examples.</p>
<h1>Audience</h1>
<p>This tutorial has been prepared for anyone who has a basic knowledge of HTML and CSS and has an urge to develop websites. After completing this tutorial, you will find yourself at a moderate level of expertise in developing web projects using Zurb Foundation Bootstrap.</p>
<h1>Prerequisites</h1>
<p>Before you proceed with this tutorial, we are assuming that you are already aware about the basics of HTML and CSS. If you are not well aware of these concepts then we will suggest you to go through our short tutorials on HTML Tutorial and CSS Tutorial.</p>
<p>© Copyright 2017. All Rights Reserved.</p>
<title>Foundation Overview</title>
<h1>Foundation - Overview</h1>
<h2>What is Foundation?</h2>
<p>Foundation is one of the advanced front-end frameworks for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugins.</p>
<p>Foundation began as an internal style guide, built by ZURB in 2008. ZURB is a product design company in Campbell, California. It released Foundation 2.0 as open source in October 2011. The latest version of Foundation is 6.1.1, released in December 2015.</p>
<h2>Why Use Foundation?</h2>
<p>It provides faster development by using Sass compiler, which works much faster than default compiler.</p>
<p>It enriches your website with pricing tables, switches, joyride, range sliders, lightbox and many more.</p>
<p>It comes with development package like Grunt and Libsass for faster coding and control.</p>
<p>Foundation for sites provides you with HTML, CSS and JS to quickly build websites.</p>
<p>Email framework provides you with responsive HTML emails, which can be read on any device.</p>
<p>Foundation for Apps allows you to build fully responsive web apps.</p>
<h2>Features</h2>
<p>It has powerful grid system and some useful UI components and cool JavaScript plugins.</p>
<p>It provides responsive design, which serves all types of devices.</p>
<p>It is optimized for mobile devices and truly supports mobile first approach.</p>
<p>It provides HTML templates, which are customizable and extensible.</p>
<h2>Advantages</h2>
<p>It is easy to learn, once you have the basic understanding of HTML and CSS.</p>
<p>You can use Foundation freely as it is an open source.</p>
<p>It provides you a bunch of templates, which helps you in start developing the website right away.</p>
<p>Foundation supports preprocessors like SASS and Compass, which makes development faster.</p>
<h2>Disadvantages</h2>
<p>Because of the popularity of the Twitter Bootstrap, the community support for Twitter Bootstrap is better than Foundation.</p>
<p>It may take some time for beginners to learn and take advantage of the preprocessor support.</p>
<p>Lack of wider support like QA sites and forums for fixing issues.</p>
<p>Foundation has less themes compared to others.</p>
<p>© Copyright 2017. All Rights Reserved.</p>
<title>Foundation Installation</title>
<h1>Foundation - Installation</h1>
<p>In this chapter, we will discuss about how to install and use Foundation on website.</p>
<h2>Download the Foundation</h2>
<p>When you open the link <a target="_blank" rel="nofollow" href="https://foundation.zurb.com">foundation.zurb.com</a>, you will see a screen as shown below −</p>
<p>Click the <b>Download Foundation 6</b> button, you will be redirected to another page.</p>
<p>Here you can see four buttons −</p>
<p><b>Download Everything</b> − You can download this version of Foundation, if you wish to have everything in the framework i.e. vanilla CSS and JS.</p>
<p><b>Download Essentials</b> − It will download the simple version which includes the grid, buttons, typography etc.</p>
<p><b>Custom Download</b> − This will download the custom library for Foundation, it includes elements and define size of columns, font size, color etc.</p>
<p><b>Install via SCSS</b> − This will redirect you to the documentation page to install Foundation for sites.</p>
<p>You can click the <b>Download Everything</b> button to get everything in the framework i.e. CSS and JS. As the files consist all things in the framework so every time you don't need to include separate files for individual functionality. At the time of writing this tutorial, the latest version (Foundation 6) was downloaded.</p>
<h2>File Structure</h2>
<p>Once Foundation is downloaded, extract the ZIP file, and you will see the following file/directory structure −</p>
<p>As you can see, there are compiled CSS and JS (foundation.*), as well as compiled and minified CSS and JS (foundation.min.*).</p>
<p>We are using the CDN versions of the library throughout this tutorial.</p>
<h2>HTML Template</h2>
<p>A basic HTML template using Foundation is as shown below −</p>
<p>The following sections describe the above code in detail.</p>
<h3>HTML5 doctype</h3>
<p>Foundation consists of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Therefore, the following code for HTML5 doctype should be included at the beginning of all your projects using Foundation.</p>
<h3>Mobile First</h3>
<p>It helps to be responsive to mobile devices. You need to include the <b>viewport meta tag</b> to the <head> element, to ensure proper rendering and touch zooming on mobile devices.</p>
<p><i>width</i> property controls the width of the device. Setting it to device-width will make sure that it is rendered across various devices (mobiles, desktops, tablets...) properly.</p>
<p><i>initial-scale = 1.0</i> ensures that when loaded, your web page will be rendered at a 1:1 scale, and no zooming will be applied out of the box.</p>
<h3>Initialization of components</h3>
<p>The jQuery script is required in Foundation for components like modals and dropdown.</p>
<h3>Output</h3>
<p>Let us carry out the following steps to see how the above given code works −</p>
<p>Save the above given html code <b>firstexample.html</b> file.</p>
<p>Open this HTML file in a browser, an output is displayed as shown below.</p>
<p>© Copyright 2017. All Rights Reserved.</p>
<pre class="prettyprint notranslate tryit">
<!DOCTYPE html>
<html>
<head>
<title>Foundation Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
</pre>
<p>The following sections describe the above code in detail.</p>
<h3>HTML5 doctype</h3>
<p>Foundation consists of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Therefore, the following code for HTML5 doctype should be included at the beginning of all your projects using Foundation.</p>
<pre class="result notranslate">
<!DOCTYPE html>
<html>
....
</html>
</pre>
<h3>Mobile First</h3>
<p>It helps to be responsive to mobile devices. You need to include the <b>viewport meta tag</b> to the <head> element, to ensure proper rendering and touch zooming on mobile devices.</p>
<pre class="result notranslate">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
</pre>
<ul class="list">
<li><p><i>width</i> property controls the width of the device. Setting it to device-width will make sure that it is rendered across various devices (mobiles, desktops, tablets...) properly.</p></li>
<li><p><i>initial-scale = 1.0</i> ensures that when loaded, your web page will be rendered at a 1:1 scale, and no zooming will be applied out of the box.</p></li>
</ul>
<h3>Initialization of components</h3>
<p>The jQuery script is required in Foundation for components like modals and dropdown.</p>
<pre class="result notranslate">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
</pre>
<title>Foundation Starter Projects</title>
<h1>Foundation - Starter Projects</h1>
<p>You can start with your project development with some available templates which can be installed through <a target="_blank" rel="nofollow" href="https://foundation.zurb.com/sites/docs/installation.html">Yeti Launch</a> or <b>Foundation CLI</b>. You can start with the new project by using these templates by using <i>Gulp</i> build system for the processing of the Sass, JavaScript, copying files etc.</p>
<h2>Basic Template</h2>
<p>The basic template is something like SASS template, which includes the flat directory structure and compiles only SASS files and it is good to have this simple template while using only SASS. You can use the basic template by using Yeti Launch or using Foundation CLI using the following command −</p>
<p>To set up this, first run the <i>npm install</i>, <i>bower install</i> and use the <i>npm start</i> command to run it. You can also download the template files from the <a target="_blank" rel="nofollow" href="https://github.com/zurb/foundation-sites-template/archive/master.zip">Github</a>.</p>
<h2>ZURB Template</h2>
<p>It is a combination of CSS/SCSS, JavaScript, Handlebars template, markup structure, image compression and uses SASS processing. You can use the ZURB template by using <i>Yeti Launch</i> or using <i>Foundation CLI</i> using the below command −</p>
<p>To run this template, follow the same steps specified in the basic template. You can also download the template files from the <a target="_blank" rel="nofollow" href="https://github.com/zurb/foundation-zurb-template/archive/master.zip">Github</a>.</p>
<h2>Asset Copying</h2>
<p>You can copy the content in the <i>src/assets</i> folder using <i>Gulp</i> in which <i>assets</i> will be your project folder. Important thing here is, the SASS files, JavaScript files and images will not come under this asset copying process, as they will be having their own process to copy the content.</p>
<h2>Page Compilation</h2>
<p>You can create HTML pages under three folders namely <i>pages</i>, <i>layouts</i> and <i>partials</i> which resides inside the <i>src/</i> directory. You can use the <a target="_blank" rel="nofollow" href="https://foundation.zurb.com/sites/docs/panini.html">Panini</a> flat file compiler that creates layouts for pages by using templates, pages, HTML partials. This process can be done by using <a target="_blank" rel="nofollow" href="http://handlebarsjs.com/">Handlebars</a> templating language.</p>
<h2>SASS Compilation</h2>
<p>You can compile the SASS to CSS using <a target="_blank" rel="nofollow" href="http://sass-lang.com/libsass">Libsass</a> and the main SASS file will be stored under <i>src/assets/scss/app.scss</i> and also newly created SASS partials will be stored under this folder itself. The output of CSS will be like normal CSS, which is in the nested style. You can compress the CSS with <a target="_blank" rel="nofollow" href="https://github.com/jakubpawlowicz/clean-css/issues">clean-css</a> and removes the unused CSS from the stylesheet using <a target="_blank" rel="nofollow" href="https://github.com/giakki/uncss">UnCSS</a>.</p>
<h2>JavaScript Compilation</h2>
<p>The JavaScript files will be stored under <i>src/assets/js</i> folder along with Foundation and all dependencies are tied together into <i>app.js</i> file. The files will be tied together as specified in the below order −</p>
<h2>Image Compression</h2>
<p>By default, all images will be stored under <i>assets/img</i> folder under <i>dist</i> folder. You can compress the images while building for production using <i>gulp-imagemin</i> which supports JPEG, PNG, SVG and GIF files.</p>
<h2>BrowserSync</h2>
<p>You can create a <a target="_blank" rel="nofollow" href="https://www.browsersync.io/">BrowserSync</a> server which is synchronized browser testing available at <b>http://localhost:8000</b> and able to see the compiled templates using this URL. While your server is running, the page refreshes automatically when you save the file and you could see the changes made to the page in real time as you work.</p>
<p>© Copyright 2017. All Rights Reserved.</p>
<pre class="result notranslate">
$ foundation new --framework sites --template basic
</pre>
<p>To set up this, first run the <i>npm install</i>, <i>bower install</i> and use the <i>npm start</i> command to run it. You can also download the template files from the <a target="_blank" rel="nofollow" href="https://github.com/zurb/foundation-sites-template/archive/master.zip">Github</a>.</p>
<h2>ZURB Template</h2>
<p>It is a combination of CSS/SCSS, JavaScript, Handlebars template, markup structure, image compression and uses SASS processing. You can use the ZURB template by using <i>Yeti Launch</i> or using <i>Foundation CLI</i> using the below command −</p>
<pre class="result notranslate">
$ foundation new --framework sites --template zurb
</pre>
<title>Foundation Kitchen Sink</title>
<h1>Foundation - Kitchen Sink</h1>
<h2>Description</h2>
<p>It includes the Foundation elements to work with the web applications smoothly. The following table lists some of the Foundation components −</p>
<p>Accordions contain vertical tabs which are used on websites to expand and collapse large amount of data.</p>
<p>It displays the collapsible menu with accordion effects.</p>
<p>Badges are similar to labels, which are used to highlight the information such as important notes and messages.</p>
<p>It specifies the current location for a site within navigational hierarchy.</p>
<p>Foundation supports standard buttons with different styles.</p>
<p>Callout is an element, which can be used to place the content inside.</p>
<p>It is used to dismiss the alert box.</p>
<p>Drilldown menu changes the nested lists into vertical drilldown menu.</p>
<p>Dropdown menu is used for displaying links in a list format.</p>
<p>Dropdown pane displays the content when you click the button.</p>
<p>It is used to create video objects in the web pages.</p>
<p>It is used to add utility classes to HTML elements.</p>
<p>It is used to create form layout to collect user input.</p>
<p>Labels are inline styles, which define a label for an input element.</p>
<p>It is used to add media objects such as images, video, blog comments etc. Which can be placed left or right of the content block.</p>
<p>It provides access to different modes in the website.</p>
<p>It is a type of navigation that divides the content into a series of related pages.</p>
<p>It specifies the range of values by dragging a handle.</p>
<p>It is used to switch between on and off state.</p>
<p>It represents the data in rows and columns format.</p>
<p>It is a navigation based tab that displays the content into different panes without leaving the page.</p>
<p>It styles the images in thumbnail shape.</p>
<p>It is used to display the current screen used by the user with other menu items.</p>
<p>It is small pop-up box that describes the information when you hover the mouse on the link.</p>
<p>It is used to create navigation header in the website.</p>
<p>It is an easy and powerful slider that swipes the elements using the <i>orbit</i> class.</p>
<p>© Copyright 2017. All Rights Reserved.</p>
<title>Foundation Global Styles</title>
<h1>Foundation - Global Styles</h1>
<p>In this chapter, we will study about <i>Global Styles</i>. The global CSS of Foundation framework includes useful resets that makes sure styling is consistent across browsers.</p>
<h2>Font Sizing</h2>
<p>The font size of the browser style sheet is set to 100% by default. The default font size is set to 16 pixels. Depending on font size, grid size is calculated. To have distinct base font size and unaffected grid breakpoints, set <i>$rem-base</i> to <i>$global-font-size</i> value, which must be in pixels.</p>
<h2>Colors</h2>
<p>Interactive elements like <i>links</i> and <i>buttons</i> use default shade of blue which comes from SASS variable <i>$primary-color</i>. Components can also have colors such as: <i>secondary, alert, success and warning</i>. For more information check <a href="/foundation/global_styles_color.htm">here</a>.</p>
<h2>SASS Reference</h2>
<h3>Variables</h3>
<p>The following table lists the SASS variables, which are used to customize the default styles of components in your project <i>_settings.scss</i>.</p>
<p><b>$global-width</b></p>
<p>It represents the site's global width. Used to determine the grid's row width.</p>
<p><b>$global-font-size</b></p>
<p>It represents the font size applied to <i><html></i> and <i><body></i>. It is set 100% by default and the user's browser settings value will be inherited.</p>
<p><b>$global-lineheight</b></p>
<p>It represents all types of default line height. <i>$global-lineheight</i> is 24px while <i>$global-font-size</i> set to 16px.</p>
<p><b>$primary-color</b></p>
<p>It gives color to the interactive components such as links and buttons.</p>
<p><b>$secondary-color</b></p>
<p>It is used with components, which support <i>.secondary</i> class.</p>
<p><b>$success-color</b></p>
<p>It represents the positive status or action when used with <i>.success</i> class.</p>
<p><b>$warning-color</b></p>
<p>It represents a caution status or action when used with <i>.warning</i> class.</p>
<p><b>$alert-color</b></p>
<p>It represents a negative status or action when used with <i>.alert</i> class.</p>
<p><b>$light-gray</b></p>
<p>It is used for light gray UI items.</p>
<p><b>$medium-gray</b></p>
<p>It is used for medium gray UI items.</p>
<p><b>$dark-gray</b></p>
<p>It is used for dark gray UI items.</p>
<p><b>$black</b></p>
<p>It is used for black UI items.</p>
<p><b>$white</b></p>
<p>It is used for white UI items.</p>
<p><b>$body-background</b></p>
<p>It represents the background color of the body.</p>
<p><b>$body-font-color</b></p>
<p>It represents the text color of the body.</p>
<p><b>$body-font-family</b></p>
<p>It represents the list of fonts of the body.</p>
<p><b>$body-antialiased</b></p>
<p>Antialiased type is enabled by setting this attribute to <i>true</i> using the CSS properties <i>-webkit-font-smoothing</i> and <i>-moz-osx-font-smoothing</i>.</p>
<p><b>$global-margin</b></p>
<p>It represents the global margin value on components.</p>
<p><b>$global-padding</b></p>
<p>It represents global padding value on components.</p>
<p><b>$global-margin</b></p>
<p>It represents global margin value used between components.</p>
<p><b>$global-weight-normal</b></p>
<p>It represents global font weight for normal type.</p>
<p><b>$global-weight-bold</b></p>
<p>It represents global font weight for bold type.</p>
<p><b>$global-radius</b></p>
<p>It represents the global value of all elements which has a border radius.</p>
<p><b>$global-text-direction</b></p>
<p>It sets the text direction of the CSS to <i>ltr</i> or <i>rtl</i></p>
<p>© Copyright 2017. All Rights Reserved.</p>
<title>Foundation Sass</title>
<h1>Foundation - Sass</h1>
<p>SASS helps to make the code more flexible and customizable in Foundation.</p>
<h2>Compatibility</h2>
<p>To install SASS based version for foundation, Ruby should be installed on Windows. Foundation can be compiled with Ruby SASS and libsass. We recommend <b>node-sass 3.4.2+</b> version to compile SASS.</p>
<h3>Autoprefixer Required</h3>
<p>Autoprefixer handles SASS files. <i>gulp-autoprefixer</i> is used to build the process. The following autoprefixer setting is used to get proper browser support.</p>
<h2>Loading the Framework</h2>
<p>We can install the framework files using NPM. Using command line interface (CLI), we can compile the Sass files. Following is the command to load the framework −</p>
<p>After running the above command line code, you will get the following lines −</p>
<h3>Compiling Manually</h3>
<p>Framework files can be added as an import path depending upon on your build process, but the path will be the same <i>packages_folder/foundation-sites/scss</i>. The <i>@import</i> statement is included at the top of the <i>foundation-sites.scss</i> file. The next line in the given code is explained in the <b>Adjusting CSS Output</b> section.</p>
<h3>Using Compiled CSS</h3>
<p>You can include the pre-compiled CSS files. There are two types of CSS files, i.e. minified and unminified. Minified version is used for production and the unminified version is used to directly edit the framework CSS.</p>
<h2>Adjusting CSS Output</h2>
<p>For various components, Foundation output consist of many classes. It is used to control the CSS output of the framework. Add the following single line of code to include all the components at once.</p>
<p>The following is the list of the components imported when you write the above code in your scss file. The components which are not necessary can be commented. You can view the below given code lines in the <i>Your_folder_name/node_modules/foundation-sites/scss/foundation.scss</i> file.</p>
<h2>The Settings File</h2>
<p>A settings file is included in the entire foundation project i.e. <i>_settings.scss</i>. If you are using Yeti Launch or the CLI to create a Foundation for Sites project, you can find the settings file under src/assets/scss/.</p>
<p>We have installed Foundation using npm, hence you can find the settings file included under <i>your_folder_name/node_modules/foundation-sites/scss/settings/_settings.scss</i>. You can move this into your own Sass files to work with.</p>
<p>You can write your own CSS, if you are not able to customize with variables. Following is a set of variables, which change the default styling of buttons..</p>
<p>© Copyright 2017. All Rights Reserved.</p>
<pre class="result notranslate">
autoprefixer({
browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});
</pre>
<h2>Loading the Framework</h2>
<p>We can install the framework files using NPM. Using command line interface (CLI), we can compile the Sass files. Following is the command to load the framework −</p>
<pre class="result notranslate">
npm install foundation-sites --save
</pre>
<p>After running the above command line code, you will get the following lines −</p>
<img src="/foundation/images/foundation-sass/foundation-sass-cli.jpg" alt="Foundation sass" />
<h3>Compiling Manually</h3>
<p>Framework files can be added as an import path depending upon on your build process, but the path will be the same <i>packages_folder/foundation-sites/scss</i>. The <i>@import</i> statement is included at the top of the <i>foundation-sites.scss</i> file. The next line in the given code is explained in the <b>Adjusting CSS Output</b> section.</p>
<pre class="result notranslate">
@import 'foundation';
@include foundation-everything;
</pre>
<h3>Using Compiled CSS</h3>
<p>You can include the pre-compiled CSS files. There are two types of CSS files, i.e. minified and unminified. Minified version is used for production and the unminified version is used to directly edit the framework CSS.</p>
<pre class="result notranslate">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">
</pre>
<h2>Adjusting CSS Output</h2>
<p>For various components, Foundation output consist of many classes. It is used to control the CSS output of the framework. Add the following single line of code to include all the components at once.</p>
<pre class="result notranslate">
@include foundation-everything;
</pre>
<p>The following is the list of the components imported when you write the above code in your scss file. The components which are not necessary can be commented. You can view the below given code lines in the <i>Your_folder_name/node_modules/foundation-sites/scss/foundation.scss</i> file.</p>
<pre class="prettyprint notranslate">
@import 'foundation';
@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....
</pre>
<h2>The Settings File</h2>
<p>A settings file is included in the entire foundation project i.e. <i>_settings.scss</i>. If you are using Yeti Launch or the CLI to create a Foundation for Sites project, you can find the settings file under src/assets/scss/.</p>
<p>We have installed Foundation using npm, hence you can find the settings file included under <i>your_folder_name/node_modules/foundation-sites/scss/settings/_settings.scss</i>. You can move this into your own Sass files to work with.</p>
<p>You can write your own CSS, if you are not able to customize with variables. Following is a set of variables, which change the default styling of buttons..</p>
<pre class="prettyprint notranslate">
$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
);
$button-opacity-disabled: 0.25;
</pre>
<title>Foundation JavaScript</title>
<h1>Foundation - JavaScript</h1>
<p>In this chapter, we will study about <i>JavaScript</i>. It is easy to set up JavaScript in Foundation; only thing you require is jQuery.</p>
<h2>JavaScript Installing</h2>
<p>You can use ZIP download, package manager, or CDN to get Foundation JavaScript file. In your code you can provide links to jQuery and Foundation as <script> tags, placed before the closing <body> and check that Foundation is loaded after jQuery. For more information <a href="/foundation/foundation_javascript_installation.htm">click here</a>.</p>
<h2>File Structure</h2>
<p>When you install Foundation through command line, Foundation plugins downloads as individual files such as <i>foundation.tabs.js</i>, <i>foundation.dropdownMenu.js</i>, <i>foundation.slider.js</i> and so on. All these files are combined into <i>foundation.js</i>, which provides all the plugins at one time. If you wish to use some plugin, first <i>foundation.core.js</i> should be loaded.</p>
<p>For instance −</p>
<p>Certain plugins may require particular utility libraries, which come with Foundation installation. You can study in detail about specific plugin requirements in the next chapter <a href="/foundation/foundation_javascript_utilities.htm">JavaScript Utilities</a>.</p>
<p>Loading individual files creates network overhead, specifically for mobile users. For faster page loading, use of <a target="_blank" rel="nofollow" href="http://gruntjs.com/">grunt</a> or <a target="_blank" rel="nofollow" href="http://gulpjs.com/">gulp</a> is recommended.</p>
<h2>Initializing</h2>
<p>The <i>foundation()</i> function is used to initialize all the Foundation plugin at one time.</p>
<p>For instance −</p>
<h2>Using Plugins</h2>
<p>Using data attributes, plugins are connected to HTML elements as they match the plugins’ name. A single HTML element can have only one plugin at a time, although the majority of the plugins can be nested within other ones. For instance, tooltip link is created by adding <i>data-tooltip</i>. For more information <a href="/foundation/javascript_using_plugins.htm">click here</a>.</p>
<h2>Configuring Plugins</h2>
<p>Plugins can be customized by using its configuration settings. For instance, you can set the speed of the <i>accordion</i> slides up and down. The plugin settings can be globally changed using the plugin's <b>DEFAULTS</b> property. For more information <a href="/foundation/javascript_configuring_plugins.htm">click here</a>.</p>
<h2>Adding Plugins after Page Load</h2>
<p>When new HTML is added to the DOM, any of the plugins on those elements will not be initialized by default. You can check for new plugins by re-calling the <i>.foundation()</i> function.</p>
<p>For instance −</p>
<h2>Programmatic Use</h2>
<p>In JavaScript, plugins can be created programmatically and each plugin is global <i>Foundation</i> object's class, with a constructor which takes two parameters such as an element and an object.</p>
<p>Majority of the plugins are provided with public API, which lets you manipulate it via JavaScript. You can look through the documentations of plugin to study the available functions and methods can be invoked easily.</p>
<p>For instance −</p>
<p>You are allowed to choose any jQuery selector and if the selector holds multiple plugins, then they all will have identical chosen method called.</p>
<p>Arguments can be passed just like passing arguments to JavaScript.</p>
<p>Methods that are prefixed with <i>underscore(_)</i> are considered as a portion of internal API, meaning, that without warning they can break, change or even disappear.</p>
<h2>Events</h2>
<p>Whenever a specific function finishes, DOM triggers an event. For instance, whenever tabs are changed, it can be listened and create a return response to it. Each plugin can trigger list of events, which will be documented in plugin's documentation. In Foundation 6, callback plugins are removed and must be taken as event listeners.</p>
<p>For instance −</p>
<p>© Copyright 2017. All Rights Reserved.</p>
<pre class="result notranslate">
<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>
</pre>
<p>Certain plugins may require particular utility libraries, which come with Foundation installation. You can study in detail about specific plugin requirements in the next chapter <a href="/foundation/foundation_javascript_utilities.htm">JavaScript Utilities</a>.</p>
<p>Loading individual files creates network overhead, specifically for mobile users. For faster page loading, use of <a target="_blank" rel="nofollow" href="http://gruntjs.com/">grunt</a> or <a target="_blank" rel="nofollow" href="http://gulpjs.com/">gulp</a> is recommended.</p>
<h2>Initializing</h2>
<p>The <i>foundation()</i> function is used to initialize all the Foundation plugin at one time.</p>
<p>For instance −</p>
<pre class="result notranslate">
(document).foundation();
</pre>
<h2>Using Plugins</h2>
<p>Using data attributes, plugins are connected to HTML elements as they match the plugins’ name. A single HTML element can have only one plugin at a time, although the majority of the plugins can be nested within other ones. For instance, tooltip link is created by adding <i>data-tooltip</i>. For more information <a href="/foundation/javascript_using_plugins.htm">click here</a>.</p>
<h2>Configuring Plugins</h2>
<p>Plugins can be customized by using its configuration settings. For instance, you can set the speed of the <i>accordion</i> slides up and down. The plugin settings can be globally changed using the plugin's <b>DEFAULTS</b> property. For more information <a href="/foundation/javascript_configuring_plugins.htm">click here</a>.</p>
<h2>Adding Plugins after Page Load</h2>
<p>When new HTML is added to the DOM, any of the plugins on those elements will not be initialized by default. You can check for new plugins by re-calling the <i>.foundation()</i> function.</p>
<p>For instance −</p>
<pre class="result notranslate">
$.ajax('assets/partials/kitten-carousel.html', function(data) {
$('#kitten-carousel'</span>).html(data).foundation();
});
</pre>
<h2>Programmatic Use</h2>
<p>In JavaScript, plugins can be created programmatically and each plugin is global <i>Foundation</i> object's class, with a constructor which takes two parameters such as an element and an object.</p>
<pre class="result notranslate">
var $accordion = new Foundation.Accordion($('#accordion'), {
slideSpeed: 600, multiExpand: true
});
</pre>
<p>Majority of the plugins are provided with public API, which lets you manipulate it via JavaScript. You can look through the documentations of plugin to study the available functions and methods can be invoked easily.</p>
<p>For instance −</p>
<pre class="prettyprint notranslate">
$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.
$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.
$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.
</pre>
<ul class="list">
<li><p>You are allowed to choose any jQuery selector and if the selector holds multiple plugins, then they all will have identical chosen method called.</p></li>
<li><p>Arguments can be passed just like passing arguments to JavaScript.</p></li>
<li><p>Methods that are prefixed with <i>underscore(_)</i> are considered as a portion of internal API, meaning, that without warning they can break, change or even disappear.</p></li>
</ul>
<h2>Events</h2>
<p>Whenever a specific function finishes, DOM triggers an event. For instance, whenever tabs are changed, it can be listened and create a return response to it. Each plugin can trigger list of events, which will be documented in plugin's documentation. In Foundation 6, callback plugins are removed and must be taken as event listeners.</p>
<p>For instance −</p>
<pre class="result notranslate">
$('[data-tabs]').on('change.zf.tabs', function() {
console.log('Tabs are changed!');
});
</pre>
<title>Foundation JavaScript Utilities</title>
<h1>Foundation - JavaScript Utilities</h1>
<p>Foundation includes JavaScript utilities that are used to add common functionalities. It is very helpful and easy to use. This JavaScript utilities library can be found in the folder <i>Your_folder_name/node_modules/foundation-sites/js</i></p>
<h2>Box</h2>
<p><i>Foundation.Box</i> library consists of a couple of methods.</p>
<p>The <b>js/foundation.util.box.js</b> is the script filename, which can be included while writing the code.</p>
<p>Either jQuery objects or plain JavaScript elements can be pass to both methods.</p>
<p>The returned object specifies the dimension of the <i>element</i> as −</p>
<p>Function <i>ImNotTouchingYou</i> is included.</p>
<p>Based on the passed element, a Boolean value is returned, which is either a conflict with edge of the window or optional or a parent element.</p>
<p>The two options specified in the line given below i.e. leftAndRightOnly, topAndBottomOnly is used to identify the collision on only one axis.</p>
<h2>Keyboard</h2>
<p>There are many methods in <i>Foundation.Keyboard</i>, which helps to make the keyboard event interaction easy.</p>
<p>The <b>js/foundation.util.keyboard.js</b> is the script filename, which can be included while writing the code.</p>
<p>The object <i>Foundation.Keyboard.keys</i> consist key/value pairs, which keys are used in the framework more frequently.</p>
<p>Whenever the key is pressed then <i>Foundation.Keyboard.parseKey</i> is called to get a string. This helps to manage your own keyboard inputs.</p>
<p>The following code is used to find all focusable elements within the given <i>$element</i>. Therefore, there is no need of writing any function and selector by you.</p>
<p>The <i>handleKey</i> function is a main function of this library.</p>
<p>This method is used to handle the keyboard event; it can be called whenever any plugin is registered with the utility.</p>
<p>The <i>Foundation.Keyboard.register</i> function can be called when you want to use your own key bindings.</p>
<h2>MediaQuery</h2>
<p><i>MediaQuery</i> library is a backbone of all responsive CSS technique.</p>
<p>The <b>js/foundation.util.mediaQuery.js</b> is the script filename, which can be included while writing the code.</p>
<p>The <i>Foundation.MediaQuery.atLeast('large')</i> is used to check if the screen is at least as wide as a breakpoint.</p>
<p>The <i>Foundation.MediaQuery.get('medium')</i> gets the media query of a breakpoint.</p>
<p>The <i>Foundation.MediaQuery.queries</i> are an array of media queries, Foundation uses for breakpoints.</p>
<p>The <i>Foundation.MediaQuery.current</i> is a string of the current breakpoint size.</p>
<p>The following code broadcasts the media query change on the window.</p>
<h2>Motion & Move</h2>
<p><i>Foundation.Motion</i> javascript is similar to Motion UI library, which is included in the Foundation 6. It is used to create custom CSS transitions and animations.</p>
<p>The <b>js/foundation.util.motion.js</b> is the script filename, which can be included while writing the code.</p>
<p><i>Foundation.Move</i> is used to make CSS3 backed animation simple and elegant.</p>
<p><b>requestAnimationFrame();</b> method tells the browser to perform an animation; it requests that your animation function be called before the browser performs the next repaint.</p>
<p>When the animation is completed, <i>finished.zf.animate</i> is fired.</p>
<h2>Timer & Images Loaded</h2>
<p>Orbit uses both, the function timer and the image loaded. The <b>js/foundation.util.timerAndImageLoader.js</b> is the script filename, which can be included while writing the code.</p>
<p>The image-loaded method runs a callback function in your jQuery collection when images are completely loaded.</p>
<h2>Touch</h2>
<p>The methods are used for adding pseudo drag events and swipe to elements.</p>
<p>The <b>js/foundation.util.touch.js</b> is the script filename, which can be included while writing the code.</p>
<p>The <i>addTouch</i> method is used to bind elements to touch events in the Slider plugin for mobile devices.</p>
<p>The <i>spotSwipe</i> method binds the elements to swipe events in the Orbit plugin for mobile devices.</p>
<h2>Triggers</h2>
<p>It triggers the specified event for the selected elements.</p>
<p>The <b>js/foundation.util.triggers.js</b> is the script filename, which can be included while writing the code.</p>
<p>The triggers are utilized in many Foundation plugin.</p>
<p>The following two methods are used in this library i.e. resize and scroll.</p>
<p>The <i>resize()</i> method triggers the resize event when a resize event occurs.</p>
<p>The <i>scroll()</i> method triggers the scroll event when a scroll event occurs.</p>
<h2>Miscellaneous</h2>
<p>Foundation contains few features in the core library, which are used in many places.</p>
<p>The <b>js/foundation.core.js</b> is the script filename, which can be included while writing the code.</p>
<p><i>Foundation.GetYoDigits([number, namespace])</i> returns a random base-36 uid with namespacing. It returns the string length of 6 characters long by default.</p>
<p><i>Foundation.getFnName(fn)</i> returns a JavaScript function name.</p>
<p><i>Foundation.transitionend</i> occurs when CSS transition is completed.</p>
<p>© Copyright 2017. All Rights Reserved.</p>
<pre class="result notranslate">
var dims = Foundation.Box.GetDimensions(element);
</pre>
<p>The returned object specifies the dimension of the <i>element</i> as −</p>
<pre class="prettyprint notranslate">
{
height: 54,
width: 521,
offset: {
left: 198,
top: 1047
},
parentDims: {
height: ... //The same format is share for parentDims and windowDims as the element dimensions.
},
windowDims: {
height: ...
}
}
</pre>
<ul class="list">
<li><p>Function <i>ImNotTouchingYou</i> is included.</p></li>
<li><p>Based on the passed element, a Boolean value is returned, which is either a conflict with edge of the window or optional or a parent element.</p></li>
<li><p>The two options specified in the line given below i.e. leftAndRightOnly, topAndBottomOnly is used to identify the collision on only one axis.</p></li>
</ul>
<pre class="result notranslate">
var clear = Foundation.Box.ImNotTouchingYou(
element [, parent, leftAndRightOnly, topAndBottomOnly]);
</pre>
<h2>Keyboard</h2>
<ul class="list">
<li><p>There are many methods in <i>Foundation.Keyboard</i>, which helps to make the keyboard event interaction easy.</p></li>
<li><p>The <b>js/foundation.util.keyboard.js</b> is the script filename, which can be included while writing the code.</p></li>
<li><p>The object <i>Foundation.Keyboard.keys</i> consist key/value pairs, which keys are used in the framework more frequently.</p></li>
<li><p>Whenever the key is pressed then <i>Foundation.Keyboard.parseKey</i> is called to get a string. This helps to manage your own keyboard inputs.</p></li>
</ul>
<p>The following code is used to find all focusable elements within the given <i>$element</i>. Therefore, there is no need of writing any function and selector by you.</p>
<pre class="result notranslate">
var focusable = Foundation.Keyboard.findFocusable($('#content'));
</pre>
<ul class="list">
<li><p>The <i>handleKey</i> function is a main function of this library.</p></li>
<li><p>This method is used to handle the keyboard event; it can be called whenever any plugin is registered with the utility.</p></li>
</ul>
<pre class="prettyprint notranslate">
Foundation.Keyboard.register('pluginName', {
'TAB': 'next'
});
...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
next: function(){
//do stuff
}
});
</pre>
<p>The <i>Foundation.Keyboard.register</i> function can be called when you want to use your own key bindings.</p>
<h2>MediaQuery</h2>
<ul class="list">
<li><p><i>MediaQuery</i> library is a backbone of all responsive CSS technique.</p></li>
<li><p>The <b>js/foundation.util.mediaQuery.js</b> is the script filename, which can be included while writing the code.</p></li>
<li><p>The <i>Foundation.MediaQuery.atLeast('large')</i> is used to check if the screen is at least as wide as a breakpoint.</p></li>
<li><p>The <i>Foundation.MediaQuery.get('medium')</i> gets the media query of a breakpoint.</p></li>
<li><p>The <i>Foundation.MediaQuery.queries</i> are an array of media queries, Foundation uses for breakpoints.</p></li>
<li><p>The <i>Foundation.MediaQuery.current</i> is a string of the current breakpoint size.</p></li>
</ul>
<pre class="result notranslate">
Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;
</pre>
<p>The following code broadcasts the media query change on the window.</p>
<pre class="result notranslate">
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});
</pre>
<h2>Motion & Move</h2>
<ul class="list">
<li><p><i>Foundation.Motion</i> javascript is similar to Motion UI library, which is included in the Foundation 6. It is used to create custom CSS transitions and animations.</p></li>
<li><p>The <b>js/foundation.util.motion.js</b> is the script filename, which can be included while writing the code.</p></li>
<li><p><i>Foundation.Move</i> is used to make CSS3 backed animation simple and elegant.</p></li>
<li><p><b>requestAnimationFrame();</b> method tells the browser to perform an animation; it requests that your animation function be called before the browser performs the next repaint.</p></li>
</ul>
<pre class="result notranslate">
Foundation.Move(durationInMS, $element, function(){
//animation logic
});
</pre>
<p>When the animation is completed, <i>finished.zf.animate</i> is fired.</p>
<h2>Timer & Images Loaded</h2>
<p>Orbit uses both, the function timer and the image loaded. The <b>js/foundation.util.timerAndImageLoader.js</b> is the script filename, which can be included while writing the code.</p>
<pre class="result notranslate">
var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);
</pre>
<p>The image-loaded method runs a callback function in your jQuery collection when images are completely loaded.</p>
<pre class="result notranslate">
Foundation.onImagesLoaded($images, callback);
</pre>
<h2>Touch</h2>
<ul class="list">
<li><p>The methods are used for adding pseudo drag events and swipe to elements.</p></li>
<li><p>The <b>js/foundation.util.touch.js</b> is the script filename, which can be included while writing the code.</p></li>
<li><p>The <i>addTouch</i> method is used to bind elements to touch events in the Slider plugin for mobile devices.</p></li>
<li><p>The <i>spotSwipe</i> method binds the elements to swipe events in the Orbit plugin for mobile devices.</p></li>
</ul>
<pre class="result notranslate">
$('selector').addTouch().on('mousemove', handleDrag);
$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);
</pre>
<h2>Triggers</h2>
<ul class="list">
<li><p>It triggers the specified event for the selected elements.</p></li>
<li><p>The <b>js/foundation.util.triggers.js</b> is the script filename, which can be included while writing the code.</p></li>
<li><p>The triggers are utilized in many Foundation plugin.</p></li>
</ul>
<pre class="result notranslate">
$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);
</pre>
<p>The following two methods are used in this library i.e. resize and scroll.</p>
<ul class="list">
<li><p>The <i>resize()</i> method triggers the resize event when a resize event occurs.</p></li>
<li><p>The <i>scroll()</i> method triggers the scroll event when a scroll event occurs.</p></li>
</ul>
<pre class="result notranslate">
$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);
</pre>
<title>Foundation Media Queries</title>
<h1>Foundation - Media Queries</h1>
<p>Media queries are CSS3 module that include media features such as width, height, color and displays the content as per the specified screen resolution.</p>
<p>Foundation uses the following media queries to create breakdown ranges −</p>
<p><b>Small</b> − Used for any screen.</p>
<p><b>Medium</b> − It is used for screens of 640 pixels and wider.</p>
<p><b>Large</b> − It is used for screens of 1024 pixels and wider.</p>
<p>You can change the screen size by using the <i>breakpoint classes</i>. For instance, you can use <i>.small-6</i> class for small sized screens and <i>.medium-4</i> class for medium sized screens as shown in the following code snippet −</p>
<h2>Changing the Breakpoints</h2>
<p>You can change the breakpoints, if your application uses SASS version of Foundation. You can place the breakpoints name under the <i>$breakpoints</i> variable in the settings file as shown below −</p>
<p>You can change the breakpoints classes in the settings file by modifying the <i>$breakpoint-classes</i> variable. If you want to use <i>.large</i> class in the CSS, then add it to the end of the list as shown below −</p>
<p>Suppose, you want to use <i>.xlarge</i> class in the CSS, and then add this class to the end of the list as shown below −</p>
<h2>SASS</h2>
<h3>The Breakpoint Mixin</h3>
<p>You can write the media queries by using <i>breakpoint()</i> mixin along with <i>@include</i>.</p>
<p>Use the <i>down</i> or <i>only</i> keywords along with the breakpoint value to change the behavior of the media query as shown in the following code format −</p>
<p>You can use three media queries <i>portrait</i>, <i>landscape</i> and <i>retina</i> for device orientation or pixel density and they are not width based media queries.</p>
<h3>Breakpoint Function</h3>
<p>You can use the functionality of <i>breakpoint()</i> mixin by using the internal function.</p>
<p>The <i>breakpoint()</i> functionality can be used directly to write own media queries −</p>
<h2>JavaScript</h2>
<h3>Working with Media Queries</h3>
<p>The Foundation JavaScript provides the <i>MediaQuery.current</i> function to access current breakpoint name on the <i>Foundation.MediaQuery</i> object as specified below −</p>
<p>The <i>MediaQuery.current</i> function displays <i>small</i>, <i>medium</i>, <i>large</i> as current breakpoint names.</p>
<p>You can get the media query of breakpoint using the <i>MediaQuery.get</i> function as shown below −</p>
<h2>Sass Reference</h2>
<h3>Variables</h3>
<p>The following table lists the SASS variables, which can be used to customize the default styles of the component −</p>
<p><b>$breakpoints</b></p>
<p>It is a breakpoint name which can be used to write the media queries by using <i>breakpoint()</i> mixin.</p>
<p>small: 0px</p>
<p>medium: 640px</p>
<p>large: 1024px</p>
<p>xlarge: 1200px</p>
<p>xxlarge: 1440px</p>
<p><b>$breakpoint-classes</b></p>
<p>You can change the CSS class output by modifying the <i>$breakpoint-classes</i> variable.</p>
<h3>Mixins</h3>
<p>Mixins creates a group of styles to build your CSS class structure for the Foundation components.</p>
<p><b>BREAKPOINT</b></p>
<p>It uses <i>breakpoint()</i> mixin to create media queries and includes the following activities −</p>
<p>If string is passed, then mixin searches the string in the <i>$breakpoints</i> map and creates the media query.</p>
<p>If you are using pixel value, then convert it to em value using <i>$rem-base</i>.</p>
<p>If rem value is passed, then it changes its unit to em.</p>
<p>If you are using em value, then it can be used as it is.</p>
<p>The following table specifies the parameter used by the breakpoint −</p>
<p><b>$value</b></p>
<p>It is processes the values by using breakpoint name, px, rem or em values.</p>
<h3>Functions</h3>
<p><b>BREAKPOINT</b></p>
<p>It uses <i>breakpoint()</i> mixin to create media queries with matching input value.</p>
<p>The following table specifies the possible input value used by the breakpoint −</p>
<p><b>$val</b></p>
<p>It processes the values by using breakpoint name, px, rem or em values.</p>