background preloader

Front End Patterns

Facebook Twitter

Nicer Navigation with CSS Transitions - Part 2. It's been four years since we wrote our first post about improving your site navigation with some simple CSS animation, so we thought it would be a good time to revisit the subject.

Nicer Navigation with CSS Transitions - Part 2

Here we'll describe a few additional animations that you can use. If you want to jump ahead and see the final products, you can view the demo. A List Apart Pattern Library.

Forms

» Common Patterns in Styleguides, Boilerplates and Pattern Libraries Cloud Four Blog. It’s hard to believe it’s been almost three years since the publication of Ethan Marcotte’s seminal Responsive Web Design article on A List Apart.

» Common Patterns in Styleguides, Boilerplates and Pattern Libraries Cloud Four Blog

The ideas and techniques described therein blew our minds while forcing us to drastically reconsider our design processes. Even today, the struggle continues to determine which design deliverables make sense in a post-PSD era. Personally, I dig Dave Rupert’s idea of “Tiny Bootstraps, for Every Client”: Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs.

These living code samples are self-documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web.

Transitions

Simple iFrame linking demo. Changing and loading an iframe 'src' attribute with jQuery. Navigation. Code Snippets. Form Follows Function. Design it & Code it. Pens picked by the Editors of CodePen.