idahopotato1

Expanding Cards

Expanding Cards gallerie with html, css and Javascript

A Pen by Abdelkarim KHALLOUK on CodePen.

License.

idahopotato1

Image Gallery

A Pen by Geoffrey Buell on CodePen.

License.

idahopotato1

<el-toast></el-toast>

<template id="elToastItem">
 <div class="el-toast__icon"></div>
<div class="el-toast__close">
  <button>
    <i class="fa fa-fw fa-times"></i>
  </button>
</div>
<div class="el-toast__description"></div>

idahopotato1

<div class="gallery">
  <header>
    <h1>Photo Gallery</h1>
  </header>
  <main id="image-gallery" class="images"></main>
  <footer id="gallery-pagination">
    <button id="btnPrevious">&larr; <span class="sr-only">Previous</span></button>
    <div>
      <div id="gallery-dots"></div>
      <span id="page"></span>

idahopotato1

<h1>A demo of new CSS to accomplish a Masonry-style layout</h1>
<h3>Compare Display modes:</h3>
<input type="radio" name="display" value="masonry" id="masonry" checked> <label for="masonry">Masonry (Firefox Nightly only, <a href="#note">pref on</a>)</label><br>
<input type="radio" name="display" value="grid" id="grid"> <label for="grid">Grid 1 (also the fallback)</label><br>
<input type="radio" name="display" value="multicolumn" id="multicolumn"> <label for="multicolumn">Multicolumn</label><br>
<input type="radio" name="display" value="flexbox" id="flexbox"> <label for="flexbox">Flexbox (row)</label><br> 
<input type="radio" name="display" value="flexbox2" id="flexbox2"> <label for="flexbox2">Flexbox (column)</label>
<p>Be sure to <a href="#note">read the note</a> about this demo. Also, I made <a href="https://codepen.io/jensimmons/full/vYNeRZw" target="_blank">another demo</a> that shows off what Masonry in CSS Grid can do — far beyond the JS libraries of today.</p>

<main>

idahopotato1

Grid Gallery

A Pen by Häñïbäl Gîrmäý on CodePen.

License.

idahopotato1

CSS Grid: Coupons!

Aka all the junk that I eat when I pull my all-nighters.

A Pen by idahopotato1 on CodePen.

License.

idahopotato1

<div class="col-sm-12 form-group"></div>
<div class="col-sm-12">
  <div class="row">
    <div class="col-sm-3 offset-sm-9">
      <button id="save_coord" class="btn button form-group">save</button>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div id="zone_div"></div>

idahopotato1

Dynamic Grid System - FlexGrid

A Dynamic Grid System.

I wanted to use GridStack.js but it had a few outstanding bugs that made it impossible for me to use in my web app.

Methods:

• setOption: set an option after initialization by FlexGrid.setOption(option)

• addWidget: add a widget to specified grid by FlexGrid.addWidget(grid)

idahopotato1

<!-- 由官方 Demo 中抽取出  -->
<!-- https://haltu.github.io/muuri/ -->

<section class="grid-demo">

      <h2 class="section-title"><span>Grid Demo</span></h2>

      <div class="controls cf">
        <div class="control search">
          <div class="control-icon">