Acolono Bubble Issue #002

Make wireframes great again, find your visual center and keep it simple with :nth-child!

Nico Grienauer
acolono
Published in
2 min readJun 16, 2016

--

Wirify

#wireframe #instant #bookmarklet

With Wirify you can turn any web page into a wireframe with just one click.
As simple as it sounds.

Bonus tip: How about a “guess the website” game night with your nerd collegues? :)

www.wirify.com

Visual Center

#webservice #design #visualcenter

With this tool, you can quickly check your Logo/Elements/Icons if it is perfectly visual centered.

The visual center is the perceived center of an artifact and not the actual center.

The visual center of any page is just slightly above and to the right of the actual (mathematical) center. This tends to be the natural placement of visual focus, and is also sometimes referred to as museum height. — Joshua David McClurg-Genevese

If you want to get an overview about the topic you can get a good overview at the principles of design

http://javier.xyz/visual-center

family.scss

#scss #nth-child #mixin

Unleash the power of the nth-child property with the family.scss mixin.

Example: “@include first(3)” will result in “:nth-child(-n + 3)”

At the website you get a great overview, how you can save time and nerves with this nifty mixin.

http://lukyvj.github.io/family.scss

gif by giphy

--

--

Nico Grienauer
acolono

Drupal Austria Association Board Member, CodeWeekEU Ambassador, Open Minds — “Austrian Open Source Award” Initiator and Founder of Acolono GmbH