6. Mai 2017

Icons in pure css – CSS Icon

Icon set made with pure css code, no dependencies.

Github

29. März 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. März 2017

Joyride 2 – create website tour in style

Joyride is an easy to configure site tour wizard.

Joyride

6. Februar 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. Februar 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. Januar 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

11. Oktober 2016

SpinThatShit is a set of SCSS mixins for single element loaders and spinners

SpinThatShit is a set of SCSS mixins for single element loaders and spinners.

<div class="your-loader"></div>

1	<div class="your-loader"></div>

.your-loader {
 @include loader09($size: 10px, $height: 48px, $gap: 8px, $duration: 1s, $align: middle);
}

.your-loader {

@include loader09($size: 10px, $height: 48px, $gap: 8px, $duration: 1s, $align: middle);

}

SpinThatShit

11. Oktober 2016

Mobile-friendly interactive maps with Leaflet

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API.

Leaflet

16. September 2016

Create fluid and interactive gradients animations – Granim.js

Granim.js – Create fluid and interactive gradients animations with this small (< 10 kB) js library.

<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>

<!-- Call the script -->
<script src="granim.min.js"></script>

<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [1, 1],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>

var granimInstance = new Granim({

element: '#granim-canvas',

name: 'granim',

opacity: [1, 1],

states : {

"default-state": {

gradients: [

['#834D9B', '#D04ED6'],

['#1CD8D2', '#93EDC7']

]

}

});

</script>

Granim.js

11. September 2016

SASS Bellmaker . a responsive media query package

The Bellmaker is a library of device-agnostic and device-specific media queries that will complement your exisiting CSS.

.bellmaker_container {
    @media #{$da_baseline} {    width: $pw_baseline;}
    @media #{$da_2x_small} {    width: $pw_2x_small;}
    @media #{$da_x_small} {     width: $pw_x_small;}
    @media #{$da_small} {       width: $pw_small;}
    @media #{$da_medium} {      width: $pw_medium;}
    @media #{$da_large} {       width: $pw_large;}
    @media #{$da_x_large} {     width: $pw_x_large;}
}

.bellmaker_container {

@media #{$da_baseline} { width: $pw_baseline;}

@media #{$da_2x_small} { width: $pw_2x_small;}

@media #{$da_x_small} { width: $pw_x_small;}

@media #{$da_small} { width: $pw_small;}

@media #{$da_medium} { width: $pw_medium;}

@media #{$da_large} { width: $pw_large;}

@media #{$da_x_large} { width: $pw_x_large;}

}

Bellmaker