Projects

cleverstyle

Cleverstyle django template tagsThese templatetags can be used in your Django applications to load stylesheets and css code based on the awesome clevercss python module. There is a similar project http://code.google.com/p/django-clevercss/ which allows you store your clevercss code in the db and ... [More] call it from the templates. I used the file extension .pcss for no other reason than it's easy to identify. A .pcss file is a file written in clevercss code which will be used to generate css files and code. You can separate your styles by writing multiple .pcss files and merging them into one css file inside your templates. The default setup assumes both the css and pcss dir are subdirectories of the same directory (i.e. they're siblings) and will look for .pcss files in MEDIA_ROOT/pcss, convert them and save them to MEDIA_ROOT/css under the same filename. I don't know how taxing this could be in a production environment. I generally use this module during the development phase and then use the {% stylelink 'my_merged_css_file' %} template tag (included in this package) or hard link to the previously generated merged css file once going live. SettingsIn your application settings you can set the following. CLEVERSTYLE_BASE_DIR - Default: '' The base directory in relation to MEDIA_ROOT. The css and pcss directories should be subdirectories of this. CLEVERSTYLE_PCSS_DIR - Default: 'pcss' The directory which holds the .pcss files in relation to settings.CLEVERSTYLE_BASE_DIR. CLEVERSTYLE_CSS_DIR - Default: 'css' The directory which will hold the generated .css files in relation to settings.CLEVERSTYLE_BASE_DIR. Add cleverstyle to your installed apps INSTALLED_APPS=( 'django.contrib.sessions', 'django.contrib.sites', 'cleverstyle', )Load the cleverstyle tags in your templates {% load cleverstyle_tags %}The four basic template tags are: {% clevertag %} {% clevercode %} {% clevermerge %} {% clevermergecode %}{% clevertag pcssfilename[,anotherfile,nth file] [base_dir] [css_dir] [pcss_dir] % }{% clevertag 'my_file1' %} Look for my_file1.pcss in the pcss directory Compare this file to the corresponding css file in the css directory Parse the pcss file and write to the css file (if necessary) Return a tag pointing to the css file. {% clevertag 'my_file1,my_file2,my_file3' %} {% clevertag 'my_file1' 'projects' %} {% clevertag 'my_file1' 'projects' 'style' %} {% clevertag 'my_file1' 'projects' 'style' 'cleverstyle' %} Source files found in the projects/cleverstyle directory in relation to MEDIA_ROOT. {% clevercode %} clevercss code {% endclevercode %}You can write clevercss code in your templates. {% clevercode %} body: margin:0 #header: padding: 15px h1: color: #FFF {% endclevercode %} Which renders as body { margin: 0; } body #header { padding: 15px; } body #header h1 { color: #FFF } {% clevermerge 'filename[,filename2,filenameN]' 'save_as' %} This tag allows you to separate your style markup files logically and merge them into one css file. {% clevermerge 'structure,lists,tables,content,colors,sidebar,footer' 'site-style' %} Merges the selected .pcss files into one .css file and returns a tag. {% clevermergecode 'filename[,filename2,filenameN]' %}Merges the selected .pcss files returns the css code. This follows the same principle as the {% clevermerge %} tag but no save_as file is generated. It should be used between tags. {% clevermergecode 'structure,lists,tables,content,colors,sidebar,footer' %} clevercss codeIf you haven't yet learned about clevercss syntax, please have a look here. An Example/static/pcss/panels.pcss blue=#49678B white=#FDFDFD green=#81B723 div.panel: background: $blue width: 350px margin: 10px auto clear:both padding-bottom: 5px h3: font-size: 1.27em color: $white clear:both margin: 5px 10px border-bottom: 1px solid $blue.darken(30) span: color: $green.brighten(30) text-decoration:underline ul: float:right display:inline margin:0 clear:both li: background: $green float:left display:block padding: 0 a: display:block padding: 3px 7px font-weight:bold text-decoration: none margin: 3px margin-right: 0 background: green.brighten(5) color: $white &:hover: color: #555 background: $blue.brighten(30) text-decoration:underline &:last-child: a: margin-right: 3px div.subpanel: background: $blue.darken(20) clear:both margin: 10px border: 1px solid $white p: color: $white text-align:center Which generates a new css file /static/css/panels.css div.panel { background: #49678b; width: 350px; margin: 10px auto; clear: both; padding-bottom: 5px; } div.panel h3 { font-size: 1.27em; color: #fdfdfd; clear: both; margin: 5px 10px; border-bottom: 1px solid #253548; } div.panel h3 span { color: #c6e88a; text-decoration: underline; } div.panel ul { float: right; display: inline; margin: 0; clear: both; } div.panel ul li { background: #81b723; float: left; display: block; padding: 0; } div.panel ul li a { display: block; padding: 3px 7px; font-weight: bold; text-decoration: none; margin: 3px; margin-right: 0; background: #009900; color: #fdfdfd; } div.panel ul li a:hover { color: #555555; background: #9fb4cd; text-decoration: underline; } div.panel ul li:last-child a { margin-right: 3px; } div.panel div.subpanel { background: #253548; clear: both; margin: 10px; border: 1px solid #fdfdfd; } div.panel div.subpanel p { color: #fdfdfd; text-align: center; } [Less]