Eduardo's starred items in Google Reader

World Map & Pin (PSD)

2012-05-16T14:00:50Z

Today's freebie, a contribution from 17 year old Dutch designer Thom van der Weerd, is a sweet little world map design complete with location pin. Fantastic work I'm sure you'll agree!

RSS Readers: Check out the full post for more info and access to your free download!

10 Fantastic Login Forms In PSD Format

2012-05-16T10:08:29Z

In todays post we're showcasing a collection of 10 Fantastic Login Forms In PSD Format

Please feel free to suggest and share any Login Forms In PSD Format you've found in the comments below.

16th May 2012

A Useful String Manipulation Extension for JavaScript

2012-05-16T07:01:27Z

Advertise here via BSA

Javascript lacks complete string manipulation operations. Underscore.string attempts to fill that gap. Underscore.string is JavaScript library for comfortable manipulation with strings, extension for Underscore.js inspired by Prototype.js, Right.js, Underscore and beautiful Ruby language.

Underscore.string provides you several useful functions: capitalize, clean, includes, count, escapeHTML, unescapeHTML, insert, splice, startsWith, endsWith, titleize, trim, truncate and so on. It is released under MIT License.

Requirements: JavaScript Framework
Demo: http://epeli.github.com/underscore.string/
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

FnordMetric: Realtime App / Event Tracking Dashboard

2012-05-15T07:35:49Z

Advertise here via BSA

FnordMetric is a highly configurable (and pretty fast) realtime app/event tracking dashboard based on ruby eventmachine and redis. You define your own plotting and counting functions as ruby blocks.

FnordMetric gives you a live dashboard, that shows who is using your app in realtime. You can select a single user and follow them step by step as well. Best of all, it’s free for download and you can install it on your own server.

Requirements: -
Demo: https://github.com/paulasmuth/fnordmetric
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Build a Library of CSS Image Label Options

2012-05-14T11:00:53Z

Today I’m working on another awesome free download for PixelsDaily. Here you’ll be able to see my thought processes, goals and code, and later you’ll be able to download the whole project to use in your own work.

Basically, our goal here is to create a simple effect so that when the user hovers over an image, a hidden text label pops up into view. This is of course extremely easy to do so we’re going to go a step further by building a whole bunch of options for the developer to choose from. This will provide you with some good practice for how to create flexible effects that can be applied in different ways without too much code repetition.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Sneak Peek

If you’re anxious to see the result before you go through the code, check out the demo below and hover over each image to see how it’s different.

Demo: Click Here to launch.

The Plan

Here’s what we want: a simple text label with a black background to appear over the image when the user hovers. Now, since it’s going to be animated into place, I came up with a total of ten different variations that equate to roughly the same element being used in different ways:

We have two main parameters to set here. The first is where the the label will come to rest (top, center or bottom) and the second is where it will come from (top, right, bottom, left). What we’ll want to do is provide a basic repeatable HTML structure for developers to use when adding an image, then give them some classes that can be applied to control everything about the label’s behavior. With this in mind, we can proceed to the first step.

The HTML

<div class="label top">
  <p>Persistence in Memory</p>
  <img src="img1.jpg" />
</div>

For the HTML, we need a simple wrapper div that contains a paragraph and an image. The paragraph will serve as the hidden text label and the classes applied to the div will tell us two things: first, that we want to give this div the label treatment and second, which label treatment to give it.

We could skip the generic label class, but that would mean that all of the styles associated with every label would have to be duplicated in each version of the label, which would make for a big fat mess of unnecessarily repetitious code. This way we can apply most of the styling to one single class and save the changing styles to our specific classes.

Now let’s expand this out so we can try the ten different effects that we’re aiming for in our final result. We’ll keep all the divs for this tutorial, but the classes should be flexible enough that you can use block level list items as well if you’re building a gallery. We really just want to make sure each image effect works in an individual setting.

<div class="label top">
  <p>Persistence in Memory</p>
  <img src="img1.jpg" />
</div>
 
<div class="label bottom">
  <p>The Scream</p>
  <img src="img2.jpg" />
</div>
 
<div class="label bottomright">
  <p>The Last Supper</p>
  <img src="img3.jpg" />
</div>
 
<div class="label bottomleft">
  <p>Mona Lisa</p>
  <img src="img4.jpg" />
</div>
 
<div class="label topleft">
  <p>Starry Night</p>
  <img src="img5.jpg" />
</div>
 
<div class="label topright">
  <p>Girl with a Pearl Earring</p>
  <img src="img6.jpg" />
</div>
 
<div class="label centertop">
  <p>Whistler's Mother</p>
  <img src="img7.jpg" />
</div>
 
<div class="label centerbottom">
  <p>The Kiss</p>
  <img src="img8.jpg" />
</div>
 
<div class="label centerleft">
  <p>American Gothic</p>
  <img src="img9.jpg" />
</div>
 
<div class="label centerleft">
  <p>Water Lilies</p>
  <img src="img10.jpg" />
</div>

Starter CSS

Now that we’ve got a good idea of what our HTML structure will look like, it’s time to jump over to our CSS. To start off, toss in a lazy man’s reset (or something more robust if you prefer) and a background pattern.

* {
   margin: 0;
   padding: 0;
}
 
body {
   background: #f5f5f5 url('wood_pattern.png');
}

Now it’s time to implement some generic label styles. Most of what we need to do will specifically apply to the paragraph, but there are a few things that should be done here as well. Start off with the specific styles that you need to make the layout work. since we’ll be working with images of varying sizes, I used inline-block for the display context with a top vertical alignment. I also set the overflow to hidden and the position to relative, both of which are vital for this experiment.

Next I threw in some optional visual styles. These are separated so that a developer who downloads these files can easily see how to customize the look and feel of the items without screwing up how they work.

.label {
  /*Position*/
  display: inline-block;
  vertical-align: top;  
  overflow: hidden;
  position: relative;
  margin: 20px;
 
  /*Skin*/
  border: 7px solid #fff;
  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
          box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
 
/*Extra Padding Fix*/
.label img {
  display: block;
}

Notice the peculiar block positioning context applied at the end here. For whatever reason, this layout was giving me an extra four pixels of padding at the bottom of each image that couldn’t be manually overridden. This fixed this problem.

Status Update

At this point we’re looking good. Our images are lining up nicely and have the styling that we want. The only weird part is that the text labels are all screwed up and that’s what we’re going to attack next.

Style the Labels

Now it’s time to style the labels. Once again, it’s very important to figure out which styles can be reused and which need to vary. To do this, I simply ran ahead and created a bunch of different individual labels, then looked through to see where my code was redundant.

The realization is that each label will have to have absolute positioning (which works with the relative positioning from before), padding, a set width, transitions and visual styling. These properties will be identical, no matter what direction we’re coming from or what the final resting place of the label will be.

.label p {
  /*Position*/
  position: absolute;
  padding: 10px;
  width: 100%;
 
  /*Skin*/
  background: #000; /*fallback*/
  background: rgba(0,0,0,0.7);
  color: #fff;
  font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
 
  /*Animation*/
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

Status Update

As you can see in the image below, all of our labels are working now and look perfect. Notice that they’re all positioned at the top by default, keep this in mind as we move forward and shove them around.

Position Each Label

From here, we have a lot of styling to do. Really we have a tiny bit of styling to do, but we have to do it ten different times because each label is unique. For each label, we need to position the paragraph element out of the bounds of the picture, then bring it back in on hover.

To begin, we want a label that will start just above an image that will fly downward on hover and rest at the top. To do this, we set the top value to -50%, which then changes to 0% on hover. Similarly, for the same effect from the bottom, we start with a bottom value of -50% and change that to 0%.

My method here is very specific so take note. The trickiest part of this whole idea is figuring out how to make it work on a wide range of image sizes. We don’t want the developer to have to manually enter in a size every time, it should just work when someone slaps on the required classes.

By utilizing the top and bottom properties the way we are, we ensure that nothing is image-size-specific. The value of 0% on the bottom property will always push our label down to the bottom of the image we apply it to, no matter how far that may be.

/*TOP LABEL*/
.top p {
  top: -50%;
}
 
.top:hover p {
  top: 0%;
}
 
/*BOTTOM LABEL*/
.bottom p {
  bottom: -50%;
}
 
.bottom:hover p {
  bottom: 0%;
}

Next up, we need to style our labels that swing in from the sides. We can swing in from the top left, top right, bottom left and bottom right. Here are the values for these. The method is straightforward and just like the two we just went over. Each time we set the resting position just off to one side, then bring it back into view with the hover. For these, the left and right properties come into play in addition to the top and bottom properties.

/*BOTTOM LEFT LABEL*/
.bottomleft p {
  bottom: 0%;
  left: -150%;
}
 
.bottomleft:hover p {
  left: 0%;
}
 
/*BOTTOM RIGHT LABEL*/
.bottomright p {
  bottom: 0%;
  left: 150%;
}
 
.bottomright:hover p {
  left: 0%;
}
 
/*TOP LEFT LABEL*/
.topleft p {
  top: 0%;
  left: -150%;
}
 
.topleft:hover p {
  left: 0%;
}
 
/*TOP RIGHT LABEL*/
.topright p {
  top: 0%;
  left: 150%;
}
 
.topright:hover p {
  left: 0%;
}

To finish off, we need to code our centered labels. These are the hardest of the bunch to figure out. On hover, you want to place them fifty percent of the way down or up, minus half of the height of the label. So when we want to slide in from the top, we set the top value to 50% and apply and negative margin of 20px (half the height of our labels). Unfortunately, this does assume a single line of text and the specific font-size that we’ve set up. If either changes, then the height will be different and the item won’t be centered. The only way I know around that is to use some sort of display: table setup.

/*CENTER FROM TOP*/
.centertop p {
   top: -50%;
}
 
.centertop:hover p {
   top: 50%;
   margin-top: -20px;
}
 
/*CENTER FROM BOTTOM*/
.centerbottom p {
   bottom: -50%;
}
 
.centerbottom:hover p {
   bottom: 50%;
   margin-bottom: -20px;
}
 
/*CENTER FROM LEFT*/
.centerleft p {
   top: 50%;
   left: -150%;
   margin-top: -20px;
}
 
.centerleft:hover p {
   left: 0%;
}
 
/*CENTER FROM RIGHT*/
.centerright p {
   top: 50%;
   left: 150%;
   margin-top: -20px;
}
 
.centerright:hover p {
   left: 0%;
}

Optional: Going Further

Now, if you’re crazy about repetition, you can go even further with making sure your code is as brief as possible. We separated out each label above for the sake of readability, but the result is a lot of values that are repeated throughout. We could go in and either manually combine selectors or use Sass @extend and come up with a much more concise result. The tradeoff here of course though is that you’re repeating your selectors because some appear in multiple places.

.top:hover p, .topleft p, .topright p {top: 0%;}
.top p, .centertop p {top: -50%;}
 
.bottom:hover p, .bottomleft p, .bottomright p {bottom: 0%;}
.bottom p, .centerbottom p {bottom: -50%;}
.bottomleft:hover p, .bottomright:hover p, .topleft:hover p, .topright:hover p, .centerleft:hover p, .centerright:hover p {left: 0%;}
.bottomleft p, .topleft p, .centerleft p, .centerleft p {left: -150%;}
.bottomright p, .topright p, .centerright p {left: 150%;}
 
.centerbottom:hover p {bottom: 50%;}
.centertop:hover p, .centerleft p, .centerright p {top: 50%;}
.centertop:hover p, .centerleft p, .centerright p {margin-top: -20px;}
.centerbottom:hover p {margin-bottom: -20px;}

See It In Action

We’re all finished! Be sure to check out the live demo below and hover over each image to see the different effect.

Demo: Click Here to launch.

Conclusion

This project forced us into a lot of good thinking. We had to consider several times how to keep our code brief and free of repetition. We also consistently asked what was best given that we want others to be able to download and change our code with very little trouble. Sometimes when we saw a way to make our code more concise, it came at the price of readability and ease of use, which isn’t the best method for a free download.

Feel free to grab this code and use it however you like. Also keep an eye out for the download sometime in the coming weeks on PixelsDaily.

10 Great Examples of Minimalist Web Designs

2012-05-10T09:50:24Z

In this post we're showcasing a collection of 10 Great Examples of Minimalist Web Designs

Please feel free to suggest and share any other Minimalist Web Designs you've found in the comments below.

10th May 2012

20 Fresh CSS3 Tutorials

2012-05-10T04:27:58Z

Advertise here with BSA

The design industry is probably one of the fastest changing and growing. Designers have to keep their eyes on everything, including new trends in visual design, as well as interaction technologies like jQuery, HTML5, and CSS3. Designers are using these technologies to express more creativity in design production and make user experience richer.

In this post today, I would like to share with you some amazing and beautiful CSS3 tutorials for creating various web design elements and interactions. Use this collection to learn something new and be prepared for the near future of the web.

Quickly Build a Swish Teaser Page With CSS3

In this tutorial, you’ll learn how to build a teaser page using just CSS, no images or even a Photoshop design. Use it for any app or website that’s getting ready to launch.

How to Create a CSS3 Dropdown Menu [Tutorial]

In this short tutorial you will learn to code navigation menu in pure CSS3. Simple, clean and professional outcome.

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

By following this tutorial you will learn to recreate Orman Clark’s vertical navigation menu with CSS3 and jQuery while using the minimal amount of images possible.

Accordion with CSS3

In this tutorial you will see how to create an accordion that will animate the content areas on opening and closing using hidden inputs and labels.

Tutorial: CTA button without images using CSS3 and Entypo

In this tutorial you will learn to create button using 100% CSS and Entypo. Buttons without images are more flexible, require less data to be downloaded and are easily changed and updated.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

In this tutorial Tom Kenny will guide you in creating the illusion of stacked elements with CSS3 pseudo-elements.

Pure CSS3 LavaLamp Menu

Another cool tutorial for creating originally jQuery based effect. Learn how to create LavaLamp effect using only CSS3 transitions.

CSS3 signup form

In this article you will find out how to design a clean and attractive CSS3 signup form.

Timeline Portfolio

In this tutoriail you will see how to create beautiful and impressive portfolio using Timeline jQuery plugin and CSS3.

Apple-like Login Form with CSS 3D Transforms

In this tutorial you will see how you can use CSS3 transforms to create an interesting flipping effect on an Apple-inspired form.

How to Create an Image Slider using jQuery and CSS3 [Tutorial]

In this tutorial you will learn to create a slider with “Nivo Slider jQuery Script” and CSS3.

Making an Impressive Product Showcase with CSS3

Amazing tutorial showing you how to spice up a plain old product page with some CSS3 magic and jQuery.

How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]

In this tutorial you will see how to create a clean and beautiful CSS3 only image slider.

CSS3 Pricing Table

This tutorial consists of a whole bunch of new CSS3 features including: transforms, gradient, shadow and nth-child.

CSS3 breadcrumbs

Catalin Rosu will show you how to create your own cool CSS3 breadcrumbs in order to increase website’s usability.

Animated Content Tabs with CSS3

In this tutorial you are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

Responsive Horizontal Layout

In this tutorial you will find out how to create a horizontal layout with several content panels.

Login and Registration Form with HTML5 and CSS3

In this tutorial you are going to create two HTML5 forms that will switch between login and registration using the CSS3 pseudo class :target.

Responsive Content Navigator with CSS3

In this tutorial Mary Lou will show you how to create a content navigator with CSS only.

How to Create Calendar using jQuery and CSS3 [Tutorial]

In this tutorial you will learn to code the CSS3 calendar using jQuery and jQuery UI.

41 Social Media Icons (PNG)

2012-05-08T11:55:34Z

Today's freebie is an uber handsome set of 41 social networking icons in both 16px and 32px by Prekesh Chavda. Admit it, you love social media icons, especially when they're this pretty.

RSS Readers: Check out the full post for more info and access to your free download!

Launch WordPress Tumblog Theme

2012-05-08T09:40:39Z

Boom! Good looking micro blogging which doesn't cost a penny. Launch is a sweet little theme for the personal blogger who likes to blog in style.

RSS & Email Subscribers: Check out the full list of features for more info!

Brunch – An Assembler for HTML5 Applications

2012-05-08T07:01:20Z

Advertise here via BSA

Brunch is an assembler for HTML5 applications. It is a lightweight approach to building HTML5 applications with emphasis on elegance and simplicity. It’s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology.

To simplify app development, brunch watches your files for changes and automatically wraps your scripts and templates in require.js modules. All build errors are printed to console. If you have growl / libnotify, brunch will use them too.

There are some people who are using brunch already. Ranging from internal tooling to high traffic facebook apps. Feel free to check out the examples they mentioned on the website.

Requirements: Node.js
Demo: http://brunch.io/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Super useful online tools to work with images

2012-05-07T14:13:41Z

Minus

As a developer or designer, you often need to upload images for sharing them with clients or people you work with. Many websites allow you to do so, but what I really love with Minus is how quick and easy it is: Just drop your image on their website, and it’s online. They’ll even give you a short url so you can share your image easily. No registration required!

Just one request, I hope they’ll add a resize image feature soon.
→ Visit Minus

Smush It

When using images on the web, one thing you must definitely think about is the image size. You need to find the good balance between image weight and quality. Smush It is a tool developed by Yahoo! which allow you to optimize your images without losing quality. WordPress users, note that there’s a WP plugin available.
→ Visit Smush It

Placehold It

When creating a website layout, you often need placeholder images of an exact size. Placehold It allows you to dynamically create placeholder images. To use it in your designs, simply use urls like this: <img src="http://placehold.it/350x150"> to display a 350*150 pixels placeholder image.
→ Visit Placehold It

Resize images online

Don’t want to open Photoshop just for resizing an image? This site is here to help. Just upload your image, specify the desired size, and you’re ready to go!
→ Visit Resize images online

Photoshop online tools

When it comes to image editing, Adobe Photoshop is definitely the most popular software. Adobe launched a light version of Photoshop which is available online. The online app is quite powerful and has many features. Unfortunely you have to register to use Photoshop online.
→ Visit Photoshop online tools

Pixlr express

Pixlr express is a simple but powerful app which allow you to resize images, add effects, borders, watermarks, etc. The app is free and does not require registration.
→ Visit Pixelr express

Aviary Phoenix

Developed in Flash, Aviary Phoenix is a super-complete and free online image editor. A real “light photoshop” that you can access from any computer, without any registration.
→ Visit Aviary Phoenix

I just created a Facebook page for Cats Who Code, so don’t hesitate to become a fan!

Mini Actions Icon Set

2012-05-03T08:49:35Z

Todays freebie is a great Mini Actions Icon Set containing 32 icons in JPG & PNG format.

The icons included are for all types of actions including padlock icon, cloud icon, new document, edit document, delete document icons, mail, pin.map marker, mail icon, comment icons, rss, dribbble, twitter, facebook, pinterest social icons and more..

Our Mini Actions Icons come in JPG & PNG format and a size of 20px x 20px.

Please use our Mini Actions Icon Set commercially or personally, but we do have some restrictions on how the zip file is used.

3rd May 2012

WP Theme Generator: Create WordPress themes without coding

2012-05-02T09:07:27Z

Creating WordPress themes from scratch is beyond the technical skill of a lot of people, even designers. Without at least a basic grasp of PHP, you’ll likely find the entire process frustrating and way too time-consuming.

That’s where a WordPress theme generator can make your life about a million times easier.

Theme generators in the past have often been clunky and haven’t worked all that well. WPTheme Generator is different.

It makes it incredibly easy to create a theme using a gallery of more than a thousand pre-designed objects, including backgrounds, menus, fonts, sliders, frames, colors, patterns, textures, and more.

The options for customization are huge. WPTheme Generator includes more than fifty fonts, all ready to be used in your theme. You can change the font face, color, and size with just a single click, on both headings and body text. You can also create a variety of layouts using seven different combinations for positioning elements.

Customizing themes is simple. First, pick a design from the gallery that you want to start with. Then just select the element you want to change and then select an option for the pre-designed elements. There are designs to suit virtually every style and new designs are added daily. When you’re done, you can save your themes to work on them later or you can download both the WordPress theme files and the basic HTML/CSS files.

Not finding what you need among the pre-designed elements? No problem! You can upload your own design elements—menus, patterns, backgrounds, and more—to use on your themes. You can even save them for use on future themes.

One of the great parts about WPTheme Generator is that all the themes are built on a single, powerful framework. Your basic theme will always be up to date and working for the latest version or WordPress. And new features added to the framework will be available on all of your themes, including the ones you’ve already created! This also means that you can create a new theme now, and if you decide not to use it for six months, it’ll still be up to date when you come back to download it then.

You can save your themes for later editing and download them whenever you need to, so that your theme will be always updated with the latest framework and WordPress version.

The framework includes a lot of popular features, including dynamic widget areas, five different slides, picture galleries with lightbox and categories, product websites with shopping carts, a spam-free contact form, and much more. It’s even Bootstrap-ready and supports all Bootstrap elements.

Check out more of how WPTheme Generator works in this video:

Because it was created by the folks behind Iconshock, when you sign up for WPTheme Generator Premium, you’ll also get access to Iconshock’s premium items! That includes 30,000 Iconshock icons, 107 Themeshock exclusive themes, and 500 logo templates!

For a limited time, WPTheme Generator is only $29 for six months! After the promotional period, it will be $129/year—still a steal for all you get! You can sell the themes you create to your final customers and use them as many times as you want, though you can’t sell them in a marketplace (they’ll be launching their own marketplace soon).

Reviewed exclusively for WDD by Cameron Chapman

[Disclaimer: This post is a sponsored review, the opinions expressed in the article are the author's only.]

Get a Fresh Take on Sans Serif with Grammatika – $25

Source

20 Awesome Resources for Twitter Bootstrap Lovers

2012-04-30T12:00:54Z

Twitter Bootstrap has simply exploded in the web development community. There will always be skeptics and haters but on the whole the project has been a smashing success and can constantly be seen at the top of the Forked and Watched charts at GitHub.

As a result of Bootstrap’s fame, lots of great related resources have been put forth by the development community. Today we’ve collected our favorites into a list of everything you need to get started with Bootstrap. From introductory tutorials to wireframing kits and custom generators, there’s something here for every Bootstrap lover.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Generators

Bootstrap Custom Build

Before diving into great third party Bootstrap resources, it’s worth pointing out a great little tool right from Twitter that allows you to completely customize an impressive range of Boostrap features so that you can create a custom build that’s perfect for your project.

If you haven’t checked out Bootstrap in a while, you should give this a look because it’s new with Twitter Bootstrap 2.0. Not only can you use it to take an overweight download and transform it into something lean, you can also save yourself a lot of CSS work by customizing colors, fonts etc. before you even initiate the download.

StyleBootstrap.info

As with Twitter’s own tool above, this tool allows you to use a simple interface to customize various aspects of Bootstrap. The difference here is that this one focuses primarily on the visual, design aspects. You can easily go in and change colors, fonts, borders, and a lot more.

The app itself is also more visual than Twitter’s generator and allows you to see what your styles will look like before you hit that download button.

Beautiful Buttons for Twitter Bootstrappers

This is a simple little tool that only does one thing: helps you design great looking buttons for use with Twitter Bootstrap. It’s only comprised of fours sliders and a box to copy the resulting CSS, no less, no more. It won’t revolutionize the way you use Bootstrap but it is fun to play with.

Theming

WrapBootstrap

“WrapBootstrap is a marketplace for premium Bootstrap themes and templates. Impress your clients and visitors while using a single, rock-solid foundation.”

Think of WrapBootstrap as ThemeForest for Bootstrap. You can buy or sell custom styled Bootstrap themes. If you think it’s silly to spend money on a premium theme for a free resource like Bootstrap, just take a look at the success of the WordPress theme market. By default, Bootstrap sites all start to look the same and nicely designed themes can really add some nice variation while allowing you to hold onto the great benefits that Bootstrap offers.

Bootswatch: Free themes for Twitter Bootstrap

If you’re not convinced that a premium Bootstrap is the way to go, check out Bootswatch, a great resource for absolutely free Bootstrap themes. They’re not as overhauled as some of the premium themes, but they do offer a nice quick way to choose an alternative color scheme and typography setup.

Even if you don’t want to use a third party theme, these themes are worth checking out so that you can get a feel for how to alter the design of Bootstrap so you’re not always stuck in the same old boring format.

Galleries

Built With Bootstrap

Built with Bootstrap is an unofficial Tumblr blog that showcases various websites that, as the name obviously implies, have been built using Bootstrap. This is a fantastic resource for designers working with Bootstrap as it allows you to see what real developers are doing with the framework, which will inspire you to take it further yourself.

If you think that Bootstrap isn’t capable of leading to anything but plain looking design, this gallery will prove you wrong. Sites like Provo Restaurant really surprised me by not looking anything like a clone of the Bootstrap example pages.

For Mockups

Bootstrap Fireworks

This is a completely vector based UI toolkit built to mirror Twitter Bootstrap. This is great if you’re not a coder or just need to have a place to shuffle the pieces around without bothering with CSS.

This kit was created based on Twitter Bootstrap 2 so it should be up to date with elements that look just like they will in CSS.

Omnigraffle Stencil for Twitter Bootstrap 2

OmniGraffle is a Mac application that makes creating charts and diagrams super easy. It’s been adopted by many members of the design community as a great way to wireframe apps and websites.

The Stencil kit in the link above is an exhaustive attempt to bring all of Bootstrap’s UI elements into OmniGraffle so you can simply drag and drop to create mockups on the fly.

Free Twitter Bootstrap Widgets Library for Axure RP

Axure is a powerful, professional level application that allows you to build complex wireframes and interactive mockups. At $589 per license, it’s a solution for serious wireframers only.

If you’d like to work with Twitter Bootstrap and Axure, be sure to download this great free widget library, which includes perfect customizable representations of the Bootstrap items that work seamlessly in Axure.

Bootstrap PSD

I know what many of you are thinking, “Fireworks? Axure? OmniGraffle? Just give me a PSD!” Well you’re in luck, because Repix Design has take the time to create and distribute a detailed, customizable PSD containing all of Bootstrap’s various components.

If you like to do your wireframing in Photoshop and you’re a Bootstrapper, this free download is a no brainer. Go grab it now.

Other Goodies

Grails Twitter Bootstrap Scaffolding

Grails is web development framework or scaffolding for “agile, industrial strength, rapid web application development.” If you’re a fan of Grails but want to mirror the simple visual style of Bootstrap, you’re in luck because this is exactly what you’re looking for.

Font Awesome

Font Awesome is probably my favorite Twitter Bootstrap resource. It’s basically just an icon font, so anyone can use it for any project. However, it was specifically designed to complement the visual aesthetic of Bootstrap.

Font Awesome is free for commercial use, screen reader compatible, and contains a whopping 150 icons (a number that continues to grow). Bookmark this one because you’re going to love it.

Sass Twitter Bootstrap – Projects

When the Twitter folks built Bootstrap, they decided to make it even better with LESS, a popular CSS preprocessor that brings the magic of variables, mixins and a lot more to CSS.

The thing is, there’s a big split in the preprocessor fan base. Some people love LESS because it’s simple and incredibly easy to use, but many opt for the more powerful alternative: Sass. We can’t blame the Twitter devs for taking the LESS route but Sass fans need some love too! Fortunately, John W. Long has ported Bootstrap to Sass so now both sides of the preprocessor debate can at least agree on one thing: Bootstrap rocks.

Stylus fans need not mourn the fact they often fail to get a mention, there’s a Bootstrap Stylus port as well.

jQuery UI Bootstrap

jQuery UI is a library of interactive interface elements built on top of the immensely popular jQuery JavaScript library. It includes all kinds of great widgets and web elements to easily add a lot of functionality to your site.

jQuery UI Bootstrap attempts to bring the visual style of Bootstrap to the jQuery UI elements. The developer says that you can even use most of Twitter Bootstrap side-by-wide with it without components breaking visually.

WordPress Bootstrap – A WordPress theme based on Twitter Bootstrap

“We’ve built the WordPress Bootstrap theme so that it could be used as-is or as a starting point for theme developers. It’s built on top of the brilliant Bones theme framework by Eddie Machado and based on v2.0.1 of Twitter’s Bootstrap.”

It’s a responsive WordPress theme built on Bootstrap that allows you to use the awesome themes from Bootswatch. What more do you need to know? This thing is awesome.

Colorpicker and Datepicker for Twitter Bootstrap

Here are a couple of additional elements that you can add to Bootstrap. Both are free, well documented and fit right in with the Bootstrap aesthetic.

Tutorials

5 Incredibly Useful Tools Built Into Twitter Bootstrap

This article serves as a beginner’s introduction to Twitter Bootstrap and goes over some of my favorite features. It was written before the launch of Bootstrap 2, so there are even more features now, but it’s still a great first look at how the framework can be helpful to you.

Twitter Bootstrap 2: Bootstrap Goes Responsive

To follow up the previous article, I released this overview when Bootstrap 2 was launched. In it I mostly discuss how the responsive side of Bootstrap functions and briefly go over some of the other great new features.

Twitter Bootstrap 101

If you really want an all-in introduction to what Bootstrap is and how to use it, look no further than this Tuts+ multi-part video series from Dan Cochran. As with all their content, this series is top notch and super educational.

Articles: Building Twitter Bootstrap

In this fantastic article from A List Apart, Twitter Dev Mark Otto takes you behind the scenes and tells you about the logic behind Bootstrap, how the idea evolved and became a reality, and how it represents a key pairing of designers and developers.

#328 Twitter Bootstrap Basics – RailsCasts

Thus far we’ve gone through all of these resources without a single reference to the widespread Rails community. You guys can join the fun too though, this video will show you how to integrate Bootstrap with Rails via the twitter-bootstrap-rails gem.

How Do You Complement Bootstrap?

Now that you’ve see our list of awesome Bootstrap resources, we want to hear from you. Leave a comment below and tell us about how you use Bootstrap in your workflow and what third party resources you’ve incorporated into that process.

15 great HTML5 and CSS3 generators

2012-04-30T09:21:00Z

HTML5 and CSS3 are great languages to start off learning with, and I’ve always thought that one of the best ways to start learning is to just dive in and manipulate the code. As you could probably tell, this is where generators step in. They are a great way to generate some code, play with it, and learn.

Not only that, they are incredibly useful because often times as a developer or designer we find we are doing things over and over again. Well, generators can take off that edge and do those small things for you each time.

As an example, I have a text-expander snippet that creates an HTML5 template that I wrote about here. Now, text-expander is great but it doesn’t solve every need, and in this case there is a big need for generators so I took the time to find 20 of my favorite and describe why I like them.

I will say that most of this list is going to focus on CSS3 generators, simply because they are in demand more than HTML5 generators, and we will learn why. Note: click on the images to open the websites.

CSS3 Generators

There is a somewhat negative connotation when it comes to these generators, and I have to say that as a designer and developer there is nothing negative about using one. It is a huge time-saver, and in all honesty I know three developers that wrote their own generators just because they wanted to help the community. So keep in mind it isn’t like you are using something taboo made by AOL; these are very natural and organic generators that have come about as we have needed them. So why not share in some of the wealth? Let’s go through a few of my favorite, and why you might enjoy them.

General Generators

This section will focus on generators that take care of the broad spectrum needs and usages. These will cover almost everything you could need, or want in a generator, but by their very nature they may be worse at specifics. This is why I will be giving so many options later in this article for specific types.

CSS3.me

This is one of the exact generators I was just referring to. This one was created by one of my favorite designers, Eric Hoffman, and it is amazing. Very simple, minimal, and stylish, but at the same time very functional. Giving you the ability to change and set the border radius, drop shadow, the gradient, and opacity — it is quite functional.

Note: Take a look at Eric’s site; it is a great example of mobile first design. He is also a designer at Zendesk, so send him some love if you’ve ever enjoyed that product.

CSS3 Maker

Often times people will find generators that they love, and stick with them. And that is exactly what happened with a client I had worked with previously with regards to this generator. He was absolutely in love with it, and I can see why — it is surely functional. It may not be the most beautiful thing ever made but it does seem to have all the bells and whistles.

You can do @font-face work, animation work, box shadows, text shadows, text rotation, transitions, gradients, border radius, and a lot more. It is one that I usually have bookmarked, but rarely use simply because of how well the smaller generators do in each of their respective categories. But it is certainly a good generator to try if you need one and don’t like to jump around to a bunch of different ones.

CSS3 Generator

This is another good general one that provides a lot of functionality. I like this one because it has nice and easy drop downs, and easy to use functionality. The design is also quite nice. It also offers a nice box size functionality. This one offers great ability to do the following: border radius, box shadow, text shadow, RGBA, multiple columns, box sizing, outline, transitions, transforms, selectors gradients. I think this is one of my favorites, because the design and UI is so clean. I usually use this one when I forget about cssmaker.

Button Generators

CSS3-Tricks Button Maker

One of the first button makers I saw back in the day really made me cringe. It was very linear, had no UI to it (ironically) and was overall a horribly designed product. As a side note, I will be talking about something similar next, but for now I will show one I found over at css3tricks, and it is really a nice one.

One of the key points to reference here is the fact that it is almost entirely controllable by a drag and drop slider, which is really nice. Just wait till you have to enter everything manually using the keyboard and you will wish you had a nice dragging slider. As a final side note, CSS3 Tricks is a wonderful site with a ton of well organized and thoughtful content that you all would love to check out.

CSS3 Button.net

And now we come to the generator I was just referring to. The design may be lacking, but it offers a lot more choice than the previous one, which is ironically often how things work. Sometimes you’d like ease of use and sometimes you need some serious choice when it comes to generators, and these last two really hit both of those points.

This one offers the ability to add multiple text shadows, inner-shadows, border, and font colors whereas the last one really didn’t get into that much detail. It may be hard to figure out at first but you will get it if you just play with it for a few minutes. I find this one to be the most useful if you are used to Windows UI’s, and as a result I’ve had clients tell me this was their favorite because they’ve been stuck on XP for years and don’t know any better. And by now I’m sure some of you are wondering, but it’s honestly how it goes — some clients want links to generators to learn for themselves after you impress them. I usually link them to Lynda, TeamTreehouse, and a few of these generators for good measure.

CSS3 Button Generator

This is a really fun one. It gives you one big button to manipulate, that is in a rad retro color as well. You then can manipulate shadow, border, color, and on top of that it gives you the ability to edit the hover-over. I like this one because it is one that I found a while back when I was first getting into CSS, and it really gave me an idea of what it can do. The drag and drop sliders are great for people who are new to the languages, because you can see what you are able to do immediately. Now, I will say, I don’t use this one particularly anymore — in light of other ones that have come about, but it is a great memory.

Border Image & Radius Generators

Border-Image

Nothing beats border-image.com when it comes to taking a specific image and then replicating it to find the right border style. Make sure you don’t infringe copyright though, and use someone else’s image without attribution.

But let’s say you drew an arrow or triangle and you’d like to find a generator to repeat it throughout your site’s border or even an element’s border. Well, nothing is better than this site when it comes to that need. You can manipulate the offset, the size, and the repeat that the image has.

As soon as you arrive on the site, you’ll see an example image they have loaded in but it is really much more useful than that image has shown. I often will use it for designs in backgrounds that I want to repeat and/or see how it would look real quick, before actually replicating the entirety of the background in Photoshop. You can use it for anything related to repeated images, really.

Border-Radius

This is a great and minimal little tool, that I often find is very practical. With it, all you do is simply set how much of a rounded edge you want on each corner. Very practical, very simple. And then you just check off what sort of browser prefix you want included, and boom done. It is a beautiful UI in all honesty. There should be tests in computer science courses where all you do is try to come up with something as simple and functional as this is.

CSS3 Gradient Generators

Color Zilla Gradient Editor

This is billed as the ultimate CSS3 Gradient Editor, and for good right. In fact, it is so awesome that it is the only gradient editor that I will be including here. It has a ton of features, and is very usable and easy to get started with. Simply drag around the black and blue pencils a bit and you will quickly see what they do. They also make a browser editor in Chrome or Firefox that is really useful for designers working on the web. Also be sure to play around with the presets in this one, because often times those are good enough — whoever chose them did a great job.

Typographic Generators/Editors

@fontface Generator

This is a really interesting product. What it does is allows you to upload fonts that you have chosen from the web or may have on the computer, and then gives you an outputted file that is ready to work with on the web. You get more than one thing though, you get a few things. You get the CSS for @font-face properties given the font you chose, and an HTML file that displays the font and its many uses. It is really a great tool to go about checking out a font’s full potential if you aren’t quite sure about it, and especially if you don’t have the time to generate an entire website with that font before making the decision.

Reverse CSS3 Generator

CSS3 Please

This is a really fascinating product. Basically what it does is that it gives you a box set, and all the CSS for it, and then gives you the ability to turn the sections on and off to see what they do. So you can essentially reverse engineer the CSS3 to find out what it does, and then you can see what you are doing. This is a great way to learn CSS3 if you are interested, but think that generators are a bit too complicated.

CSS3 Drop Shadow Generators

Webestools Shadow Generator

I like this shadow generator quite a lot, because it goes into detail and depth regarding drop-shadows that the other generators just don’t. It may not look like the best designed product ever, but it is certainly awesome. It has inset shadows, outset shadows and the ability to manipulate offsets, set colors, and do pretty much anything you could do with code – but instead with a nice dragging bar. Oh how I love the dragging bar. Check this one out if you need to see generally what your shadow idea may look like before you hard-code it.

HTML5 Generators

HTML5 Generators are sort of hard to come by, and the reason for that is probably because of how great HTML5 Boilerplate is. We won’t be talking about that, because it isn’t specifically a generator, so I will sum it up right here: It is basically an HTML5 template already filled out and ready for you to work with, so go check it out if you haven’t seen it. It is pretty awesome actually. A lot of people use it as a starter template for their sites, and for good reason. Now back to generators. Finding a quality one is actually pretty difficult, but I have managed to find a few here that I will be showing — and then afterwards I have a few more generalized ones that touch on all the topics in this article.

Shikiryu HTML5 Generator

Shikiryu’s HTML5 Generator is a lot more complex. You can add in features that allow you to do things inside of Blueprint (mixins, etc), and fancy-type — so it is actually quite useful. I like it because it is a bit more semantic than the other options, and at the same time allows you to add in really popular third party applications that people love to use.

Switch to HTML5 Generator

This is an interesting generator. What it does is it allows you to generate a quick and easy framework for building sites, but unlike HTML5 Boilerplate, it lets us choose exactly what selectors we’d prefer to see in our framework. I actually have tended to use this to generate code instead of HTML5 Boilerplate when I need a few more selectors or items than it offers. Now, it doesn’t exactly follow all of the beautifully designed principles of semantic markup — like HTML5 Boilerplate does — but it does a good enough job, and you can go in and do the rest if you really need to use it.

Quackit HTML5 Generator

This one takes a step back, and instead of just giving you a group of code that is pretty generic and basic, allows you to enter all your own information. This is really useful, and I have found others who are newer to websites really love it. They especially love it, I have found, in that it generates the standard base HTML for you to then make look however you wish with CSS. So if you are learning CSS, and are still a bit hazy on HTML (though not sure why that would be the case), then you can do it this way.

And that will about wrap it up. These generators are just amazing for working in a quick and agile way, but instead of for entrepreneurs they’re for designers. And that is really brilliant in my opinion. Have a quick idea for a border radius (tab’d perhaps?), or a shadow, or a color gradient, or an html5 template with blueprint included – well these are just made for you then. Take note though that this wasn’t an exhaustive list, but it was a few of my favorites and ones that my colleagues in the past have used. I really enjoy using a lot of these, and hope you do too.

If you have any that you think I left off, feel free to let me know in the comments. Also, if you feel there was a better way to describe these also feel free to comment.

Dain Miller is a Sr. Engineer at a Chicago based start-up, though he is still accepting freelance projects. He has a passion for responsive design and Ruby on Rails. You can follow him on twitter at @_dain, or find him on about.me.

The Email Expert Digital Bundle – only $49!

Source

Open Source File Manager for Web using jQuery UI

2012-04-27T07:10:18Z

Advertise here via BSA

elFinder is an open-source file manager for web, written in JavaScript using jQuery UI. Creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system. It supports all operations with files and folders on a remote server (copy, move, upload, create folder/file, rename). Background file upload with Drag & Drop HTML5 support.

You can edit edit text files and images easily. Flexible configuration of access rights, upload file types, user interface and other. It also supports archives create/extract (zip, rar, 7z, tar, gzip, bzip2). elFinder was tested in Firefox 10, Internet Explorer 8+, Safari 5, Opera 11 and Chrome 15+.

Requirements: PHP 5.2+, jQuery UI
Demo: http://elfinder.org/
License: BSD License

Sponsors

Professional Web Icons for Your Websites and Applications

50 Fresh and Inspiring Examples Of Single Page Website Designs

2012-04-26T15:31:27Z

Single page websites have become trendy for the last 2 or 3 years.These kind of websites can work well either for business or as an individual but you have to be ensure that your business is suitable for one page layout.I see many web designers and graphic designers prefer one page layouts to show off their portfolios because you keep everything in one place.And also we can say it is a great time saver for visitors.

In today’s post we are showcasing fresh examples of one page websites.I’m sure you will like most of them.

Starving for Ethics

Visit Website

Arto Graphik

Visit Website

Nerval

Visit Website

Paarva

Visit Website

Vinil Forma

Visit Website

Dave Baranes

Visit Website

Pragmatic Mates

Visit Website

Florent Laroche

Visit Website

Psds

Visit Website

Putzengel

Visit Website

Upstrakt

Visit Website

Slobodan Zdravkov

Visit Website

Davida Baratta

Visit Website

Hpix

Visit Website

Bijay Joshi

Visit Website

Pipe Digital

Visit Website

Blue Ion

Visit Website

Inject Design

Visit Website

Under The Psycamore

Visit Website

MBA Multimedia

Visit Website

Kathy Gomez R

Visit Website

Elless

Visit Website

Trinity Webtech

Visit Website

Acuterays

Visit Website

Sanjay Dey

Visit Website

Daniel Designer

Visit Website

Anna Safroncik

Visit Website

Le Petit Magre

Visit Website

Alain Rodriguezz

Visit Website

Cwd

Visit Website

Build Responsively

Visit Website

Marlin Jackson

Visit Website

Sonali Dixit

Visit Website

Slapner

Visit Website

Div Studio

Visit Website

JLern Design

Visit Website

SteDesign

Visit Website

Km Studio

Visit Website

Wesham Design Studio

Visit Website

Stanislav Mayevski

Visit Website

Caroline Wiseman

Visit Website

Small Media

Visit Website

Baby Shower Madrid

Visit Website

Mc Battle

Visit Website

Derrick Workman

Visit Website

No Leath

Visit Website

Zibuhr

Visit Website

Monsieur Renaud

Visit Website

Pixel Fable

Visit Website

Lampica

Visit Website

Highly Customizable Social Counter jQuery Plugin

2012-04-26T07:01:12Z

Advertise here via BSA

Koottam Social jQuery Plugin is a simple, powerful and elegant Social jQuery Plugin to display your social links. The plugin can be highly customized through 10+ options. There are 7 themes available, and it’s very easy to add more themes in css. One of the best things is that you can make the count display animated easily.

Requirements: jQuery Framework
Demo: http://jobyj.in/koottam-jquery-plugin/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

Foundation Icon Fonts by ZURB

2012-04-25T14:25:58Z

Advertise here via BSA

Foundation Icon Fonts is custom icon sets that are stored in a handy web font. A couple lines of CSS and the right markup will get you going in no time. You can use some awesome CSS techniques to start exploring different styles.

They designed the glyphs to be refined enough to stand alone as a simple icon, but left room for the imagination. Since you’ll be dealing with a font, the opportunities are nearly limitless. Now your icons can be any size, any color and any style available in CSS.

Requirements: -
Demo: http://www.zurb.com/playground/foundation-icons
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

10 Fresh and Useful jQuery Plugins

2012-04-25T05:21:09Z

Advertise here with BSA

There are many reasons why you can say jQuery has enormous popularity. Some might say it’s because of its excellent cross browser compatibility, while others will argue that the small footprint is responsible for jQuery’s widespread adoption. While these are valid points, no one can deny that all of the great plugins built by a very passionate community is a big reason as well. So for this post we’ve gathered some of the latest jQuery plugins to be released. In this list you will find some very useful ones that will help you with things like layout, typography, and more.

Eduardo's starred items in Google Reader

World Map & Pin (PSD)

10 Fantastic Login Forms In PSD Format

Inline Login Form (PSD)

Clean & Simple Login Form (PSD)

Free PSD #4 (Clean Login)

Log In Form PSD

Login Modal Box

Mini Sign In Form

Stacked Paper Login (PSD)

Login Form

Little Login (PSD)

Fresh Light Login Form PSD

A Useful String Manipulation Extension for JavaScript

Sponsors

FnordMetric: Realtime App / Event Tracking Dashboard

Sponsors

Build a Library of CSS Image Label Options

Sneak Peek

The Plan

The HTML

Starter CSS

Status Update

Style the Labels

Status Update

Position Each Label

Optional: Going Further

See It In Action

Conclusion

10 Great Examples of Minimalist Web Designs

Casey Britt

10 Years in type

Talent Garden

Life in Greenville

Offscreen

Quentin Villeret

LuÃ­s Konrad

Malthe Luda

Nerval / Pierre Georges

FO

20 Fresh CSS3 Tutorials

41 Social Media Icons (PNG)

Launch WordPress Tumblog Theme

Brunch – An Assembler for HTML5 Applications

Sponsors

Super useful online tools to work with images

Minus

Smush It

Placehold It

Resize images online

Photoshop online tools

Pixlr express

Aviary Phoenix

Mini Actions Icon Set

WP Theme Generator: Create WordPress themes without coding

20 Awesome Resources for Twitter Bootstrap Lovers

Generators

Theming

Galleries

For Mockups

Other Goodies

Tutorials

How Do You Complement Bootstrap?

15 great HTML5 and CSS3 generators

CSS3 Generators

General Generators

Button Generators

Border Image & Radius Generators

CSS3 Gradient Generators

Typographic Generators/Editors

Reverse CSS3 Generator

CSS3 Drop Shadow Generators

HTML5 Generators

Open Source File Manager for Web using jQuery UI

Sponsors

50 Fresh and Inspiring Examples Of Single Page Website Designs

Starving for Ethics

Arto Graphik

Nerval

Paarva

LuÃs Konrad