Checkbox Card

9.10.2020

Made with: HTML (Pug),CSS (SCSS)

View Code

PlaceholderCheckbox Card

Css Flexbox Cards

27.06.2018

Made with: HTML,CSS

View Code

PlaceholderCss Flexbox Cards

Pokemon Card Layout

20.06.2018

Pure CSS Pokemon card layout.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderPokemon Card Layout

Css Responsive Cards

14.06.2018

Responsive cards (1 / 2 / 3 cols); card footer; css flex properties for equal heights.

Made with: HTML,CSS

View Code

Css Responsive Cards

Pure Css 3D Cards

7.06.2018

Reactive and responsive pure CSS 3D cards with direction aware CSS hovers. VR inspired layout.

Made with: HTML,CSS

View Code

PlaceholderPure Css 3D Cards

Blog Posts Card Layout

5.06.2018

Made with: HTML,CSS

View Code

PlaceholderBlog Posts Card Layout

Assorted Cards And Images (Css Grid And Bem)

3.06.2018

A card layout with various sizes, containing images and/or text. Using BEM to try to keep the code organized (and to help keep the design consistent).

Made with: HTML (Haml),CSS (SCSS)

View Code

Assorted Cards And Images (Css Grid And Bem)

Responsive Css News Card

27.03.2018

Made with: HTML,CSS (PostCSS)

View Code

PlaceholderResponsive Css News Card

Isometric Card Grid

27.01.2018

A remake of an older demo, which is a Codrops-inspired scrollable grid component. Made withh CSS grid to organize the cards, a vanilla CSS variable to control the scrolling, and much less JavaScript. Due to use of some modern CSS techniques, this demo won’t work properly in IE.

Made with: HTML (Pug),CSS,JavaScript

View Code

PlaceholderIsometric Card Grid

Card Grid

18.12.2017

Pure CSS card grid.

Made with: HTML,CSS (SCSS)

View Code

Card Grid

Flexbox Card Grid

11.12.2015

Quick prototype of equal height cards using Flexbox grid layout. Also demonstrates the use of CSS aspect ratios (check out the images) and CSS filters.

Made with: HTML,CSS (Less)

View Code

Flexbox Card Grid