STYLE SWITCHER

Nested flex container – Flex item height issue fixed.

Nested flex container – Flex item height issue fixed.

Chrome - Nested flex container - Flex item height using a percentage appears to be broken

Chrome doesn't support percentage height values on flex items. It works fine in IE11 and MS Edge. I haven't tested any other browsers and I've not checked if percentage heights are part of the spec or not (sorry, maybe this is a non-issue).

flex: 1 0 auto
More

Netlify CMS

Open source content management for your Git workflow. Use Netlify CMS with any static site generator for a faster and more flexible web project

Static + content management = ♥

Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content.

An integrated part of your Git workflow

Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.

An extensible CMS built on React

Netlify CMS is built as a single-page React app. Create custom-styled previews, UI widgets, and editor plugins or add backends to support different Git platform APIs.

Website
More

Grav

Building Faster Websites with Grav, a Modern Flat-file CMS

Nowadays, there’s an interesting get-back-to-the-basics tendency among web developers. Some modern, best-in-class technologies — like Markdown, Twig, and YAML — are often used together to produce many new, lightweight CMSs, focused on speed, simplicity and productivity. The principle they all follow is pretty straightforward: when things get too complex, it’s better to start from scratch, instead of trying to clean up the existing mess.

Website
More

Delighters.JS

Add CSS animations to delight users as they scroll down.

A tiny javascript library by Q42 https://github.com/Q42/delighters

Website
More

< css-doodle /> – A web component for drawing patterns with CSS

is based on Shadow DOM v1 and Custom Elements v1. You can use it on latest Chrome and Safari right now without polyfills. The component will generate a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph. The limit is the limit of CSS itself.

#Getting Started

Include the script directly from cdnjs and everything is ready:

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.2.3/css-doodle.min.js"></script>

<css-doodle>
/* put your code here */
</css-doodle>

You can also install it from npm and import the module in javascript:

npm install css-doodle
Website
More