7 replies [Last post]
kraftpress
kraftpress's picture
Offline
newbie
Last seen: 10 years 3 weeks ago
Timezone: GMT+5.5
Joined: 2012-01-06
Posts: 1
Points: 2

Download the Framework

You can download the framework from
[snip link--provide plain text version. not everyone has a safe environment in which to open untrusted zip files. ~gt]

You can download and use the framework freely in your own projects.

But don't forget to provide your feedback !!

Continue reading this thread to learn about how this framework works!!

What is this thread about?

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language such as HTML. Object-oriented apprach towards CSS is the buzz now-a-daysHowever, it should be noted that the very nature of CSS is not truly Object Oriented. Some people are also considering aspect oriented approach to CSS

CSS is actually a hybrid of various natures and cannot fall into one definite category. To harness power of CSS to its full potential, it is very crucial to understand the true nature of the language.

This article highlights that the inherent nature of CSS is
1. Functional
2. Cascade Oriented

To fit this very nature of CSS, I develop a framework based on the inherent semantics of the CSS language.This framework exploits the popular Modularization Techniques and some of the popular techniques of Aspect Oriented Programming. The frameowk can be used in projects to aid in faster development of applications.

CSS Basics At a Glance

Each CSS style / CSS style rule begins with a CSS selector/ID/class and has associated CSS properties.

A typical CSS style would look like
.fontStyle
{
font-color:blue
}

In the above example, ".fontStyle" is a CSS class and "font-color" is a CSS property, which has a value of "blue"."font-color:blue" is a CSS statement.

CSS ID uniquely identifies an html element on a web page. On a given web page, no two html elements can have the same value for their ID attributes.

CSS class provides a way to categorize html elements. A CSS class can be thought of as a category. On a given we page, multiple ellements can share the same CSS class. And any given html element can be assigned multiple CSS classes. Each category (that is, CSS class) can be thought of has having mutiple "virtual" sub-categories. For example, suppose if we are applying a CSS class called "sidebar" to each and every page of a news website. However, suppose the sidebar on the home page needs a yellow background to display latest news. In this case, we can create a "virtual sub-category" and name it as "sidebar_news". Notice that we use the name of the parent category, followed by an underscore and then the name of the sub-category.

When we assign multiple classes to a given html element, the browser executes each css class individually from left to right and changes the state of the target html element accordingly. When a html element is assigned multiple classes, subsequent classes can override the declarations of the previous classes.

Suppose html div element has been assigned 2 classes as below

Here, suppose if .sidebar sets background-color:white and .sidebar_news sets background-color:yellow, .sidebar_news will override the background-color property set by .sidebar. So, ultimately, div would have a background color of yellow.

Functional Nature Of CSS

Arguements have been made that CSS should be considered as Object Oriented, where CSS IDs and CSS classes should be regarded as classes in OOP terminology.However, it should be noted that the very nature of CSS is not truly object oriented.

CSS is a declarative language.A declarative language only states what computation should be performed but does not specify how. The CSS statement "font-color:blue" tells the web browser to set the font color to blue, but does not tell how to do this.

CSS, at large, can be seen as a set of properties, that change the appreace of a web page. A CSS style rule is composed of a CSS selector/ID/class and a bunch of CSS properties. In simple terms, a CSS selector/ID/class is a means, by which web browser determines to which html element should the associated css properties be applied to. After determining the target html element, the web browser executes the css properties associated with the given CSS selector/ID/class to change the appearence of the target html element.

We can consider CSS style rule as a "function", containing a bunch of declarative CSS statements, which change the state of the target html element in some way. The name of the function in this sense corresponds to CSS selector/ID/class.
For example, in the below CSS style rule
.fontStyle
{
font-color:blue
}
"fontStyle" is a css class name and also represents the name of the function."font-color:blue" is a CSS declarative stateent contained within "fontStyle" function.

It should also be noted that CSS selector/ID/class correponds to function name.

Modularizing CSS

Instead of dumping all styles into one single stylesheet, it is better to group related styles into separate stylesheets.

CSS can be broadly modularized into

1. Colors (colors.css): Defines color scheme of the website
2. Typography (typography.css): Sets typo used across the website
3. Forms (forms.css): Sets styles used by forms
4. Core Containers (core.containers.css): Defines styles for core containers used in all web pages of the site such as wrapper, header, footer etc
5. Grid (grid.css): Defines styles for laying out a web page
6. Navigation (navigation.css): Defines navigational styles

Each css module deserves a separate css file. All these CSS modules (colors, typography etc) specify website-wide styles. In terms of Aspect Oriented Programming, the above 6 CSS Modules are cross-cutting concerns, which (can) affect multiple website pages. And the core concerns (the main area of focus) of the website are generally the HTML pages containing the HTML markup.

Since the above 6 CSS Modules are cross-cutting concerns, we can safely place them in a folder named "Generic". Further, since Colors, Typography and Forms CSS modules are more presentation oriented,we can place these modules into a folder called "Presentation" under "Generic" folder. Likewise, since Core Containers, Grid and Navigation are more structure oriented, we can place these modules into a folder called "Foundation" under "Generic" folder.

The folder hirarchy would look like

generic.styles
Foundation
grid.css
core.containers.css
navigation.css

Presentation
colors.css
typography.css
forms.css

page.styles

Cascading Nature Of CSS

With even a moderately complicated stylesheet, it is likely that two or more rules will target the same element. CSS handles such conflicts through a process known as the cascade.

To harness the cascading nature of css, we can classify CSS Cascade into two categories

1. Mathematical Cascade
2. Logical Cascade

Mathematical Cascade

Mathematical cascade works by assigning a specificity score to each style rule.Specificity is a mechanism within the CSS cascade that aids conflict resolution.The concept of specificity states that when two or more declarations that apply to
the same element, and set the same property, have the same importance and origin, the declaration with the most specific selector will take precedence.

Here’s a simplified description of the process by which the specificity of the selectors
of two or more declarations is compared:

1. If one declaration is from a style attribute, rather than a rule with a selector (an
inline style), it has the highest specificity. If none of the declarations are inline, proceed to step two.

2. Count the ID selectors. The declaration with the highest count has the
highest specificity. If two or more have the same number of ID selectors, or they
all have zero ID selectors, proceed to step three.

3. Count the class selectors (for example, .test), attribute selectors
(for example, [type="submit"]), and pseudo-classes (for example, :hover).
The declaration with the highest total has the highest specificity. If two or more
have the same total, or they all have totals of zero, proceed to step four.

4. Count the element type selectors (for example div) and pseudo-elements
(for example, :first-letter). The declaration with the highest total has the highest specificity.

If two or more selectors have the same specificity, then, according to the rules of
the css Cascade, the latter specified rule takes precedence.

Logical Cascade
Logical cascade defines the logical sequence between styles contained in different css modules.

Based on Logical cascade we can redefine above folder heirarchy as below

layer0.generic.styles

layer0.foundation
level0.grid.css
level1.core.containers.css
level2.nav.css

layer1.presentation
level0.colors.css
level0.typography.css
level1.forms.css

layer1.page.styles

The two important terms here are "Cascade Level" and "Cascade Layer"

In the above folder heirarchy, we assign a "cascade level" to each css module.It should be noted that we call the first cascade level "level0", second cascade level "level1" and so on.

Css modules with a higher cascade level must contain more specific styles (mathemtically) than css modules with a lower cascade level.
Css module with a higher cascade level can mathematically override styles in a CSS module with a lower cascade level. Vice versa should not be done simply because it is not logical.

Colors.css sets website's color scheme and typography.css specifies typo used across the website. So, logically, these two css modules share the same "cascade level".Logically speaking, forms.css often needs to override color & typo styling specified in colors.css and typography.css respectively. Hence, we assign cascade level 1 to forms.css.

Suppose a h1 html element is contained within a form html element as below
Contact Form

Now, suppose typography css module sets font size of h1 to 16px with below css style rule
h1
{
font-size:16px;
}
The above style rule makes all h1 headings accross the site 16px large

Now, we want all h1 headings within forms to have a font-size of 20px.So, we create below style rule (which is mathematically more specific) inside forms css module

form h1
{
font-size:20px;
}
This would make all h1 headings within forms 20px large

So, "form h1" style rule, which is mathematically more specific than "h1" style rule, is contained within level1.forms.css. level0.typography.css contains less specific "h1" style rule

Generally speaking, CSS styles, which are mathematically more specific should be placed in CSS Modules with a higher cascade level.

It should be noted that we assign "cascade layers" to folders containing a group of related css modules.Logically speaking, Cascade Layer 1 comes after Cascade Layer 0.

However, it is very important to note that Cascade Layer 1 is not mathematically more specific than Cascade Layer 0

We adopt the view that presentational styles need a structure / foundation, on top of which they should be applied. Hence, structural styles have been assigned cascade layer 0 and presentational styles have been assigned cascade layer 1.It is absolutely not necessary that presentational styles are mathematically more specific than foundation / structural styles.

Also, page specific styles are considered more specific than generic styles, as page specific styles often need to override certain styles specified by generic styles. Hence page.styles has been assigned cascade layer1. However, it is absolutely not necessary that all page styles are mathematically more specific than generic styles.

Summary
1. Cascade Levels are assigned to CSS Modules based on their logical relationships
2. Cascade Layers are assigned to folders based on their logical relationships
3. Cascade Level1 contains mathematically more specific styles than Cascade Level0
4. Cascade Layer 1 need not contain more specific styles (mathematically) than Cascade Layer 0

Download the Framework Now!

You can download the framework from
[snip link--provide plain text version. not everyone has a safe environment in which to open untrusted zip files. ~gt]

You can download and use the framework freely in your own projects.

But don't forget to provide your feedback !!

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

My feedback at first glance:

Needless complication. An answer to a question never asked. I don't see how this helps.

CSS is simplicity defined. It not only encourages the simplification of the markup but also the styling itself. Keep your styling as DRY as possible, embrace inheritance and specificity.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 7 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Careful there, Bubba

This has every appearance of a spam posting. I've left it only because the download is free. It's a Catch-22 situation, though. Your file is zipped and few people have a safe sandbox environment for opening untrusted files. Provide a link to a directory with all files in plain text, and all files covered by a FSF approved license.

You should know that css frameworks are the height of silliness, but there are people that use them. You do your own repute a disservice when you talk about the non-existent "font-color" property. Further, there are best practices, and at the other end of the scale are worst practices. Your modularization idea to "group related styles into separate stylesheets" is at that end. CSS applies against a DOM, which is a model of the document's structure. Thus the css cascade is contextual, and as a best practice should be organized contextually.

cheers,

gary/mod

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

gary.turner wrote:... You

gary.turner wrote:

... You should know that css frameworks are the height of silliness ... worst practices. Your modularization idea to "group related styles into separate stylesheets" is at that end. ...

I agree and when you begin to have things like <ul id="nav" class="left-side right-floated red-colored dropdown dropdown-horizontal"> You're getting into classitis and presentational class names. The further we get away from presentational markup the more people try to push us back to it. It's veiled but thinly.

Strangely some of the ULs in the example with a class name "dropdown" actually rise up <ul id="nav" class="dropdown dropdown-upward"> Puzzled Puzzled

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Don't bloody well get me

Don't bloody well get me started on frameworks, every week there's a thread tempting me to rant uncontrollably about the iniquities of the damned things.

@Tony we should limit the ability of people to be able to upload files until they've been a member for a few days, just a bit safer for all, I certainly will never download any files unless I know and trust the source, even given my various apps for inspecting them.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: Aspect Oriented

Quote:

Aspect Oriented Programming

Sorry but wtf is that about? My pet hate at the moment is the ruination being levelled on web development by programmers or advanced script writers as they are better termed; sick of them trying to work their frigging oops stuff just to show how clever they are. A template file that contains hmmlotsOfMarkup::display() is useless to me when I cannot edit the origin file as it's a plugin and may be updated.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 2 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

Categorized as "not well

Categorized as "not well received". Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You should see some of the

Big smile You should see some of the horrors I'm having to work with perpetrated by programmers and psuedo frameworks, just makes every little thing I have to do a chore and effort Sad

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me