development tools | Web development blog, news and tutorials

Home > Tags > development tools

Page 1

Introduction to Sass, Part II

RoR Jul 16, 2012 one comment

In my last post, I introduced Sass (Syntactically Awesome Stylesheets) and getting Sass set up on your machine by installing Ruby, installing Sass, watching a file and compiling via Terminal.

Now, we will look at a much simpler way to get set up with Sass. CodeKit. I’ll be upfront, I’m a user of CodeKit and I recommend the software to any web developer who works in Sass, LESS, Compass, JavaScript, or any other web language, however neither I nor Developer Drive has any relationship (personal or financial) with CodeKit, and my post does not necessarily signify an endorsement by Developer Drive for CodeKit.

That being said, let’s learn a little bit about it and how to get it set up.

Download CodeKit

To get started, first download CodeKit. It is a commercial product ($25), but you can download a fully functional trial version which is good for ten days.

Once downloaded, fire up CodeKit and you’re greeted by a friendly, but blank app screen.

To start, either drag your project folder (wherever you’re storing your Sass or where you plan to store your Sass) to the window or click the small plus (+) sign in the and locate the folder in the browser window that comes up.

CodeKit will automatically detect all of your Sass files in your folder (as well as all of your other files). It can also automatically detect which files should be compiled to CSS files based on the contents of the Sass. If you have a style.scss file that imports other Sass files. Once you open one of your Sass files that is being watched by CodeKit, it’ll automatically compile to CSS whenever you save. [Additionally, and pretty sweet(ly), CodeKit has an auto refresh feature where you can see your code deploy live in the browser without having to go click refresh everytime.]

Writing your first Sass

The standard extension for the latest version of Sass is .scss (this is as of Sass 3). The .scss extension is completely valid CSS (just like LESS is), so you can write standard CSS while mixing in your own Sass as well. Fire up your code editor and let’s write some Sass (I useCoda 2 which has a default color profile for .scss syntax and it comes in handy).

The code shows some variables and a paragraph declaration. Don’t worry about the syntax now as we’ll cover variables, mixins, nesting, selector inheritance and much more in later posts. For now, we’re still focusing on getting Sass to work with .scss files and the Terminal.

/* Sample Sass */ $blue: #00214D; $font-size: 16px; p { color: $blue; font-size: $font-size; }

Once you save this Sass, CodeKit will automatically detect it, create a corresponding CSS file in a CSS folder in the project folder you’re using.

Pretty awesome, right?

So next up, we’re going to go in-depth into nesting with Sass. In my opinion, the nesting functionality is easier and more powerful than nesting in LESS, although they share the same basic principals.

...

Yoosuf Muhammad says: why codekit? why not terminal?

Slide Show Snippet with JavaScript

JavaScript Snippet Jul 11, 2012 4 comments

Many websites nowadays make use of sliders to highlight different content or pages but these slide shows usually appear at the top of the home page. Anyone who deals with content knows the power that images have to keep a reader engaged. In fact, most content creators try to scatter images throughout their text for this very purpose.

But what happens if you marry the two concepts together? Taking the slide show concept and inserting it into the content of a web page…

Begin by opening up the HTML of your web page and insert the following JavaScript code between the <head> tags:

<SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000; // Duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = '1.jpg' Pic[1] = '2.jpg' Pic[2] = '3.jpg' Pic[3] = '4.jpg' Pic[4] = '5.jpg' // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply();...

Michael Girouard says: This is very bad JS code. Please please please don't use this in any real work.

Introduction to Sass

CSS Jul 9, 2012 7 comments

I recently completed a seven part series on Learning LESS, and we had a lot of commenters who requested a similar series on Sass (Syntactically Awesome Stylesheets). While there is a lot of discussion out there as to whether or not LESS or Sass is better, both have their place, both accomplish the same overall goal, and both can make your life (and your coding) much simpler and easier.

What is Sass?

Sass, which stands for Syntactically Awesome Stylesheets, is a “meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets” (from sass-lang.com).

There are several different ways to harness the true power of Sass, and I’ll do my best to cover each method. But basically, it’s commonly thought that Sass is a server side compiled language using Ruby (as opposed to LESS, which is a JavaScript library and thus compiled client side). Sass can however be compiled locally and then uploaded to your server or your website via FTP just as you would any other CSS stylesheet. Many people use CodeKit for this compiling, and we’ll cover that in a later post.

Installing Sass

Sass runs on Ruby. If you’re using Mac OS X, you already have Ruby installed (lucky you!). If you are on a Windows machine, you can install it using the Windows Installer. I’ll proceed with this tutorial as if you’re running Mac OS X.

First, fire up Terminal. If this little black box scares you, don’t worry. I was always very intimidated by working in the Terminal, but after following some tutorials, working with Ruby and Git, you get to be more comfortable.

[WARNING: Working in the Terminal gives you access to seriously mess up your computer. Be cautious about command lines you run in the Terminal.]

The first command you’ll want to type into the command line is to check and see what version of Ruby you’re running. To check, run this command

ruby -v

Once you click enter, the Terminal should tell you which version of Ruby you are running. If you see something like this, you’re ready to rock with Sass.

As you can see, as of this post, my version of Ruby is 1.8.7, which will work just fine for Sass. Now that we know we have Ruby, let’s install Sass.

You can install Sass by running this command

gem install sass

Click enter and the Sass install will begin. This process will take just a minute or two.

[Having trouble? If you got an error message saying you don't have privledges to write to the Ruby directory, you'll have to install Sass with the sudo command. Simply type sudo gem install sass and it should work for you.]

If all things go successfully, you should see this message.

And that’s it! Sass is now installed on your computer and you’re ready to start writing some Syntactically Awesome Stylesheets. Can we also pause a minute to just look at how awesome of a word ‘syntactically’ is? Just rolls off the tongue.

Writing your first Sass

The standard extension for the latest version of Sass is .scss (this is as of Sass 3). The .scss extension is completely valid CSS (just like LESS is), so you can write standard CSS while mixing in your own Sass as well. Fire up your code editor and let’s write some Sass (I use Coda 2 which has a default color profile for .scss syntax and it comes in handy).

/* Sample Sass */ $blue: #00214D; $font-size: 16px; p { color: $blue; font-size: $font-size; }

Looks pretty simple so far, right? Now let’s jump back into the Terminal and get Sass to watch the file. Make sure you’re in the same directory as the file you just saved (I saved mine to my Desktop). To check and see what folder you are in, simply type

in the command line and it will list all of your files and folders.

To change directories, simply type cd

and then begin typing your location and press tab. Terminal will auto finish the folder. Run the command, then type

again to confirm you’re in the correct directory.

Once you’re in the same directory as the .scss file you just created, we’ll tell Sass to watch the file and to translate it into a .css file. Once Sass is watching the file, any changes you make to the .scss file will automatically be updated in the .css stylesheet. The command for getting Sass to watch the file is

sass --watch sample-sass.scss:sample-sass.css

Sass will then tell you that it is watching for changes and automatically create a CSS file in the same location as your .scss file.

What’s Next?

Now you’re up and running with Sass, you can start writing some sassy code. In future articles, I’ll walk you through the syntax and the thought process behind planning out your code to be extremely efficient, and also showcase CodeKit (which replaces the need to work in the Terminal) when using Sass. We will also dive into Compass as well.

Have questions? Leave them in the comments below and I’ll answer them! Thanks for reading.

...

Website development blog says: It seems Sass may be considered boon to all those web designers as they not only make the web design attractive but also will...

Creating A Web Page Calculator Using The HTML5 Output Element

HTML5 JavaScript Jun 19, 2012 3 comments

HTML5 includes a host of new input elements, such as the output tag. Using the output tag in conjunction with the “oninput” event listener, you can create simple or complex Web page calculators, giving the user instant results. The output tag allows you to build forms using semantic markup, since the element is specifically designed for displaying calculation results.

In this tutorial we will create a simple Web page calculator to demonstrate using the output element. Many of the new input elements are not well supported, but the output element is supported in all current major browsers except Internet Explorer. We will also be using the “oninput” event attribute, which is supported in all recent versions of the main browsers.

Create an HTML5 Page

Use the following outline to create your HTML5 page:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>

We have sections for styling and scripting in the head, and our form elements will sit within the body.

Create a Form

Let’s create our form. Start with the outline:

Our opening form tag has an ID for identification in JavaScript and an “oninput” event listener attribute. The browser will call the specified function when the user alters the form input values.

Add two input elements for numbers inside your form element:

Leave a space between these as we are going to add a further element next. Notice that the two input elements have number types and names for identification in the script.

Let’s allow users to choose which operator they wish to use in their calculation. Add a select element between the two number input elements:

You can use the HTML entity references “×” and “÷” for your multiplication and division signs.

The select element offers addition, subtraction, multiplication and division. To make sure the output element is updated when the user chooses an option, as well as when they alter the number input values, we add the “onchange” event listener attribute, calling the same function we call from the form “oninput” attribute. We are using incrementing integers as the values for the select options, so that we can tailor what happens each time the calculation is performed, making sure the output reflects the operator chosen.

Add an equals sign in a dedicated element so that we can style it effectively, after the second number input:

Finally, let’s add our output element, after the equals sign element and still inside the form:

Notice that the element has a name for identification in the script and a default value to display. The “for” attribute indicates which input elements the output relates to, using their name attributes.

Perform the Calculation

Now we can implement the JavaScript function for calculating results. In the script section in your page head, add the following function outline:

function updateOutput() { //calculate...

Tobie van Rhyn says: This is really great, just what I have been looking for. I would like to know how to add decimal places and not just round...

Hot deals

See all deals →

20 One-Page Responsive Templates with Parallax Effect - only $19!

1000+ Royalty Free Vectors + 50 Free Textures - only $17!

3,000 Items! MEGA Design Bundle (worth over $1,000) - only $49!

Beautiful Solomon Font Family (12 fonts) - only $9!

Learning LESS: Put It Into Action

JavaScript Jun 18, 2012 4 comments

We’ll finish our Learning LESS series today as we talk about putting your LESS into action on your web projects. Today’s post will be slightly different than previous posts, as we won’t really showcase new techniques and code examples as much as we’ll talk about how to use LESS, projects you can work on to jump start your LESS development and more.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Coding With LESS

If you read our introduction to the Learning LESS series, you saw that I recommend compiling all of your LESS locally, and simply linking to one CSS stylesheet. Two of the top programs to do this is LESS.app and CodeKit, both from Incident57.

LESS.app

LESS.app is a free application that will detect all of the LESS files in your web folder, and compile them to CSS. You can set specific output folders and select which LESS files you actually want to compile (this comes in handy if you’ve divided up your LESS into smaller modular files and import them all into one stylesheet). Additionally, you can minify your CSS from this application, saving your precious file size (but don’t even think about editing your CSS file).

CodeKit

CodeKit is the next generation of the LESS.app and has a $20 price tag attached to it (to help the creator pay off his student loans, so in reality, it aint that bad). CodeKit compiles LESS perfectly, but does a lot more. It also compiles Sass, Stylus, Haml, Coffeescript, JavaScript and Compass files. Granted, I don’t know much about those other file types (other than JavaScript), but … CodeKit can compile them! Additionally, CodeKit has a pretty awesome feature where when you save your code, your browser will automatically refresh to reflect the changes, and it does it with some cool CSS3 animations.

LESS Projects

If you want to get a jump start on using LESS in your projects, I’d recommend grabbing an open source project that already utilizes LESS. It’s the best way to dig into the techniques and tricks that experienced and expert web developers use on their projects. I’ll run through a series of projects that I utilize on a daily basis that uses LESS.

Bootstrap, from Twitter

Bootstrap, from Twitter is one of the most popular open source projects on the web right now. Developed by Mark Otto and Jacob from Twitter, Bootstrap is a set of HTML, CSS and JavaScript components for baseline user interface components and interactions, including a responsive design, UX items such as buttons, forms, and more.

Bootstrap uses LESS as the basis for all of their styles, and really divides up their code into small, modular files, which becomes extremely maintainable and easy to understand.

Responsive Bones Theme for WordPress

If you’re into designing and developing for WordPress, might I suggest starting with Bones? There are a lot of WordPress starter themes out there, but in my opinion, not much do it better than Eddie Machado’s Bones.

The responsive version of Bones uses LESS to structure a responsively designed WordPress site, using CSS3 media queries to determine which LESS file is loaded into the compiler. It’s a pretty nifty system, and definitely worth a look if you’re looking at working with WordPress.

320 and Up Project

320 and Up is the ‘tiny screen first’ responsive boilerplate. This project is a perfect starting point for those looking to create a responsive website, but not building it straight into a CMS. If you’re just looking for a website, or will be looking to import it into another CMS like ExpressionEngine, 320 and Up is the place to be.

The project uses LESS to create a responsive framework for you to style up, starting with the smaller screens and working up, as opposed to designing for a desktop and scaling down. It’s an interesting concept, and definitely one to check out!

Conclusion

That wraps up our Learning LESS series here on DeveloperDrive. Thanks so much for reading, commenting and discussing. Do you have any other projects you know that use LESS that you use? Leave them in the comments below.

...

BuiltInOneDay says: @Rick2079 @Stefan Hey guys just to follow up Alex is writing up an article on Sass and compass if you have not already been...

Learning LESS: Divide and Conquer

JavaScript Jun 14, 2012 2 comments

We’re getting to the end of our Learning LESS series, and this is one of the posts I’m most excited about. One of the best features of LESS is how modular and organized your code can be, and how it doesn’t add much weight or calls to your live sites (if you compile locally with LESS.app, CodeKit or some other compiler).

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Grab a cup o’ joe, your favorite text editor and let’s learn how to divide up our LESS and keep things neat and tidy.

Setting Up Your Project

Whenever I’m about to start a project from scratch using LESS, I set up a simple folder structure.

As you can see, my LESS and CSS are separate folders. My next step is I always add my site to LESS.app (or CodeKit if you prefer). LESS.app will automatically search for all LESS files in your site folder and set up to compile.

Before we do that, let’s create some LESS and learn how to modularize your code and then how to bring it together at the end.

Creating A Few LESS Files

The absolute first LESS file I create in any project is simply style.less. This is the file that will be compiled to be style.css, and act as the master CSS file for my entire project.

It is important to remember that comments in LESS are double backslashes (//) and are not compiled in the final CSS. Normal CSS comments (*/ … /*) are compiled as comments and can be used for organizational or normal comments.

That said, let’s take a look at my starting point for style.less.

// Style.less for Project LESS // --------------------------- /* This is a project/blog for DeveloperDrive.com written by Alex Ball. Version 1.0.1 These are regular CSS comments that will be compiled normally. */

So, not much going on in that file … yet. Moving on to our next LESS file, I typically head to Andy Clark’s 320 and Up project and snag the LESS reset file he has developed.

// ========================================================== // 320 and Up by Andy Clarke // Version: 3.0 // URL: http://stuffandnonsense.co.uk/projects/320andup/ // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 // ========================================================== /* Reset */ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,...

Eric says: I think equally if not more important when setting up a project using less is to also import a mixins.less file.

Learning LESS: Nested Rules

CSS May 28, 2012 2 comments

We continue on our journey of Learning LESS today as we take a look at Nested Rules in LESS, which will help you write extremely clean code. If you haven’t read our first three posts on the topic, check out Learning LESS: An Introduction, Learning LESS: Variables and Learning LESS: Mixins.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Now we jump into Nested Rules, a topic that can be somewhat difficult to conceptualize, but we’ll break it down with great code examples and some diagrams.

What Do You Mean ‘Nested’?

I’m sure you’ve heard of ‘nesting’ in code, probably referring to nested tables in old table design websites (or current table design HTML emails). With LESS, we’re basically doing the same concept of nesting rules within other rules.

Let’s set up an example. You’re coding a website and you’ve got a paragraph rule. In addition to your standard paragraph tag, you also have classes for an intro paragraph and a highlighted paragraph. For this scenario, let’s say that you’re going to set the standard paragraph with a basic sans-serif font, general font size, line height, etc. Here is what our CSS looks like (note, this isn’t going into our LESS file – this is just for example):

p { color: #232323; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; }

Pretty standard, so far. For your intro paragraph class, you set the font size to be a little bit bigger and have the text be small caps. And for the highlighted paragraph, we’ll make the text a bold blue. Don’t ask me why you would want to do this in terms of modern design – I’m just trying to come up with creative examples!

So in CSS, you would write those classes like this:

p { color: #232323; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; } p .intro { font-variant: small-caps; font-size: 16px; line-height: 24px; } p .highlight { color: #00214D; font-weight: bold; }

The code isn’t super lengthy, but mostly because this is a basic example. But the LESS for this is even – well – less.

Writing A LESS Nested Rule

We’re going to replicate the code we wrote above using LESS and nested rules. A LESS nested rule starts like a regular rule. For this, we’ll also use variables, just to drill in the concept.

To start, we look at our basic paragraph tag:

// Variables // --------- @textColor: #232323; @textHighlight: #00214D; @fontFamily: Helvetica, Arial, sans-serif; @fontSize: 14px; @lineHeight: 21px; @introSize: 16px; @introLineHeight: 24px; @introFontVariant: small-caps; // LESS for Paragraph // ------------------ p { color: @textColor; font-family: @fontFamily; font-size: @fontSize; line-height: @lineHeight; }

Now we’re going to nest in the .intro class. To do this, we simply create the class as we normally would, but we include the class inside the curly braces of the paragraph rule.

// Variables // --------- @textColor: #232323; @textHighlight: #00214D; @fontFamily: Helvetica, Arial,...