Bear CSS is a handy little web application that automatically generates a blank, cascading style sheet template customized to match the HTML markup from a given web page.
CSS is the Internet’s style and layout language. It is responsible for describing how a web page or application should look, where component elements should be positioned, and even how some basic interactions should be managed.
Increasingly, many tasks that might have been handled in HTML markup or even with a server-side scripting language like PHP or Python are becoming part of the CSS domain. As an example, earlier in the mobile Internet revolution, developers would build separate websites or applications for the desktop and mobile versions of a site. Now most savvy web designers and developers rely on CSS to adapt to the device regardless of whether that device is a desktop, a laptop, a tablet, a smartphone, or even a television.
Similarly, many site animations, including some content sliders, are now written with CSS transitions or key frame animations.
CSS is Becoming More Complex
This trend toward doing more with CSS has made the language more complex and has given rise to a number of frameworks and extensions. SASS — Syntactically Awesome Style Sheets, which adds nested rules, variables, mixins, and more to CSS — would be an example.
One constant with seemingly every new CSS feature, framework, or extension is that a web designer or developer must list out, if you will, all of the elements in the HMTL markup or order to systematically write the necessary style declarations.
Sometimes this CSS “templating” process — that is the listing out of each applicable element — takes place element by element as the web designer or developer moves through the markup. Other times an entire skeleton is created, organizing the parts by function or position. But again, almost regardless of whether or not a CSS framework is used or which framework is used, at some point the specific elements in a given page’s markup must be enumerated and organized in a style sheet.
Bear CSS Provides a Nice Starting Point
It is this specific task, outlining or templating a web page’s elements that Bear CSS does.
Imagine that the code below represents the markup for some new web page.
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
- <link rel="stylesheet" media="all" href=""/>
- <meta name="viewport" content="width=device-width, initial-scale=1"/>
- <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
- </head>
- <body lang="en">
- <header>
- <h1>Fast Style Sheets</h1>
- <nav>
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">Away</a></li>
- </ul>
- </nav>
- </header>
- <div id="main">
- <form>
- <label for="first-name">Your First Name:</label>
- <input name="first-name" id="first-name" type="text">
- <label for="last-name">Your Last Name:</label>
- <input name="last-name" id="last-name" type="text">
- <input type="submit" value="Submit" />
- </form>
- <aside>
- <p>The form will let you submit your name for something or other.</p>
- </aside>
- </div><!-- #main -->
- <footer>
- <p>Some footer copy</p>
- </footer>
- </body>
- </html>
<!doctype html> <html> <head> <meta charset="utf-8"/> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" media="all" href=""/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ --> </head> <body lang="en"> <header> <h1>Fast Style Sheets</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Away</a></li> </ul> </nav> </header> <div id="main"> <form> <label for="first-name">Your First Name:</label> <input name="first-name" id="first-name" type="text"> <label for="last-name">Your Last Name:</label> <input name="last-name" id="last-name" type="text"> <input type="submit" value="Submit" /> </form> <aside> <p>The form will let you submit your name for something or other.</p> </aside> </div><!-- #main --> <footer> <p>Some footer copy</p> </footer> </body> </html>
Navigating to the Bear CSS website, a web designer or developer could easily upload a copy of the markup using the site’s large “Upload HTML” button.
Bear CSS is a simple two-step process. The first step is to upload an HTML file.
The button opens up a standard file selection window. The Bear CSS application quickly processes the HTML file and generates a CSS template or outline that may be downloaded.
In the second step, a web designer or developer will simply download the style sheet template.
The style sheet template will open in a new browser window, from which it can easily be copied and employed in the web project.
For example, here is the style sheet template or outline that Bear CSS generated based on the example HTML shown above.
- html {
- }
- body {
- }
- /*******************************************************************
- LAYOUT
- *******************************************************************/
- div {
- }
- #main {
- }
- header {
- }
- nav {
- }
- footer {
- }
- aside {
- }
- /*******************************************************************
- LINKS
- *******************************************************************/
- a {
- }
- /*******************************************************************
- TYPOGRAPHY
- *******************************************************************/
- h1 {
- }
- p {
- }
- /*******************************************************************
- FORMS
- *******************************************************************/
- form {
- }
- label {
- }
- input {
- }
- #first-name {
- }
- #last-name {
- }
- /*******************************************************************
- LISTS
- *******************************************************************/
- ul {
- }
- li {
- }
html {
}
body {
}
/*******************************************************************
LAYOUT
*******************************************************************/
div {
}
#main {
}
header {
}
nav {
}
footer {
}
aside {
}
/*******************************************************************
LINKS
*******************************************************************/
a {
}
/*******************************************************************
TYPOGRAPHY
*******************************************************************/
h1 {
}
p {
}
/*******************************************************************
FORMS
*******************************************************************/
form {
}
label {
}
input {
}
#first-name {
}
#last-name {
}
/*******************************************************************
LISTS
*******************************************************************/
ul {
}
li {
} The style sheet outline is bare, but it has also saved a bit of time that would have otherwise been spent doing a boring and repetitive task.
The template is also relatively well organized, and may help a web designer or developer avoid repeating style descriptions.
Summing Up
Bear CSS is a fast and helpful application that creates a bare — assuming that the developers intended the pun — style sheet template.
Developer Kyle Gawley and multi-discipline designer Jordan Henderson, both from Ireland, clearly created the app to take on a simple but repetitive task common to nearly every website and web application project.