background preloader

Bourbon - A Sass Mixin Library

Bourbon - A Sass Mixin Library
Usage & Installation Install for Rails 3.1+ In your Gemfile: Then run: Restart your server. Then rename application.css to application.css.scss:

Related:  Front End DesignCSS & Sass Tita CréaVEILLE TECHNO

Stateful Elements Respond to Touch — Web Fundamentals See Pseudo classes for touch states: Hover and Focus Stickiness On most mobile browsers hover and/or focus states will apply to an element after it’s been tapped. Consider carefully what styles you set and how they will look to the user after they finish their touch. Bear in mind that anchor tags and buttons may have different behaviour in different browsers, so assume in some cases hover will remain and in others focus will remain. Enabling Active State Support on iOS

11 Mixin Libraries For Sass Designers Should Get If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site. Pin it CSS3 + Progressive Enhancement = Smart Design Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects. Among these generalized strategies, the second approach comes closest to the concept of progressive enhancement.

Implement Custom Gestures — Web Fundamentals Add Event Listeners Touch events and mouse events are implemented on most mobile browsers. The event names you need to implement are touchstart, touchmove, touchend and touchcancel. For some situations, you may find that you would like to support mouse interaction as well; which you can do with the mouse events: mousedown, mousemove, and mouseup. For Windows Touch devices, you need to support Pointer Events which are a new set of events.

Digging Into Sass - A Guide A while ago Thoriq Firdaus wrote a great article about getting started with Sass which showed you how to install and use this highly useful CSS preprocessor language (you might want to check it out, you know, to get started). In this article I thought I’d give you a bit more insight into what you can do with Sass and how developers use it every day to create better and more modular CSS code. Skip ahead to the section you want: Recommended Reading: Using Bootstrap 3 With Sass Tools Of The Trade An inline-block intervention Tell me the last time you used a <b> element in your markup. How about a <blink> tag? If you answered ‘today’, then this post will hopefully be eye opening for you. However, if you answered, “pffft, I don’t. I write semantic markup”, then this post is geared towards you.

CSS Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. HTML5 doctype Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

10 Best CSS Code Generators for Web Developers Web developers are always looking for shortcuts to save time in their routine. Many great dev tools ease the process, and it’s now easier than ever to jump in and get a finished product quickly. With the rise of browser-based IDEs it seems web development is becoming less fixed to the desktop. You can write code from any computer, and even test the result live in your browser.