Foundation 6 - Flex Grid

Developer
Simon Codrington
Size
3,805 Kb
Views
16,192
  1. Foundation 6 - Flex Grid Previews
  2. Foundation 6 - Flex Grid HTML Codes
  3. Foundation 6 - Flex Grid CSS Codes
  4. Foundation 6 - Flex Grid JS Codes

How do I make an foundation 6 - flex grid?

Showcasing the awesomeness of the Foundation 6 optional grid layout. Basic element positioning using Flexbox. What is a foundation 6 - flex grid? How do you make a foundation 6 - flex grid? This script and codes were developed by Simon Codrington on 01 October 2022, Saturday.

Foundation 6 - Flex Grid Previews
IQ Test

Foundation 6 - Flex Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Foundation 6 - Flex Grid </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://foundation.zurb.com/sites/docs/assets/css/docs.css?hash=0105f8880249f7528316ca5df68e34f9'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article id="docs-flex-grid"> <div class="docs-code-live inner"> <h1>Foundation 6 - Flexbox Grid </h1> <h3 class="subheader">Examples using the new flex-box based grid system</h3> <hr/> <p>These examples showcase how you can use Foundation 6 to create easily customisazble layouts using the optional Flexbox Grid <p> <p><strong>Note:</strong>This example uses the stylesheet taken directly off the Foundation 6 example page as of the current date of this example there isn't a direct CSS link to the optional Flex Grid layout</p> <br/> <h3>Flex Horizontal Alignment</h3> <p>Shows how you can use the alignment classes to easily position your content both horizontally and vertically</p> <b>Align right</b> <p>Right align the elements</p> <div class="row align-right align-container"> <div class="column small-3">Element One</div> <div class="column small-3">Element Two</div> <div class="column small-3">Element Three</div> </div> <b>Align center</b> <p>Center align the elements <div class="row align-center align-container"> <div class="column small-3">Element One</div> <div class="column small-3">Element Two</div> <div class="column small-3">Element Three</div> </div> <b>Align Spaced</b> <p>Space out the elements, with even spacing around the elements</p> <div class="row align-spaced align-container"> <div class="column small-3">Element One</div> <div class="column small-3">Element Two</div> <div class="column small-3">Element Three</div> </div> <p><a class="button" href="https://foundation.zurb.com/sites/docs/flex-grid.html#column-alignment" target="_blank">Click to view the docs about horizontal alignment</a></p> <hr/> <h3>Flex Verticalntal Alignment</h3> <p>Shows how you can use the vertical alignment classes to position your content vertically. By default flex items sit at the top of their parent, but you can manually set this on an element by element basis</p> <b>Align Top</b> <p>Default, aligns the items to the top of the parent</p> <div class="row align-top align-v-container"> <div class="column">Element One <p>Here is some additional content making me taller</p> </div> <div class="column">Element Two</div> <div class="column">Element Three <p>I also have some additional content, I'm stuck to the top!</div> </div> <b>Align Middle</b> <p>Aligns the items to the middle of the parent</p> <div class="row align-middle align-v-container"> <div class="column ">Element One <p>Here is some additional content making me taller</p> </div> <div class="column">Element Two</div> <div class="column">Element Three <p>I also have some additional content</div> </div> <b>Align Bottom</b> <p>Aligns the items to the bottom of the parent</p> <div class="row align-bottom align-v-container"> <div class="column">Element One </div> <div class="column">Element Two <p>We are stuck to the bottom of the container</p> </div> <div class="column">Element Three <p>I also have some additional content, I'm stuck to the top!</div> </div> <p>Adding the alignment classes to the parent row will make all of the items inside of it align to the chosen vertical position. You can also specify on individual elements themselves where you want them to align by specifying either align-top, align-middle or align-bottom</p> <p><a class="button" href="https://foundation.zurb.com/sites/docs/flex-grid.html#vertical-alignment" target="_blank">Find out more about vertical alignment on the docs</a></p> <h3>Flex ordering</h3> <p>Shows how you can use flexbox grid to re-order elements depending on your screen profile</p> <ul> <li><b>Medium + Large profile:</b> 1) Logo Title - 2) Social Media Bar - 3) Navigation Bar</li> <li><b>Small profile:</b> 1) Social Media Bar - 2) Logo Title - 3) Navigation Bar</li> </ul> <p>Resize your device to see this in action</p> <hr/> <div class="ordering-container"> <div class="row align-justify"> <div class="column small-12 medium-12 small-order-2 medium-order-1"> <h3>Company Logo</h3> </div> <div class="column small-12 medium-expand large-expand small-order-1 medium-order-2"> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-facebook fa-inverse fa-stack-1x"></i> </span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-twitter fa-inverse fa-stack-1x"></i> </span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-reddit-alien fa-inverse fa-stack-1x"></i> </span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-google-plus fa-inverse fa-stack-1x"></i> </span> </div> <div class="column small-12 medium-expand large-expand small-order-3 medium-order-3"> <ul class="menu vertical medium-horizontal large-horizontal" data-responsive-menu=" small-accordion medium-dropdown large-dropdown" style="width: 100%;"> <li><a href="#">Home</a></li> <li class="has-submenu"> <a href="#">About Us</a> <ul class="vertical submenu menu nested" data-submenu id="m2"> <li class="has-submenu nested"> <a href="#">Our Team</a> <ul class="vertical submenu menu nested " data-submenu id="m3"> <li><a href="#">John Smith</a></li> <li><a href="#">Suzzy Smith</a></li> </ul> </li> <li><a href="#">Blog</a></li> </ul> </li> <li class="has-submenu"> <a href="#">Our Services</a> <ul class="vertical submenu menu nested" data-submenu> <li><a href="#">Consulting</a></li> <li><a href="#">Accounting</a></li> <li><a href="#">Planning</a></li> </ul> </li> <li><a href="#">Resources</a></li> </ul> </div> </div> </div> <br/> <p><a class="button" href="https://foundation.zurb.com/sites/docs/flex-grid.html#source-ordering" target="_blank">Find out more about the flex-box ordering options on the docs</a></p> <hr/> </div>
</article> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/zurb/foundation-sites/develop/js/foundation.core.js'></script>
<script src='https://cdn.rawgit.com/zurb/foundation-sites/develop/dist/foundation.js'></script>
<script src='https://rawgit.com/zurb/motion-ui/master/dist/motion-ui.js'></script> <script src="js/index.js"></script>
</body>
</html>

Foundation 6 - Flex Grid - Script Codes CSS Codes

/*universal elements for the example*/
.inner{ max-width: 1200px; margin: auto; padding: 50px 15px 80px 0px;
}
/*slight overrides to remove colours and styles added by an external stylesheet*/
#docs-flex-grid .docs-code-live .row,
#docs-flex-grid .docs-code-live .column:nth-child(odd),
#docs-flex-grid .docs-code-live .column:nth-child(even){ background: transparent; border: none; font-size: 100%;
}
/*Horizontal Flex alignment example*/
.align-container{ background: #eee!important; padding: 15px;
}
.align-container .column:nth-of-type(1){ background: #3e9ddd!important;
}
.align-container .column:nth-of-type(2){ background: #9b59b6!important;
}
.align-container .column:nth-of-type(3){ background: #f39c12!important;
}
/*Vertical flex alignment example*/
.align-v-container{ background: #eee!important; padding: 15px 15px;
}
.align-v-container .column:nth-of-type(1){ background: #34495e!important;
}
.align-v-container .column:nth-of-type(2){ background: #16a085!important;
}
.align-v-container .column:nth-of-type(3){ background: #7f8c8d!important;
}
/*Ordering example*/
.ordering-container{ background: #eee!important; padding: 15px 15px;
}

Foundation 6 - Flex Grid - Script Codes JS Codes

$(document).foundation();
Foundation 6 - Flex Grid - Script Codes
Foundation 6 - Flex Grid - Script Codes
Home Page Home
Developer Simon Codrington
Username simoncodrington
Uploaded October 01, 2022
Rating 3
Size 3,805 Kb
Views 16,192
Do you need developer help for Foundation 6 - Flex Grid?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Simon Codrington (simoncodrington) Script Codes
Name
Foundation 6 Interchange
Video API Interactive Showcase
Animated border lines on hover
Mobile Navigation Menus - Scale from 0 to 1 open
CSS Pulsating Sonar
Animating single characters in a string
Stripe Header Grid
CSS animations on scroll - Multi step move
Fancy Card Animation
CSS animations on scroll - Fade from bottom up
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!