AS3 Blog about Actionscript, Wordpress and other gems

I have been using the 960 Grid System CSS Framework , 960px frame divided into 12 or 16 columns, as for the kind of websites I work on (large graphics, less text) the pixel based layout is suitable. After I did about 10-20 sites using this framework I started realising that the time it saves me when creating the layout, at the end of the day I spend extra when making tweaks to the site (and there always are tweaks) and I did revert back to using custom templates based on my specific needs. I did create a “website” template composed just from the very basic elements I keep using again and again.

Now after 2 years of building sites from my website templates, messing, adding and removing stuff I came to a simplified version (site structure, xhtml, css, jquery, swfobject) which you can download for free just below.

I am still using a css reset from 960.gs, and the main css template which saves me most of time looks like this:

/* CSS Document 2010 Moonpixel http://moonpixel.com */
/*=================MAIN START==============*/
 
.tt1 {background:#FF0000;}
.tt2 {background:#FF00FF;}
.tt3 {background:#FFFF00;}
 
html { }
 
body {font: 13px/1.5 Myriad, Arial, sans-serif; background:url(../_images/bck2.jpg) 50% 0 repeat-x;}
 
a:focus {outline: 1px dotted invert;}
 
a:link {color:#000; text-decoration:none;}
a:visited {color:#000; text-decoration:none;}
a:hover {color:#000; text-decoration:none;}
a:active {color:#000; text-decoration:none;}
 
#footer a:link {color:#666; text-decoration:none;}
#footer a:visited {color:#666; text-decoration:none;}
#footer a:hover {color:#666; text-decoration:none;}
#footer a:active {color:#666; text-decoration:none;}
 
hr {border-color: #ccc; border-style: solid; border-width: 1px 0 0; clear: both; height: 0;}
 
p { }
sup {position: relative;top: -3px;vertical-align: top;font-size: 80%;}
sub {position: relative;bottom: -5px;vertical-align: top;font-size: 80%;}
 
h1 {font-size: 25px;}
h2 {font-size: 23px;}
h3 {font-size: 21px;}
h4 {font-size: 19px;}
h5 {font-size: 17px;}
h6 {font-size: 15px;}
 
.xxsmall {font-size: 10px;}
.xsmall {font-size: 12px;}
.small {font-size: 14px;}
.medium {font-size: 16px;}
.large {font-size: 22px;}
.xlarge {font-size: 26px;}
.xxlarge {font-size: 32px;}
 
ol {list-style: decimal;}
ul {list-style: square;}
li {margin-left: 30px;}
 
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {margin-bottom: 20px;}
 
#wrapper {overflow:hidden; width:960px; margin:20px auto;}
 
html body * span.clear,html body * div.clear,html body * li.clear,html body * dd.clear{background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0}
 
.margin-left {margin-left:20px;}
.margin-right {margin-right:20px;}
.margin-top {margin-top:20px;}
.margin-bottom {margin-bottom:20px;}
.margin-left-half {margin-left:10px;}
.margin-right-half {margin-right:10px;}
.margin-top-half {margin-top:10px;}
.margin-bottom-half {margin-bottom:10px;}
.margin-bottom-none {margin-bottom:0;}
 
img.centered {display:block;margin-left:auto;margin-right:auto;}
img.alignright {display: inline;}
img.alignleft {display: inline;}
.alignright {float:right;}
.alignleft {float:left;}
 
.bold {font-weight:bold;}
.italic {font-style:italic;}
.text-left {text-align:left;}
.text-right {text-align:right;}
.uppercase {text-transform:uppercase;}
 
/*=================MAIN END==============*/
 
/*=================HEADER START==============*/
 
#header {width:960px;float:left;}
 
/*=================HEADER END==============*/
 
/*=================CONTENT START==============*/
 
#content {width:960px;float:left;}
 
/*======LEFT COLUMN START======*/
 
#left-column {width:160px;float:left;}
 
#menu-sub {float:left;}
#menu-sub ul {list-style:none;} 
#menu-sub ul li {font-size:16px;}
 
/*======LEFT COLUMN END======*/
 
/*======MAIN COLUMN START======*/
 
#main-column {width:640px;float:left;}
 
/*======MAIN COLUMN END======*/
 
 
/*======RIGHT COLUMN START======*/
 
#right-column {width:160px;float:left;}
 
/*======RIGHT COLUMN END======*/
 
/*=================CONTENT END==============*/
 
/*=================FOOTER START==============*/
 
#footer {width:960px;float:left;text-align:center;color:#666;}
 
/*=================FOOTER END==============*/

• Custom Facebook Fan Page - Simple Steps Creating a custom designed facebook fan page using the Static FBML app: Log into your FB account and go to http://www.facebook.com/pages/manage/. Click + Create Page Select category, give it a name, create the page Go to http://www.facebook.com/apps/application.php?id=4949752878 Click Add to my page Select the page you have just created Click......
• Resize Text Field - AS3 Draggable Resizable Input Text Field Draggable, resizable Input Text Field with Actionscript 3. Text Field gets resized in particular direction by dragging one of its corner handles. [SWF]http://swf.moonpixel.com/091217-resizeable-input.swf, 300, 200[/SWF] package { import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFieldType; import flash.events.MouseEvent; import flash.utils.Timer; import flash.events.TimerEvent; public class ResizableTextField extends Sprite { private var textCustomField:TextField; //handles private......
• Flash - Add Path to Your Classes - AS3 Classpath When using Flash regularly, as with any other software, there are tasks repeating in many projects over and over again. To speed up this process, it just makes sense creating your own classes and functions and having them available for all projects to use. So how do we do this?......
• Flexible CSS - Combining Classes vs Descendant Selectors Separating semantic and presentational code is a great idea, however sometimes it's worth not going 100% by the book. For content like text and images I am finding, that a bit more HTML (XHTML) markup can save lots of time in the long run. For example a floated image and......
• Webdesign in Plain English ? Lately I've been looking into some EU legal stuff on the internet and I must admit it took me ages to get my head around certain things. As if all the information was intended only for the insiders and everyone else needs to take a law course to be able......

• Gamma Color Love Cup Ball Holder, Clear User Reviews Send this to a friend Gamma Color Love Cup Ball Holder, Clear Manufacturer: Gamma Customer Rating: List Price: $3.99 Sale Price: $3.99 Availibility: Usually ships in 24 hours Free Shipping Available Buy Now Product Description New semi-transparent colored Love Cups. One-piece design for added durability. Red, Green,......
• Breaking Categories into Columns Now, I'll tell you about a Wordpress hack by which you can break categories into columns as shown below: Normally when the list of categories is displayed in the sidebar or on any part of the theme, it displays in a single column. Through the following hack, you can split......
• Practical Tips For A Good Website Online businesses abounds the World Wide Web these days. Some who are very successful easily realize 6 figure profits while other are just managing to barely exist. One would wonder what could have caused this situation. Success of an online business could be attributed to the business acumen of the......
• Small Business Coaching #af-form-1221758521 .af-body .af-textWrap{width:98%;display:block;float:none;} #af-form-1221758521 .af-body .privacyPolicy{color:#333333;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-body a{color:#8A0303;text-decoration:underline;font-style:normal;font-weight:normal;} #af-form-1221758521 .af-body input.text, #af-form-1221758521 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-body input.text:focus, #af-form-1221758521 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;} #af-form-1221758521 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#333333;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-body{padding-bottom:15px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#333333;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-footer{padding-right:15px;padding-left:15px;background-color:#transparent;border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#333333;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-header{padding-bottom:40px;padding-top:6px;padding-right:10px;padding-left:100px;background-color:transparent;background-repeat:no-repeat;background-position:inherit;background-image:url("http://forms.aweber.com/images/forms/dollar-sign/silvr-red/header.png");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#FFFFFF;font-size:24px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;} #af-form-1221758521 .af-quirksMode{padding-right:15px;padding-left:15px;} #af-form-1221758521 .af-standards .af-element{padding-right:15px;padding-left:15px;} #af-form-1221758521 .bodyText p{margin:1em 0;} #af-form-1221758521......
• Five Minute Pick-me-ups This is going to be an ongoing post that I will update as I think of other things. There are times when you want to tweak your look. Maybe you just don't like the colors you chose. Maybe you feel you look tired -- or old! Pick one or two......

Tags: css, css framework, css html template download, css template, css xhtml template download

This entry was posted on Saturday, May 22nd, 2010 at 8:51 pm and is filed under css, webdesign. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.