18. June 2017

Hexagons & grids do not mix … are you sure ?

CSS responsive grid of hexagons allows you to easily create just that for images and some text. Nice way to present a portfolio.

The hexagon grid is responsive according to the width of the container (#hexGrid)
Hexagons keep their aspect ratio according to their width
The number of hexagons per row is adaptive and changes from 5 to 2 on media query break points
A title and short text slide in on hexagon hover and focus
Hexagons and can be cycled through with tab (keyboard navigation)

GitHub

18. June 2017

Tasty CSS-animated hamburger menu icons

Hamburgers is a collection of tasty CSS-animated hamburger icons. Also included is the source as a Sass library. It’s modular and customizable, so cook up your own hamburger.

<link href="dist/hamburgers.css" rel="stylesheet">

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

</span>

</button>

GitHub

18. June 2017

Export SVG Animations for the Web with Snap.SVG Animator

Snap.svg Animator is an open sourced plugin for Animate CC that exports animations for the web rendered in SVG.

It uses the Snap.svg JavaScript library to dynamically draw SVG content at runtime. Snap.svg is a JavaScript library created by Dmitry Baranovskiy, who also created Raphaël.js.

A simple API allows you to write and manipulate SVG content in the browser.

Adobe Plugin / Snap.SVG

14. May 2017

Lets fix the short comings of current CSS integrations – EQCSS / Element queries

“Element queries are a new way of thinking about responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser.
Unlike CSS @media queries, @element Queries are aware of more than just the width and height of the browser, you can write responsive conditions for a number of different situations like how many characters of text or child elements an element contains.
Another concept that element queries brings to CSS is the idea of ‘scoping’ your styles to one element in the same way that JavaScript functions define a new scope for the variables they contain.”

Element Query Conditions

6. May 2017

Icons in pure css – CSS Icon

Icon set made with pure css code, no dependencies.

Github

29. March 2017

Smart CSS viewer for Chrome – CSS Peeper

Inspect styles in a simple, well-organized & beautiful way with this Chrome extension. You can select any object to get more specific information about them. Also a nice way to browse color palettes of websites you visit.

CSSPeeper

15. March 2017

Joyride 2 – create website tour in style

Joyride is an easy to configure site tour wizard.

Joyride

6. February 2017

Rocket.Chat – Open Source Web Chat Platform

Rocket.Chat is am impressive Open Source Web Chat Platform, with a huge amount of features:

BYOS (bring your own server)
Multiple Rooms
Direct Messages
Private Groups
Public Channels
Desktop Notifications
Mentions
Avatars
Markdown
Emojis
Custom Emojis
Reactions
One touch Geolocation
TeX Math Rendering – inline math typesetting
Media Embeds
Link Previews
Sent Message Edit and Deletion
Transcripts / History
File Upload / Sharing
Scalable file sharing – S3 uploads with CDN downloads
Full text search
Live chat / Messaging call center
LDAP Authentication
CAS 1.0, 2.0 support for education institutions and hosting providers worldwide
Support for Okta SSO through SAML v2
I18n – Supports 22 Languages
Hubot Friendly
(Beta) Face to Face Video Conferencing (aka WebRTC )
(Beta) Multi-users Video Group Chat
(Beta) Jitsi integration
Audio calls
Multi-users Audio Conference
Screensharing
….. more

Rocket.Chat

4. February 2017

A better HTML5 parser for PHP – HTML5DOMDocument

HTML5DOMDocument extends the native DOMDocument library. It fixes some bugs and adds some new functionality.

Preserves white spaces
Preserves html entities
Preserves void tags
Allows inserting HTML code that moves the correct parts to their proper places (head elements are inserted in the head, body elements in the body)
Allows querying the DOM with CSS selectors (currently avaiable: *, tagname, tagname#id, tagname.classname, #id, .classname)

<?php
require 'vendor/autoload.php';

$dom = new IvoPetkov\HTML5DOMDocument();
$dom->loadHTML('<!DOCTYPE html><html><body>Hello</body></html>');
echo $dom->saveHTML();

<?php

require 'vendor/autoload.php';

$dom = new IvoPetkov\HTML5DOMDocument();

$dom->loadHTML('<!DOCTYPE html><html><body>Hello</body></html>');

echo $dom->saveHTML();

GitHub

10. January 2017

jQuery Knob … a dial to rule them all

Canvas based dial that adds mouse click, wheel mouse, keyboard and finger / touch events.

Really nice :)

jQuery Knob

Element Query Conditions

Width-based Conditions

Height-based Conditions

Count-based Conditions

Scroll-based Conditions

Aspect-based Conditions

Meta-Selectors