Changelog

Design Icon

Design

41 Stories
All Topics

CSS Icon frankchimero.com

Everything easy is hard again

This is a long, nuanced piece about progress in web-building technologies and practices. It's written from a designer's perspective, but many of the themes ring true to my developer's brain. I wonder if I have twenty years of experience making websites, or if it is really five years of experience, repeated four times. If you’ve been working in the technology industry a while, please tell me this sounds familiar to you. The primary example cited is how we answer the simple question, "How do I put two things next to each other?" The status quo has changed (tables -> floats -> Flexbox -> CSS grids), but to what advantage? A few of his points feel a bit like looking back at the "good 'ole days" through rose colored glasses, but his case is mostly well-reasoned and powerful. the foundations are now sufficiently complicated enough on their own that it seems foolish to go add more optional complexity on top of it. I’ve kept my examples to the most basic of web implementations, and I haven’t touched on Javascript, animation, libraries, frameworks, pre-processors, package managers, automation, testing, or deployment. Whew. Whew, indeed! The breadth and depth of knowledge required to feel competent in today's web ecosystem is probably why we spend so much time dealing with imposter syndrome in this industry.

read more...
logged by @jerodsanto 2018-02-12T14:19:00.08510Z permalink #design #css #practices

Bootstrap Icon blog.getbootstrap.com

Bootstrap 4!!

What a tremendous amount of work! It’s literally taken us years to do it, but Bootstrap 4 has finally arrived! So what's new? There are no breaking changes since our last beta, but we have made some key improvements and resolved some tricky bugs... Be sure to check out the docs, their new examples, and the migration docs.

read more...
logged by @adamstac 2018-01-21T06:03:13.203602Z permalink #bootstrap #design #css

Kottke Icon Kottke

Bad design in action: the false Hawaiian ballistic missile alert

Instead of selecting “DRILL - PACOM (CDW) - STATE ONLY” from what looks more like a list of headlines on The Drudge Report than a warnings & alerts menu, the operator chose “PACOM (CDW) - STATE ONLY” and sent out a real alert. This is another display of just how critical good design and attention to detail is in the software industry. We have to do better.

read more...
logged by @jerodsanto 2018-01-16T14:29:00.009702Z permalink #design

JavaScript Icon changelog.com

Changelog Films at NEJS Conf!

As many of you may know, we launched a films division to The Changelog. We call it Changelog Films. Over this past year, we've been working hard to build the right team and skills to serve the software development and open source community like we do with our podcast. We had the pleasure of attending NEJS Conf on August 7th, and worked with the conference organizers to interview all the speakers of the conference. This interview is with Christian Heilmann, Developer Evangelist for Microsoft Edge, about the most exciting things happening in JavaScript right now. This interview is with Ethan Marcotte, an Independent Designer and the person who coined the term "Responsive Design" also known as Responsive Web Design (RWD). We talked with Ethan about what's happening in the JavaScript space now and what he's most exciting about for frontenders.

read more...
logged by @logbot 2015-08-12T13:34:22Z permalink #design #javascript

link Icon changelog.com

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.

read more...
logged by @logbot 2014-03-05T14:29:59Z permalink #design

link Icon changelog.com

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.

read more...
logged by @logbot 2014-02-20T05:46:16Z permalink #design

link Icon changelog.com

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.

read more...
logged by @logbot 2014-02-19T13:45:22Z permalink #design

link Icon changelog.com

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.

read more...
logged by @logbot 2014-02-18T17:57:14Z permalink #design

link Icon changelog.com

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. 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.

read more...
logged by @logbot 2013-05-08T20:39:57Z permalink #design

JavaScript Icon changelog.com

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. 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.

read more...
logged by @logbot 2013-04-01T03:00:14Z permalink #javascript #design

link Icon changelog.com

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.

read more...
logged by @logbot 2013-03-21T06:42:32Z permalink #design

link Icon changelog.com

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.

read more...
logged by @logbot 2013-03-02T17:59:14Z permalink #design

link Icon changelog.com

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. 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.

read more...
logged by @logbot 2013-03-02T06:53:37Z permalink #design
0:00 / 0:00