Glyphr is a free, html5 based font editor #

Looks like the Glyphr team set out to lower the barrier to get in to font design.

Professional font design programs are very complex, and quite expensive. Glyphr is accessible, streamlined, and made for font design hobbyists… and it’s free!

At first glance, it appears that they’re off to a great start. Check out the sandbox if you want to play around with it.

Better Google Web Fonts #

A sim­ple one-off page to browse multi-variant type­faces. Google Web Fonts is full of awesome free, open source fonts. It’s also full of fonts that may not be worth your time. I’ve been using this to mine Google based on his metrics, and start there.

I quickly discovered that a good metric for higher-quality fonts was the presence of four or more alternates. The Google Web Fonts directory does not allow that type of filtering, so I built this simple one-off page that allows you to browse typefaces that are true families. – Matt Wiebe

Would be neat if each font in the index had its own page with Dribbble shots tagged with “PT Serif” and an email with updates on these worthy fonts.

The source is on GitHub if you want to contribute.


Fun fact. We used Yanone Kaffeesatz in our logo.

Simple guide to Mobile-First Responsive Design #

Who doesn’t want their web projects to be useable on all devices? If you’ve been looking for a simple primer on the fundamentals of responsive web design, Adam Kaplan’s project, nicely dubbed Grid, is a great resource to visually see what “Responsive” means and how it works.

We want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation.

Check out Grid’s homepage, or the source on GitHub.

8 Sass mixins you must have in your toolbox #

Regardless if you’re using Compass, Bourbon, or you’re going full vanilla — these 8 Sass mixins are certainly among the top mixins needed.

Some of the mixins are included in Compass, but since I prefer not to use Compass in my projects, I decided to write them myself. So, here are the 8 mixins I think every developer should have in their toolbox.

Setting a rem font size with pixel fallback is priceless.

Catch UI regressions with Huxley from Facebook

Pete Hunt and Maykel Loomans (from Instagram) launched Huxley a little while back. It’s a test-like system for catching visual UI regressions in web applications — similar to a test suite for code, but instead it takes screenshots as you browse and compares them to a known good version of your site.

CSS Zen Garden turns 10 and the source is now open on GitHub #

If you started a project like CSS Zen Garden today, it would be natural to put the source code on GitHub and ask for contributions via pull request. However, CSS Zen Garden just turned 10, so its life spans beyond that of Git and GitHub for that matter.

So, needless to say, it’s a big deal for Dave Shea to move the codebase to GitHub and follow suit with what we now think is a norm, which is open projects and social coding.

CSS Zen Garden is 10 years old

If you’d like to add a modern CSS Zen Garden design to the mix, fork, branch and submit a pull request! If you’re new to Git and GitHub, and you’re not sure what to do – either learn git (do this!) or use the traditional submission form at mezzoblue.com/zengarden/submit.

Sadly my submission from WAY BACK IN THE DAY was never added as an official design, but can be seen (un-styled) here. I still have the CSS for that so maybe one day I can work it out with Dave to update the CSS src URL for my submission.

Check out the source and fork it on GitHub. Or head to csszengarden.com to see the original design and learn more.

Skycons from the makers of Forcast and Dark Sky released as open source #

Sometimes you just have to do something for yourself to get the effect, or a certain “je ne sais quoi” if you will, that’s needed to complete the aesthetic of an interface. That’s exactly what the makers of Forecast did.

Skycons Example

For most of its development, Forecast used Adam Whitcroft’s Climacons, but they lacked the animations seen elsewhere in the app. As mentioned in the announcement post, “the Climacons simply felt too flat, too static; we therefore set about making our own set of animated weather icons that felt more alive.”

The result? Skycons — a set of ten animated weather glyphs, generated by JavaScript using Canvas and heavily inspired by Adam Whitcroft’s Climacons.

Check out the Skycon’s homepage or the source on GitHub if you’re looking to learn from or hack on the project.

Flat UI user interface kit from Designmodo #

If you haven’t heard, flat design is pretty trendy right now.

Last September, LayerVault shared their thoughts (and some would say coined the term too) on The Flat Design Era. Since then, many sites and designers have taken to this new trend — including the folks at Designmodo.

A month ago they released Flat UI, a free and open source user interface kit. If you were paying close attention, you’d know that LayerVault slapped them with a DMCA take-down notice issued to GitHub saying “I am the exclusive rights holder for the artwork contained within Flat UI, Free Web User Interface Kit; These exclusive rights are being violated by material available upon your site at the following URL designmodo.github.com/Flat-UI” — but that take-down has since been lifted and the air is clear. In the end LayerVault was simply saying that a few of the icons were way too close to their original flat UI designs and had to defend themselves. It happens.

You should check out Flat UI — even if just to get some ideas on creating your own UI kit.

Phantom Open Emoji Kickstarter needs your help and will be open source #

I just heard about this Kickstarter called Phantom Open Emoji.

The plan is to create a completely free and open set of emoji that anybody can use in any project without a fee and without any restrictive conditions.

Much like Font Awesome, Phantom Open Emoji will use a combination of the SIL open font license, MIT license for any code, and the CC 3.0 license to make it completely free for commercial use. Distribution is said to be from a yet to be named GitHub repo, providing a fork of gemoji that replaces all the unlicensed emoji with the newly created/liberated versions.

Emoji?

The word “emoji” is Japanese, written 「絵文字」. The ‘e’ in emoji 「絵」 means picture, painting or image, specifically one that is drawn or painted and not a photograph or generated image. ‘Moji’ 「文字」 means letter or typographic character. So “emoji” literally means “picture character” or “picture letter”.

The Problem

Emoji are usually distributed as a font or as a packaged set of glyphs or images. Just like fonts and image libraries they are copyrighted and licensed. Emoji licenses are likewise expensive and have unrealistic and crazy license conditions and restrictions. All the “free” emoji we could find were either awful or incomplete. And as it stands now a lot of people have decided to just hope Apple wouldn’t sue them and started using the Apple set without permission (that we know of).

The solution

We want to create a full set of ~900+ emoji completely free to use, free to distribute and open to modify without any restrictive conditions or terms. We want this emoji set to NOT be based on the “new” international look with yellow smileys and multiple emoji referencing one generic image; but rather to be based on and more closely resemble the high quality Japanese emoji sets. The issue of political correctness does arise, but check our reach-goals for a solution.

As of today their conservative goal of $5,000 will likely be met. With $3,331 pledged in 6 days and 52 days to go, it’s not a matter of will they reach their goal – it’s a matter of will the entire community support their effort.

What do you think? Do you plan to back this Kickstarter? I’m still on the fence because many apps have already added support for the current gemoji and thus far haven’t been sued by Apple or others. Maybe the risk of getting sued is a moot point. Also, the current set is so iconic already.

Discuss and share your thoughts on Hacker News.

Font Awesome is an awesome open source icon-font kit #

Font Awesome by Dave Gandy is “the iconic font” designed for use with Twitter Bootstrap. But guess what? You don’t have to use Twitter Bootstrap. Font Awesome can be used with any site or framework.

Font Awesome

Beyond the 249 icons, my favorite thing about Font Awesome is how designer friendly it is. Just install FontAwesome.otf and visit the copy and paste page when designing. You can also contribute your own icons. Although to submit your icon, you’ll need to email Dave at dave@davegandy.com so he can approve your icon for submission vs sending a pull request. He’s keeping a very tight reign on quality.

Font Awesome’s licensing is a combination of the SIL open font license, MIT license for code, and the CC 3.0 license – making it completely free for commercial use. Attribution is no longer required for Font Awesome 3.0, but it is much appreciated.

Check out the source on GitHub and the integration details to get started.


UPDATE: Use icnfnt (The official subsetting tool of Font Awesome) to create a custom Font Awesome icon-font kit with only the icons you want. It even includes the CSS, Sass, SCSS, & LESS files. While you’re at it, check out the source for icnfnt as well.

Custom user styles that simplify the UI and focus on the content of popular websites #

While recording The Industry Radio Show one of our listeners linked out to these custom user styles from Connor Sears, a Product Designer at Pinterest.

user styles for twitter

If you caught our original post on Stylebot a while back, custom user styles like the ones Connor shared become easier to use and far more useful. With 60% of our traffic coming from Google Chrome, I assume that a majority of our readers can appreciate news like this.

Share your custom user styles with us on Twitter, or sign in to stylebot to share them with the community.

Also, check out the source for Connor’s simple user styles site on GitHub.

Redacted, an open source font for your wireframes on the web and desktop #

Redacted is a great open source font that keeps your wireframes free of distracting Lorem Ipsum dummy text.

Redacted Font in action

It comes in three styles: Redacted Regular, Redacted Script, and Redacted Script Bold. Christian, Redacted’s author, notes that the font is similar to BLOKK, but Redacted is open-source and has better character widths.

From the readme:

Disclaimer – This project is a (nearly) direct rip-off of BLOKK. The idea is simple and brilliant, but I wasn’t happy with the implementation and it didn’t appear to be an open source project, so I created my own. Credit where credit is due.

Check out the src directory for Fontlab and Adobe Illustrator source files if you’d like to learn more, or add to this awesome open source font. Check out the fonts directory to snag what you need to use it in your web projects or install it on the desktop.

hint.css makes pure CSS tooltips too easy #

From the hint.css homepage:

hint.css is written as a pure CSS tooltip library which you can use to create cool tooltips for your site. It does not rely on JavaScript, but instead uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. hint.css uses BEM naming convention particularly for the modifiers.

The usage is simple. Download one of the 2 library versions to your project and include the CSS file in the <head> of your page.

  1. Full:
    https://raw.github.com/chinchang/hint.css/master/hint.css
  2. Minified:
    https://raw.github.com/chinchang/hint.css/master/hint.min.css

Then, the tooltip text is passed using the data-hint attribute on the element.

For example:

Hello Sir, <span class="hint hint--bottom" data-hint="Thank you!">hover me.</span>

If you’re wanting to contribute, hint.css is developed using Sass. The Sass source files can be found in the src directory of the project on GitHub.

Check out the homepage for more details and demos in action.

Episode 0.7.4 – The League of Moveable Type with Micah Rich

Adam and Wynn caught up with Micah Rich from The League of Moveable type to talk about open source typography. Items mentioned in the show: Micah Rich, from The League of Movable Type. Caroline Hadilaksono, co-founder of The League. League Gothic, one of Caroline’s popular faces is Wynn’s favorite. Several of League fonts are available […]

WhatFont Tool makes finding out the fonts used in webpage a click away #

What’s the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

Check this out…

WhatFont

WhatFont can easily get font information about the text you are hovering on. WhatFont also detects services used for serving the font and supports Typekit and Google Font API.

How to use it?

Use the bookmarket, Chrome extension, or the Safari extension

Check out the source on GitHub, or the homepage to learn more.

Zurb Foundation – Design scaffold for your web app #

The talented team at Zurb has released Foundation, a design scaffold for building web applications. Much like HTML5 Boilerplate, Foundation comes with some sensible markup defaults, however it goes farther with attractive styles for most interface elements in the spirit of Twitter’s Bootstrap project.

Screenshot

Along with a grid layout and form styling, Foundation also bundles two powerful Zurb JavaScript plugins: Orbit and Reveal.

While the front end code is server framework agnostic, Rails developers can integrate Zurb Foundation easily with the zurb-foundation gem which delivers foundation assets via the Rails 3.1 Asset Pipeline.

CSS1K: A demonstration of what can be accomplished with only 1k of CSS #

CSS isn’t a subject we cover too often here on The Changelog. Most often, we are talking about Sass (drink!), Compass, Stylus, Less or some other blend of “pre-processor” we, fan boys, love to cover. What we need to realize, and not forget, is that all of these solutions regardless of how awesome they are – in the end they ALL produce CSS. That’s what the browsers consume, and in the end that’s what we are writing. This will be the case for the foreseeable future.

There’s Beauty in CSS Design

Back in the day (2003), we as a design community and a community that was facinated with what could be done with CSS alone flocked to Dave Shea’s CSS Zen Garden – it showcased what was possible with CSS-based designs. That helped prove what CSS was capable of in its early days and that lead to an explosion in the use of CSS on the web.

Well, a lot has changed since 2003, and there has been massive advancement of the CSS spec, and today you can do almost anything with only CSS. As CSS use expands, so does the average CSS file size. Large websites often sport CSS files in the 15-25k range – some even bloat all the way up to a megabyte! Whoa.

So what’s CSS1K about?

CSS1K, like CSS Zen Garden, invites you to show that web developers are more inventive than ever, and that limitations can spark creativity. Fork CSS1K at GitHub, craft your own CSS style and send your submission as a pull request. If you don’t have a GitHub account, you can send in your submission via e-mail.

In your CSS file, specify the name of the style, your name and URL (such as your homepage) if you would like them to link to you. Check out the example below – by the way, Columns by Alexander Makarov is one of my favs.

/* CSS1K entry
 * "Columns" by Alexander Makarov (http://rmcreative.ru)

Rules of participation

  • Submissions must consist of only CSS
  • Submissions may be up to 1K (1024 bytes) minified
  • Vendor prefixes are not counted to the total number of bytes – submit your code un-prefixed and they will add necessary prefixes (sounds like a PITA)
  • Any external resources and images, including data URI’s, @font-face and @import’s, are forbidden
  • The page does not have to look the same in every browser, but graceful degradation is encouraged
  • The submitted code is licensed under the MIT License

If you have any questions, reach out to Jacob on Twitter at @CSS1K.

Good luck and happy styling.

[Project on GitHub] [Homepage]

Sass 3.1 released, now with functions, lists, and @media bubbling #

Sass continues to provide innovative new ways to DRY up our CSS. Version
3.1 is
out
and offers many new language features, compilation performance improvements, and some new command line options.

Sass, extend thyself with Sass-based functions

Rubyists have long had the ability to extend Sass, but now anyone can
create powerful functions using only Sass:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

Lists

Sass now includes some handy functions to work with lists introduced in
version 3.0 including nth, append, join, and length:

$ sass -i
>> nth(1px 2px 10px, 2)
2px
>> append(1px 2px, 5px)
(1px 2px 5px)
>> length(5px 10px)
2

There is also a new @each directive to iterate over lists:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

New command line utility and breaking changes

Sass 3.1 brings changes to command line tools and some breaking changes:

  • There is a new scss command line utility to compile stylesheets, defaulting to the SCSS syntax.
  • @import used with a path without a file extension will now throw
    an error
  • Old-style ! variable support has been removed
  • The css2sass command line utility has been removed in favor of
    sass-convert.

Check out the
Changelog
for complete release details. For a deeper look at Sass and Compass, check out our upcoming book Sass and Compass in Action from Manning, now in early access.

[Source on GitHub]

Episode 0.5.3 – Formalize and News Roundup Design Edition with Nathan Smith

Episode 0.5.3 – Formalize and News Roundup Design Edition with Nathan Smith Adam and Wynn were joined by Nathan Smith, creator of 960.gs to talk about his new project Formalize and the latest news on The Changelog. Download MP3 Items mentioned in the show: Nathan Smith, front end dev, speaker, and author 960 Grid System […]

Episode 0.5.2 – Serve, RadiantCMS, Prototyping, and Design with John Long

Adam sat down with Designer/Developer John Long, creator of RadiantCMS about his new project Serve, design, and running a successful open source project. Items mentioned in the show: John Long of Wiseheart design Serve is a rapid prototyping framework for web applications John created RadiantCMS, later extended by Sean Cribbs Radiant led John to a […]

HSLPicker – Most excellent color picker for your enjoyment #

Brandon Mathis from the Compass core team, Octopress, and Fancy Buttons fame has created HSLPicker.com, a quick-and-dirty Hue Saturation Luminosity color picker. As a designer, I love HSL as it’s the most human-friendly format for specifying colors.

Here’s a quick screencast

Be sure and check the project source if you’re interested in the JavaScript and MooTools implementation. Be sure to catch Brandon on Episode 0.1.7 talking about open source publishing tools if you missed it.

[Source on GitHub]

Lettering.js: Radical web typography with jQuery #

Even with the improvements @font-face brings to typography, web designers still don’t have quite the control as their print counterparts. Basic tasks like per-letter or per-word styling involves a lot of <span>’s and stupid markup tricks.

Dave Rupert aims to help with Lettering.js, a jQuery plugin for “radical web typography.”

Screenshot

How it works

In this example, Lettering.js takes over the tedious task of creating all of those per-letter <span>’s:

$(document).ready(function() {
  $(".fancy_title").lettering();
});

… which yields

<h1 class="fancy_title">
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>

You’re now free to style each individual letter with the resulting CSS classes.

Don’t need that fine-grained control? Lettering.js can handle per-word options as well:

$(document).ready(function() {
  $(".word_split").lettering('words');
});

[Source on GitHub] [Blog post]