FOUNDATION FEATURES<\/h2>\n1.\u00a0\u00a0\u00a0\u00a0 Decreased Page Load Time<\/strong><\/h4>\nThe Foundation team had to face some constructive criticism that claimed that in most Foundation projects, about the 90% of the CSS code goes unused. This wasn\u2019t only true for Foundation, but also for other major CSS frameworks such as Bootstrap. As part of their reply, Zurb decided to significantly cut the file size of the outputted CSS by implementing a roughly 40-50% code reduction.<\/p>\n
2.\u00a0\u00a0\u00a0\u00a0 Full Accessibility<\/strong><\/h4>\nProbably the most amazing feature of the new Foundation 6 is that it will be fully accessible. Every component and code snippet will come with the appropriate WAI-ARIA attributes and landmark roles. Moreover developers will even be provided with a user guide<\/strong> about how to use the a11y web standards<\/strong>.<\/p>\n3.\u00a0\u00a0\u00a0\u00a0 Explicit support for RTL languages<\/strong><\/h4>\nOlder versions supported RTL (right-to-left) languages like Arabic to an extent; but they needed some tweaking. Foundation 6 has support built right in.<\/p>\n
4.\u00a0\u00a0\u00a0\u00a0 Flex grid<\/strong><\/h4>\nThe Flex grid is exactly what you think it is: it\u2019s the Grid component re-done with Flexbox. On the one hand, this gives it a number of features and options that a regular float-based grid can\u2019t handle. On the other hand, it\u2019s probably not as well-supported, especially by IE. It\u2019s a trade-off.<\/p>\n
5.\u00a0\u00a0\u00a0\u00a0 Typography helper classes<\/strong><\/h4>\nA couple of cool enhancements were included for website-style typography. Specifically, there are helper classes designed to make typographic layouts just a bit easier to deal with:<\/p>\n
\n- Text alignment classes<\/li>\n
- Subheader classes \u2013 applies a lighter color to any heading with the .subheader<\/em><\/li>\n
- Lead paragraph styles<\/li>\n
- Un-bulleted lists<\/li>\n
- Statistics \u2013 applies a larger font size to important numbers<\/li>\n<\/ul>\n
6.\u00a0\u00a0\u00a0\u00a0 Navigation<\/strong><\/h4>\nAs mentioned above, all of the previous navigation components got merged into one-big flexible component. This means that all navigation types will play nicely with each other. It also means that you can choose different kinds of navigation for different screen sizes.<\/p>\n
Want drill-down navigation on a smart phone, and a horizontal bar on a desktop? Easily done with the screen-size-specific classes. Want your \u201cTop bar\u201d back? Just add a wrapper div around the default menu components.<\/p>\n
7.\u00a0\u00a0\u00a0\u00a0 Badge<\/strong><\/h4>\nYou know those little circles or squares\u2014usually placed on or near icons of some sort\u2014with tiny numbers in them? Like when you have Facebook notifications? Those are called badges.<\/p>\n
You learn something new every day. Also, Foundation has them now.<\/p>\n
8.\u00a0\u00a0\u00a0\u00a0 Sticky<\/strong><\/h4>\nNeed to make something stay on the screen while the user scrolls? Want to make it stop at a certain point? Sticky is your plug-in! This is also the thing to use if you want to make the Magellan menu work like it did in Foundation 6.<\/p>\n
9.\u00a0\u00a0\u00a0\u00a0 Toggler<\/strong><\/h4>\nIn case dropdowns, accordions, drilldowns, tooltips, and modals aren\u2019t enough for you, here\u2019s a generic way to make stuff appear or disappear. It\u2019s a simple JavaScript-based toggle event that can be applied to basically anything.<\/p>\n
I imagine it\u2019s for those times when none of the other components fit the purpose, or would be overkill. It integrates the Motion UI library, so you can animate the disappearing act just about any way you like.<\/p>\n
10. Media object<\/strong><\/h4>\nWell, the name sounds like it\u2019s an element where you can embed a video or Flash object (yuck), and you could do that I guess. What it\u2019s really meant for is displaying any<\/em> media object, such as an image, alongside text information.<\/p>\nBASIC FEATURES IN FOUNDATION 6<\/h3>\n
![\"vibidsoft_foundation\"](\"https:\/\/www.vibidsoft.com\/blog\/wp-content\/uploads\/2016\/07\/vibidsoft_foundation.jpg\")
<\/a><\/p>\n\n- Abide \u2013 form validation<\/li>\n
- Accordions<\/li>\n
- Basic global styles<\/li>\n
- Breadcrumb navigation<\/li>\n
- Buttons<\/li>\n
- Callouts<\/li>\n
- Color mixins<\/li>\n
- Dropdown menus<\/li>\n
- Equalizer \u2013 column alignment<\/li>\n
- Flex Video<\/li>\n
- Forms<\/li>\n
- Interchange responsive content<\/li>\n
- Label<\/li>\n
- Magellan \u2013 no longer sticky by default<\/li>\n
- Media queries (it should be noted that the break points have changed)<\/li>\n
- Off-canvas<\/li>\n
- Pagination<\/li>\n
- Progress bars<\/li>\n
- Reveal<\/li>\n
- Sliders<\/li>\n
- Switches<\/li>\n
- Tables<\/li>\n
- Tabs<\/li>\n
- The Grid<\/li>\n
- Thumbnails<\/li>\n
- Tooltip<\/li>\n
- Typography styles<\/li>\n
- Visibility and utility classes<\/li>\n<\/ul>\n
You can refer Foundation website<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[8,1],"tags":[35,57],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":6,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/2325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media\/283"}],"wp:attachment":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The Foundation team had to face some constructive criticism that claimed that in most Foundation projects, about the 90% of the CSS code goes unused. This wasn\u2019t only true for Foundation, but also for other major CSS frameworks such as Bootstrap. As part of their reply, Zurb decided to significantly cut the file size of the outputted CSS by implementing a roughly 40-50% code reduction.<\/p>\n
2.\u00a0\u00a0\u00a0\u00a0 Full Accessibility<\/strong><\/h4>\nProbably the most amazing feature of the new Foundation 6 is that it will be fully accessible. Every component and code snippet will come with the appropriate WAI-ARIA attributes and landmark roles. Moreover developers will even be provided with a user guide<\/strong> about how to use the a11y web standards<\/strong>.<\/p>\n3.\u00a0\u00a0\u00a0\u00a0 Explicit support for RTL languages<\/strong><\/h4>\nOlder versions supported RTL (right-to-left) languages like Arabic to an extent; but they needed some tweaking. Foundation 6 has support built right in.<\/p>\n
4.\u00a0\u00a0\u00a0\u00a0 Flex grid<\/strong><\/h4>\nThe Flex grid is exactly what you think it is: it\u2019s the Grid component re-done with Flexbox. On the one hand, this gives it a number of features and options that a regular float-based grid can\u2019t handle. On the other hand, it\u2019s probably not as well-supported, especially by IE. It\u2019s a trade-off.<\/p>\n
5.\u00a0\u00a0\u00a0\u00a0 Typography helper classes<\/strong><\/h4>\nA couple of cool enhancements were included for website-style typography. Specifically, there are helper classes designed to make typographic layouts just a bit easier to deal with:<\/p>\n
\n- Text alignment classes<\/li>\n
- Subheader classes \u2013 applies a lighter color to any heading with the .subheader<\/em><\/li>\n
- Lead paragraph styles<\/li>\n
- Un-bulleted lists<\/li>\n
- Statistics \u2013 applies a larger font size to important numbers<\/li>\n<\/ul>\n
6.\u00a0\u00a0\u00a0\u00a0 Navigation<\/strong><\/h4>\nAs mentioned above, all of the previous navigation components got merged into one-big flexible component. This means that all navigation types will play nicely with each other. It also means that you can choose different kinds of navigation for different screen sizes.<\/p>\n
Want drill-down navigation on a smart phone, and a horizontal bar on a desktop? Easily done with the screen-size-specific classes. Want your \u201cTop bar\u201d back? Just add a wrapper div around the default menu components.<\/p>\n
7.\u00a0\u00a0\u00a0\u00a0 Badge<\/strong><\/h4>\nYou know those little circles or squares\u2014usually placed on or near icons of some sort\u2014with tiny numbers in them? Like when you have Facebook notifications? Those are called badges.<\/p>\n
You learn something new every day. Also, Foundation has them now.<\/p>\n
8.\u00a0\u00a0\u00a0\u00a0 Sticky<\/strong><\/h4>\nNeed to make something stay on the screen while the user scrolls? Want to make it stop at a certain point? Sticky is your plug-in! This is also the thing to use if you want to make the Magellan menu work like it did in Foundation 6.<\/p>\n
9.\u00a0\u00a0\u00a0\u00a0 Toggler<\/strong><\/h4>\nIn case dropdowns, accordions, drilldowns, tooltips, and modals aren\u2019t enough for you, here\u2019s a generic way to make stuff appear or disappear. It\u2019s a simple JavaScript-based toggle event that can be applied to basically anything.<\/p>\n
I imagine it\u2019s for those times when none of the other components fit the purpose, or would be overkill. It integrates the Motion UI library, so you can animate the disappearing act just about any way you like.<\/p>\n
10. Media object<\/strong><\/h4>\nWell, the name sounds like it\u2019s an element where you can embed a video or Flash object (yuck), and you could do that I guess. What it\u2019s really meant for is displaying any<\/em> media object, such as an image, alongside text information.<\/p>\nBASIC FEATURES IN FOUNDATION 6<\/h3>\n
<\/a><\/p>\n\n- Abide \u2013 form validation<\/li>\n
- Accordions<\/li>\n
- Basic global styles<\/li>\n
- Breadcrumb navigation<\/li>\n
- Buttons<\/li>\n
- Callouts<\/li>\n
- Color mixins<\/li>\n
- Dropdown menus<\/li>\n
- Equalizer \u2013 column alignment<\/li>\n
- Flex Video<\/li>\n
- Forms<\/li>\n
- Interchange responsive content<\/li>\n
- Label<\/li>\n
- Magellan \u2013 no longer sticky by default<\/li>\n
- Media queries (it should be noted that the break points have changed)<\/li>\n
- Off-canvas<\/li>\n
- Pagination<\/li>\n
- Progress bars<\/li>\n
- Reveal<\/li>\n
- Sliders<\/li>\n
- Switches<\/li>\n
- Tables<\/li>\n
- Tabs<\/li>\n
- The Grid<\/li>\n
- Thumbnails<\/li>\n
- Tooltip<\/li>\n
- Typography styles<\/li>\n
- Visibility and utility classes<\/li>\n<\/ul>\n
You can refer Foundation website<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[8,1],"tags":[35,57],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":6,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/2325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media\/283"}],"wp:attachment":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
3.\u00a0\u00a0\u00a0\u00a0 Explicit support for RTL languages<\/strong><\/h4>\nOlder versions supported RTL (right-to-left) languages like Arabic to an extent; but they needed some tweaking. Foundation 6 has support built right in.<\/p>\n
4.\u00a0\u00a0\u00a0\u00a0 Flex grid<\/strong><\/h4>\nThe Flex grid is exactly what you think it is: it\u2019s the Grid component re-done with Flexbox. On the one hand, this gives it a number of features and options that a regular float-based grid can\u2019t handle. On the other hand, it\u2019s probably not as well-supported, especially by IE. It\u2019s a trade-off.<\/p>\n
5.\u00a0\u00a0\u00a0\u00a0 Typography helper classes<\/strong><\/h4>\nA couple of cool enhancements were included for website-style typography. Specifically, there are helper classes designed to make typographic layouts just a bit easier to deal with:<\/p>\n
\n- Text alignment classes<\/li>\n
- Subheader classes \u2013 applies a lighter color to any heading with the .subheader<\/em><\/li>\n
- Lead paragraph styles<\/li>\n
- Un-bulleted lists<\/li>\n
- Statistics \u2013 applies a larger font size to important numbers<\/li>\n<\/ul>\n
6.\u00a0\u00a0\u00a0\u00a0 Navigation<\/strong><\/h4>\nAs mentioned above, all of the previous navigation components got merged into one-big flexible component. This means that all navigation types will play nicely with each other. It also means that you can choose different kinds of navigation for different screen sizes.<\/p>\n
Want drill-down navigation on a smart phone, and a horizontal bar on a desktop? Easily done with the screen-size-specific classes. Want your \u201cTop bar\u201d back? Just add a wrapper div around the default menu components.<\/p>\n
7.\u00a0\u00a0\u00a0\u00a0 Badge<\/strong><\/h4>\nYou know those little circles or squares\u2014usually placed on or near icons of some sort\u2014with tiny numbers in them? Like when you have Facebook notifications? Those are called badges.<\/p>\n
You learn something new every day. Also, Foundation has them now.<\/p>\n
8.\u00a0\u00a0\u00a0\u00a0 Sticky<\/strong><\/h4>\nNeed to make something stay on the screen while the user scrolls? Want to make it stop at a certain point? Sticky is your plug-in! This is also the thing to use if you want to make the Magellan menu work like it did in Foundation 6.<\/p>\n
9.\u00a0\u00a0\u00a0\u00a0 Toggler<\/strong><\/h4>\nIn case dropdowns, accordions, drilldowns, tooltips, and modals aren\u2019t enough for you, here\u2019s a generic way to make stuff appear or disappear. It\u2019s a simple JavaScript-based toggle event that can be applied to basically anything.<\/p>\n
I imagine it\u2019s for those times when none of the other components fit the purpose, or would be overkill. It integrates the Motion UI library, so you can animate the disappearing act just about any way you like.<\/p>\n
10. Media object<\/strong><\/h4>\nWell, the name sounds like it\u2019s an element where you can embed a video or Flash object (yuck), and you could do that I guess. What it\u2019s really meant for is displaying any<\/em> media object, such as an image, alongside text information.<\/p>\nBASIC FEATURES IN FOUNDATION 6<\/h3>\n
<\/a><\/p>\n\n- Abide \u2013 form validation<\/li>\n
- Accordions<\/li>\n
- Basic global styles<\/li>\n
- Breadcrumb navigation<\/li>\n
- Buttons<\/li>\n
- Callouts<\/li>\n
- Color mixins<\/li>\n
- Dropdown menus<\/li>\n
- Equalizer \u2013 column alignment<\/li>\n
- Flex Video<\/li>\n
- Forms<\/li>\n
- Interchange responsive content<\/li>\n
- Label<\/li>\n
- Magellan \u2013 no longer sticky by default<\/li>\n
- Media queries (it should be noted that the break points have changed)<\/li>\n
- Off-canvas<\/li>\n
- Pagination<\/li>\n
- Progress bars<\/li>\n
- Reveal<\/li>\n
- Sliders<\/li>\n
- Switches<\/li>\n
- Tables<\/li>\n
- Tabs<\/li>\n
- The Grid<\/li>\n
- Thumbnails<\/li>\n
- Tooltip<\/li>\n
- Typography styles<\/li>\n
- Visibility and utility classes<\/li>\n<\/ul>\n
You can refer Foundation website<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[8,1],"tags":[35,57],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":6,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/2325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media\/283"}],"wp:attachment":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The Flex grid is exactly what you think it is: it\u2019s the Grid component re-done with Flexbox. On the one hand, this gives it a number of features and options that a regular float-based grid can\u2019t handle. On the other hand, it\u2019s probably not as well-supported, especially by IE. It\u2019s a trade-off.<\/p>\n
5.\u00a0\u00a0\u00a0\u00a0 Typography helper classes<\/strong><\/h4>\nA couple of cool enhancements were included for website-style typography. Specifically, there are helper classes designed to make typographic layouts just a bit easier to deal with:<\/p>\n
\n- Text alignment classes<\/li>\n
- Subheader classes \u2013 applies a lighter color to any heading with the .subheader<\/em><\/li>\n
- Lead paragraph styles<\/li>\n
- Un-bulleted lists<\/li>\n
- Statistics \u2013 applies a larger font size to important numbers<\/li>\n<\/ul>\n
6.\u00a0\u00a0\u00a0\u00a0 Navigation<\/strong><\/h4>\nAs mentioned above, all of the previous navigation components got merged into one-big flexible component. This means that all navigation types will play nicely with each other. It also means that you can choose different kinds of navigation for different screen sizes.<\/p>\n
Want drill-down navigation on a smart phone, and a horizontal bar on a desktop? Easily done with the screen-size-specific classes. Want your \u201cTop bar\u201d back? Just add a wrapper div around the default menu components.<\/p>\n
7.\u00a0\u00a0\u00a0\u00a0 Badge<\/strong><\/h4>\nYou know those little circles or squares\u2014usually placed on or near icons of some sort\u2014with tiny numbers in them? Like when you have Facebook notifications? Those are called badges.<\/p>\n
You learn something new every day. Also, Foundation has them now.<\/p>\n
8.\u00a0\u00a0\u00a0\u00a0 Sticky<\/strong><\/h4>\nNeed to make something stay on the screen while the user scrolls? Want to make it stop at a certain point? Sticky is your plug-in! This is also the thing to use if you want to make the Magellan menu work like it did in Foundation 6.<\/p>\n
9.\u00a0\u00a0\u00a0\u00a0 Toggler<\/strong><\/h4>\nIn case dropdowns, accordions, drilldowns, tooltips, and modals aren\u2019t enough for you, here\u2019s a generic way to make stuff appear or disappear. It\u2019s a simple JavaScript-based toggle event that can be applied to basically anything.<\/p>\n
I imagine it\u2019s for those times when none of the other components fit the purpose, or would be overkill. It integrates the Motion UI library, so you can animate the disappearing act just about any way you like.<\/p>\n
10. Media object<\/strong><\/h4>\nWell, the name sounds like it\u2019s an element where you can embed a video or Flash object (yuck), and you could do that I guess. What it\u2019s really meant for is displaying any<\/em> media object, such as an image, alongside text information.<\/p>\nBASIC FEATURES IN FOUNDATION 6<\/h3>\n
<\/a><\/p>\n\n- Abide \u2013 form validation<\/li>\n
- Accordions<\/li>\n
- Basic global styles<\/li>\n
- Breadcrumb navigation<\/li>\n
- Buttons<\/li>\n
- Callouts<\/li>\n
- Color mixins<\/li>\n
- Dropdown menus<\/li>\n
- Equalizer \u2013 column alignment<\/li>\n
- Flex Video<\/li>\n
- Forms<\/li>\n
- Interchange responsive content<\/li>\n
- Label<\/li>\n
- Magellan \u2013 no longer sticky by default<\/li>\n
- Media queries (it should be noted that the break points have changed)<\/li>\n
- Off-canvas<\/li>\n
- Pagination<\/li>\n
- Progress bars<\/li>\n
- Reveal<\/li>\n
- Sliders<\/li>\n
- Switches<\/li>\n
- Tables<\/li>\n
- Tabs<\/li>\n
- The Grid<\/li>\n
- Thumbnails<\/li>\n
- Tooltip<\/li>\n
- Typography styles<\/li>\n
- Visibility and utility classes<\/li>\n<\/ul>\n
You can refer Foundation website<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[8,1],"tags":[35,57],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":6,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/2325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media\/283"}],"wp:attachment":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
6.\u00a0\u00a0\u00a0\u00a0 Navigation<\/strong><\/h4>\nAs mentioned above, all of the previous navigation components got merged into one-big flexible component. This means that all navigation types will play nicely with each other. It also means that you can choose different kinds of navigation for different screen sizes.<\/p>\n
Want drill-down navigation on a smart phone, and a horizontal bar on a desktop? Easily done with the screen-size-specific classes. Want your \u201cTop bar\u201d back? Just add a wrapper div around the default menu components.<\/p>\n
7.\u00a0\u00a0\u00a0\u00a0 Badge<\/strong><\/h4>\nYou know those little circles or squares\u2014usually placed on or near icons of some sort\u2014with tiny numbers in them? Like when you have Facebook notifications? Those are called badges.<\/p>\n
You learn something new every day. Also, Foundation has them now.<\/p>\n
8.\u00a0\u00a0\u00a0\u00a0 Sticky<\/strong><\/h4>\nNeed to make something stay on the screen while the user scrolls? Want to make it stop at a certain point? Sticky is your plug-in! This is also the thing to use if you want to make the Magellan menu work like it did in Foundation 6.<\/p>\n
9.\u00a0\u00a0\u00a0\u00a0 Toggler<\/strong><\/h4>\nIn case dropdowns, accordions, drilldowns, tooltips, and modals aren\u2019t enough for you, here\u2019s a generic way to make stuff appear or disappear. It\u2019s a simple JavaScript-based toggle event that can be applied to basically anything.<\/p>\n
I imagine it\u2019s for those times when none of the other components fit the purpose, or would be overkill. It integrates the Motion UI library, so you can animate the disappearing act just about any way you like.<\/p>\n
10. Media object<\/strong><\/h4>\nWell, the name sounds like it\u2019s an element where you can embed a video or Flash object (yuck), and you could do that I guess. What it\u2019s really meant for is displaying any<\/em> media object, such as an image, alongside text information.<\/p>\nBASIC FEATURES IN FOUNDATION 6<\/h3>\n
<\/a><\/p>\n\n- Abide \u2013 form validation<\/li>\n
- Accordions<\/li>\n
- Basic global styles<\/li>\n
- Breadcrumb navigation<\/li>\n
- Buttons<\/li>\n
- Callouts<\/li>\n
- Color mixins<\/li>\n
- Dropdown menus<\/li>\n
- Equalizer \u2013 column alignment<\/li>\n
- Flex Video<\/li>\n
- Forms<\/li>\n
- Interchange responsive content<\/li>\n
- Label<\/li>\n
- Magellan \u2013 no longer sticky by default<\/li>\n
- Media queries (it should be noted that the break points have changed)<\/li>\n
- Off-canvas<\/li>\n
- Pagination<\/li>\n
- Progress bars<\/li>\n
- Reveal<\/li>\n
- Sliders<\/li>\n
- Switches<\/li>\n
- Tables<\/li>\n
- Tabs<\/li>\n
- The Grid<\/li>\n
- Thumbnails<\/li>\n
- Tooltip<\/li>\n
- Typography styles<\/li>\n
- Visibility and utility classes<\/li>\n<\/ul>\n
You can refer Foundation website<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[8,1],"tags":[35,57],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":6,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/2325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media\/283"}],"wp:attachment":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You know those little circles or squares\u2014usually placed on or near icons of some sort\u2014with tiny numbers in them? Like when you have Facebook notifications? Those are called badges.<\/p>\n
You learn something new every day. Also, Foundation has them now.<\/p>\n
8.\u00a0\u00a0\u00a0\u00a0 Sticky<\/strong><\/h4>\nNeed to make something stay on the screen while the user scrolls? Want to make it stop at a certain point? Sticky is your plug-in! This is also the thing to use if you want to make the Magellan menu work like it did in Foundation 6.<\/p>\n
9.\u00a0\u00a0\u00a0\u00a0 Toggler<\/strong><\/h4>\nIn case dropdowns, accordions, drilldowns, tooltips, and modals aren\u2019t enough for you, here\u2019s a generic way to make stuff appear or disappear. It\u2019s a simple JavaScript-based toggle event that can be applied to basically anything.<\/p>\n
I imagine it\u2019s for those times when none of the other components fit the purpose, or would be overkill. It integrates the Motion UI library, so you can animate the disappearing act just about any way you like.<\/p>\n
10. Media object<\/strong><\/h4>\nWell, the name sounds like it\u2019s an element where you can embed a video or Flash object (yuck), and you could do that I guess. What it\u2019s really meant for is displaying any<\/em> media object, such as an image, alongside text information.<\/p>\nBASIC FEATURES IN FOUNDATION 6<\/h3>\n
<\/a><\/p>\n\n- Abide \u2013 form validation<\/li>\n
- Accordions<\/li>\n
- Basic global styles<\/li>\n
- Breadcrumb navigation<\/li>\n
- Buttons<\/li>\n
- Callouts<\/li>\n
- Color mixins<\/li>\n
- Dropdown menus<\/li>\n
- Equalizer \u2013 column alignment<\/li>\n
- Flex Video<\/li>\n
- Forms<\/li>\n
- Interchange responsive content<\/li>\n
- Label<\/li>\n
- Magellan \u2013 no longer sticky by default<\/li>\n
- Media queries (it should be noted that the break points have changed)<\/li>\n
- Off-canvas<\/li>\n
- Pagination<\/li>\n
- Progress bars<\/li>\n
- Reveal<\/li>\n
- Sliders<\/li>\n
- Switches<\/li>\n
- Tables<\/li>\n
- Tabs<\/li>\n
- The Grid<\/li>\n
- Thumbnails<\/li>\n
- Tooltip<\/li>\n
- Typography styles<\/li>\n
- Visibility and utility classes<\/li>\n<\/ul>\n
You can refer Foundation website<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[8,1],"tags":[35,57],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":6,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/2325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media\/283"}],"wp:attachment":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
In case dropdowns, accordions, drilldowns, tooltips, and modals aren\u2019t enough for you, here\u2019s a generic way to make stuff appear or disappear. It\u2019s a simple JavaScript-based toggle event that can be applied to basically anything.<\/p>\n
I imagine it\u2019s for those times when none of the other components fit the purpose, or would be overkill. It integrates the Motion UI library, so you can animate the disappearing act just about any way you like.<\/p>\n
10. Media object<\/strong><\/h4>\nWell, the name sounds like it\u2019s an element where you can embed a video or Flash object (yuck), and you could do that I guess. What it\u2019s really meant for is displaying any<\/em> media object, such as an image, alongside text information.<\/p>\nBASIC FEATURES IN FOUNDATION 6<\/h3>\n
<\/a><\/p>\n\n- Abide \u2013 form validation<\/li>\n
- Accordions<\/li>\n
- Basic global styles<\/li>\n
- Breadcrumb navigation<\/li>\n
- Buttons<\/li>\n
- Callouts<\/li>\n
- Color mixins<\/li>\n
- Dropdown menus<\/li>\n
- Equalizer \u2013 column alignment<\/li>\n
- Flex Video<\/li>\n
- Forms<\/li>\n
- Interchange responsive content<\/li>\n
- Label<\/li>\n
- Magellan \u2013 no longer sticky by default<\/li>\n
- Media queries (it should be noted that the break points have changed)<\/li>\n
- Off-canvas<\/li>\n
- Pagination<\/li>\n
- Progress bars<\/li>\n
- Reveal<\/li>\n
- Sliders<\/li>\n
- Switches<\/li>\n
- Tables<\/li>\n
- Tabs<\/li>\n
- The Grid<\/li>\n
- Thumbnails<\/li>\n
- Tooltip<\/li>\n
- Typography styles<\/li>\n
- Visibility and utility classes<\/li>\n<\/ul>\n
You can refer Foundation website<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":"A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[8,1],"tags":[35,57],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":6,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/2325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media\/283"}],"wp:attachment":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
BASIC FEATURES IN FOUNDATION 6<\/h3>\n
You can refer Foundation website<\/a> for more information.<\/p>\n","protected":false},"excerpt":{"rendered":" A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[8,1],"tags":[35,57],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281"}],"collection":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":6,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":2325,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/2325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media\/283"}],"wp:attachment":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/p>\n\n