Build Custom Frameworks Easily with CSS Classes
Build Custom Frameworks Easily with CSS Classes
|
|
CSS Frameworks are overkill for all but the most complex projects. … My Bad Attitude ” Build Custom Frameworks Easily with CSS Classes said: …
Similar Posts
Build Custom Frameworks Easily with CSS Classes
Generally speaking, I consider full-fledged CSS frameworks to be overkill on all but the most absolutely complex projects or, on the other end of the spectrum, rapid proof-of-concept prototyping. Most people only use a few of the classes that any one CSS framework provides, but then still require their users to download the entire, and largely unused, stylesheet.
However, I still think that the foundation on which CSS frameworks are built — the concept of using classes to simplify layout and standardize design across similar elements — is very much worth investigation. But instead of relying on a one-size-fits-all (snuggie-esque?) solution, I’d encourage you to take a few minutes and build a custom, simplified framework that does exactly what you need it to do.
The Back Story
I recently built a website based on a fairly regular, consistent grid. The content area was 780px wide and would contain six “columns” of content with 12-pixel gutters between each of the columns, though various elements could span one or more of those columns.
Because of the general flexibility of the content combined with the rigidity of the columnar structure, my mind immediately jumped to frameworks as a way to get this design pushed out in a hurry. But in the end, I just couldn’t justify all that overhead, even to create a flexible six-column design. So instead, I decided to write my own mini-framework to do only what I needed.
The Custom Framework
Here’s the basic CSS I ended up writing:
.col {
float: left; }
.gutter {
margin-right: 12px; }
.span1 {
width: 120px; }
.span2 {
width: 252px; }
.span3 {
width: 384px; }
.span4 {
width: 516px; }
.span5 {
width: 648px; }
.span6 {
width: 780px; }
.clear {
clear: left; }
Pretty simple stuff, right? All it contains is nine classes that I can arbitrarily assign to my structural divs to determine how the page will lay out. The first class, “col”, gets assigned to any div I want to behave like a column.
Then each column is given one of the “span” classes (using the benefit of multiple CSS classes to great effect) to determine its width — or as I thought of it at the time, the number of columns the div would span… just like using “colspan” in old-school table layouts.
Next up we have the “gutter” class, which I add to any column that should have a gutter along its right edge (which would be true for all columns except those along the very right edge of my content area). And finally, there’s a “clear” class, just to ensure that my divs behave themselves even if I didn’t entirely fill up the previous “row” of divs.
The XHTML Structure
There’s not much to the XHMTL structure for my custom framework. Essentially, it’s a bunch of divs given two or more of my nine classes to determine its behavior. For example, to create the 4-2/2-1-3 structure I highlighted in the image above, this would be the structure:
<div class="col span4 gutter">Four columns</div> <div class="col span2">Two columns here</div> <div class="col span2 gutter">Two cols and a gutter</div> <div class="col span1 gutter">Only 120px!</div> <div class="col span3">Three columns.</div>
If you’d like to see this sort of custom framework in action, it’s running on the website for the Woodsmith Shop TV show.
One Size Doesn’t Fit All
Now, I’m not saying my framework is the end-all CSS framework and that you should just copy it wholesale into your own project and expect it to work perfectly. The idea here is to take this concept and come up with a custom framework that works perfectly for your needs.
The real take-away lesson here is that for most projects, you don’t need dozens of classes and hundreds of lines of CSS just to create a flexible grid structure. I created mine with just nine CSS classes and it was sufficient to power my six-column grid. I’d be interested to see what other people (namely, you) have come up with along these same lines. Share a link in the comments!
jessett.com | css | creating custom scroll bars
Creating custom scroll bars for Internet Explorer using css … css classes. borders. link styles. images as bullet points. first letter/line. custom scroll bars …Running jQuery with Other Frameworks Via noConflict
While jQuery is certainly a popular JavaScript framework, it’s by no means the only game in town. Other frameworks such as Prototype, MooTools, Dojo and many others all have their own strengths, weaknesses, and devoted groupies.
Generally speaking, these frameworks all play well together — you can mix and match framework functionality to your heart’s content, as long as you don’t mind the additional overhead of loading several libraries simultaneously. So you have a calendar widget in jQuery that you love, but you’re already using Prototype to animate your navigation bar? Don’t be shy… use both!
Of course, every once in a while you can run in to problems when combining JS frameworks — particularly (in my experience) when combining jQuery and Prototype. Luckily, jQuery was kind enough to provide us with a workaround.
The Problem: Sharing Syntax
The most common compatibility problem stems from both jQuery and Prototype using the same shortcut syntax: namely, the $().doSomething syntax. Here’s a sample line of code in jQuery:
$('#myelement').addClass('active');
And the same functionality in Prototype:
$('myelement').addClassName('active');
Note the basic similarity? Both frameworks claim the dollar sign notation for themselves, which can wreak havoc on snippets of code dropped willy-nilly into a website. If your jQuery code is grabbed up by Prototype, things will stop working fast. And similarly, if your Prototype code is snagged by jQuery, not even the awesome power of jQuery will be enough to overcome the code confusion.
The Solution: noConflict Mode
But not to worry! jQuery has provided us with a workaround called “noConflict mode.”
By default, there are two equally correct ways to call a jQuery function — the dollar sign notation, and “jQuery” notation:
$('#myelement').show();
jQuery('#myelement').show();
Both of the lines above do exactly the same thing. However, most people use and prefer the dollar sign notation. Why? Probably because it’s shorter, and if web developers didn’t care about brevity in their code, they probably wouldn’t have used a framework in the first place.
Of course, just using the longer jQuery notation isn’t enough. If jQuery has already claimed the dollar sign for itself, any Prototype functionality relying on that notation will still be grabbed by jQuery.
This is where the noConflict function comes in handy. Simply run the following line after both Prototype and jQuery have been loaded:
jQuery.noConflict();
This will cause jQuery to give up the dollar-sign notation, allowing the other library to take it over. And you can still use your jQuery snippet, provided you change all instances of $() to jQuery().
Keeping it Short
The noConflict mode does have one other bit of functionality that I’ve found useful in some of my projects: you can select a different variable to use instead of the standard “jQuery”. The usage looks like this:
var $j = jQuery.noConflict();
Now in addition to using the default jQuery() notation, I can also use the shorter $j() notation. This allows me to avoid running into problems with other frameworks, while still enjoying almost the same conciseness in my code.
CSS Menu Builder (version: 1.0) by "WebSite Secrets101"
Build Roll-over CSS Menus Quickly and Easily by doing just point and click … License for Visual Menu Maker. Visual Menu Maker is an intuitive wizard …Specifying Custom CSS Styles Inline
Specifying Custom CSS Styles Inline. Previous. Next … In Custom CSS, Inline, enter the custom CSS styles you want to override. …Custom Scrollbar Using CSS in Flex | Axelology
Creating a custom scrollbar in flex … 5 users commented in ” Custom Scroll Bar Using CSS ” Follow-up comment rss or Leave a Trackback …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.