Form Inputs: The Browser Support Issue You Didn’t Know You Had
The lowly form input. It’s been a part of HTML for as long as HTML has had a formal specification; but before HTML5, developers were hamstrung by its limited types and attributes. As the use of smartphones and their on-screen keyboards has flourished, however, inputs have taken on a new and incredibly important role — but they’re also riddled with browser and device inconsistencies. The eight original input types were brilliant in their simplicity. (Well, OK, maybe
<input type="image">hasn’t aged very well.)
Think about it: By inserting a single element in your markup, you can tell any web browser to render an interaction control, and you can completely modify that interaction – from a text field to a checkbox to a radio button – by simply changing a keyword. Now imagine a world where creating these interactions means also creating custom interaction controls, and you begin to realize how taken for granted inputs really are.
The post Form Inputs: The Browser Support Issue You Didn’t Know You Had appeared first on Smashing Magazine.
Extending In Sass Without Creating A Mess
@extenddirective in Sass is a powerful directive that facilitates the sharing of rules and relationships between selectors. However, it can produce undesirable side effects if it is not carefully implemented. Thankfully, there are many strategies for using
@extendeffectively that can prevent these side effects and produce clean, organized CSS.
@extendin detail and exploring these various strategies, you can accurately predict exactly what happens when you use
@extend, and make more informed decisions about when to use a
@mixinand when to use
@extend, to ensure optimal organization and to restrict unused styles in your style sheets.
Desktop Wallpaper Calendars: May 2015
We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork, and as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd.
This creativity mission has been going on for seven years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month. This post features free desktop wallpapers created by artists across the globe for May 2015. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!
Design Principles: Compositional Flow And Rhythm
When someone lands on a page of your site what do you want that person to do? Where do you want them to look? What information do you want your visitors to notice and in what order? Ideally, you want people to see your most important information first and your next most important information second.
You want potential customers to see the copy that will convince them to buy before they see the "Buy Now" button. You want people to be presented with the right information at the right time, and one way to do that is to control the flow of your composition. Compositional flow determines how the eye is led through a design: where it looks first, where it looks next, where the eye pauses, and how long it stays.
Creating A Complete Web App In Foundation For Apps
Foundation for Apps is a new single-page app framework from Zurb that is closely related to Foundation 5 (also known as Foundation for Sites, a widely used front-end framework). It’s built around AngularJS and a flexbox grid framework. It’s intended to make creating a web app very quick and simple, enabling us to quickly start writing the code that’s unique to our application, rather than boilerplate.
Because Foundation for Apps was only released at the end of 2014, it hasn’t yet seen widespread usage, so there are few good sources of information on using the framework. This article is meant to be a comprehensive guide to building a functional web app with Foundation for Apps from start to finish. The techniques detailed here are fundamental to building practically any kind of app for any client, and this tutorial also serves as a strong introduction to the wider world of AngularJS and single-page apps.
The post Creating A Complete Web App In Foundation For Apps appeared first on Smashing Magazine.