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

HTML

<h2>Collapse Grid (no gutters)</h2>
<div class="row collapse">
 <div class="medium-6 columns">
  medium-6
 </div>
 <div class="medium-6 columns">
  medium-6
 </div>
</div>
<h2>Normal Grid (gutters)</h2>
<div class="row">
 <div class="medium-6 columns">
  medium-6
 </div>
 <div class="medium-6 columns">
  medium-6
 </div>
</div>

Collapse Grid (no gutters)

medium-6

medium-6

Normal Grid (gutters)

medium-6

medium-6

Posted in css

11:58 pm, December 17, 2020

Other Items in css

my default text shadow css

change the cursor to a pointer for an element

make labels or badges look better

make an image white with css using filter brightness and invert

foundation old grid format

nice webkit scrollbars (scroll bar, web kit, nice)

use an emoji on your list items ul li

background image on 3 boxes not scaling correctly fix

css prefers-color-scheme example

using attr in css to get content from html

css perspective and transform css properties testing

using linear gradient background on text css

setting up css variables in your stylesheet

simple table stripe striping

bootstrap collapse or toggle a div visibility

drop shadow text class easy drop shadow

center everything in a div with flex-center (centre)

css font style italic

create a rainbow background using css linear gradient

stop overscrolling on responsive ios

switching stack order of floats with flex

bold the numbers in a ol li list

adding pulsating dots to your css ul li list

css using perspective for transforms

simple linear gradient overlay for an image to make it darker or lighter

wordpress main nav dropdown fix

pulsating dots - glow glowing

using css linear gradient for background overlays

center something with css not using flex

Custom 12 Grid using CSS Grid

Radial Click Effect

target data attribute with css

form checkbox replacement with large tick using label

keyframe animations css

using transform scale in css to zoom on hover over

Move any element with css offsets

CSS Improve Compatibility with Browser Fallbacks

using scroll-behavior: smooth css

using a css grid area template

grid column and row spacing

CSS Grid - Basic Columns

flex shorthand css

using flexbox to align elements in a row

Viewport width and height calculations

Making Images Retina Display Friendly

Making an image responsive using css

Applied Accessibility - Screen reader only css

Drop Down Menu Swapping Left align to Right

Using nth-child css to hide list items or repeated elements

image Checkbox Replacement for Forms

Related Search Terms