Home > Tags > development tools
Page 1

Introduction to Sass, Part II

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)...
Read more

Slide Show Snippet with JavaScript

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...
Read more

Introduction to Sass

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...
Read more

Creating A Web Page Calculator Using The HTML5 Output Element

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...
Read more

Learning LESS: Put It Into Action

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...
Read more

Learning LESS: Divide and Conquer

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...
Read more

Learning LESS: Nested Rules

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...
Read more

Learning LESS: Mixins

We continue on our journey of Learning LESS today as we dig into an extremely powerful component of LESS: Mixins. If you haven't read our first two posts on the topic, check out Learning LESS: An Introduction and Learning LESS: Variables. Blog Series Roadmap An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action So let's introduce LESS Mixins, and showcase some of what you can do with them. What is a Mixin? A Mixin in LESS is basically...
Read more