bavotasan.com » design

Using CSS Resets

c.bavota — Tue, 12 Oct 2010 16:26:49 +0000

Before you start building a new site, one important decision you need to make is whether or not you want certain elements of your design to rely on the default settings of your user’s browser. The problem with this is that not all browsers use the same default settings. A perfect example is with the header tags. The default font size for the h1 tag in IE is 24px, while most other browsers set it at 32px. The margins can range anywhere from about 14px to 20px. That’s a big difference that can throw your design off quite a bit.

The way to get around this is to use a CSS reset. A CSS reset does exactly what it states, it resets your CSS so that you can then style your elements exactly how you want, without having to worry about any default settings screwing things up.

If you do a quick Google search for CSS reset, the first result will be Eric Meyer’s Reset CSS Tool. This is the one that I like to use. All you need to do is add this to the top of your style sheet.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

The one thing you need to remember when using a CSS reset, is that it resets everything. So now your paragraph tags won’t have any margins, nor will your unordered lists and so on. That means you need to start setting some styles for these elements.

Here is what I like to add immediately after the reset to get things started.

h1, h2, h3, h4, h5, h6, p { margin: 12px 0; }
ul, ol { padding: 0 0 0 20px; list-style: disc; }
ol { list-style: decimal; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

That sets up most of the common tags that I use. Some things might look strange as you start to put together your site, so just remember that now you need to set all the default CSS for any element you use.

Another popular reset is YUI Reset CSS by Yahoo. It does things a little bit differently. Take a look at the YUI homepage to see some examples of how it is used and you may decide that this reset is the right one for you.

The reset I have seen used the most on other people’s sites is the Global Reset. I don’t like to use it because it pretty much just resets the margin and padding for every element but that might be all you really want.

* { margin: 0; padding: 0; }

Whichever reset you choose is totally up to you, but you should consider including a reset as your starting point when creating the stylesheet for your site to guarantee your design looks the way you intended it to across all browsers.

A Slightly New Design for Themes by bavotasan.com

c.bavota — Sat, 17 Apr 2010 17:14:25 +0000

I just spent the past couple of days updating the look of Themes by bavotasan.com. Things are slightly different but a lot nicer, in my opinion. For those using Internet Explorer, the design will probably look a lot more simple, but that’s because IE sucks the big one. Check it out in Firefox, Chrome or Safari to see all the changes.

I decided it would make more sense to show a few more features for each theme, so now there is a lot more information on each theme’s page.

Also, I finally built my first real CSS sprite to include all the images and icons I was using on the site. Check it out:

If you have any feedback about the new layout and design please let me know.

A Better Twitter Feed for Your Web Site

c.bavota — Mon, 23 Nov 2009 17:32:05 +0000

I have already posted a tutorial on How to Create a Twitter Feed on Your Web Site and I have been having a lot of emails in regards to people whose hosts do not allow URL file-access. Here is an alternative script that fetches and parses your Twitter RSS feed using a different function. Hopefully it will help out those who can’t use the other script.

The first thing you need to do is get your Twitter RSS feed URL. go to your Profile page and you will see a link in the bottom of your sidebar that says RSS feed. Click on this and then copy the URL. That will be your feed URL.



$feedURL = "http://twitter.com/statuses/user_timeline/68559295.rss"; // change to your feed URL
$doc = new DOMDocument();
$doc->load($feedURL);
$arrFeeds = array();
foreach ($doc->getElementsByTagName('item') as $node) {
    $itemRSS = array ( 
        'title' => $node->getElementsByTagName('title')->item(0)->nodeValue
        );
    array_push($arrFeeds, $itemRSS);
}
$limit = 5;
for($x=0;$x<$limit;$x++) {
    $title = str_replace('bavotasan: ', '', $arrFeeds[$x]['title']);
    $str = ereg_replace("[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]","\"\\0\">\\0", $title); 
    $pattern = '/[#|@][^\s]*/';
    preg_match_all($pattern, $str, $matches);	
 
    foreach($matches[0] as $keyword) {
        $keyword = str_replace(")","",$keyword);
        $link = str_replace("#","%23",$keyword);
        $link = str_replace("@","",$keyword);
        if(strstr($keyword,"@")) {
            $search = "\"http://twitter.com/$link\">$keyword";
        } else {
            $link = urlencode($link);
            $search = "\"http://twitter.com/#search?q=$link\" class=\"grey\">$keyword";
        }
        $str = str_replace($keyword, $search, $str);
    }
    echo ''.$str.'
';
}
?>

Twitter Bird icon provided by Loon Design.

10 Great Free Mac Apps for Web Developers

c.bavota — Fri, 13 Nov 2009 21:06:15 +0000

I have been a Mac man for almost ten years now, and though many Web developers swear to working on a PC, I find my Mac has everything I need to develop, design and program Web sites. Luckily there are tons of great free apps available to help any developer work more efficiently on their Mac.

Here is a list of 10 great free Mac apps for Web developers that I use:

TextWrangler

TextWrangler is the powerful general purpose text editor with some great features. Whether you are working with HTML, CSS, PHP or any other Web programming language, TextWrangler has everything you need to easily edit your code.
http://www.barebones.com/products/textwrangler/index.html

MAMP

MAMP installs Apache, Mysql and PHP on your Mac to create a fully functioning Web environment which will allow you to test all aspects of your Web site locally. It’s smart to have an environment to test and work with offline before making your changed on your live site.
http://www.mamp.info/en/mamp/index.html

Paparazzi!

Paparazzi! is a small utility for Mac OS X that takes screen shots of Web pages. This is helpful for creating your portfolio or sending screen shots to clients.
http://derailer.org/paparazzi/

YemuZip

YemuZip is an easy-to-use application for making zip files. Just drag, drop, name your zip file and you’re done. The native Mac file compressor utility adds Mac-specific info to zip files that, when extracted on a PC, looks like garbage.
http://www.yellowmug.com/yemuzip/

VirtualBox

VirtualBox is a general-purpose full virtualizer for x86 hardware that allows Mac user to load Windows software on their desktop. Creating an IE testing environment on your Mac is pretty simple using VirtualBox.
http://www.virtualbox.org/

Skype

Everyone probably already uses this, and if you don’t, you should. Skype is great to communicate with clients from around the globe. Skype to Skype is free for instant messaging and calls.
http://www.skype.com/

GIMP

GIMP is an open source versatile graphics manipulation package similar to Adobe’s Photoshop, but it won’t put you in the poor house. It may not be as robust but GIMP has some amazing features and who can beat the price.
http://www.gimp.org/

Cyberduck

Cyberduck is an open source FTP, SFTP, WebDAV, Cloud Files and Amazon S3 browser for the Mac. It features an easy to use interface with quickly accessible bookmarks.
http://cyberduck.ch/

SvnX

SvnX is an open source GUI for most features of the svn client binary. It allows you to browse your working copies, spot changes and operate on them but also to browse logs and revisions of your repositories.
http://www.lachoseinteractive.net/en/community/subversion/svnx/features/

Sequel Pro

Sequel Pro is a fast, easy-to-use Mac database management application for working with MySQL databases.
http://www.sequelpro.com/

31 Open Source Web Development Scripts

c.bavota — Wed, 14 Oct 2009 15:24:59 +0000

When it comes to Web development, there is a wealth of free information online to help you create a top-notch Web site. A lot of hard work goes in to maintaining these resources, all to help save you time and money. The Open Source community is growing stronger everyday and the scripts are getting more useful and efficient, making it almost impossible to not use a few of them in your project. Here is a list of 31 open source Web development scripts I have either used or read about that would easily help any developer with their next project.

Ad Servers

Open X Ad Server

OpenX is the world’s leading independent ad server. It provides you with the simple tools you need to make money from advertising, whether from direct ad sales, OpenX Market, or third party ad networks (like AdSense).
http://www.openx.org/ad-server

Revsense

RevSense Ad Server makes it easy for you to sell ads on your site. Set the prices you want, and the kinds of ads to sell, then RevSense does the rest. It manages the sign up, ad entry and upload process and collects advertising revenue into your Paypal or Authorize.net account.
http://www.revsense.com/

Blogging Software

WordPress

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. WordPress is both free and priceless at the same time. More simply, WordPress is what you use when you want to work with your blogging software, not fight it.
http://wordpress.org

Movable Type

Powerful enough for building blogs, websites or social networks on a single platform. It’s easier than ever to publish and share information with Movable Type. Movable Type makes it simple to start a blog, manage entire websites and build an engaged community of readers and customers.
http://www.movabletype.com

b2evolution

b2evolution is a powerful blog tool you can install on your own website. It includes all the features of traditional blog tools, and extends them with evolved features such as file & photo management, advanced skinning, multiple blogs support as well as detailed user permissions… Not to mention third party plug-ins!
http://b2evolution.net/

Nucleus

Nucleus offers you the building blocks you need to create a web presence. Whether you want to create a personal blog, a family page, or an online business site, Nucleus CMS can help you achieve your goals.
http://nucleuscms.org/

Textpattern

Textpattern is a flexible, elegant and easy-to-use content management system. It is both free and open source.
http://textpattern.com/

Content Management

Drupal

Equipped with a powerful blend of features, Drupal supports a variety of websites ranging from personal weblogs to large community-driven websites.
http://drupal.org/

Pligg

Pligg is an open source Content Management System (CMS) that you can download and use for free. Pligg CMS provides social networking software that encourages visitors to register on your website so that they can submit content and connect with other users.
http://www.pligg.com/

Joomla

Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available.
http://www.joomla.org

Mambo

Mambo is a full-featured, award-winning content management system that can be used for everything from simple websites to complex corporate applications. It is used all over the world to power government portals, corporate intranets and extranets, ecommerce sites, nonprofit outreach, schools, church, and community sites.
http://mambo-foundation.org/

Customer Service

Help Center Live

Help Center Live is an open-source, community driven live chat & support system. You may easily provide live support on your website just like large companies do with very little work. With Help Center Live, you can provide a real-time, live support or sales person experience.
http://www.helpcenterlive.com/

osTicket

osTicket is a widely-used open source support ticket system. It seamlessly integrates inquiries created via email, phone and web-based forms into a simple easy-to-use multi-user web interface.
http://www.osticket.com

Crafty Syntax

Crafty Syntax Live Help (CSLH) is an open source live support solution that helps customer support with live help functionality that can be proactively pushed to visitors to your site or requested by the consumer.
http://www.craftysyntax.com/

eCommerce

osCommerce

osCommerce Online Merchant is an Open Source online shop e-commerce solution that is available for free under the GNU General Public License. It features a rich set of out-of-the-box online shopping cart functionality that allows store owners to setup, run, and maintain online stores with minimum effort and with no costs, fees, or limitations involved.
http://www.oscommerce.com/

Magento

Magento is the eCommerce software platform for growth that promises to revolutionize the industry. Its modular architecture and unprecedented flexibility means your business is no longer constrained by your eCommerce platform. Magento is total control.
http://www.magentocommerce.com/

Zen Cart

Zen Cart™ truly is the art of e-commerce; free, user-friendly, open source shopping cart software. The ecommerce web site design program is being developed by a group of like-minded shop owners, programmers, designers, and consultants that think ecommerce web design could be and should be done differently.
http://www.zen-cart.com/

Open Cart

OpenCart is an open source PHP-based online shopping cart system. A robust e-commerce solution for Internet merchants with the ability to create their own online business and participate in e-commerce at a minimal cost.
http://www.opencart.com/

Agora Cart

AgoraCart – The powerful “Free” Open Source ecommerce shopping cart software solution offers you a very wide range of features that allow you to setup an online storefront or shop ranging from a simple template based store for novices to the integration of complex web design concepts created by your web designer.
http://www.agoracart.com/

Education

Moodle

Moodle is a Course Management System (CMS), also known as a Learning Management System (LMS) or a Virtual Learning Environment (VLE). It is a Free web application that educators can use to create effective online learning sites.
http://moodle.org/

Forums

phpBB

Since its creation in 2000, phpBB™ has become the most widely used Open Source forum solution. Like its predecessors, phpBB™ 3.0 “Olympus” has an easy to use administration panel and a user friendly installation process, which allows you to have a forum set up in minutes.
http://www.phpbb.com/

BBPress

bbPress is forum software with a twist from the creators of WordPress. bbPress is focused on web standards, ease of use, ease of integration, and speed. We’re keeping things as small and light as possible while still allowing for great add on features through our extensive plugin system.
http://bbpress.org/

PunBB

PunBB is a fast and lightweight PHP-powered discussion board. It is released under the GNU General Public License. Its primary goals are to be faster, smaller and less graphically intensive as compared to other discussion boards.
http://punbb.informer.com/

Simple Machines

Simple Machines Forum — SMF in short — is a free, professional grade software package that allows you to set up your own online community within minutes.
http://www.simplemachines.org/

Mailing Lists

phpList

phplist is an open-source newsletter manager. phplist is free to download, install and use, and is easy to integrate with any website.
http://www.phplist.com/

Dada Mail

Dada Mail is a completely contemporary, mature and intuitive web-based e-mail list management system, which runs on most any Unix-like hosting account that can run custom CGI scripts.
http://dadamailproject.com/

poMMo

poMMo is versatile mass mailing software. It can be used to add a mailing list to your Web site or to organize stand alone mailings. Unique Features such as the ability to mail subsets of your subscribers set it apart from alternatives.
http://pommo.org/

Photo Galleries

Zen Photo

Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. It’s got all the functionality and “features” you need, and nothing you don’t.
http://www.zenphoto.org/

Gallery

Gallery gives you an intuitive way to blend photo management seamlessly into your own website whether you’re running a small personal site or a large community site.
http://gallery.menalto.com/

Pixelpost

Pixelpost is an open-source, standards-compliant, multi-lingual, fully extensible photoblog application for the web.
http://www.pixelpost.org/

Piwigo

Piwigo is a photo gallery software for the web, built by an active community of users and developers. Extensions make Piwigo easily customizable. Icing on the cake, Piwigo is free and opensource.
http://piwigo.org/

Create a Cut-Out Type Effect in Adobe Photoshop

c.bavota — Tue, 13 Oct 2009 19:39:41 +0000

Photoshop is a great tool for creating simple yet impressive design effects with type. I don’t pretend to be an expert but I do know how to do a few things that look pretty awesome. Recently, one of my clients wanted me to create a logo that used a “cut-out” type technique for the company name. I was able to accomplish this simple effect with Photoshop in a few easy steps.

Here is a quick video that’ll show you how to do it.

Move
Close

Removing Images from a WordPress Post: Redux

c.bavota — Mon, 16 Feb 2009 17:03:47 +0000

I wanted to remove the images from a WordPress post to give me more control of how I could layout the design for the front page of a website. After doing some messing around and failing, I finally found a great post by Chris Shuld which had an amazing little piece of code that solved my problem. I just had to make a few modifications to it.


$content = get_the_content();
$postOutput = preg_replace('/]+./','', $content);
echo $postOutput;
?>