In the world of the web, organizing your site isn’t as simple as organizing your desk — which some of us still fail at doing still. But what we are getting at, is that organizing your design isn’t as simple as buying a desk drawer organizer and then placing things in their respective places. With the web, we need to run lines upon lines of code in order to create a harmonious page. With HTML this can become a muddled and frenzied mess. Thank goodness CSS is at our disposal — making things a tad easier for us (and our eyes).
Cascading Style Sheets (CSS) — not to be confused with CS:S — were created primarily to enable separation of the document content from the document presentation. This is accomplished by using style sheet language used to describe presentation — the code that defines how your content's overall look will be. This is commonly used for sites and pages written in HTML.
What we gain as designers is more control of the overall presentation of our product. With this gained advantage, we are able to diminish the code clutter of the page content from the page presentation. In other words, we are separating the structural content from the document content — this is how CSS has helped our eyes out.
Now, most of this may sound familiar to that of just a simple style sheet, which it is. What disconnects CSS from simple style sheets is that CSS has a cascading style guide that it follows. This is saying that elements have priorities set so that if there are more than one rule matching up to an element CSS will choose the higher weighted rule and display that markup to display for the end-user.
Because writing CSS code can be a time consuming, the adoption of CSS frameworks came about to help ease the process of writing lines and lines of these codes.
In other words, CSS frameworks were developed for the ease of creating sites and pages so we aren't repeating the same lines of code over and over and over again.
At the same time, some frameworks were also built upon Ruby gems to create the most CSS standards-compliant pages and sites thanks to their CSS Preprocessors, such as SASS. These preprocessors take the static set of rules of CSS, and basically turn them into more of a programming language.
At ZURB, we're proud to be the creators of one such helpful resource — Foundation. Not only do these frameworks help in building your pages faster, but they also help in prototyping your products with front-end code. In turn, allowing for rapid prototyping and rapid iteration.
CSS and our framework Foundation came in handy when building the page for ZURBsoapbox, our speaker series.
This was the first site we ever built on the Foundation, which we recently rebuilt with the latest version of the responsive framework. Using CSS code, we accomplished a few great advancements with the site creation:
A responsive site. Whether you access the page on a tablet, mobile device, laptop or desktop, the site is going to look great.
Device specific functions. If there are media elements on the page — such as images, audio or video — Foundation found a way to utilize CSS code to actively hide such elements, based on what device you are using.
As we have noted, CSS has many rules. All of which aren’t entirely random and drawn from thin air.
There is an organization, the World Wide Web Consortium (W3C), who manages and updates the specifications of the CSS language. With these specifications grounded, the ultimate vision is to have all browsers implement the W3C specs verbatim. But because of legacy reasons, older software which does not support CSS, this cannot happen — as of now.
Unfortunately, even with a set of general specs to follow with the CSS language, most web browsers do not have full CSS support, as they will choose which specs they feel they will support. Though, well-known browsers, such as Firefox, IE and Opera, all have adequate CSS support. Safari and Chrome are built on the same layout engine and have excellent support. But each of these browsers operate on a layout engine that excel in different aspects of CSS.
With the differing rendering styles of CSS across browsers, many designers would just as soon — kiss a Wookie — cast it aside and attempt to work alone to insure their greatest control.
Thankfully, many developers and designers came together and build upon these woes. With the introduction of CSS Frameworks, there are now tools that help circumvent the obstacles created with CSS interpretations amongst browsers. These frameworks have the ability to utilize — with the most ease — the general specs of CSS.
Bon Voyage! Au revoir! Godspeed! May you set your sails toward the seas of the web, armed to the teeth with the arsenal of a solid framework. Had you been without the framework the abundance of obstacles that you could have faced atop the seas of CSS could have ushered in certain frustration and chaos to those at the helm.
Even though CSS may still be rough around the edges for the browsers of the world, the core concepts are beyond beneficial for all of us designers. CSS has been set in place to help create beautiful and pristine designs for our sites and to help in keeping the clutter of code and content separate from one another. With frameworks at our disposal, it has never been easier to work with and interact with CSS in its glory.