Watch: Using Modernizr CSS Classes

In this video I’ll introduce you to how Modernizr can help you style your website's CSS based on the current browser's feature support.

Modernizr will add all the results of the detected features as classes to the html element. In this lesson we’ll target browsers that support emoji and turn a boring bullet list into a fun emoji list. After watching this screencast you’ll have a basic understanding of how to use Modernrizr's CSS classes to conditionally style elements on your page.

This is one lesson from SitePoint Premium's latest course A Beginners Guide to Modernizr 3. If you enjoyed this video and want to see more, come and check out the rest of the course.

Loading the player...

Continue reading %Watch: Using Modernizr CSS Classes%

by Ryan Seddon via SitePoint

Swirly Love

'Swirly Love' is a responsive One Page wedding template. There are three main layout options: Left navigation, right navigation and top navigation, featured here. The name speaks for itself and the design is indeed "Swirly" with floral pattern lines throughout the One Pager. My favorite feature is probably the off-canvas RSVP form and map that slides in.

by Rob Hope via One Page Love

Sans Color

One Page portfolio for Swedish designer 'Joakim Jansson' featuring a slick left off-canvas project navigation.

by Rob Hope via One Page Love

Specify

Launching soon page for the 'Specify' app that aims to help teams manage development specifications.

by Rob Hope via One Page Love

Minisites

Responsive One Pager for 'Minisites' - a service that helps provide marketing landing pages for your business.

by Rob Hope via One Page Love

Simple Rails Authentication with Clearance

During the past month I have covered various authentication solutions for Rails. This article is the fifth in the series (oh my) and our guest today is Clearance.

Clearance is an opinionated e-mail/password-based authentication and authorization solution for Rails created by Thoughtbot Inc (the guys who created FactoryGirl, PaperClip and other cool libraries). Clearance is designed as a Rails engine. It is intended to be small, simple, and well-tested. In a sense, it is similar to Devise in that Clearance has many defaults to help you get started in nearly five minutes, and all those defaults can be easily overridden. In contrast to Devise, however, Clearance presents only minimal functionality that can be customized further as you see fit.

This solution is actively maintained, so I really recommend trying it out. In this article I will demonstrate how to integrate Clearance, restrict access, customize it, and use additional checks during sign-in.

Source code can be found on GitHub.

Working demo is available at sitepoint-clearance.herokuapp.com.

Preparations

To start off, create a new Rails app under a codename "Clear Sky":

$ rails new ClearSky -T

For this demo Rails 4.2 will be used, but Clearance is compatible with Rails 3.2, as well.

Continue reading %Simple Rails Authentication with Clearance%

by Ilya Bodrov-Krukowski via SitePoint

Bring Your Scratch Projects to Life With Animated Costumes and Backdrops