DeviceMock.js is a jQuery plugin that can be given Device Frames for any of the elements (div, img , iframe).
The post DeviceMock.js : jQuery Device Frames Plugin appeared first on jQuery Rain.
Tapatar is a lightweight, extensible jQuery plugin, that lets users pick an avatar from a social network, disk, or other source. By default, Gravatar, Local and Facebook sources are included. Tapatar has been built to make it very easy to add additional sources.
The post Tapatar : jQuery plugin to Pick an Avatar Image appeared first on jQuery Rain.
For most web developers we are knee deep in CSS on a daily basis. This can be a good or bad thing. It really depends on the state of the CSS. A well-organised codebase can be a pleasure to work with but, generally speaking, most CSS is a complete nightmare, especially on larger projects.
Good CSS requires a good foundation, some well thought-out coding principles and a selection of tools to keep you on the right track.
Each team, individual and project goals are different so the resources below may not align, but hopefully some off them can be incorporated into your workflow or give you ideas to create better CSS, that you enjoy working on.
It really depends on the stage of the project you are working on, but as a starting point, working together with your team members and deciding on some principles on why and how you do things is paramount to producing a good long-lasting CSS codebase. There are various ways to go about this. It could be a simple text file that is shared amongst team members or a stand-alone site.
Some great starting points for creating CSS principles are CSS Guidelines written by Harry Roberts, Mark Otto’s CSS Code Guide and Nicolas Gallagher’s Idiomatic CSS
It is also worth having a look at how companies do it, like GitHub.
Using a CSS preprocessor like Sass or Less can be hugely beneficial if used correctly.
I’m personally a fan of keeping things simple, so when using a preprocessor I tend to only use the basic functionality like variables, mixins, multiple files and limited nesting.
Whatever preprocessor you decide to go with, make sure your team members are all on the same page.
Also, if you do decide to use Sass, Hugo Giraudel’s Sass Guidelines is a must read.
If you are lucky enough to be working on a greenfield project, utilising Normalize.css is highly recommended. Normalize.css makes browsers render all elements more consistently creating a level playing field going forward.
Another variation worth looking at is Jonathan Neal’s Sanitize.css.
If you feel you need a little more out of the box, Basscss is an extremely lightweight collection of base element styles and handy utilities.
From my experience, sites that start off small continue to grow over time and, without a solid grid foundation, things can get ugly extremely quick. Having a simple or complex grid within your CSS for easy use is a lifesaver.
There are a billion and one grid frameworks currently available, but Chris Coyier’s Don’t Overthink It Grids article has a very simple starting grid which is super helpful.
If Sass is your choice to author CSS, I have previously written about various grid frameworks to help point you in the right direction.
Having some solid principles and good foundation to your CSS is a great base for creating good CSS. To help take it to the next level we can utilise various tools within our workflow.
The most common tools today are Grunt and Gulp. Each have a selection of useful plugins that we can use to help enforce rules, manipulate our code and provide feedback.
Some plugins that I find useful are:
Recess – Originally developed at Twitter to support their internal style guide, RECESS is a simple, attractive code quality tool for CSS.
CSS Lint – Lint CSS files because speed matters.
PostCSS – PostCSS is used by industry leaders including Google, Twitter and Shopify. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.
Page Speed Insights – Run mobile and desktop performance tests for your deployed site using Google PageSpeed Insights, with tidy reporting for your build process.
Grunt and Gulp currently have an astounding amount of plugins to not only help your CSS, but all facets of your project. I highly recommend spending some quality time creating the best build file possible.
Performance is an extremely important part of any project so using tools that can provide real feedback is a must. Some tools that offer a little more than just CSS information are Calibre, WebPageTest and SpeedCurve.
If you just want CSS Stats then cssstats.com is it.
Working on a codebase that is handled by many developers should have one aim.
Look like it was developed by one person.
Thankfully, most common editors have the ability to use the EditorConfig plugin, which can look at the preferences set in the .editorconfig file that resides in the project’s root directory. These preferences should align to the coding standards set out by you and your team.
Nothing will ever be bulletproof in creating perfect CSS. Experience helps. Questioning and analysing your code, your process and your team members’ code can help, but at the end of the day, creating perfect CSS kind of feels like catching the perfect wave. It’s elusive… but if we don’t try, we will never know.
The post Creating Better CSS appeared first on Web Design Weekly.
Sass is a seriously powerful web development tool.
When it was first released, to install and use Sass required the command line and a Ruby framework. This was a big turn-off for many newcomers.
But what if I told you, today, you can start using Sass within minutes? What if I told you that you could do it without ever launching your command line? You can.
I’ll walk you through the process of setting up a Sass project with Prepros. Prepros is a tool for compiling Sass to CSS. (Prepros can also handle Jade, CoffeeScript, Less, Stylus and more .)
In this tutorial we’ll create a responsive web design using Sass, with the help of Prepros.
OK, let’s get started!
First step: Download Prepros. Prepros is available on Windows, Mac OS and Linux.
After downloading Prepros, install it on your computer just like any other desktop software:
Prepros is free to use. But whenever you launch Prepros — and every now and then, when you’ve been using it for hours — it will remind you to buy a license. Personally, the notifications don’t bother me. But if you derive a lot of value from Prepros, I encourage you to buy a license to support its developers.
Let’s set up our Sass project in Prepros. You can do this one of two ways:
If you have no files in your project folder, Prepros will tell you that your “Project is empty.”:
After adding a project, if you look inside your project folder, you’ll see Prepros created a new file. The new file is called prepros.cfg. If you’re curious: This file contains the configuration settings of your project.
Let’s create the files for our Sass project. Use your favorite code editor for this.
Here’s the project’s initial file structure:
In the root of the project folder, we have 2 files:
index.html — this is our web page.style.scss — This file just imports our Sass files. Prepros will automatically compile this into a CSS stylesheet named style.css.Then we have a sub-folder called scss. This sub-folder contains our five Sass stylesheets:
variables.scss — contains Sass variables that we’ll reuse throughout our project.mixins.scss — contains our Sass mixins.base.scss — the default style rules for HTML elements.layout.scss — style rules for the web page’s layout.components.scss — reusable class and ID selectors.The project files are structured in a modular way, even though we’re only building a simple landing page. This level of CSS modularization is most beneficial in complex, large-scale websites, though.
We’ll import the five Sass stylesheets that are inside the scss folder into the stylesheet named style.scss. This is the code that goes in style.scss:
@import 'scss/variables';
@import 'scss/mixins';
@import 'scss/base';
@import 'scss/layout';
@import 'scss/components';
After saving style.scss, a new file will be created. It will be called style.css — this is our project’s stylesheet.
What you’ll notice later on is that whenever we update one of our Sass files, Prepros will also automatically update style.css. Right now, style.css is empty only because our Sass files are also empty.
You’re now ready to use Sass! If all went well, the whole process would’ve taken you just a few minutes. As promised.
To make sure everything’s working properly, why don’t we create a web design?
First, let’s work on our HTML. Place the following inside index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Demo: Use Sass in Minutes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://ift.tt/1KhSRl1" rel="stylesheet" type="text/css">
<!-- The project's stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-header">
<div class="content">
<h1 class="headline">You Can Use Sass Within Minutes</h1>
<a class="call-to-action-button" href="http://ift.tt/1Khe5Cr">Read the tutorial</a>
</div>
</div>
<div class="description">
<div class="content">
<h2>What is This?</h2>
<p>Sass was used to craft the CSS of this web page. The Sass files were processed by <a href="https://prepros.io/" target="_blank">Prepros</a>, a tool that can compile Sass, as well as Less, Stylus, Jade, CoffeeScript and more.</p>
</div>
</div>
<div class="learn-more">
<div class="content">
<h2>Learn More</h2>
<p><strong>Does Sass seem hard to set up?</strong></p>
<p>Does it seem like it'll take you hours/days to get started? Are you afraid of the command line?</p>
<p>You can use <strong>Sass in minutes</strong>, without ever stepping foot in a command line.</p>
<a class="call-to-action-button" href="http://ift.tt/1Khe5Cr">Learn How</a>
</div>
</div>
<div class="footer">
<div class="content">
<p>By <a href="http://sixrevisions.com">Six Revisions</a>. Photos from <a href="http://www.pexels.com/" target="_blank">Pexels</a>.</p>
</div>
</div>
</body>
</html>
Notice that we’re referencing style.css. We’re not referencing any of our Sass files in the markup. That’s because Prepros will automatically compile our Sass code into regular CSS and place it in style.css.
Now let’s write some Sass. I’ll go through the code for each Sass stylesheet now.
variables.scssSass variables are useful for CSS properties that you reuse throughout the project. Colors, the font stack, font sizes, and media query breakpoints are some typical variables we could define as Sass variables, because we end up using them over and over again. That way, when we need to change the values of these properties — say, if we wanted to change a color — we’ll only have to make the change in one place.
$color-foreground-default: #363636;
$color-background-default: #ffffff;
$color-black: $color-foreground-default;
$color-white: $color-background-default;
$color-dark-gray: #353d48;
$color-medium-gray: #abb3be;
$color-sass-pink: #c69;
$color-var-2: #cccccc;
$font-stack: "Raleway", sans-serif;
$font-size: 17px;
$font-weight-reg: 400;
$font-weight-bold: 600;
$line-height: 1.8;
$margin: 30px;
$padding: $margin;
$screen-size-medium: 620px;
base.scssI’ve declared some default styles for the HTML elements used in the web design.
body {
margin: 0px;
padding: 0px;
font-family: $font-stack;
font-weight: $font-weight-reg;
@include set-font-size(1);
background-color: $color-background-default;
color: $color-foreground-default;
}
h1,
h2 {
margin: 0px;
font-weight: $font-weight-bold;
letter-spacing: 2px;
text-transform: uppercase;
}
h1 {
@include set-font-size(1.8);
}
h2 {
@include set-font-size(1.5);
color: $color-sass-pink;
}
p {
margin: ($margin / 2) auto ($margin / 2) auto;
}
@media screen and (min-width: $screen-size-medium) {
h1 {
@include set-font-size(2.5);
}
h2 {
@include set-font-size(2);
}
p {
@include set-font-size(1.2);
}
}
a {
font-weight: $font-weight-bold;
text-decoration: none;
color: $color-sass-pink;
@include transition("color");
&:visited {
color: darken($color-sass-pink, 15%);
}
&:hover,
&:active {
color: lighten($color-sass-pink, 15%);
@include transition("color");
}
}
strong {
font-weight: $font-weight-bold;
}
layout.scssOur web page is laid out into four sections: .page-header, .description, .learn-more and .footer.
.page-header,
.description,
.learn-more,
.footer {
box-sizing: border-box;
width: 100%;
padding-top: $padding * 3;
padding-bottom: $padding * 3;
}
.page-header {
@include full-background-image("images/page-header-bg.jpg");
background-color: $color-black;
color: $color-white;
}
@media screen and (min-width: $screen-size-medium) {
.page-header {
padding-top: $padding * 5;
padding-bottom: $padding * 5;
}
}
.learn-more {
color: $color-white;
background-color: $color-dark-gray;
@include full-background-image("images/learn-more-bg.jpg");
}
.footer {
background-color: $color-sass-pink;
& p {
@include set-font-size(0.9);
color: darken( $color-sass-pink, 30% );
text-transform: uppercase;
}
& a {
color: darken( $color-sass-pink, 35% );
&:hover {
color: darken( $color-sass-pink, 40% );
}
}
}
.content {
margin: 0px auto;
width: 96%;
max-width: 640px;
text-align: center;
}
components.scssThe components.scss stylesheet contains reusable classes. Particularly, .call-to-action-button and .headline.
a.call-to-action-button {
display: inline-block;
width: auto;
margin: ($margin * 1.5) auto ($margin * 1.5) auto;
padding: $padding / 2;
@include set-font-size(0.7);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
color: $color-white;
border: 1px solid $color-white;
border-radius: 8px;
background-color: transparent;
@include transition("background-color");
&:hover {
background-color: rgba($color-white, 0.1);
@include transition("background-color");
}
}
@media screen and (min-width: $screen-size-medium) {
a.call-to-action-button {
@include set-font-size(0.9);
}
}
.headline {
color: $color-white;
text-shadow: 1px 1px 2px $color-black;
}
mixins.scssThere are three mixins in our Sass project. They help us set responsive full background images on a couple of the web page’s sections, uniformly set our font-size and line-height values and help us with property transition effects.
@mixin full-background-image($image-url) {
background-image: url($image-url);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
@mixin set-font-size($factor) {
font-size: round( $font-size * $factor );
line-height: round( $font-size * $line-height * $factor );
}
@mixin transition($property) {
transition-property: $property;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
All of that Sass code is automatically compiled into one big stylesheet called style.css.
For example, the Sass style rule for our a elements is:
a {
font-weight: $font-weight-bold;
text-decoration: none;
color: $color-sass-pink;
@include transition("color");
&:visited {
color: darken($color-sass-pink, 15%);
}
&:hover,
&:active {
color: lighten($color-sass-pink, 15%);
@include transition("color");
}
}
The Sass style rule was compiled to regular CSS, as such:
a {
font-weight: 600;
text-decoration: none;
color: #c69;
transition-property: "color";
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
a:visited {
color: #ac3973;
}
a:hover,
a:active {
color: #df9fbf;
transition-property: "color";
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
Let’s talk about a couple of useful Prepros project options.
If you use a lot of new CSS features that still need vendor-prefixing, you’ll want to turn on automatic vendor prefixing.
In the Prepros window, click on style.scss. A sidebar will show up. Check the AutoPrefix CSS option. Click the Process File button to update your style.css file.
The next time you update your Sass stylesheets, Prepros will automatically watch out for CSS properties that need to be prefixed. For instance, in our project, we’ve used the transition property. The property was prefixed like this:
-webkit-transition-property: "background-color";
transition-property: "background-color";
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
You can improve the download speed of your CSS files by minifying them. Minification removes non-essential characters such as spaces, tabs, comments, and so forth. This will lower the file size of our style.css file.
Prepros can minify your stylesheets for you. Here’s how:
style.css. The Prepros sidebar menu will appear.style.min.css.You’ll have to update the link to the project’s stylesheet to style.min.css. In index.html, it would be:
<link rel="stylesheet" href="style.min.css">
Just with this quick and easy change, we’re able to reduce the file size of our stylesheet by 21.4%.
The post Use Sass Within Minutes appeared first on Six Revisions.
