Apr 16, 2014
3 notes
ui
design
Oh no, not another UI Kit™

A simple, flat and free mobile and web UI Kit available as a free PSD download under MIT licence.

Oh no, not another UI Kit™

A simple, flat and free mobile and web UI Kit available as a free PSD download under MIT licence.

Apr 10, 2014
2 notes
ebook

Create your own ebook

Small indie publisher Five Simple Steps has closed and handed all the rights back to their authors. In another classy move they are sharing their ebook creation process.

A step-by-step guide to creating an ebook in ePub and mobi formats, complete with ebook template, and a useful style guide for authors.

  • Documentation
  • Styleguide
  • …and there’s a zipped download with all the templates that I won’t link to directly.
Apr 8, 2014
3 notes
css

Creating Style Guides

Susan Robertson for A List Apart:

To me, a style guide is a living document of code, which details all the various elements and coded modules of your site or application. Beyond its use in consolidating the front-end code, it also documents the visual language, such as header styles and color palettes, used to create the site. This way, it’s a one-stop place for the entire team—from product owners and producers to designers and developers—to reference when discussing site changes and iterations.

Apr 5, 2014
7 notes
design
mobile

How people really hold and touch their phones

Slides from a talk by Steven Hoober:

Despite decades of research and years of us all carrying a touchscreen mobile handset around, there’s a lot of myth, disinformation and half truth about how they work, and how best to design for touch.

Steven has evaluated dozens of studies and performed some of his own to find out how your users really grasp their phones, and how to make touch targets that work reliably.

Mar 24, 2014
7 notes
html
css

WTF, HTML and CSS?

Reasons your HTML and CSS may be fucked. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.

With liberal swearing, because @mdo.

Mar 20, 2014
1 note
cms

Inside the Guardian'€™s open-source CMS: Scribe, an extensible rich text editor

As part of the Guardian’s new digital content management system, Composer, we needed a rich text editor to enable our journalists to write rich content. More than that, we needed a rich text editor we could extend, to provide our journalists with an elegant interface for producing and formatting rich content. Unhappy with existing solutions, we built and open sourced Scribe, our own rich text editor. But how and why did we build it?
Mar 19, 2014
0 notes
design
css

Crafting link underlines on Medium

Marcin Wichary:

How hard could it be to draw a horizontal line on a screen? It seems wrangling a few pixels together to stand in a file would be something computers should be pretty good at anno domini twenty-fourteen.

One would think so, but simple things are rarely simple under the surface… at least if they are worth anything. Typography, likewise, is a game of nuance. This is a story on how a quick evening project to fix the appearance of underlined Medium links turned into a month-long endeavour.

Mar 16, 2014
5 notes
semantics
html
css
less

Semantic UI

Semantic empowers designers and developers by creating a shared vocabulary for UI.

Semantic HTML and CSS patterns for anything you might need: buttons, headers, images, forms, menus, dropdowns, popups and everything else.

Mar 16, 2014
9 notes
webfonts
design
font-face

The 100 Greatest Free Fonts for 2014

We have selected all kinds of typefaces which can be seamlessly integrated into any design: Sans Serif, Slab Serif, Rounded, Decorative, Display, Art Deco, Geometric, Futuristic, and many more besides. Most of these typefaces have a web font kit to embed custom fonts with the @font-face rule.

A really nice selection.

Mar 16, 2014
4 notes
bootstrap
Bootflat

A free (MIT), flat Bootstrap 3 theme.

Bootflat

A free (MIT), flat Bootstrap 3 theme.

Mar 15, 2014
9 notes
css
html

Fluidity

HTML is almost 100% responsive out of the box. These 107 bytes of css fix the ‘almost’ part.

Great use of the .sexy domain here too!

Mar 11, 2014
6 notes
css
SVG

text-rendering

A CSS-Tricks primer:

The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision.

The text-rendering property is not defined in any CSS standard. It’s actually an SVG property. However, Gecko/WebKit/Blink browsers let you apply this property to HTML elements.

Mar 10, 2014
4 notes
Regex

Learn regular expressions in about 55 minutes

By Sam Hughes:

Regular expressions (“regexes”) are supercharged Find/Replace string operations. Regular expressions are used when editing text in a text editor, to:

  • check whether the text contains a certain pattern
  • find those pattern matches, if there are any
  • pull information (i.e. substrings) out of the text
  • make modifications to the text.

As well as text editors, almost every high-level programming language includes support for regular expressions. In this context “the text” is just a string variable, but the operations available are the same. Some programming languages (Perl, JavaScript) even provide dedicated syntax for regular expression operations.

Mar 9, 2014
2 notes
markdown
javascript

EpicEditor

EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.
Mar 8, 2014
2 notes
design
The amazing invisible spacer GIF hack

Jason Kottke:

In his post about 1990s web development techniques, Zach Holman praises the 1-pixel transparent GIF.

1x1.gif should have won a fucking Grammy. Or a Pulitzer. Or Most Improved, Third Grade Gym Class or something. It’s the most important achievement in computer science since the linked list. It’s not the future we deserved, but it’s the future we needed (until the box model fucked it all up).
Given all of the awards Holman desires to present, I’m surprised he didn’t mention the inventor of the spacer GIF, David Siegel. Siegel was perhaps the first celebrity web designer — well, a celebrity among web designers anyway. He dispensed opinionated design knowledge from his personal homepage and used the High Five award to showcase his idea of cutting edge web design. (Fun fact: Siegel’s own site was the first High Five award winner.)

The amazing invisible spacer GIF hack

Jason Kottke:

In his post about 1990s web development techniques, Zach Holman praises the 1-pixel transparent GIF.

1x1.gif should have won a fucking Grammy. Or a Pulitzer. Or Most Improved, Third Grade Gym Class or something. It’s the most important achievement in computer science since the linked list. It’s not the future we deserved, but it’s the future we needed (until the box model fucked it all up).

Given all of the awards Holman desires to present, I’m surprised he didn’t mention the inventor of the spacer GIF, David Siegel. Siegel was perhaps the first celebrity web designer — well, a celebrity among web designers anyway. He dispensed opinionated design knowledge from his personal homepage and used the High Five award to showcase his idea of cutting edge web design. (Fun fact: Siegel’s own site was the first High Five award winner.)

Navigate
« To the past Page 1 of 121
About
Curious about code, mad about markup.* Subscribe via RSS.