I AM LISTENING TO
|
WHAT I LIKE
BLOG FILTER

Home » Development » CSS

Visbug is an amazing new browser extension that allows you to do a visual inspection of your website in development.

What they have to say about their tool and capabilities

  • Point, click & tinker
  • Edit or style any page, in any state, like it’s an artboard
  • Hover inspect styles, accessibility and alignment
  • Nitpick layouts & content, in the real end environment, at any device size
  • Leverage adobe/sketch skills
  • Edit any text, replace any image (hi there copywriters, ux writers, pms)
  • Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities
  • Design while simulating latency, i18n, media queries, platform constraints, CPUs, screensize, etc
  • Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc)
  • No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea

For Designers & Content Creators

A really nice tool for designers & content creators, helping them to optimize the look and feel of a website.

The extension is currently available for Chrome, but a Firefox Addon is in development.

Github
Chrome Extension

readmore

Easily add beautiful checkboxes and radio buttons in pure CSS. Highly customizable via SCSS.


  •  Basic
    • Shapes – SquareCurveRound
    • Variants – DefaultFillThick
    • Colors – PrimarySuccessInfoWarningDanger
    • Color types – SolidOutline
    • Animations – SmoothTadaJellyPulseRotate
  • Switch – iOS style – OutlineFillSlim
  • Responsive
  • No JavaScript
  • Custom Font Icons
  • SVG Icons
  • Image support
  • Toggle between icons / SVG’s / images
  • Lock
  • State – FocusHoverIndeterminate
  • Supports frameworks – BootstrapFoundationSematic UIBulma, …
  • SCSS customization
  • Supports all modern browsers, including mobile devices
  • Print friendly

GitHub

readmore

An icon font to use with the Google Maps API and Google Places API, using SVG markers and icon labels.

Map Icons makes Google Maps Markers dynamic with control over shape, color, size, and icon easily changed using options in the marker object as well as simple SVG Notation and CSS.

GitHub / Preview

readmore

Container

CSS

 

readmore

A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

GitHub

readmore

After some downtime, GreenApe is breathing again. I revived the brand with a good friend of mine and we will be reopening shop options shortly.

Michael and I have been friends for a long time. We have been working on many different projects over the years.

He launched GreenApe in 2011 and I helped him with his first steps. A couple of months ago we decided to merge our competences and expand what GreenApe offers and stands for.

From the website:The GreenApe brand was established in 2011. GreenApe’s career began with the 1st Single Malt Whisky Coffee.

As the first of its kind, our coffee is refined with Original Single Malt Whisky. To this day, he pampers many connoisseurs and gourmets with his unique taste. Now there is another reason to rejoice.

From now on, we are continuously expanding the GreenApe product world with several stylish gadgets and useful accessories. For you this means that you will be able to discover even more beautiful, special or practical things in the future.

GreenApe is all about lifestyle & leisure products, fun gadgets and unique food & drinks.

readmore

Font Face Observer is a fast and simple web font loader. You can use it to load fonts and customise your browser’s font loading behaviour.

Font Face Observer gives you control over web font loading using a simple promise based interface. It doesn’t matter where your fonts come from: host them yourself, or use a web font service such as Google Fonts, Typekit, Fonts.com, and Webtype.

Font Face Observer @ Github

readmore

Quickly draw a leader line in your web page.

Leaderline @ Github

readmore

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

 

readmore

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.

GitHub

readmore