CSS Tutorials - CSSHelper.net

Flutter, the “ultimate wordpress CMS” updated

You use Wordpress as a CMS right? And you probably love it, after all what is not to love? It is simple, easy to install, has a huge community base, thousands of plugins and themes… and 2.7’s interface is simply… stunning.

Wordpress is not perfect as a CMS however, and can you blame it? It was designed to be a blogging platform. They must have done something right if Wordpress started as a blogging platform that simply works so well as a CMS.

This could all be part of the past now that Flutter has arrived. Wordpress could easily be a fully extendable CMS with one of the best blogging platforms integrated into it. So many of the minor pitfalls wordpress previously had as a CMS are now gone.

Flutter is not a new plug in by any means. Released around wordpress 2.5, it has had time to pick up a little bit of steam. It seams it never really caught on because despite it’s useful benefits it was confusing and difficult to install and maintain. To wordpresses recent credit, it didn’t solve some of the more confusing “blog focused interface” that 2.5 and 2.6 still had.

However now coupled with 2.7 and a new release of flutter you can now create an amazing full fledged CMS capable of almost anything you can think of.

More About Flutter

Flutter was designed to combat two major issues that Wordpress has when being used to administer and power web sites rather than blogs. Dealing with content that was more than just self formated text and photos, and an easy way to edit complex pages.

Custom Content Types

A typical example could be pages for the biographies of individuals. These pages likely have a specific format that all of them should adhere to. Name, Title, Skills, etc… Previously with Wordpress you would create a blank page for each and have to try your best not to accidentally mess up the format. Of course you could try using the custom fields, but try explaining those to a client with out having their eyes glass over.

Now days you had better count on the fact that websites are going to be complicated enough where the simple homepage / innerpage templates are not going to be substantial. Websites will have different content types, a home listing, biography, portfolio page, etc… Flutter allows you to create custom write panels for different types of content. The write panels can have text fields, radio buttons, pictures, drop downs, etc… allowing the user to create a page exactly how they want it with out hassel or vast technical knowledge.

Edit in Place

The other example might be managing and editing pages that have both unique sidebar content and primary content. Before you would have to create a page for the sidebar, use a custom template to include that post into the sidebar before finally trying to teach a client how it all works. Very complicated right? Well it doesn’t have to be.

Flutter also lets you specifcy editable regions of a page, like the main content, title, or sidebar. Using a bit of AJAX magic useres who are logged in can navigate to the page they wish to edit through the front end, click an edit button, and begin to edit that section with out even leaving the page.

This makes the CMS almost transparent. Your typical client is more familiar with the web from a users perspective, and this allows them to edit and manage pages the way they are most comfortable.

Slightly Complicated

While the usage and learning curve of flutter has improved, you should still expect to spend an ample amount of time your first attempt at using this plugin. The documentation while available, is sparce at best (not that you can really blame the developers, who are giving the plugin for free.)

The learning curve is well worth it. You can easily expect to save more time than you spend in reduced phone calls and e-mails regarding how to perform specific functions, tasks, or edits in Wordpress.

8 methods to bring your front end coding to rockstar levels

There are a lot of good front end developers out their right now. If you fancy yourself as a front end editor then you really should be looking at how you can differentiate yourself from the rest. Yes there are lots of “good” front end developers, but there are not a whole lot of excellent front end developers.

1. Improve Your Semantic Names

If you work in a team or ever revisit your code and need to update it then you should think about the quality of your class and ID names. It is not uncommon for developers to use class names like “box”, “wrapper”, or “container.” While you may think that these naming conventions or “semanitc enough” none of them describe the content that is inside them. Instead consider using HTML5 spec’s such as “content-sub”, “section”, “content-aside” or “content-sup.”

You and your team will have a much easier time sorting through code that describes the content than trying to remember the details of “box.”

Read more about semantic naming from Andy Clarke and A List Apart.

2. Improve the Organization of Your Files

I think it is reasonable safe to assume that most developers have at least started to organize their files by type (ie: a folder for images, css, javascript, etc…). You can go a step further and improve the organization even more, particularly any folder that is going to have a lot of files (such as Images in particular and CSS as a secondary.)

I find it best to create sub folders with in images and separate images based on design structure, buttons, headlines, photos, etc…

There are plenty of other folders you may want to create to keep the updating and growth of a site easy and efficient, including:

Documents
Client files
Copy
Proofs
Staged/Development area (folder for a “clone of the site” where you can make changes and get sign off)
Downloads

The Elements CSS Framework does a great job of organizing files based on the normal client/provider workflow.

3. Use Commenting in Your XHTML

Any time you end up developing complex layouts you are bound to use a lot of <div>s in your markup. This can be particularly confusing to go back and edit as it becomes hard to figure out which div is being closed where. You may see three </div>s all in a row.

To combat this simply add some coments at each </div> (or any other closing element if you find that it will be helpful) to let you know what element was just closed.


     <div id="header" class="section">
          <div id="header-logo">
               <h1>HTMLiZER</h1>
          </div><!--/#header-logo-->
     </div><!--/#header-->

If you find it useful you can take it one step further and comment the primary area you would be editing (such as the main content area, sidebar, etc…)

4. Segment Your CSS

For small 4 - 5 page brochure sites your CSS will be pretty manageable even if you don’t spend the time and effort you should into organizing and commenting. Once you start developing web applications or large sites with a vast array of design “modules” you should make sure that you organize your CSS in way that is easy to manage.

I recommend splitting your css into logical different files for better organization, such as:

reset.css
main.css
structure.css
typography.css
print.css
helpers.css

This way you don’t have to sort through all of the typography styling to find the area where you defined the size of the header. Likewise if you want to adjust the headings it is pretty simple to find it through a small typography.css file rather than a huge file that has everything.

5. Create a TOC With Comments in Your CSS

Every CSS file you plan on editing and extending over time should have a table of contents at the begining and a headline seperator at every section. This will allow you to easily jump to a section using “find” rather than scrolling for that one area that had the CSS you are hoping to modify.

/***********

TOC:

=1: Header
=2: Content
=3: Footer
=4: Navigation
=5: Portfolio

****************/

/* ********* =1: HEADER *********** */

#header { … }

6. Compress and Combine Your CSS files

Even though it is easier to work on a site when you segment and organize your css into several different file names, it actually causes your site to load slower. The more calls the browser has to make to the server for additional files the slower it will load.

Before deploying your css files you should combine and compress them. Compressing them removes any uncessary whitespace, comments, etc… that is unnecissary when the site is live.

There are several handy tools to do this including this online version.

7. Create your own framework (or improve on another one)

As you get more experience under your belt you will find that you use the same methods and naming conventions over and over. This is helpful for several reasons and it should be encouraged. It has lots of benefits including:

More consistant rendering due to reusing ideal CSS techniques
Easier editing and maintenance as you can better recall what names mean
The start of code that can be saved and reused every time

Chances are that you end up rewriting the same type of code over and over again, simply because you don’t have it stored somewhere. Some examples may be:

A class that floats an image left / right and gives it some margin
The structure for an unordered list navigation
The structure for a form
external link, pdf and download icons
clearfix
png fix
Typeography baselines and hierarchies
etc…

Rather than reusing these bits of codes write modules into your own CSS framework (or you could imrpove on another one). This way you can streamline the development process so it takes less time and improve the consistancy of your work.

8. Develop your CSS to be modular or “object oriented”

You could assign every bit of code an unique ID or adjust the margins and padding per instance. Lots of coders do this to try and get the CSS as close to the designers comp as possible. However this is inefficient in development time and file size. Establish a set rule for differnt types of content and how they should be styled, this should include basic things such as:

Font sizing (all normal text is 12px, featured text is 14px bold)
Margin’s (normal margin is 10px between elements, margin between two content blocks is 40px, etc…)
All navigation tabs will have 15px height and 13px font
etc…

This way you don’t have to rewrite the code for every new item added to the site. Additionally it will keep the site feeling consistant and well balanced visually. If all elements and every page follows the same rhythm it will feel more unified as a whole.

Some call this object oriented css, it is worth looking into for rockstar like front end coding.

Engaging Readers, Design Your Way to More Blog Comments

You have probably read the studies that claim on average, 1% of online users actually contribute and create content on a given website. The rest are perfectly happy reading your posts, forming their own opinions, and moving on to the next blog with out ever actually leaving any sort of feedback. This makes sense of course, we don’t always have time to leave our thoughts on blogs, or many times it doesn’t even seem worth the effort. After all you have to formalize your thoughts, actually write them out, review, edit, post, and then monitor for responses.

It actually is a lot more involved than we probably realize.

It is also a lot more important to get this type of reader interaction than we probably realize. The amount of interaction generated through a blog is an easy indicator of it’s success. Not only for the blog owner, but also to other readers. Consider looking at two blogs with similar content, one with an average of 10 - 20 responses where the other only has 1 - 3.

I hate to say it, but most people would subscribe to the blog that is generating more interest and response, even if the content was of similar quality.

How Design Can Encourage More Blog Commenting

When people blog about “design” in regards to websites many times they are primarily referring to the asthetic quality of a site. While the aesthetic quality of a site can have a large impact on how many people put in the effort to comment on a blog, I want to approach the situation at a higher level.

Consider that the definition of design is “to assign in thought or intention; purpose.”

Design is not just making pretty visuals, but to craft your site with specific thought, intention and purpose. So the question then becomes, how can we build the site with the intention of encouraging users to leave comments.

Create an Incentive or Reward

The primary reason anyone is going to leave a comment on a blog is they believe that their will be some pay off that is worth their time to formulate their response, edit it, etc… In most cases it is because they have a feeling about the content to the point where they feel the need to get their thoughts off of their chest, or maybe the author is well known enough where the idea of talking with them would be the reward.

However not all blog posts will have content compelling enough, or an author well known enough to create the incentive and reward with those elements alone.

Highlight Your Commenters

Smart marketers have found that the higher that you can appeal on Maslow’s hierarchy of needs, the better success you will have reaching your audience. By highlighting those who really participate you are appealing to the need of “esteem.”

You could do this by:

Making a post about them every once in a while
Having a top commenters widget
Use gravitars

Give Your Commenters a Bonus

I have seen great response to giving the top commenters some sort of bonus. Widgets that keep track of who has commented the most make this an easy endeavor to track and monitor.

Some of the more common methods could be:

Giving the top commenters a dofollow link
Giving top commenters profile/link on the home page
Giving top commenters a special design when they do comment, do occasional giveaways, etc…
Use the dofollow plugin, so high quality commenters can get some SEO value from contributing.

Use Design and Visuals to Engage Users

While I have talked about “design” in terms of designing an experience or functionality, I haven’t addressed the actual visuals of a design and how it can improve the amount of user interaction.

If you pay enough attention to the design and visuals of your comments, you can catch the attention of users and encourage them to leave a comment.

Make Your Comment Area Eye Catching and Interesting

As a users gets closer to the bottom of an article or post, you can bet that they have either scrolled past or lost focus of most of the visual elements on the page. This presents an excellent opportunity to draw their eye to the comment area by just adding a little bit of flair, tension, or contrast to develop some visual interest.

Want to really get some attention? Consider using custom designed form fields (not too custom as to hinder user experience).

Be Suggestive

Suggest that a user leave a comment where ever you can! At the start of the comments create a link to add a comment. You could even go so far as adding a “reply” button/link at every comment in the list.

Additionally this will make it easy to comment, as users won’t have to hunt for the add comment link.

Highlight the Commenters

People leave comments because they want people to read their opinion (even if it is just the author). Make sure that the users name/link has enough visual emphasis. This will help establish that the commenter will get the recognition that they are seaking.

Again, use Gravitars. Users who have gone so far as creating a gravitar will appreciate being able to show their branding on another blog and are more likely to comment because of it.

Any Experiences or Tips?

These are some of the best methods I have come across, if you have any experiences, tips, or other ideas on how to encourage more users to participate through the design of your blog/website feel free to leave a comment with your thoughts.

12 Creative and Cool Uses for the CSS Border Property

random art using the CSS border property

If CSS properties attended high school, you would never expect to see the border property sitting at the cool kids’ table. Sure, it’s a useful property and all — as long as you’re looking accentuate the boxiness of a design, right?

Actually, you’d be surprised at just how cool the border property can be. Please take the following dozen exhibits as proof that the CSS border property is a lot cooler than we give it credit for.

Jazzing Up Anchors

I’ve written here before about jazzing up anchor tags by changing the color, removing the underline, and adding background images. But border can be a great way to add a bit of visual style to your anchors without adding that great bit of accessibility that the underline provides. For example, CSS Newbie’s article links are currently styled with a dotted border, like so:

.entry a {
	color: #253c93;
	text-decoration: none;
	border-bottom: 1px dotted #253c93; }
.entry a:hover {
	border-bottom: 1px solid #253c93; }

That gives me a nice dotted border that turns solid when the user hovers over the link. All sorts of style and accessibility without that so-’90s underline.

Build a Postage Stamp

A while back, I ran across a cool little technique for faking a postage stamp using the CSS border property. The original link seems to have been lost from the web, but here’s the basic technique, in XHTML:

<div class="stamp">
	<p>99&cent;</p>
</div>

And CSS:

.stamp {
	width: 500px;
	height: 414px;
	background: #fff url(george.jpg) no-repeat;
	border: 12px dashed #1b1a19; }
.stamp p {
	color: #fff;
	margin: 10px 10px 0 0;
	font: bold 60px Georgia, "Times New Roman", Times, serif;
	text-align: right; }

Now, you could obviously take this even further with a bit of skill and a degree in something other than Rhetoric, but I think you get the idea. You can see the example live here.

Prettier Images

Borders are a great way to make your excellent images stand out even more. I wrote an article on the subject a while back, but here’s the basic idea:

img.photo {
	border: 1px solid #999;
	background-color: #fcfcfc;
	padding: 4px;}

You can see a similar technique used on CSS Newbie’s current design around all of the images in the articles, as well as the ads in the sidebar. As you can see, the technique can be subtle but visually pleasing if used properly.

Homemade Coupons

If you’re ever required to design an online coupon, you needn’t turn straight to Photoshop or the like. You can craft a coupon easily with just a bit of CSS:

.coupon {
	width: 250px;
	padding: 10px;
	text-align: center;
	border: 3px dashed #ccc; }

Just that speck of code gives me a nice coupon that looks something like this:

You’ll have your readers printing and clipping in no time.

Better Blockquotes

CSS blockquote

Blockquotes are often useful, seldom used. But if you have a website that often refers to the words of others, a well-styled blockquote will go a long way towards impressing your readers with your borrowed prose:

blockquote {
	margin: 1em 3em;
	color: #999;
	border-left: 2px solid #999;
	padding-left: 1em; }

Just a touch of code, and voila… instant credibility!

Hunt Archaic Code

If you ever take over a website (or perhaps built a website) that is still using the Code of Yesteryear, consider turning to CSS and the border property for help hunting down bits of HTML soup that could use a bit less seasoning:

font, center, s, u, b, i {
	color: #000;
	font-weight: bold;
	background-color: #f99;
	border: 3px solid #c00; }

For more information on this useful technique, see my article on finding deprecated elements with diagnostic CSS highlighting. It just might save your life someday. But I doubt it.

Round the Bend

So far, all of our techniques have had one thing in common: boxy edges. But if you’re using a browser developed within the last five or so years (read: not IE6), you’re not limited to those same old dull right angles. This article from last August shows us that CSS3 offers us a way of breaking out of — or at least bending the corners of — the CSS box:

div.rounded {
	background-color: #666;
	color: #fff;
	font-weight: bold;
	padding: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }

The border-radius properties allow us to round the corners of elements without having to resort to images. Cool indeed!

Angle it In

Of course, not all angles are bad angles… if used properly. Way back in the day, CSS guru Eric Meyer pointed out a way to use borders to create some pretty wicked angles. If you’d like to learn more about this technique, his site is a great place to start.

CSS Drawings

And now for a bit of fun! The following excellent (and cool) examples are all drawn using the CSS border property.

This functional LCD-style digital clock was built using CSS borders to create the lines of the LCD. Check out tanfa.co.uk to see it in action!

There’s something very pop-art about this CSS skyline. It leans heavily on the border property to create the buildings and windows.

Here’s a random art generator that combines HTML, JavaScript, and the CSS border property to create random examples of modern art. If you hit the “update” button long enough, you’re bound to find something worthy of hanging on your (cubicle?) wall.

Christopher Hester is a man with fantastic CSS skill, incalculable patience, and presumably no girlfriend — at least until he started impressing the ladies with this house he built with the CSS border property. And be sure to check out his second CSS house, which he built using background colors and approximately 50 gazillion non-semantic divs.

If you know of any other fantastic uses for the CSS border property, be sure to mention them in the comments!

6 Reasons Not To Use AJAX … And 6 Reasons Why You Should

Having to go through tons of sumbmissions for the CSS Vault Gallery over the past few years, I have noticed a definite increase in the amount of sites that use AJAX or some form of JavaScript. There seems to be a trend where even simple 5-page websites use JavaScript to some extent, in an attempt to generate additional interest on the viewer. Sometimes they are entirely unnecessary, and there are cases when the presence of AJAX only serves to annoy or encumber the user.

AJAX technology must then be used only when necessary. I have come up with a list of reasons for this purpose.

DO NOT USE AJAX when …

You plan to bombard the user with fancy effects. It will cause the viewer to suffer from migraines.
Your website can live without it
Your target audience consists of elderly or disabled people.
You are working on a login page. AJAX will essentially renders password managers useless.
You need specific pages or content to be bookmarkable.
Your users need to use the browser’s back button or history feature.

DO USE AJAX when …

You plan to use it on a web based application.
You plan to add support for non JavaScript-enabled browsers.
Your target audience consists of tech savvy users.
You are creating a tool or a widget that will be used on another site.
You need to conserve bandwidth - AJAX allows you to refresh specific content without having to load the entire page.
Certain tasks will be finished much faster with AJAX.

Free Css Menus: Free Buttons, Menus & CSS Images Rollovers.

Free CSS Menus. For Quality Css rollover menus, buttons and image … Upload CSS. Latest Website Templates: Stylish Blue CS… 21 Feb, 2009. Reflection Web …

Free Templates | Free Word Press Theme | HTML Tutorial

Download Free Templates, free WP theme, Icon, Button from our Collection. Also learn How to write HTML CSS Code. … Css Templates Electric free templates …

Dynamic Drive CSS Library- Bold CSS Buttons

CSS Links

<STYLE type=”text/css”> 1. Push Link Button. 2. Choose: Text Decoration. Cursor Style. Color. 3. Push Close Tag. 4. Push Hover Button. 5. Repeat #2 and #3 …