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.
timeline class and function
this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..
responsive three box section with tabular data or table data
here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..
stackable bio or biography list with portrait image title and text
a nice easily stackable bio or biography list done in foundation, just duplicate the bio-item and switch out the content and you have a nice responsive bio layout. As its in foundation here is ..
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
make labels or badges look better
How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..
add a jquery date picker to your text box
This JQuery UI Date picker is good if you want to add a nice dropdown date selector to your input box, rather than having to type in the date manually. Requires: JQuery JQuery UI Documen..
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..
CSS Grid Frame Work
8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..
using jquery appear for checking if an element is visible on screen
Yes.. sometimes i like using jquery as well, as it can make things so easy! :) Here is a quick demo using the JQuery Appear plugin so make an element change if it on or off screen. Plugin Link..
how to install js socials for social media share buttons and make them rounded
This should be a nice quick one on how to install js socials which add social media sharing buttons on your pages. Yeah i always just ignore these as well, but hey some people may use them?? H..
hero box with title sub title logos and call to action buttons
Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..
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.
Custom 12 Grid using CSS Grid
For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about..
wordpress show posts loop with feature image thumbnail
this is surprisingly hard to find code that lists all blog posts in a template with the feature image that does not use an additional plugin. you shouldnt need a plugin to do this as its already built..
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..
