A simple demo to demonstrate a responsive container containing boxes of equal widths within.
A Pen by Vincent Pickering on CodePen.
/* | |
* Open image in gLightbox (https://github.com/mcstudios/glightbox) | |
* | |
* Usage: | |
* <a hre="picture.jpg" class="js-image">Open picture</a> | |
*/ | |
import GLightbox from 'glightbox'; | |
require('../../node_modules/glightbox/dist/css/glightbox.css'); |
/*Setup Environment */ | |
html { box-sizing: border-box; } | |
*, *:before, *:after { box-sizing: inherit; } | |
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:16px; margin:0; padding:0; } | |
.block { float:left; display:inline-block; background-color:#999999; color:#000000; font-size:0.8em; text-align:center; line-height:4em; border:1px solid white; } | |
/* | |
Calc Demo Quick and Dirty Fluid Grid system | |
-- | |
If we need a quick grid system to test, apply to a legacy or internal system in a hurry, calc makes it so simple. |
A simple demo to demonstrate a responsive container containing boxes of equal widths within.
A Pen by Vincent Pickering on CodePen.
Based on this dribbble shot: http://drbl.in/nRRK by Peter Main https://dribbble.com/PeterMain
Interactive input form built with just CSS. Abusing focus state & labels to handle transitions & navigation.
Navigate between inputs using Tab (Next) & Shift + Tab (Prev).
Pure CSS. No JS included.
A Pen by Emmanuel Pilande on CodePen.