This is a simple SASS file that provides a number of useful mixins to achieve CSS3 effects cross-browser. For each rule, the styles are implemented for as many browsers as possible.
Note: You must use haml >= 3.0 for this to work as it uses the dollar assignment operator and equals-less assignment. This may mean installing the --pre version of HAML until its official release.
| <#@ template language="C#" #> | |
| <#@ output extension=".css" #> | |
| /* | |
| Variable Grid System Generated Stylesheet | |
| v.0.1 alpha | |
| Author: Caspar Kleijne | |
| Contact: twitter.com/caspar_kleijne | |
| Converted for TT from 960 Grid System - http://960.gs/ | |
| Via ~ http://www.spry-soft.com/grids/ |
| /* inline-block */ | |
| #selector { | |
| display: inline-block; | |
| zoom: 1; | |
| *display: inline; | |
| } | |
| /* min-width */ | |
| #selector { | |
| min-width: 80px; |
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Aplicacion de demo</title> | |
| <style type="text/css" media="screen">@import "./jqtouch/jqtouch.min.css";</style> | |
| <style type="text/css" media="screen">@import "./themes/jqt/theme.min.css";</style> | |
| <script src="./jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> | |
| <script src="./jqtouch/jqtouch.min.js" type="text/javascript" charset="utf-8"></script> |
| =lesscolumns($width_of_page :960px, $number_of_columns :4, $column_padding :10px, $width_of_gutter :10px, $border_width :0px, $border_style :solid, $border_color :#333) | |
| $number_of_gutters: $number_of_columns - 1 | |
| $width_of_column: ($width_of_page - ($width_of_gutter * $number_of_gutters)) / $number_of_columns - ($column_padding * 2) - ($border_width * 2) | |
| width: $width_of_page | |
| +pie-clearfix | |
| > * | |
| width: $width_of_column | |
| margin-left: $width_of_gutter | |
| padding: $column_padding | |
| border: $border_width $border_style $border_color |
| a, | |
| abbr, | |
| acronym, | |
| address, | |
| applet, | |
| article, | |
| aside, | |
| audio, | |
| b, | |
| big, |
| a { -webkit-transition: all 0.12s ease-out; } | |
| a:hover { text-shadow: #E58 1px 1px, #E58 2px 2px, #E58 3px 3px, #E58 4px 4px, #E58 5px 5px, #E58 6px 6px, #E58 7px 7px, #E58 8px 8px, #E58 9px 9px, #E58 10px 10px, #E58 11px 11px; } | |
| a.big:hover { -webkit-transform: scale(1.25); } |
| // Some simple webkit 3d extensions to jQuery | |
| // Use safari 5 to view. | |
| // (you need to set the -webkit-perspective CSS property to something on the element containing #myNiceDiv for this to work) | |
| // Example use: | |
| // Rotate a div on Y an Z axis: | |
| // $("#myNiceDiv").rotate(0, 30, 10); | |
| // Move the div closer to the camera | |
| // $("#myNiceDiv").translate(0, 0, 100); |
| // Mixins and variables | |
| @mixin clearfix { | |
| &:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } |
