Cheap Website Design Blog

5 Advanced CSS Pseudo Classes that will Save your Day

// March 8th, 2010 // No Comments » // Uncategorized

CSS3 provides powerful pseudo-classes that allow the designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it becomes a lot easier over time to set up your layout.

In today’s article I’m going to take a look at 5 pseudo-classes that will simplify our design process and reduces a lot of time to create a certain visual effects. You will also find demonstration below each point to demonstrate how we can use these selectors in different design scenario you face everyday in your designing process.

ul li:nth-child(3) {
  background-color: #333;
}

ul li:nth-child(2n+1) {
  background:#dfe6ec;
  color: #333;
}

The :target pseudo-class

This pseudo-class affects an element that’s the target of a fragment identifier ( point to a specific element on a page, represented by a “#” and an anchor) in the document’s URL. When we click on a link that ends with a fragment identifier that element we are pointing to becomes the target (hence :target).

How to use the target

For example, if the URI was http://devsnippets.com/article/5-advanced-css-pseudo-class.html#nth, the following selector would match the element that had an id attribute of “nth”:

div > div:target {
background:#FFC1E4 none repeat scroll 0 0;
border:3px solid #EF4F7A;
padding:10px;
}

Check out our demo.

Further Resources on how to use the target

• - The CSS3 :target Pseudo-class And CSS Animations

3. Use the :focus Pseudo Class

You can apply styling to your input areas and textareas that only takes affect when a user has clicked into that area using the :focus pseudo class. For example, you could change the background and border color on those elements like so:

textarea:focus, input:focus {
	background:#FFC1E4;
        border:3px solid #EF4F7A;
}

Check out this demo.

4. The negation pseudo-class: :not()

The :not() pseudo-class is extremely useful when you want to apply a style to a class or group of elements, and want to exclude some element(s).
The code below selects all div elements that do not have .comment class.

div:not(.comment) {
border:1px solid #333
}

You can use a comma to choose more than one class. The code below selects all div elements that do not have .comment or .post classes.

div:not(.comment, .post) {
border:1px solid #333
}

5. The only-of-type pseudo-class

The only-of-type pseudo-class matches an element that’s the only child element of its type.
This selector will match an img element that’s the only child img element of its parent element:

.post > img {
	float: left;
	}

.post > img:only-of-type {
	float: none;
	margin: 10px;
	}

Check out our demo.

25 Mind-Blowing Wallpapers to Change Your Mood

// March 3rd, 2010 // No Comments » // Uncategorized

The more beautiful and elegant Desktop wallpapers are, the better they can challenge our imagination and affect our daily mood.

In this collection, you’ll find extremely beautiful and high-quality wallpapers that you may also like for your collection. With so many brilliant desktop wallpapers to choose from, your desktop will never be dull or boring again. Enjoy!

Important: Licenses of every wallpaper varies, so be sure to check that information before using them.

1. borias wallpaper 1920 x 1200

2. Waiting for a better day

3. Castle

4. The lights are ON – WS

5. Ambience

6. The Rise of a Planet II

7. Polar Aurora

8. Final Destination

9. Conquer the World

10. Snow Leopard

11. Evil Kitty

12. China hills

13. A Year Has Gone

14. Okaukuejo

15. Croatian Boat

16. Beam me up Scotty

17. in love and lonely

18. Kagaya

19. Falling Star

20. Jolly

21. Storm Ahead

22. Flower Drops

23. I got the power

24. Mandarinfish

25. Nuclear Mushroom Cloud

10 jQuery Transition Effects: Moving Elements with Style

// March 1st, 2010 // No Comments » // Uncategorized

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 Brilliant techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website.

1. Fluid Navigation – How to create an informative menu-bar with jQuery & CSS

Learn how to create a menu that appears like a standard menu bar in it’s default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display.

2. Move Elements with Style

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.

3. Automatic Image Slider w/ CSS & jQuery

A simple image slider using HTML/CSS/Javascript. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.

4. jQuery Quicksand Plugin

With Quicksand you can reorder and filter items with a nice shuffling animation. At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways:

• 1. Use plain HTML, like an unordered list.
• 2. Download data by an Ajax call
• 3. Transform HTML items by JavaScript (for example, sort them differently)

5. jQuery Magic Line Sliding Style Navigation

The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities. As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

6. Text with Moving Backgrounds

The idea is to create a container which has a moving background, but only a set of letters will be visible of the background. It will be as if there are holes in your container.

Normally you would create a PNG file containing anti-aliased letters and place it inside some container on top of a background. Here what you need to do is place a full image over a background, covering parts that shouldn’t be seen. Just like a mask!

7. jDiv: A jQuery navigation menu alternative

A drop-down menu that displayed any content you need. Specifically a combination of images and lists, without being limited to only an unordered list. The advantages:

• More flexibility in design that your usual UL style;
• The use of the H4 tag and a UL for the hidden content adds some potential SEO but be sure that your header tag choice is in keeping with your copy’s layout;
• As long as your first-level nav item is linked to a page, you still retain accessibility with JS disabled.

8. Halftone Navigation Menu With jQuery & CSS3

A CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

9. Animate Panning Slideshow with jQuery

Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well. In this tutorial we’ll have a slideshow that transitions by changing the visible window.

10. SlideDeck

SlideDeck is a new way to display content on websites, mobile phones and kiosks. It delivers a better user experience by removing the information overload and providing a fun, quick and beautiful way to interact with digital devices.

Getting Started with CodeIgniter and How to Create All Those Great Apps

// February 22nd, 2010 // No Comments » // Uncategorized

Choosing a good PHP frameworks can help you develop complex Rich Internet Applications quickly, with a best practices oriented approach, and saving a lot of time reusing code snippets that are already available. There are a lot of interesting PHP frameworks you can choose for your next web project. Today we will focus on one of my favorite PHP Frameworks: CodeIgniter.
CodeIgniter is a powerful, high-performance, open-source PHP framework that helps you author PHP applications rapidly. CodeIgniter is known for having a light footprint, there by reducing your server’s work.

CodeIgniter has an exciting online manual, a couple of helpful video tutorials and an active user forum.

In today’s post will attempt to show you the basics of setting up the CodeIgniter framework, including step by step tutorials showing you how to build awesome applications that uses the MVC approach the easy way.

1. Why CodeIgniter?

The simplicity of setting things up and getting an actual webpage that processes something online is quite easy. CodeIgniter uses the MVC or Model View Controller architectural pattern. MVC is a software approach that separates application logic from presentation. In practice, it permits your web pages to contain minimal scripting since the presentation is separate from the PHP scripting.

CodeIgniter has probably the best definition of each the model, view, and controller.

• - The Model represents your data structures. Typically your model classes will contain functions that help you retrieve, insert, and update information in your your database.
• - The View is the information that is being presented to a user.
• - The Controller serves as an intermediary between the Model, the View, and any other resources needed to process the HTTP request and generate a web page. The controller is the top level file for each page that allows you to include database requests in the form of ‘Models’ and templates as ‘Views’.

By using this practice your code is tidy and re-usable.

Source: Get started with CodeIgniter

2. Installing and Configuring CodeIgniter

First you need to download CodeIgniter from http://www.codeigniter.com/.

• 1. Unzip the package.
• 2. Rename the “CodeIgniter” folder to your application name “app”. Upload the CodeIgniter folders and files to your PHP and MySQL enabled server. Normally the index.php file will be at your root.
• 3. Open the application/config/config.php file with a text editor and set your base URL.

  $config['base_url'] = "http://localhost/app/";
  

• 4. If you intend to use a database, open the application/config/database.php file with a text editor and set your database settings.

  $db['default']['hostname'] = "localhost";
  $db['default']['username'] = "root";
  $db['default']['password'] = "root";
  $db['default']['database'] = "helloworld";
  $db['default']['dbdriver'] = "mysql";
  

  This code connects to a MySQL database called “helloworld” on a localhost with the username “root”, and the password, “root”.

Please visit this tutorial to show you the basics of setting up the framework, including how to build a basic hello world application that uses the MVC approach.

Source: Everything You Need to Get Started With CodeIgniter

3. Building Your First CodeIgniter Application

Creating web applications with CodeIgniter (CI) is quick and easy because CI handles a lot of the typical application requirements right out of the box (like session management, database abstraction and file uploading). And while CodeIgniter does handle the repetitive stuff it’s still up to you to create a scalable and easy to update application.
You will need to check the following Step By Step Tutorial to learn how to create your first CI application:

• Building Applications using CodeIgniter Series: File Structure, Configuration, Helpers, Code Templates.
• Creating First Application at CodeIgniter
• Building a Database-Driven Application with the Code Igniter PHP Framework
• Easy Development With CodeIgniter

4. How to Create Awesome Applications Built with CodeIgniter

4.1 Build an RSS 2.0 Feed with CodeIgniter

In this tutorial, we will learn how to build a RSS 2.0 Feed with the PHP framework CodeIgniter.

4.2 Generating PDF files using CodeIgniter

In this tutorial, we will learn how to generate PDF files with CodeIgniter and the R&OS library..

4.3 Building a Shopping Cart using CodeIgniter’s Shopping Cart Class

This tutorial will cover the new “Shopping Cart” Class. The Cart Class permits items to be added to a session that stays active while a user is browsing your site. These items can be retrieved and displayed in a standard “shopping cart” format, allowing the user to update the quantity or remove items from the cart.

4.4 CodeIgniter Clan Site- Part1 & Part2

In this series of tutorials we’ll be learning how to create a multi-gaming clan website with support for many different games, forums and a full admin system.

4.5 Validating Web Forms with the Code Igniter

How to use the validation class included with this framework to develop a PHP program that can be used to check data submitted through some web forms.

4.6 A sample Facebook application with CodeIgniter

4.7 CodeIgniter and Ajax Using JQuery Tutorial

This tutorial is about creating simple CodeIgniter + database + ajax system. User will be shown a form to post a message. Then after he/she press the submit button, the system will save the message using ajax and then show the message.

4.8 Real Live Search with Pagination

In this tutorial, we will learn how to create a search page with CodeIgniter and jQuery. We’re not gonna create only a default search page using CodeIgniter framework, but also a real time search with jQuery’s support.

4.9 How to Update your Twitter Status with CodeIgniter

This article demonstrates how to update our twitter status via the ‘Twitter API’ using CodeIgniter.

4.10 Codeigniter Event Calendar

This post demonstrates how to create Codeigniter Event Calendar. When you click the date where there are events, it will take you to a page showing all the event for that day. So you can use it with javascript disabled.

4.11 Live search with CodeIgniter and Mootools

This article demonstrates how to create a live search application (an AJAX based application that returns search results as you type) with CodeIgniter and Mootools JSON. The application is build using JavaScript in non obtrusive ways, so it will function in just about any browser, even if they don’t support JavaScript at all.

4.12 Creating a File Hosting Site with CodeIgniter

This tutorial will show you how to build a powerful web application for hosting images, using the flexibility of Codeigniter. This tutorial should teach you about the MVC coding philosophy, integral to producing serviceable applications.

5. Further Resources

• - 10 Reasons Why CodeIgniter Rocks
• - Optimizing and Scaling your CodeIgniter Application – with Benchmarks!
• - 9 Ways to Integrate Ajax with CodeIgniter
• - Debugging a CodeIgniter application with FirePHP
• - 40+ CodeIgniter Framework Tutorials for PHP Application

30 Brilliant Websites So Smart in Organizing Design Elements

// February 17th, 2010 // No Comments » // Uncategorized

We are always looking for inspiration, specially when it comes to web design. And If you’re looking for a way to break out of the box with a design, creating a unique layout is one way to accomplish this. Designers play around with different elements to create a memorized design, some of them use layouts, colors and typography to style a well organized design.
In this post we’ll take a look at 30 gorgeous websites that made use of creativity to smartly design well organized and unique layouts for your inspiration in your current and future work.

- Riot Industries

- Future Of Web Design

- Mark Boulton Design

- Ednacional

- Happy Cog’aoke

- Digital Podge

- Vanity Claire

- Clouds365

- Zaum

- Synthview

- Curious Generation Group

- Sower Of Seeds

- Visit Mix

- Brightk Kite

- Brite Revolution

- Enila

- Notorious Design

- Fs Dsign

- Lucashirata

- Creative Spark

- Slidedeck

- One Bit Wonder

- Simple Bits

- Karijobe

- Prothemedesign

- Moxiesozo

- By The Pond

- ftdesigner

- Halo Agency

- IsmaelBurciaga

Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices

// February 15th, 2010 // No Comments » // Uncategorized

HTML5 is the next major version of HTML. HTML5 provides some great new features for web designers who love to create readable code and semantically-meaningful layouts. HTML 5 introduces and enhances a wide range of features including: form controls, APIs, dragging and dropping, multimedia, drawing graphics on screen and a lot more.

The new specifications has added quite a few interesting and useful tags for structuring your markup.
In today’s post, we would like to showcase some of the best blogs and websites in the industry built with HTML5+CSS3. At the end of the post we would like you to check out detailed write-ups and tutorials that aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. Let’s get started marking up the blog page.

Showcase Of Beautiful Website built with HTML5+CSS3

- Full Frontal

- Sketchpad

Sketchpad Is a No-Flash-Required HTML5 Painting App.

- EnergyCell

- Zoocha

- Idea Foundry

- Tableless

- Giovannitufo

- DesignIntellection

- Antilight

- TheDesignSuperhero

- On Air

- SlimKiwi

- Information Highwayman

Learning how to create elegant and working HTML5 Layouts

1. Have a Field Day with HTML5 Forms

Here we’re going to take a look at how to style a beautiful HTML5 payment form using some advanced CSS and latest CSS3 techniques. Let’s have a look at the markup:

<form id=payment>
    <fieldset>
         <legend>Your details</legend>
         <ol>
                <li>
                     <label for=name>Name</label>
                     <input id=name name=name type=text placeholder="First and last name" required autofocus>
                </li>

2. Coding A HTML 5 Layout From Scratch

A very basic layout which covers most of the elements we can start coding using HTML5. Basically: the page’s name and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement. At the end of this tutorial you’ll learn how to:

• Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.
• Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.
• Use HTML5 alongside a rising technology: Microformats.
• Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.

<header id="banner" class="body">
	<h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>

	<nav><ul>
		<li class="active"><a href="#">home</a></li>
		<li><a href="#">portfolio</a></li>

		<li><a href="#">blog</a></li>
		<li><a href="#">contact</a></li>
	</ul></nav>

</header><!-- /#banner -->

Check out the demo here.

3. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, we are going to learn how to build a blog page using next-generation techniques from HTML 5 and CSS 3. Pretty much your every day blog design. Header with title, horizontal navigation, content area with comments and form, sidebar and a footer.

Take a look at the markup:

<!doctype html>
<html>
<head>
	<title>Page title</title>
</head>
<body>
	<header>
		<h1>Page title</h1>
	</header>
	<nav>
		<!-- Navigation -->
	</nav>
	<section id="intro">
		<!-- Introduction -->
	</section>
	<section>
		<!-- Main content area -->
	</section>
	<aside>
		<!-- Sidebar -->
	</aside>
	<footer>
		<!-- Footer -->
	</footer>

</body>
</html>

Check out the demo here.

4. Structural tags in HTML5

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s take a look at how we would put together a typical blog page with our new structural tags.

<!DOCTYPE html>
<html>
  <head>
    <title>Standard Blog</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>

Further Resources:

• - 70 Must-Have CSS3 and HTML5 Tutorials and Resources
• - Introduction to CSS3
• - Using CSS3
• - CSS3 Exciting Functions and Features: 30+ Useful Tutorials
• - Yes, You Can Use HTML 5 Today!
• - Thinking About HTML 5 canvas Accessibility
• - HTML5 Gallery
• - HTML5 Gallery

Choosing The Best CSS Framework: A Complete Guide

// February 8th, 2010 // No Comments » // Uncategorized

There are plenty of reasons to use a CSS Framework to build your websites. They can speed up development, make your sites more aesthetically pleasing, and they can help eliminate all those nasty cross-browser compatibility issues (though not all of them do this, or do it well). But it can also be a steep learning curve to figure out which framework you should use (or if you should use one at all) and then how to use it.

Which framework you choose is really a personal decision. There is no one “best” framework on the market at the moment. Different frameworks are better for different types of designs, and for different designers. Some are specific to grid-based designs. Others give more control over the design, but offer structure for typography. And still others give structure for both the overall layout and individual design elements. Some frameworks are great for beginners, while with others it sometimes feels like you need an advanced degree just to figure out how it works (this is where good documentation becomes incredibly important).

There are really two things to keep in mind when choosing a framework. The first is to make sure that the framework you’ve chosen is capable of handling the kind of design and functionality you need. Better yet, choose one that’s not only capable of it, but has it built in and tested. The second thing to consider is how comfortable you are with that particular framework. If you don’t fully understand it, then you’ll have a much harder time working with it. There’s a much steeper learning curve with something like the YUI Grids CSS framework than there is with The 1Kb CSS Grid. Take that into account when chooseing your preferred framework.

Below we’ve covered some of the best frameworks available today. There’s almost certainly one in the list below that will meet your needs. Experiment with different ones until you find the one that you’re most comfortable with and that can meet your needs efficiently.

52framework

The 52framework provides an easy way to get started using html5 and css3 while still supporting all modern browsers (including ie6).

It Uses all the most useful current html5 tags including: header, nav, section, article, footer, and more to come soon (with styling. Uses the new ::selection selector that enables you to customize the properties of selected text.)

What it comes with: The framework includes styles for creating grids: 16 column, 52 pixel based with 8 pixel gutter.

Elements CSS Framework

Elements aims to make it faster, easier, and more efficient to write CSS, while also keeping all of your project files organized. Elements is made up of a variety of files and folders, including four different CSS files.

Elements is lightweight and easy to use. It includes Lightbox and a collection of preset classes to make your design process faster. It also automatically adds icons to external links to make them more user-friendly, and includes a mass reset file.

What it comes with: The download package includes folders for all of the structural elements of Elements, CSS and JavaScript files, an index.html file, and image files necessary for the layout. No documentation is included, though the files are all well-commented.

YAML: Yet Another Multicolumn Layout

YAML is set up to make developing flexible, multicolumn layouts simpler and more bulletproof. It’s standards-based and designed with accessibility in mind. It’s widely used already, meaning it’s been tested in a variety of real-world situations.

YAML can be used for fixed, fluid, or elastic layouts with any number of subdivisions. It has three licenses available, including a free Creative Commons license and paid options if you’d rather not post a copyright notice. YAML also has robust documentation and an active user community in case you need help with anything or run into any bugs.

What it comes with: The download package contains examples, documentation, the changelog, tools, JavaScript files, and the YAML framework itself. It’s a very complete package. The example layouts are particularly helpful and can really speed up your development process.

YUI Grids CSS

YUI Grids CSS is a grid-based CSS framework from Yahoo! It supports both fixed and fluid (100%) layouts, with preset fixed widths of 750px, 950px, and 974px. It has a self-clearing footer, so no matter which of your columns is longest, your footer will stay firmly planted at the bottom of your page.

There’s a YUI Grids Builder tool you can use to set up your grids, as well as a variety of tutorials and examples. The examples are particularly helpful, as you can view the code in practice.

What it comes with: The YUI Grids CSS is included in the YUI package, so the download includes everything in YUI. It’s a huge package, over 83MB, but the Grids part of that is only 16KB.

Blueprint

Blueprint is a robust CSS framework that uses a grid and has built-in typography. It also includes plugins for certain design options, including buttons and tabs, and built-in form styles. The website includes a number of examples of sites built on Blueprint.

Blueprint also offers up plenty of documentation, including a Wiki and an active discussion group. There are also live demos of different aspects of the Blueprint system.

What it comes with: The download package includes the framework files, a Photoshop template for creating mockups, and some test files.

Boilerplate

Boilerplate was built by one of the original developers of Blueprint. It’s a stripped down framework that only includes the essentials to start a project. It also strives to use semantic naming conventions, unlike many frameworks out there.

What it comes with: The download package includes the framework, some compressed files, and some example files. The examples are very handy and are a good starting point.

Tripoli

Tripoli is a “stable, cross-browser rendering foundation” for web design and development. Basically, it strips out all browser defaults and rebuilds them from the ground up. It aims to be a generic standard for rendering HTML 4.

Tripoli also aims to help users who have little knowledge of CSS to write code that actually looks good and works well. It also helps designers create good typography based on established standards, and is standards-compliant. There are also plugins available to extend its usefulness.

What it comes with: The download package includes six CSS files (including three specifically for dealing with Internet Explorer). It also includes a plugins folder with four more CSS files.

Content with Style

Content with Style is a CSS framework that aims to not only give you a framework for your overall design, but also for typography and more in-depth design elements. There are six different layouts included with CWS, including vertical navigation with one content column, vertical navigation with two content columns, and horizontal navigation with two columns of content.

CWS also focuses on semantic markup, including naming conventions for the basic building blocks of the six layouts. It changes the structure of how pages are laid out to make more important content show up first in the code (header, main content, sub content, local nav, etc.).

What it comes with: The download package includes thirteen CSS files and a single framework HTML file. There’s no documentation included, but the files are all well-commented.

960 Grid System

960.gs is a comprehensive grid framework that’s based on 12- or 16-column layouts. It was originally developed for rapid prototyping, but also works well in production environments.

There are layout templates for Fireworks, InDesign, Illustrator, Inkscape, Photoshop, Visio, OmniGraffle, and Expression Design, making it possible to use 960.gs within your existing workflow. There are also printable templates for sketching out designs on paper.

What it comes with: The download package comes with code for the framework itself, templates for creating mockups in the programs mentioned above, licensing information, and printable templates for creating paper wireframes and mockups.

Typogridphy

Typogridphy is a grid-based CSS framework that also includes styles for creating exceptional typography using vertical rhythm principles (where all new lines of text line up, regardless of line breaks or new paragraphs). It’s based on the 960 Grid System and uses semantic, fully validated, and strict XHTML and CSS.

It’s main benefit is how much it speeds up the development of typographically and otherwise visually pleasing front-end designs based on grid layout. Typogridphy is open source and is available for personal or commercial use, free of charge.

What it comes with: The download package includes two CSS files and an index.php file, and a folder for images. The index file is set up the same as the Typogridphy website. There’s no documentation included in the download package, but the CSS files are well-commented.

SenCSs

SenCSs is a bit different than other CSS frameworks. It imposes no layout style on designers, but does make typography and other repetitive elements easier to style. It includes a basic framework for styling that stays close to a browser’s base styles, sets a vertical rhythm for all elements, and sets a cross-browser typographic standard.

SenCSs includes fonts for Linux, Mac, and Windows. The CSS is fully optimized and as efficient as possible. You can download either a fully commented version for development purposes or a Minified version for production use.

What it comes with: The download for SenCSs is a single CSS file. It has some comments and is semantic, so figuring it out doesn’t look too difficult. There’s some documentation available on the website as well.

BlueTrip CSS Framework

BlueTrip was originally based on a combination of Blueprint, Tripoli, Hartija, 960.gs, and Elements, but has now developed way beyond its origins. It works based on a 24-column grid and includes both an empty starter stylesheet and a print stylesheet.

BlueTrip includes typography styles, well-designed buttons, and status message styles. There’s a demo available on the website, as well as a number of real-world example sites. BlueTrip is fully documented and there are user forums for finding extra help if you need it.

What it comes with: The download package includes four CSS files, and an index.html file, as well as images (including the grid background for creating mockups) and a brief readme file. There’s no documentation in the package, but there is on the website.

Emastic

Emastic is a CSS framework that uses em, px, or % widths for defining page widths (it can make both fluid and fixed-width layouts), though it’s based on an elastic layout. It’s a lightweight framework, less than 4kb when compressed.

Emastic also includes typography and other pre-defined styles. The overall design options are based on a grid-layout. The grid is made from blocks sized with em units (from 5 to 75em). You can change the default sizes of the em units by changing the body font-size tag.

What it comes with: The download for Emastic includes a ton of files, including a number of demo files and both compressed and uncompressed CSS files. The demo files are particularly useful for figuring out how the framework works, especially since there’s no documentation included.

Malo

Malo is a super-tiny CSS framework with only 8 lines of CSS (.25 kb). It works on the principle that any and every column can be divided into two, three, four, or five parts.

Malo is very lightweight, but is also a very bare-bones framework. All it really does is give you a platform for the basic layout of your site, and absolutely nothing else. It’s a great option if all you need is a basic grid layout and can do everything else yourself.

What it comes with: Considering how small the framework itself is, the download package comes with a surprising amount of material. There are a number of demo files included, two tutorials, and both compressed and uncompressed CSS files.

Elastic CSS

Elastic is a framework roughly based on a four-column layout approach, but with the capability for unlimited column combinations. It can make elastic, fluid or fixed-width layouts.

Elastic allows unlimited nesting, uses a declarative syntax, and is cross-browser compatible. In addition to full elastic layouts, it also allows elastic columns. It also allows a mixed number of columns in a single layout, and maintains equal column heights regardless of column content. It can accomodate a number of difficult layouts, including 3-column layouts with a fixed center column, elastic headers and footers with fixed-width content, and 3-column layouts with the side columns fixed and the center column elastic.

What it comes with: The download package includes documentation, production files, jQuery, and a library folder with various CSS and JavaScript files.

The Golden Grid

The Golden Grid is a grid-based CSS framework that works on the principles of the Golden Proportion (hence the name). It uses a 6/12 grid system and a 970px main width.

The Golden Grid is incredibly lightweight (less than 1kb compressed). It’s also easy to learn. The website offers up a number of demos and examples to help you get started. There’s also a mini tutorial available.

What it comes with: The download package includes a surprising number of files considering the grid itself is so small. There are seventeen demo files, all of which could be used as the basis of a production site. There’s also a basic grid file, a typography file, and the CSS files to make it all work.

Sparkl

Sparkl combines Bulletproof CSS, Unobtrusive JavaScript and POSH Markup into a single framework. The end result is a standards-compliant site. It works with both fixed and fluid layouts.

Sparkl supports a number of modules for extending its functionality, including modules for grid layout, typography, vertical tabs, and tables. It’s released under the MIT License, free of charge.

What it comes with: There are two download packages available for Sparkl: the framework files and the template files. The framework package includes an example html file plus the CSS and JavaScript files. The template package includes three complete templates for Sparkl, and are a great way to see what’s possible with it.

The 1Kb CSS Grid

The 1Kb CSS Grid is an incredibly simple, flexible and easy-to-understand grid layout framework. It lets you create grids ranging from 9 to 16 columns, with column widths of 40, 60, or 80 pixels and either 10 or 20 pixel gutters (meaning your grids can be anywhere from 450 pixels to 1600 pixels wide).

One of the best parts to The 1Kb CSS Grid is that it lets you define your grid prior to downloading. That means you don’t have to download a bunch of files you don’t need, and the stylesheet you end up with only has the styles you need. And again, this is one of the easiest-to-understand grid systems out there.

What it comes with: The download package you get from The 1Kb CSS Grid is a bit different than most other frameworks. It only includes files for the layout you selected on the site prior to downloading. So, there’s a readme file, the grid.css file, and a demo.html file that shows you how to use it. There’s no documentation included (it’s on the website), but it’s really so simple that you probably won’t need it.

Fluid 960 Grid System

The Fluid 960 Grid System is a fluid-width grid framework based on 960.gs. Just like the original 960.gs framework, it allows for either a 12- or 16-column layout, and shares many of the other features of the original.

It uses Mootools FX.Elements for some added functionality, as well as some jQuery scripts. It’s based on the grey box method to make prototyping faster, though it’s also suited for a production environment.

What it comes with: The download package includes the files for both the 12 and 16-column versions, as well as CSS, JavaScript and image files. Licenses are also included, as are some demo files.

30 High Quality Grunge Fonts for Web Designers

// February 4th, 2010 // No Comments » // Uncategorized

Grunge is one of my most favorite font styles. Clean and beautiful designs became boring and distortion, old and worn out feel brought something new in. You may always distort fonts yourself, but it’s always nice if there are free fonts out there you may use right away. I put together a collection of my favorite free grunge fonts. If you are a grunge fan like me, do not hesitate and add them to your font library.

- 4990810

- 28 days later

- Anthology

- Skratch punk

- Seriffic grunge

- All used up

- Anarchy

- Armalite rifle

- Creaky frank

- Crookiid veredgf

- Dubbel

- Big bloke bb

- Docteur atomic

- Barracuda

- Defused extended bold

- Broken74

- Hard rock

- Hvd poster

- A BITE

- Beyond Wonderland

- Frakturika

- Bleeding cowboys

- Sidewalk

- Trashco

- Barber shop

- Alpaca

- Artistamp

- Alpha echo

- Arvigo

- Batik

40 (NEW) & High Quality Icon Set For Elegant Designs

// February 1st, 2010 // No Comments » // Uncategorized

When working on design projects its always essential to have a good collection of icons. Designers use Icons to create breath-taking designs. Having the right icons can help to make a web design look much more professional and complete. Fortunately, there are some excellent free icon sets available that offer very high quality icons. In this post we’ll feature 40 Icon sets that are totally fresh and free for you to download. Keep these icon sets handy and they will meet your needs for most projects.

Note:
Please read the license agreements carefully before using the icons. Some of these icons are for personal use only, make sure you always check the license before using the icons.

1. Page Peel – A Free Social Media Iconset

The set contains 16 social icons in (transparent)PNG format.

2. Page Peel Social Icons – Version 2

The icons are transparent PNGs and the available dimensions are 128 x 128 and 64×64

3. 330 Free Letter Pressed Icons

A collection of over a 100 letter pressed icons, in various letter pressed styles. The icons include three PSD files which are full of icons which you can drag and drop into your designs.

4. Watercolor Free Icon Pack

Each icon is in .png format sized at 256×256px with transparent backgrounds. The 36 different icons have varying opaquness that allow the background and texture seep through the icons like watercolor on canvas.

5. Free Social Media Icons

FolderIcons is free, a folder style social media icon set. This package contain icons for cypherbox, blinklist, blogger, delicious, digg, facebook, mixx, reddit, rss, stumbleupon, technoratti, twitter, WordPress and youtube.

6. Sketchy Web Icons: 30 Hand Drawn Icon Pack

FolderIcons is free, a folder style social media icon set. This package contain icons for cypherbox, blinklist, blogger, delicious, digg, facebook, mixx, reddit, rss, stumbleupon, technoratti, twitter, WordPress and youtube.

7. Grunge Peeling Stickers Social Media Icons

Each icon is in .png format sized at 128×128px with transparent backgrounds. The pack comes with a .PSD source file so that you can customize your own icons.

8. Social Cubes

A set of 18 high quality icons.

9. Social Sketches

All the icons are done in sketch style, which brings them a new look and makes them especially fit for grunge/hand-drawn themed websites.

10. Web User Interface

The Web User Interface vector icon pack is a group of five free beautiful and high quality icons.

11. 2 Awesome Twitter Icons

The Web User Interface vector icon pack is a group of five free beautiful and high quality icons.

12. 8 icons

First attempt of designing icons for a school assignment.

13. REDmillion Stupid looking Twitter Bird

14. Cute Blogging Icon Set

10 high quality blogging icons in PNG format.

15. Android icons for developers

30 PNG menu icons plus the additional source files for further customization.

16. WooFunction

178 Amazing Web Design Icons.

17. 27 Circular Social Media Icons in 3 Sizes

The icons are AIM, Bebo, eBay, Hi5, Last.fm, LinkedIn, Windows Live, Ning, Orkut and Yahoo Messenger.

18. Woven Fabric Social Media Icon Set

There are a total of 26 icons available as transparent PNGs.

19.

20. Nice Social Media Icons

16×16, 32×32, 64×64 PNG icons.

21. Token

128 unique icon designs, each available in dark and light variants.

22. 8 Free typography social icons

23. 30 Free Vector Icons

30 free vector icons with an apple touch to it. The download contains the PSD source file.

24. Colorful Stickers Icons

This free icon set contains 20 high quality, free icons in these sizes: 24×24px, 32×32px, 48×48px, 64×64px, 128×128px and 256×256 px in 32-bit transparency PNG file format.

25. Twitter Bird

Icon Size: 512×512 in a PNG file format.

26. 108 Free Crumpled Paper Social Networking Icons

108 free high resolution crumpled paper social networking icons.

27. Payment Option Icons

This set contains 20 icons for popular payment methods such as MasterCard, PayPal, Visa, American Express, Diner’s Club and much more. All icons are in PNG format and come in three different sizes: big (130×80), small (80×49) and tiny (50×31).

28. Cutielicious

500+ Different Style Twitter Birds.

29. Free Apple iPad Icon Set

The pack includes the full size graphic, as well as 256px, 128px and 64px icons sizes.

30. Sixpack status

Sixpack status is a small set of high quality icons which can be used for status messages. Icons are available in four sizes, 32×32, 64×64, 128×128 and 256×256px.

31. E-Commerce Icons

The set includes five icons that were created for use in e-commerce websites. The icons are free for personal or commercial use.

32. 32px mania

The set includes 179 icons to freely use in your projects.

33. LBOI Icon Set

The set includes 6 icons expressing 6 different aspects of designers.

34. Free Vector Icon Set 1

The set contains 25 scalable Illustrator format icons.

35. Standard Iconset

36. Extreme Grunge Garments Icons

This high quality, hand made, icon pack is full with 9 Extreme Grunge Social Media Garments. Each icon is in .png format with transparent backgrounds, sized at 256×256px.

37. Jeans social media icon pack

Available Sizes: .ICO File, 32×32 px, 48×48 px, 64×64 px, 128×128 px

38. 27 Free Wooden Badges

Inside this Icon Pack are 27 Free Wooden Social Icons.

39. Social Media Icons in Vector Format

Inside this Icon Pack are 32px and 16px in three different file formats: vector EPS, PNG, and GIF.

40. Shine

Shine is a set of 31 shiny realistic icons. With 31 icons in 5 different size in both vector and pixel formats, Shine is extremely versatile.

9 Tips For Working with MySQL Databases

// January 25th, 2010 // No Comments » // Uncategorized

MySQL is one of the most popular relational database management systems (RDBMS) around, with over 6 million installations.

It’s a fantastic choice for any new developer, because of its open source nature, wide support and abundance of tutorials available on the subject.

Here are some great tips and tools (beside phpMyAdmin) to improve your MySQL coding, and to help you save time.

Installing SQL

If you’re a newbie to the server side coding arena, don’t worry. Installing SQL is very, very simple. Ok, well if you do it the geeky way it could take you hours, but there are several scripts out there that come packaged with an SQL installer. They also typically provide a server on your local machine which is very handy.

MAMP

Mac only PHP, SQL & Apache Installer

XAMPP

Windows, Linux & Mac installer

WAMP

A windows only LAMP installer

MySQL Server 5.1

If you just want MySQL server, and like using command line then this might suit you.

For info on how to install and work with the MySQL server, check this NetTuts tutorial: Everything You Need to Get Started With MySQL. This article will introduce you to the world of relational databases allowing you to maximize your data’s potential.

SQL Tips

1- Optimize your code

Imagine if you have 100 records, 10 columns.Your working with a database of your clients details, and need to select their name, phone number and address. You’d write:

SELECT * FROM clients;

What’s up with that? Nothing. You’d then simply reference the columns you want later. Wrong!

That single line of code is highly inefficient. It’s fetching 1000 pieces of information from the database! However, if you wrote this:

SELECT name, phone, address FROM clients;

You’ve now cut down to only 300 calls. That’s a 700 saving. Probably not noticeable on a database that size, but you should always think about what your code is actually doing. That way, you can code efficiently in the first place, and make your app much more scalable.

Super Tip: In some cases, you can cut down to simply 3, by using a well thought out ‘WHERE’ clause.

2- Understand the code

Its been said that 60% of sql optimisation is understanding sql and the basics of databases. Spend time learning the difference between joins and sub selects. Its important that you know what technique to use and under what circumstance, so every hour spent here will yield noticeable results. So purchase a good book on MySQL and get learning. Knowledge is the root of power.

3- Keep Your Code Tidy and Organised

As with any coding you do, keep your SQL tidy and well formatted. Doing so will help you when debugging & generally managing code. There are several tools available to help you do so, complete with colour coding and code formatting.

Instant SQL Formatter

Instant SQL formatter is a free online service that beautifies and tidies your SQL code. It also converts SQL to html for easy posting to blog’s or web sites, and makes a great tool in any developers arsenal.

4- Add tables and columns sparingly

One of the most effective methods for keeping your application simple, performance consist ant and code streamlined is asking yourself, "Do I really need to add this table or column?" Could the task be accomplished by using a join or simply by storing data in one row and using coding later on to separate it out. By doing so you are cutting down and bloat, and making your app as dynamic and streamlined as possible.

5- Change one thing at once

Like SQL, racing cars are pretty technical. They require tuning and set-up in order to work to the absolute optimum. So does SQL. But, one thing that race car engineers never, ever do is change more than 1 thing at once. If you alter one table, one field, one column the effects multiplied over 1000’s could be disastrous. Even if it doesn’t break your whole database, and just has one little quirk, changing your code to do only one new thing at once will mean you know exactly what’s breaking your code.

6- Back-up Regularly

Whether your on a shared host, dedicated server or running on a local dev machine, backing-up is essential. On your local machine, make sure you back-up to an external hard drive (including your databases) or even better, to an online service such as Carbonite. Then, if you have a fire or flood in your office your backed-up, and all your development projects are stored away safely.

On shared / dedicated servers, you can set-up CRON jobs to back-up databases regularly, meaning if the site goes down, you can simply reload the database and carry on from where you left off, give or take a days worth of data.

Finally, when working on dev projects, before altering databases, its a great idea to back-up. That way, if your alteration breaks the whole database, you can simply replace the corrupt one with a back-up and try again. Combined with one alteration at once, and you have a solid SQL programming plat from to work from.

7- Caching

If your database is going to be read more than written to, consider using a cache. Doing so cuts down on calls to the server, and thus reduces load on the server.

The MySQL site has a great tutorial on using Query Cache, which essentially saves a SELECT command in the cache, then if its called again, the cache can serve the results rather than call the database again.

8- Use a cheatsheet / reference

Cheatsheet’s always seem to have a stigma attached to them. Probably because of the name, and their usage in exams. But, cheatsheet and references will help you no end in your general day to day working with SQL. Who wants to become an SQL walking encyclopedia? Remember all the stuff you really need, and the more obscure / less used functions are always only a few clicks away:

The MySQL official reference is essentially the SQL bible. Loads of great tips and advice, plus help in case you need a refresher on what an Identifier Qualifier is.

They also have past versions of SQL documented, plus SQL 5.0, 5.1 and 5.4.

9- Never stop learning

Just because you buy several books on MySQL doesn’t mean you’ll be Mr RDBSMS Rockstar straightaway. You need to practice what you’ve learned in real world situations, and always, always top up your knowledge by going back and re-learning what you’ve learned or checking out new tutorials on the matter. Here’s a few refreshers

MySQL GUI’s

A GUI (Graphic User Interface simplifies working with MySQL. Instead of working purely on the command line, you get a friendly interface that formats date, gives you a code editor and generally improves the whole experience of working with raw code. Think user friendly and time saving.

Here’s a few of the better ones on the market, both free and paid

RazorSQL

RazorSQL is an SQL query tool, database browser, SQL editor, and database administration tool for Windows, Mac OS X, Linux, and Solaris. RazorSQL has been tested on over 29 databases, can connect to databases via either JDBC or ODBC. Its available for $59.95.

Querious

Viewing, searching, editing, importing, exporting, and structuring your data has never been so easy. With Querious, you can even open up raw CSV or Tab files in a spreadsheet-like document. Need to rename or reorder the columns? No problem. Searching for data is a breeze, and you can even convert the whole file to another format in a snap. It costs $25

SQLEditor

A Database design and entity relationship diagram (ERD) tool for Mac OS X. SQLEditor replaces typing SQL by hand with dragging, dropping and clicking. It makes creating databases much faster and really reduces errors.
If you already have a database then SQLEditor can help you see what it looks like by creating a diagram of it. SQLEditor works on Mac, and supports Snow Leopard.

SQLGrinder2

SQLGrinder”! is an SQL editor and developer tool that gives you the tools needed to make your database development easy. Using SQLGrinder you can create, edit and execute SQL statements. You can browse your database schema. SQL Grinder costs $59 and works on OSX.

SequelPro

Sequel Pro is a fast, easy-to-use Mac database management application for working with MySQL databases. Sequel Pro is free, open source and well worth a look at.

MySQL GUi Tools

The MySQL GUI Tools Bundle for 5.0 includes the following products which are also supported for MySQL 5.1, and offered by the official MySQL site.

• MySQL Administrator 1.2
• MySQL Query Browser 1.2
• MySQL Migration Toolkit 1.1

Enjoy being a MySQL Rockstar, with heightened coding abilities! Why not share your favorite MySQL coding tip or GU editor with our readers. What’s the most useful hack you’ve learned?