Jul 25, 2014
2 notes
bootstrap

Bootstrap Resources

Jul 23, 2014
3 notes
css
responsive
Ungrid

the simplest responsive css grid

ungrid is a responsive, table-based CSS grid system. To use, simply put as many .cols as you wish in your .rows and the .cols will automatically be evenly spaced. This allows you to roll your own simple grids.

Ungrid

the simplest responsive css grid

ungrid is a responsive, table-based CSS grid system. To use, simply put as many .cols as you wish in your .rows and the .cols will automatically be evenly spaced. This allows you to roll your own simple grids.

Jul 22, 2014
2 notes
design
tools
Get Macaw 1.5 now! $80 for the next two days

(That’s $99 instead of the regular $179 price.)

New: Rich text, hover, active and focus states for any element, display toggling, an embed tool, responsive properties and layout engine enhancements.

Get Macaw 1.5 now! $80 for the next two days

(That’s $99 instead of the regular $179 price.)

New: Rich text, hover, active and focus states for any element, display toggling, an embed tool, responsive properties and layout engine enhancements.

Jul 22, 2014
0 notes
wordpress

CardeoPress

This is a simple, bare-bones WordPress theme for users that want to get a simple blog up and running. It includes Bootstrap for quickly spinning up layouts and layering on your own look and feel.

(demo: cardeopress.cardeo.ca)

Jul 22, 2014
3 notes
tools
Bower

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json. How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows.

Bower

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json. How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows.

Jul 22, 2014
18 notes
responsive
design
Responsive Logos

A concept by Joe Harrison:

A exploration into scalable logos for the modern web.

Responsive Logos

A concept by Joe Harrison:

A exploration into scalable logos for the modern web.

Jul 21, 2014
6 notes
css
framework
Concise.CSS

Concise is built so that you have a lot of options handed to you out of the box. It comes built from the ground up to be mobile friendly and includes a simple grid system, beautiful typography, and a few other bells and whistles. However, it is also built super lean, with a little more than 2,500 thousand lines of CSS, and a few hundred lines of JavaScript. Concise is specifically built to be customized, tinkered with, and hacked.

The whole goal for people using Concise is that they can use the framework to fuel their own creations. The framework comes with very few predefined styles, so overriding styles is never a hassle.

I want people to not use these bloated front-end frameworks out of necessity. I want there to be an option that is lean, easy-to-use, and easy to learn.

Concise.CSS

Concise is built so that you have a lot of options handed to you out of the box. It comes built from the ground up to be mobile friendly and includes a simple grid system, beautiful typography, and a few other bells and whistles. However, it is also built super lean, with a little more than 2,500 thousand lines of CSS, and a few hundred lines of JavaScript. Concise is specifically built to be customized, tinkered with, and hacked.

The whole goal for people using Concise is that they can use the framework to fuel their own creations. The framework comes with very few predefined styles, so overriding styles is never a hassle.

I want people to not use these bloated front-end frameworks out of necessity. I want there to be an option that is lean, easy-to-use, and easy to learn.

Jul 16, 2014
0 notes
navigation
Improving GOV.UK’s navigation

Mark Hurrell:

This blog post is about the problems people have been having with GOV.UK’s navigation and what we’re doing to fix it. It’s the story of about 3 months of work, and what we found out about our users along the way.

Improving GOV.UK’s navigation

Mark Hurrell:

This blog post is about the problems people have been having with GOV.UK’s navigation and what we’re doing to fix it. It’s the story of about 3 months of work, and what we found out about our users along the way.

Jul 16, 2014
1 note
navigation
responsive
Navigating the Guardian

The Guardian has been rebuilding the navigation for its ongoing website redesign:

Of any element on a website, the navigation has the most jobs to do. It has to tell you where you are and where you can go next. Further, it’s inherent presence on every page means it has to enhance the brand, both in visual identity and in the content it displays.

Navigating the Guardian

The Guardian has been rebuilding the navigation for its ongoing website redesign:

Of any element on a website, the navigation has the most jobs to do. It has to tell you where you are and where you can go next. Further, it’s inherent presence on every page means it has to enhance the brand, both in visual identity and in the content it displays.

Jun 20, 2014
31 notes
google
responsive
Google have released Web Fundamentals - a comprehensive resource for multi-device web development - and a Web Starter Kit boilerplate. They wrote a blog post about it all called Web Fundamentals and Web Starter Kit: Resources for Modern Web Development:

Web Fundamentals’ guidelines are intended to be fundamental to the platform: useful no matter which framework you choose or which browser your users run. We have articles about responsive layouts, forms, touch, media, performance, device capabilities, and setting up a development workflow. Articles cover both coding and design. For example, the article on layout design patterns explains both the usability tradeoffs between different layout options and how to implement them. The performance section complements PageSpeed Insights, an auditing tool that encourages instant (<1 second) mobile web sites.

Designed to help you apply Web Fundamentals’ best practices in new projects, Web Starter Kit is a lightweight boilerplate with templates and tooling. Web Starter Kit gives you responsive layout, a visual style guide, and optional workflow features like performance optimization so you can keep your pages lean and fast.

Google have released Web Fundamentals - a comprehensive resource for multi-device web development - and a Web Starter Kit boilerplate. They wrote a blog post about it all called Web Fundamentals and Web Starter Kit: Resources for Modern Web Development:

Web Fundamentals’ guidelines are intended to be fundamental to the platform: useful no matter which framework you choose or which browser your users run. We have articles about responsive layouts, forms, touch, media, performance, device capabilities, and setting up a development workflow. Articles cover both coding and design. For example, the article on layout design patterns explains both the usability tradeoffs between different layout options and how to implement them. The performance section complements PageSpeed Insights, an auditing tool that encourages instant (<1 second) mobile web sites.

Designed to help you apply Web Fundamentals’ best practices in new projects, Web Starter Kit is a lightweight boilerplate with templates and tooling. Web Starter Kit gives you responsive layout, a visual style guide, and optional workflow features like performance optimization so you can keep your pages lean and fast.

Jun 12, 2014
7 notes
design
Share: The Icon No One Agrees On

Min Ming Lo:

What do each of these symbols have in common? They are all trying to convey the exact same action - share! Sharing to a social network or via email is a ubiquitous action nowadays but designers have still not been able to reach a consensus on what symbol to use to represent it. Not only does each major platform use a different icon, but they&#8217;ve each witnessed changes over the years.

Share: The Icon No One Agrees On

Min Ming Lo:

What do each of these symbols have in common? They are all trying to convey the exact same action - share! Sharing to a social network or via email is a ubiquitous action nowadays but designers have still not been able to reach a consensus on what symbol to use to represent it. Not only does each major platform use a different icon, but they’ve each witnessed changes over the years.

Jun 11, 2014
3 notes
responsive
How we build Ampp3d…

William Turrell:

For me personally, as the sole developer on the project, I’ve had to continually switch hats between design, front and back-end and try and maintain a reasonably high standard of each, with the very real fear I’ll just be mediocre at everything. I’d like to think we’ve set a few good examples though - why not have a read and make up your own mind. 

…

Ampp3d was originally an experimental Trinity Mirror project in social shareable da… – actually read Martin Belam’s explanation first if you’re new to it. 

Martin and I first worked together on the launch of UsVsTh3m in May 2013. Compared to Ampp3d, UsVsTh3m was ever so simple (no longer the case incidentally; I’m no longer involved and they have a much larger team now. We had some simple Photoshop templates from Chris Lam - a great designer at the Mirror - and from these we built a Tumblr template. 

Fascinating, detailed and practical information on browser support, device testing, user testing, version control, backups, WordPress, ads, performance metrics, hosting, UX, mobile and responsive considerations, infinite scroll and much, much more.

(via @paulbradshaw)

How we build Ampp3d…

William Turrell:

For me personally, as the sole developer on the project, I’ve had to continually switch hats between design, front and back-end and try and maintain a reasonably high standard of each, with the very real fear I’ll just be mediocre at everything. I’d like to think we’ve set a few good examples though - why not have a read and make up your own mind.

Ampp3d was originally an experimental Trinity Mirror project in social shareable da… – actually read Martin Belam’s explanation first if you’re new to it.

Martin and I first worked together on the launch of UsVsTh3m in May 2013. Compared to Ampp3d, UsVsTh3m was ever so simple (no longer the case incidentally; I’m no longer involved and they have a much larger team now. We had some simple Photoshop templates from Chris Lam - a great designer at the Mirror - and from these we built a Tumblr template.

Fascinating, detailed and practical information on browser support, device testing, user testing, version control, backups, WordPress, ads, performance metrics, hosting, UX, mobile and responsive considerations, infinite scroll and much, much more.

(via @paulbradshaw)

Jun 5, 2014
6 notes
writing
Six brilliant bits of micro-copy you can implement today

These are bits of copy most websites could implement somewhere, and without precluding the need for testing, I&#8217;m sure they will improve performance.

Six brilliant bits of micro-copy you can implement today

These are bits of copy most websites could implement somewhere, and without precluding the need for testing, I’m sure they will improve performance.

May 22, 2014
4 notes
tool
Compressor.io

Compressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining a high quality with almost no difference before and after compression.

Compressor.io

Compressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining a high quality with almost no difference before and after compression.

May 22, 2014
9 notes
tumblr
boilerplate

tumbleplate

Support for all of tumblr’s post types including but not limited to Text, Photo, Photoset, Panorama, Quote, Links, Dates, Notes, Video, Audio, & Chat.

Edit: This site was originally called ‘tumblr boilerplate’ until tumblr’s lawyers sent the owner a cease and desist letter. I’ve updated this post to point to the new domain.

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