Outdated UX patterns and alternatives Meet North, design and development standards to align and guide your project. It's a comprehensive guide contributed to the open source community to encourage, "a mobile-first, in-browser, system based approach to design and development." Check out North on GitHub: The section of the guide that I found most interesting is, Outdated UX Patterns, a collection of examples of what not to do when building a website, which tries to steer designers from borrowing from ineffective practices to solve common problems. Just like how presentations deprecate, so do UX patterns. User Interface UI Kit Introduction Gumby v2 is here. You haven't a moment to waste! So many new, amazing features await you! But first a quick crash course on the latest and greatest Gumby Framework.
Simple Grids with CSS Multi-Column Layout Last week I began researching CSS layout — what’s achievable with the various spec modules — and grid systems (the myriad of solutions from 960gs to Zen Grids). My notes have quickly grown to thesis-level — I do eventually plan to publish something — but for now here’s a nice example demonstrating what is sure to be my take-away message: keep it simple. The image below shows a very minimal design for my website’s footer (menu and copyright notice) as it appears in a small viewport: The HTML (sans class attributes for readability) is basic: <ul><li><a href="/">Home</a></li><li><a href="/about/">About</a></li><li><a href="/services/">Services</a></li><li><a href="/portfolio/">Portfolio</a></li><li><a href="/blog/">Blog</a></li><li><a href="/contact/">Contact</a></li></ul><p><small>Copyright © David Bushell</small></p>
Beginner’s Guide to Responsive Web Design Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS.
Creating A Client-Side Shopping Cart Advertisement Session storage is a new feature introduced by the W3C’s “Web Storage1” specification. It’s supported in Internet Explorer 8+, Firefox, Chrome, Safari and Opera Desktop (for a complete list, please consult “Can I Use2”). In this series of articles, we’ll cover in depth a practical implementation of session storage by creating a complete e-commerce shopping cart with the sessionStorage object and jQuery.
Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. This is how I still work today and definitely a method I advocate.
Animate your HTML5 previous next action action = on most slides, something happens when you click (especially slides 4, 9, 19, 31 and 38 :-) Martin Gorner GDG DevFest Berlin 2013 Creating a Border Animation Effect with SVG and CSS The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines. View demo Download source Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect.
Introduction to Sass for New WordPress Theme Designers As a new WordPress theme designer, you would quickly learn the challenges of maintaining long CSS files while keeping them organized, scalable, and readable. You will also learn that many designers and front-end developers recommend using a CSS preprocessor language like Sass or LESS. But what are these things? and how do you get started with them? This article is an introduction to Sass for new WordPress Theme Designers. We will tell you what a CSS preprocessor is, why you need it, and how to install and start using them right away. Centering with margin:auto; CSS play - Centering images and information panels using margin:auto; 17th October 2013 For IE8+, Firefox, Chrome, Safari, Opera etc. Heading The Many Faces of ‘Adaptive Design’ Lots of terms evolve beyond their initial definitions and become a catch-all for a general notion or idea. I’ve talked about this regarding responsive web design and mobile first, and there are certainly other terms that escape their original definition. “Adaptive Design” is another one of those terms you see thrown around in various ways.
Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton Bootstrap 4.0.0-alpha is a fairly large update to the framework. It has dropped Less support in favor of Sass, converted from px-based to rem-based sizing, improved its grid system, and dropped IE8 support. Also, all its JS plugins were re-written in ES6, it now uses a customized reset CSS file called Reboot, and offers flexbox support via a Sass boolean variable. In addition to this update, Bootstrap now offers themes at themes.getbootstrap.com. Also, Bootstrap will continue supporting version 3, unlike the dropping of version 2 support after the release of version 3.