Tony Thomas http://anthonygthomas.com This is my blog. Tue, 09 Feb 2010 01:58:39 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Introducing the Baseline Development Wordpress Theme http://anthonygthomas.com/2010/02/08/introducing-the-baseline-development-wordpress-theme/ http://anthonygthomas.com/2010/02/08/introducing-the-baseline-development-wordpress-theme/#comments Tue, 09 Feb 2010 01:53:16 +0000 admin http://anthonygthomas.com/?p=233 I’ve come up with some habits that I’ve developed from building themes for Wordpress over the years. One, is to start with a nearly blank style sheet. I also like to hook in several JavaScript libraries and CSS frameworks from the start to take advantage of things like JQuery, Blueprint’s CSS reset and Superfish menus.

I’ve decided to build and release an XHTML 1.0 version and release it as a springboard for others who may want to take advantage of the same sets of tools. The theme isn’t much to look at (that’s the point), but it includes:

More information here.

If you want to use all of these tools, you’re all set. If you want to use a few, it’s just a matter of removing them from header.php.

First off, I really like Blueprint’s browser reset, so I wanted to include that here. I also like the flexibility the 960 Grid System offers in terms of column width. As a result, I’ve included them both.

9
10
11

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/960.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/print.css" type="text/css" media="print" />

If you don’t wish to use any of these, simply remove them from header.php. Next up is the Superfish CSS:

12

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/superfish/css/superfish.css" type="text/css" media="screen, projection" />

You must keep this if you’re using Superfish. If you’re not going to use Superfish, you should remove these lines too:

29
30
31
32
33
34
35
36
37
38

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/superfish/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/superfish/js/hoverIntent.js"></script>
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
        $('ul.sf-menu').superfish(); 
    }); 
 
</script>

Next is Blueprint’s Internet Explorer CSS reset:

13
14
15

<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif] -->

I’ve also had good like using the IE8 JavaScript library, so that’s included next:

17
18
19

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Then JQuery and JQuery UI libraries:

21
22

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>

That’s it. All the frameworks and libraries are loaded. If you don’t think you’ll need any one of them, you can just take them out. WARNING: The layout of the columns does rely on the 960 Grid System CSS file. If you take that out of the head the columns won’t work and you’ll break the layout.

Otherwise this should give you a good start that will allow you to take advantage of tons of cool JQuery stuff and leverages a very popular CSS Grid System for laying out columns. It should be easy to modify this theme to fit your own design.

Download the theme here.Similar Posts:

]]> http://anthonygthomas.com/2010/02/08/introducing-the-baseline-development-wordpress-theme/feed/ 0 Using Mind Mapping Software to Develop Data Models http://anthonygthomas.com/2010/01/08/using-mind-mapping-software-to-develop-data-models/ http://anthonygthomas.com/2010/01/08/using-mind-mapping-software-to-develop-data-models/#comments Fri, 08 Jan 2010 21:08:11 +0000 admin http://anthonygthomas.com/?p=217 I’ve been using mind mapping software recently to work out data models, with some success. The Mindmeister example below is a simple database of a few related tables.

Most folks who have done much work with relational databases won’t need a mind map for simple relationships like the example above where tables are simple has-many or belongs-to relationships. But, it can come in very handy for getting your head around has-and-belongs-to-many relationships where join tables are involved.

Similar Posts:

]]> http://anthonygthomas.com/2010/01/08/using-mind-mapping-software-to-develop-data-models/feed/ 0 Blueprint: Taking a Close Look at grid.css http://anthonygthomas.com/2009/11/09/blueprint-taking-a-close-look-at-grid-css/ http://anthonygthomas.com/2009/11/09/blueprint-taking-a-close-look-at-grid-css/#comments Tue, 10 Nov 2009 02:31:23 +0000 admin http://anthonygthomas.com/?p=191 About Blueprint

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

.container

18
19
20
21
22

/* A container should group all your columns. */
.container {
width: 950px;
margin: 0 auto;
}

container is where it all begins. This establishes your centered div with a width of 950 pixels. If you’ve done much CSS, this should look pretty familiar:

margin: 0 auto; /* This is what centers the div */

Not much else to say except all of your other columns should be inside a div with the container class. Let’s move on.

.showgrid

24

.showgrid { background: url(src/grid.png);  }

showgrid is a nice tool to display your columns when you’re laying out a page. Simply add it to the container div like so:

<div class="container showgrid">DIV contents</div>

Once you’re satisfied with how things are positioned, remove showgrid from your classes.

Let’s skip down to line 33 or so.

.span-x

33
34
35
36
37
38
39
40
41

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, 
div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, 
div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, 
div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, 
div.span-21, div.span-22, div.span-23, div.span-24 {
  float: left;
  margin-right: 10px; 
}

This just sets up your span-x columns to all float left. It’s a bit counter-intuitive, but this makes them all wrap around to the right of each other. It also sets up the 10 pixel margin to the right of each one for a nice gutter. That is, except for last. last is always the last column and forces any div with a span-x class to go below it. It also has no right margin:

44

div.last { margin-right: 0; }

Next the span-x widths are set:

46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/* Use these classes to set the width of a column. */
.span-1  { width: 30px; }
.span-2  { width: 70px; }
.span-3  { width: 110px; }
.span-4  { width: 150px; }
.span-5  { width: 190px; }
.span-6  { width: 230px; }
.span-7  { width: 270px; }
.span-8  { width: 310px; }
.span-9  { width: 350px; }
.span-10 { width: 390px; }
.span-11 { width: 430px; }
.span-12 { width: 470px; }
.span-13 { width: 510px; }
.span-14 { width: 550px; }
.span-15 { width: 590px; }
.span-16 { width: 630px; }
.span-17 { width: 670px; }
.span-18 { width: 710px; }
.span-19 { width: 750px; }
.span-20 { width: 790px; }
.span-21 { width: 830px; }
.span-22 { width: 870px; }
.span-23 { width: 910px; }
.span-24, div.span-24 { width: 950px; margin: 0; }

Notice above that span-24 takes up the full width with no right margin. Want a wider gutter than the pre-established 10 pixels? No problem.

.append-x

72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

/* Add these to a column to append empty cols. */
.append-1  { padding-right: 40px; }  
.append-2  { padding-right: 80px; } 
.append-3  { padding-right: 120px; } 
.append-4  { padding-right: 160px; } 
.append-5  { padding-right: 200px; } 
.append-6  { padding-right: 240px; } 
.append-7  { padding-right: 280px; } 
.append-8  { padding-right: 320px; } 
.append-9  { padding-right: 360px; } 
.append-10 { padding-right: 400px; } 
.append-11 { padding-right: 440px; } 
.append-12 { padding-right: 480px; } 
.append-13 { padding-right: 520px; } 
.append-14 { padding-right: 560px; } 
.append-15 { padding-right: 600px; } 
.append-16 { padding-right: 640px; } 
.append-17 { padding-right: 680px; } 
.append-18 { padding-right: 720px; } 
.append-19 { padding-right: 760px; } 
.append-20 { padding-right: 800px; } 
.append-21 { padding-right: 840px; } 
.append-22 { padding-right: 880px; } 
.append-23 { padding-right: 920px; }

Remember, each of the span-x columns are 30 pixels wide with a 10-pixel right margin. Likewise the above append-x classes will add an additional column to the right. Just do the math. span-1 adds 40 pixels. span-2, 80 pixels and so on. We can add columns to the left with the prepend classes in the same way.

.prepend-x

97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 40px; }  
.prepend-2  { padding-left: 80px; } 
.prepend-3  { padding-left: 120px; } 
.prepend-4  { padding-left: 160px; } 
.prepend-5  { padding-left: 200px; } 
.prepend-6  { padding-left: 240px; } 
.prepend-7  { padding-left: 280px; } 
.prepend-8  { padding-left: 320px; } 
.prepend-9  { padding-left: 360px; } 
.prepend-10 { padding-left: 400px; } 
.prepend-11 { padding-left: 440px; } 
.prepend-12 { padding-left: 480px; } 
.prepend-13 { padding-left: 520px; } 
.prepend-14 { padding-left: 560px; } 
.prepend-15 { padding-left: 600px; } 
.prepend-16 { padding-left: 640px; } 
.prepend-17 { padding-left: 680px; } 
.prepend-18 { padding-left: 720px; } 
.prepend-19 { padding-left: 760px; } 
.prepend-20 { padding-left: 800px; } 
.prepend-21 { padding-left: 840px; } 
.prepend-22 { padding-left: 880px; } 
.prepend-23 { padding-left: 920px; }

prepend-1 adds 40 pixels to the left of a column. prepend-2 adds 80 pixels and so on. As long as we’re talking about positioning, let’s skip ahead a little bit.

.push-x & .pull-x

138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */
 
.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }
 
.pull-1, .pull-2, .pull-3, 
.pull-4, .pull-5, .pull-5 {
  float:left;
	position:relative;
}
 
.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
 
.push-0, .push-1, .push-2, 
.push-3, .push-4, .push-5 { 
  float: right;
	position:relative;
}

pull-x and push-x function in a similar way to append-x and prepend-x, except they’ll actually push columns into one another instead of creating a wider gutter. push-1 pushes the page element over to the right by one, 40-pixel column. pull-1 pulls the page element over to the left by one 40-pixel column.

We skipped over some stuff. Let’s go back to it:

.border

123
124
125
126
127
128

/* Border on right hand side of a column. */
div.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

border adds a right-border to any page element. Notice the right padding, margin and 1-pixel border all add up to 10 pixels to maintain the standard 10-pixel gutter.

.colborder

colborder does the same except the right margin spans an entire column:

130
131
132
133
134
135

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}

The right padding, margin and 1-pixel border add up to 50 pixels this time.

.box

box creates a padded box inside a column.

170
171
172
173
174

.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}

hr

hr gets a nice default setting to make sure it crosses your column:

177
178
179
180
181
182
183
184
185
186
187
188
189
190

hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}

I’m actually going to skip to the end because the clearfix classes seem a bit outmoded after reading the article they are based on. Read this article instead.

.clear

clear simply forces a column to go beneath the column before it.

212

.clear { clear:both; }

That’s it. Hopefully reading this will give you a good sense of what positioning classes are available in Blueprint and how to use them. Please leave a comment if anything needs clarification.Similar Posts:

]]> http://anthonygthomas.com/2009/11/09/blueprint-taking-a-close-look-at-grid-css/feed/ 0 Michael Shermer’s TED Talk: Why People Believe Weird Things http://anthonygthomas.com/2009/11/09/michael-shermers-ted-talk-why-people-believe-weird-things/ http://anthonygthomas.com/2009/11/09/michael-shermers-ted-talk-why-people-believe-weird-things/#comments Mon, 09 Nov 2009 18:33:47 +0000 admin http://anthonygthomas.com/2009/11/09/michael-shermers-ted-talk-why-people-believe-weird-things/

Posted via email from Truetone

Similar Posts:

]]> http://anthonygthomas.com/2009/11/09/michael-shermers-ted-talk-why-people-believe-weird-things/feed/ 0 Change Into… http://anthonygthomas.com/2009/11/02/change-into/ http://anthonygthomas.com/2009/11/02/change-into/#comments Tue, 03 Nov 2009 02:57:29 +0000 admin http://anthonygthomas.com/2009/11/02/change-into/

Posted via email from Truetone

Similar Posts:

]]> http://anthonygthomas.com/2009/11/02/change-into/feed/ 0 Very Gradual Change (via @keeproductions) http://anthonygthomas.com/2009/11/02/very-gradual-change-via-keeproductions/ http://anthonygthomas.com/2009/11/02/very-gradual-change-via-keeproductions/#comments Tue, 03 Nov 2009 02:57:16 +0000 admin http://anthonygthomas.com/2009/11/02/very-gradual-change-via-keeproductions/

Posted via email from Truetone

Similar Posts:

]]> http://anthonygthomas.com/2009/11/02/very-gradual-change-via-keeproductions/feed/ 0 Out for Sushi for @eskelton’s Birthday http://anthonygthomas.com/2009/10/30/out-for-sushi-for-eskeltons-birthday/ http://anthonygthomas.com/2009/10/30/out-for-sushi-for-eskeltons-birthday/#comments Sat, 31 Oct 2009 00:03:57 +0000 admin http://anthonygthomas.com/2009/10/30/out-for-sushi-for-eskeltons-birthday/

– Sent from my Palm Pre

Posted via email from Truetone

Similar Posts:

]]> http://anthonygthomas.com/2009/10/30/out-for-sushi-for-eskeltons-birthday/feed/ 0 How to Become a Hacker http://anthonygthomas.com/2009/10/29/how-to-become-a-hacker/ http://anthonygthomas.com/2009/10/29/how-to-become-a-hacker/#comments Thu, 29 Oct 2009 20:38:20 +0000 admin http://anthonygthomas.com/2009/10/29/how-to-become-a-hacker/ How to Become a Hacker.

Hackers solve problems and build things, and they believe in freedom and voluntary mutual help. To be accepted as a hacker, you have to behave as though you have this kind of attitude yourself. And to behave as though you have the attitude, you have to really believe the attitude.

This reminds me of a high school friend who once told me, "Punk isn't a kind of music, it's an attitude." Whatever dude.

Posted via email from Truetone

Similar Posts:

]]> http://anthonygthomas.com/2009/10/29/how-to-become-a-hacker/feed/ 0 Social Sites Infographic http://anthonygthomas.com/2009/10/29/social-sites-infographic/ http://anthonygthomas.com/2009/10/29/social-sites-infographic/#comments Thu, 29 Oct 2009 20:26:24 +0000 admin http://anthonygthomas.com/2009/10/29/social-sites-infographic/

Posted via email from Truetone

Similar Posts:

]]> http://anthonygthomas.com/2009/10/29/social-sites-infographic/feed/ 0 Hey Jude http://anthonygthomas.com/2009/10/29/hey-jude/ http://anthonygthomas.com/2009/10/29/hey-jude/#comments Thu, 29 Oct 2009 17:48:55 +0000 admin http://anthonygthomas.com/2009/10/29/hey-jude/

Posted via email from Truetone

Similar Posts:

]]> http://anthonygthomas.com/2009/10/29/hey-jude/feed/ 0