Search
Search Code
table scroll responsive foundation
add this div wrapping your table using the foundation framework and it will allow the table to scroll on smaller screen's. Making a responsive table easier.
four box section template in foundation with classes find and replace (4 box)
this section uses the large-auto classes so you can add or remove boxes easily. find and replace the name "boxsection" to rename your new classes for the section I have layed this one out a ..
four box responsive section with all classes find and replace boxsection title foundation grid (4 box)
four box responsive grid, find and replace the word... boxsection with your new section name to generate all class names and section names to match for rapid section creation. Demo Codepen
two box responsive section with all classes find and replace boxsection title foundation grid (2 box)
easy copy and paste section and find replace the word boxsection with your new class names, using foundation grid.
basic section item with foundation wrap and grid - single item in section
section with inner and outer css selectors for reuse and basic layout formatting. you can then search for "section-name" and replace it with your own section name. section-name section-name..
html and css hoizontal simple timeline section in foundation
a horizontal simple timeline section example done in foundation grid with some custom styles. This also uses the Lato Font quick install! So Quick!.. :P Also works on responsive and mobile dev..
foundation three boxes with text align links to the bottom of element
For some reason i had the request to align the links in three boxes with different height text, not sure why they wanted them aligned, but i guess my task is not too question that but to fix it. ..
foundation base html template - foundation template
just a basic html template with foundation and the required javascripts, good for a starter html page using foundation framework.
easy section wrap in foundation - 3 boxes responsive
this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes
easy section wrap in foundation
i am always writing these wrap sections so i thought i would just add a basic one here, easy to copy and paste into a new section
add some foundation tabs working example
they show the tabs here on the example page, but there is no full working code... for some reason. So i thought i would add one here. Hmm foundation makes this site look weird, and very bright! :P ..
foundation grid for 6.6x - also known as the foundation xy grid
some foundation grid demos for 6.6x foundation you can get foundation here: https://get.foundation/ or here https://cdnjs.com/libraries/foundation more docs on this here: https://get.foundatio..
foundation accordion for version 6.x
yep the foundation does weird things to this sites css, but the demo still works if you want to use the built in foundation accordions.
foundation responsive tables
in foundation you can make a table scroll when it hits its width limit by adding the class <div class="table-scroll"></div> wrapping the table element
foundation old grid format
This uses the old foundation grid style, i think it was a float grid, not sure which version it was maybe version 5 foundation. Somewhere around here: https://cdnjs.com/libraries/foundation/5.0.0&nbs..
jquery document ready with foundation init as well
here is a jquery document ready that also loads the foundation js library. im not sure if the document foundation needs to be loaded in the document ready, but this way seems to work.
using foundation 6.4 xy grid basics
Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout (foundation grid) add some style to show the cell border <style> .grid-x .ce..
foundation includes cdnjs
Foundation Full Full Foundation CSS <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css"> Minified Foundation CSS <link rel="stylesheet..
foundation make row full width
Just incase you want a full screen width layout and still have it sitting in rows for foundation css .full-width { width: 100%; margin-left: auto; margin-right: auto; max-width: in..
