Essential CSS3 Framework
This framework is inspired by iKreativ - Workless. es:CSS is NOT just another clone/fork of "Workless". It was completely re-built from scratch by taken some of the concepts and basic structure ideas from Workless, adopted by some new techniques and spiced up with some own knowledge / experience.
To keep es:CSS as lightweight as possible there's no real legacy browser support. Everything below IE 9, Safari 5, Firefox 4, Opera 10 and Chrome 4 is not and will never be supported. All versions higher than the listed ones are so called "Modern Browser" and will work fine with es:CSS, because they are HTML5 and CSS3 enabled. The effort to support old or legacy browsers is too expensive and time consuming.
To see the implemented features in a life demo, head over to the project page:
- supports fluid, no fixed-width webpages
- unified form element for all browsers
This software is licensed under the
- [NEW] Form element styling re-designed (tiny rounded corners)
- [UPDATE] Updated sprite image for form elements and updated PSD resource file
- [DELETE] Got rid of "modernizr.js", because of droped legacy browser support
- [ENHANCEMENT] Partly refactored and cleaned up CSS files
- [NEW] Tooltips and Notification Badges added
- [ENHANCEMENT] refactored button-background / -color combinations
- [ENHANCEMENT] unified color classes / color-class combinations
- initial commit
Folder Structure & Contents
/root /assets /css /font /img /js
Contains all basic CSS files. The folder contains a php file: "minified.css.php". If you host your project on php supported webspace, you can use this php file to minify all your CSS on the fly.
This folder contains the FontAwesome icon font file. If needed you could put your custom font files in here. But don't forget to link them! Referencing wont happen automatically. ;)
The img/ folder only contains the sprite image for "uniform" jquery extension to style form elements. You can find a PSD resource of the used uniform sprite in the "src/" folder too.
The jQuery library. It's basically needed for the uniform extension.
This jQuery extension styles all form elements in a sexy way and it's cross-browser compatible. So your forms will look unified in all browsers.
-- Installation --
Installing es:CSS is as easy as it can be:
Just drop the needed parts or even all files from the
assets/ folder into your project folder and reference the files in your html.
Referencing the CSS files
Referencing the CSS can be done in different ways:
... <link href="assets/css/typo.css" rel="stylesheet"> <link href="assets/css/forms.css" rel="stylesheet"> <link href="assets/css/tables.css" rel="stylesheet"> <link href="assets/css/helpers.css" rel="stylesheet"> <link href="assets/css/scaffold.css" rel="stylesheet"> <link href="assets/css/icons.css" rel="stylesheet"> <link href="assets/css/buttons.css" rel="stylesheet"> ...
@import: url(typo.css); @import: url(forms.css); @import: url(tables.css); @import: url(helpers.css); @import: url(scaffold.css); @import: url(icons.css); @import: url(buttons.css); ...
... <link href="assets/css/minified.css.php" rel="stylesheet"> ...
With this amazing little php script, you can easily minify all your css files on the fly without loosing the development status. You don't have to care about minification of your css and minify them by hand everytime you modified something.
Inside the script you can easily load all needed css files. To add your own custom CSS file into the minifier, simply add it to the end, right before the "ob_end_flush();" function is called. Like this:
<?php ... include('your_custom_style.css'); ob_end_flush(); ?>
To style form elements with es:CSS you need a jquery library. At least Version in 1.6.x. or higher. Included in the es:CSS package is jquery in version 2.0.2.
- app.js (contains custom JS commands and the uniform style initialization)
If you'd like to style form elements, you have to keep the following order while referencing the JS libraries in your html file
- link the uniform.default.css at the very first
- now load the jquery library
- after this, load the jquery.uniform.min.js extension
- and last, but not least load the initialization script (app.js) or just call it directly in your
<link href="assets/css/uniform.default.css" rel="stylesheet"> <script src="assets/js/jquery-2.0.2.min.js"></script> <script src="assets/js/jquery.uniform.min.js"></script> <script src="assets/js/app.js"></script>
The very essential integration without icons and form styling will cost you only 32kB of pure CSS! In words: thirty two!
Even a full featured integration including form styling and icon support will cost you only less than 500kB (486kb to be exact).
CSS Class Definitions (Cheat Sheet)
First things first: in es:CSS nothing is engraved in stone! It's a basic setup to save you time and helps prevent basic or repetitive tasks.
You extend it, modify it or just strip it in the way you want. It's easy to do this because everything happens in the CSS files.
All CSS files are named like what they do:
- scaffold.css keeps basic definitions about basic elements like
<footer>and some pre-defined specials like
<nav>and the responsive box definitions
- in typo.css you'll find all basic font definitions for
<ol>and some helper classes for list element styling and text colors
- tables.css contains basic table styling for default
<table>tags and some special classes for extended table design
- forms.css pre-defines default values for basic form elements and gives some additional classes to style
- buttons.css is an additional css file for button styling
- in icons.css are all icons defined (icons are made of FontAwesome webfont)
- the helpers.css file contains everything else, like tooltip classes, notification badges,
<code>and some generic specials
- uniform.default.css is only filled with the uniform related classes, that are used to style
Let's digg a little bit deeper:
Building projects with a responsive design is as easy as installing es:CSS itself. After referencing all needed CSS files in your HTML file just create some
<div> containers and give them one of the self-explaining class names:
.one-full (100% width) .one-half (48% width plus 4% margin-right) .one-third (30% width plus 5% margin-right) .two-third (65% width plus 5% margin-right) .one-quarter (22% width plus 4% margin-right)
There's only one thing you have to pay attention at: add the
.last class to the "last" container in row, if you use more than one container in a row, to reset the right margins and floating definitions.
To see a detailed example have a look at the "scaffolding" section in the example index.html.
UniformJS doesn't work with AngularJS
Uniform isn't supported if you are using AngularJS. Uniform will work well as long as you don't use
ng-include to include html templates with Angular.
This is because of that the post included html elements can not injected / overwriten by Uniform / jQuery correctly.
There are some hacks out there to fix this issue but none of them is elegant or easy enough to match the principles of this project.
Workless by iKreativ
- by Scott Parry (@iKreativ) / http://ikreativ.com/
- Project webpage: https://github.com/iKreativ/Workless
- License: DBAD License
- jQuery (c) 2005, 2013 jQuery Foundation, Inc.
- Project webpage: http://jquery.org
- License: http://jquery.org/license
- Uniform (c) 2009 Josh Pyles / Pixelmatrix Design LLC http://pixelmatrixdesign.com
- Project webpage: http://uniformjs.com/
- License: MIT License
es:CSS itself & Everything else
- Copyright (c) 2013 - 2014 by Burkhard Mudrick (@maccypher)
- Project webpage (showcase): http://willdesignforfood.de/es-css/
- Github: Repository | Project Page
- License: DBAD License
bring concept of basic folder structure to an end figure out the essentially needed files create a simple design with extrem usability add tooltip feature research notification feature refactor button-background / -color combinations (make them more unique) add install notes calculate kb of es:CSS when integrating as HiFi / LoFi version in projects [BUG]: IE displays tooltips wrong (borders and margins are misplaced 1px) get rid of modernizr.js, because the effort of supporting old browsers is too expensive
- define some basic HTML5 reset / default CSS parameters in scaffold.css
- WIP: keep basic files as generic as possible