Permalink
Browse files

add the theme

  • Loading branch information...
rfair404 committed Apr 21, 2012
0 parents commit 799d62a480a0d2ceaff08b89f349e15e2b5336f9
Showing with 326 additions and 0 deletions.
  1. +106 −0 css/example.css
  2. +10 −0 functions.php
  3. +9 −0 js/less-1.2.0.min.js
  4. +191 −0 less/example.less
  5. +10 −0 style.css
@@ -0,0 +1,106 @@
+/*
+* Start my LESS file for demonstration purposes only.
+*/
+/*
+* An example of what LESS can do...
+*/
+/*
+* Example one... Variables...
+*/
+body {
+ background: #e4e9c2;
+}
+.hfeed {
+ background: #ccc990;
+ border-radius: 25px;
+ padding: 1%;
+}
+/*
+* Example two... Nested rules...
+*/
+body.blog .hfeed {
+ background: #333dde;
+}
+body.archive .hfeed {
+ background: #ccc990;
+ padding: 1%;
+}
+/*
+* Example three... Mixins...
+*/
+.minimal-padding {
+ padding: 1%;
+}
+.extreme-padding {
+ padding: 10%;
+}
+.rounded-corners {
+ border-radius: 25px;
+}
+body.blog {
+ padding: 1%;
+}
+.hfeed {
+ border-radius: 25px;
+ padding: 10%;
+}
+/*
+* Example 4... Fancy (Parametric) Mixins... e.g. with args
+*/
+body.blog .hfeed {
+ box-shadow: #ffc0cb -5px -5px 30px;
+ -webkit-transform: scale(0.9);
+}
+/*
+* Example 5... Functions...
+* define our own function recolor...
+*/
+body.blog .hfeed {
+ background: #800080;
+}
+/*
+* Example 6... built in LESS color functions saturate, spin, lighten, darken, mix * and friends...
+*/
+body.blog p {
+ background: #fff75d;
+}
+.hfeed a {
+ color: #bbcc90;
+}
+.hentry:first-child {
+ background: #ffffff;
+}
+.hentry:nth-child(2n+2) {
+ background: #ecebd6;
+}
+.hentry:nth-child(2n+1) {
+ background: #c4c17f;
+}
+body.blog {
+ background: #7f33de;
+}
+/* Example 7b... nested color functions
+*/
+.hentry:nth-child(2n+2) p:first-child {
+ background: #12e5ff;
+}
+/*
+* Example 7... built in LESS math functions *, /, +, -, floor, ceil, round, etc
+*/
+.multiplication {
+ margin: 2%;
+}
+.division {
+ margin: 5%;
+}
+.hentry:first-child {
+ margin: 2%;
+ width: 450px;
+}
+.hentry:nth-child(2n+2) {
+ width: 400px;
+ height: 400px;
+ margin: 5%;
+ width: 250px;
+ border-radius: 628.3077999999999px;
+}
@@ -0,0 +1,10 @@
+<?php
+
+define ('THEME_URL', get_stylesheet_directory_uri() );
+
+add_action('wp_head', 'ld_janky_way_less');
+
+function ld_janky_way_less() { ?>
+ <link rel="stylesheet/less" type="text/css" href="<?php echo THEME_URL; ?>/less/example.less">
+ <script src="<?php echo THEME_URL; ?>/js/less-1.2.0.min.js" type="text/javascript"></script>
+<?php } ?>

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,191 @@
+/*
+* Start my LESS file for demonstration purposes only.
+*/
+
+
+/*
+* An example of what LESS can do...
+*/
+
+/*
+* Example one... Variables...
+*/
+
+
+@color1: #e4e9c2;
+@color2: #ccc990;
+@color3: #333dde;
+@radius1: 25px;
+@padding1: 1%;
+@padding2: 10%;
+
+body {
+ background: @color1;
+}
+
+.hfeed {
+ background:@color2;
+ border-radius:@radius1;
+ padding:@padding1;
+}
+
+/*
+* Example two... Nested rules...
+*/
+
+body.blog {
+ .hfeed {
+ background: @color3;
+ }
+}
+
+body.archive {
+ .hfeed {
+ background: @color2;
+ .minimal-padding;
+ }
+}
+
+/*
+* Example three... Mixins...
+*/
+
+.minimal-padding {
+ padding:@padding1;
+}
+
+.extreme-padding {
+ padding:@padding2;
+}
+
+.rounded-corners {
+ border-radius: @radius1;
+}
+
+body.blog {
+ .minimal-padding;
+}
+
+.hfeed {
+ .rounded-corners;
+ .extreme-padding;
+}
+
+/*
+* Example 4... Fancy (Parametric) Mixins... e.g. with args
+*/
+
+.box-shadow(@bscolor, @bsoffsety, @bsoffsetx, @bsblur) {
+ box-shadow: @bscolor @bsoffsety @bsoffsetx @bsblur;
+}
+
+.resize(@rotate: 1.1) {
+ -webkit-transform: scale(@rotate);
+}
+
+body.blog .hfeed {
+ .box-shadow(pink, -5px, -5px, 30px);
+ .resize(.9);
+}
+
+
+/*
+* Example 5... Functions...
+* define our own function recolor...
+*/
+
+
+.recolor( @color4:purple ) {
+ body.blog {
+ .hfeed {
+ background:@color4;
+ }
+ }
+}
+
+.recolor();
+
+/*
+* Example 6... built in LESS color functions saturate, spin, lighten, darken, mix * and friends...
+*/
+
+
+body.blog {
+ p {
+ background: saturate(@color2, 90%);
+ }
+}
+
+.hfeed a {
+ color: spin(@color2, 20);
+}
+
+.hentry:first-child {
+ background: lighten( @color1 , 20% );
+}
+
+.hentry:nth-child(2n+2) {
+ background: lighten( @color2 , 20% );
+}
+
+.hentry:nth-child(2n+1) {
+ background: darken( @color2 , 5% );
+}
+
+.background-crazy( @color ){
+ background: spin( @color, 30 );
+}
+
+body.blog {
+ .background-crazy( @color3 );
+}
+
+/* Example 7b... nested color functions
+*/
+
+.hentry:nth-child(2n+2) p:first-child {
+ background: saturate( spin( @color3, -50 ), 30% );
+}
+
+/*
+* Example 7... built in LESS math functions *, /, +, -, floor, ceil, round, etc
+*/
+
+.multiplication {
+ margin: @padding1 * 2;
+}
+.division {
+ margin: @padding2 / 2;
+}
+
+.addition(@width1, @width2) {
+ width: @width1 + @width2;
+}
+
+.subtraction(@width1, @width2) {
+ width: @width1 - @width2;
+}
+
+.circle(@width) {
+ border-radius: @width * 3.141539 / 2;
+}
+
+
+.hentry:first-child {
+ .multiplication;
+ .addition(300px, 150px);
+}
+
+.hentry:nth-child(2n+2){
+ @width:400px;
+ width: @width;
+ height:@width;
+ .division;
+ .subtraction(400px, 150px);
+ .circle(@width);
+}
+
+
+
+
+
@@ -0,0 +1,10 @@
+/*
+Theme Name: LESS Demo
+Description: An example of ways to use LESS in a WordPress theme
+Author: Russell Fair
+Theme URI: http://github.com/rfair404/LESS-Demo
+Author URI: http://q21.co
+Version: 0.0.1
+Template: twentyeleven
+*/
+

0 comments on commit 799d62a

Please sign in to comment.