Search Code
Search Code by entering your search text above.
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 ..

11:08 pm, October 24, 2022
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

12:29 am, September 27, 2022
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.

7:01 am, September 9, 2022
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..

4:36 am, September 6, 2022
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..

3:33 am, March 29, 2022
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. ..

11:51 pm, October 14, 2021
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.

4:17 am, October 12, 2021
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..

5:02 am, October 8, 2021
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..

5:50 am, October 1, 2021
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 ..

1:13 am, October 1, 2021
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

12:23 am, September 29, 2021
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

4:33 am, September 20, 2021
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 ..

5:01 am, August 3, 2021
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: or here  more docs on this here: https://get.foundatio..

5:00 am, July 9, 2021
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. 

1:31 am, May 12, 2021
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

4:13 am, May 11, 2021
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..

6:09 am, December 31, 2020
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..

12:56 am, December 22, 2020
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:

11:58 pm, December 17, 2020
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..

10:56 pm, December 7, 2020
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..

12:24 am, December 1, 2020
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..

5:42 am, November 23, 2020
design elements
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..

2:43 am, November 9, 2020
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.

1:20 am, December 16, 2019
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..

2:19 am, September 6, 2019
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..

6:20 am, August 31, 2018
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..

6:20 am, August 31, 2018
foundation includes cdnjs

Foundation Full Full Foundation CSS <link rel="stylesheet" href=""> Minified Foundation CSS <link rel="stylesheet..

6:20 am, August 31, 2018
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..

6:20 am, August 31, 2018

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕


🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Old programmers never die; they just lose some of their functions.
Random CSS Property


The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.
unicode-range (@font-face) css reference