Coder Social home page Coder Social logo

boomyjee / teacss Goto Github PK

View Code? Open in Web Editor NEW
46.0 2.0 5.0 1.09 MB

Dynamic stylesheet language and build system and much more.

Home Page: http://teacss.org

License: MIT License

PHP 0.65% Tea 31.18% JavaScript 64.87% CSS 3.11% HTML 0.16% Batchfile 0.01% Shell 0.01%

teacss's Introduction

TeaCSS

license state awesome javascript

CSS templates for JavaScript.

Description

TeaCSS extends CSS with dynamic behaviour of JavaScript.

It offers features similar to LESS.js or SASS such as variables, mixins and functions.

However, it has a lot of advantages.

  • Easier to debug (because TeaCSS compiles to line-to-line Javascript),
  • Faster to compile (very simple single pass parser that is less than 300 lines of code), supports any current and future CSS-rules,
  • Bundles with own framework - donut
  • Has a number of extensions to simplify development process - ui, canvas
  • Can be used as build system also (some kind of Makefile but for browser)
  • If used as build system can produce JS and CSS files for your web application

Write some tea-style:

.box_shadow(x, y, blur, alpha) {   
    @ color = 'rgba(0, 0, 0, ' + alpha + ')'
    box-shadow: @color  @x  @y  @blur;
    -webkit-box-shadow: @color  @x  @y  @blur;   
    -moz-box-shadow: @color  @x  @y  @blur;  
}  
.box {   
    @ base = '#f938ab';
    @ border_color = lighten(base, 30);
    color: @{saturate(base, 5)};   
    div {   
        .box_shadow(0, 0, '5px', 0.4);   
        border: 1px @border_color solid;   
    }  
}  

Include teacss.js with your styles:

<link tea="style.tea">
<script src="teacss.js"></script>  

Overview

Tea is not a new language. It is a CSS preprocessor, that just adds Javascript embedding (with some syntaxic sugar) and rule nesting (with some syntaxic sugar) and rule nesting. So all the power of Tea is the power of Javascript.

Javascript embedding

You have four choices of embedding JS.

  1. Simple inline. Used to evaluate single Javascript variable.
body {    
    color: @color;   
}  
  1. Complex inline. For complex expressions.
body {
    color: @{lighten(color, 5 + x * 3)};  
}  
  1. Single line block
body {   
    @ var  color = lighten(other_color, 25); 
    @ var  border_big = add_border(border_small, '5px'); 
}  
  1. Multiline block. Allows you to run lots of JS inside template.
body {   
    @{  
        var color = lighten(other_color,25); 
        if (lightness(color) > 25) border_big = add_border(border_small,'5px');
    }  
}  

Every css rule is getting transformed to JS function call. So contexts and variable visibility as similar to JS. Here is an example TeaCode and its JS variant:

body {   
    @ var color = 'red';
    background: @color;   
    h2 {   
        font-weight: bold;   
    }  
}  

tea.rule("body", function() { 
    var  color = 'red'; 
    tea.rule("background: " + color + ";") 
    tea.rule("h2", function() { 
        tea.rule("font-weight: bold;") 
    })
}) 

Variables

You can use variables like in LESS or SASS but in Tea they are just JS variables, with no hidden caveats and additionary types for colors or dimensions.

So you can type:

/* TeaCSS */  
@ var  color = '#4D926F'; 
#header { 
    color: @color; 
}  
h2 { 
    color: @color; 
}   

/* Compiled CSS */  
#header { 
    color: #4D926F;
}
h2 { 
    color: #4D926F;
} 

Mixins in Tea are just JS functions.

Plain CSS rules are functions that are executed right in place.

body {
    color: red;
}  
tea.rule('body', function() { 
    tea.rule('color:red') 
}) 

adds 'color:red' to rule stack.

And mixin is function for later use.

.my_mixin(color) {
    color: @color;
}  

my_mixin = function(color) { 
    tea.print('color: ' + color);
} 

adds nothing to rule stack, but declares JS functions that can be used in plain rule. p You can call mixins as functions or using alternative syntax. So: table

body {
    .my_mixin('red');
}  

body {
    @ my_mixin('red') 
}  

are equivalent and produce Highlight csscolor: red

As javascript does not support default parameters Tea CSS does neither. You can implement them in JS as usual.

.my_mixin(color) {   
    @ color = color || 'blue'  
    color: @color;  
}  

Of course, you can define functions as object members.

@ my_namespace = {} 
.my_namespace.my_mixin(color) {}  

Nested rules

Rather than constructing long selector names to specify inheritance, in TeaCSS you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter. table

/* TeaCSS */  
#header  {   
    h1 {   
        font-size: 26px;
        font-weight: bold;
    }   
    p {
        font-size: 12px;   
        a {
            text-decoration: none;   
            &:hover {
                border-width: 1px 
            }   
        }   
    }  
}  
/* Compiled CSS */  
#header h1 { 
    font-size: 26px; 
    font-weight: bold;
}
#header p {
    font-size: 12px;
} 
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
} 

Usage

Client-side

Link your .tea stylesheets with the rel set to 'stylesheet/tea':

<link tea="style.tea">  

Then download teacss.js from the top of the page, and include it in the element of your page, like so:

<script src="teacss.js"></script>  

Make sure you include your stylesheets before the script.

Server side

TeaCSS does not handle saving css to server but simplifies process a lot.

You can add code like this to you development version of page:

<script>  
    teacss.buildCallback( function(files) { 
        $.ajax({ type:'POST', url: location.href, data: {css:files['\default.css']}  });
    }); 
</script>
<? if (isset($_POST['css']) file_put_contents('path/style.css', $_POST['css']) ?>

Then for every tea link in page you will see an overlay ui that helps you to build all your styles.

Using as a build system

Using teacss to create build files in pretty simple. It is convinient to have only one entry point for your styles. And it is already handled in teacss using @import.

Would it be nice to have the same thing for your scripts? For sure.

Some script managers already exist. For example RequireJS and StealJS. AFAIK these are the only two that also handle minification and creating production versions.

As to me they have some flaws.

  • They both leave api specific calls inside production file. StealJS has 'pluginify' build type but it is quite buggy.
  • RequireJS does not handle CSS.
  • StealJS does not support CSS embedding and there is no option for output file name (only production.*)
  • StealJS has some path problems in production version and there is no way to reconfigure that.

Some of those problems have their roots in asyncronous web nature. You cannot just write require('module_name') and use it.

The solution is to use some kind of makefile. TeaCSS introduces as new keyword Script.

And @append goes to the scenes. All JS code imported with @append is assumed as needed for production, so it will be bundled into release file.

Example tea "makefile"

// make.tea  
Script my_filename {   
    // jquery   
    @append "scripts/jquery.js";   
    @append "scripts/jquery.plugin.js";   
    // app   
    @append "scripts/app.js";   
    @append  {   
        var x = 5 + 3;  // some plain js   
    }  
}  
// styles  
@append "style/jquery.plugin.css";  
@impоrt "some_teacss_stylesheet.tea";  

Instead of creating lots of script and link tags you can use only one entry point for your application.

<link  tea="make.tea">  

Later, using build script you can get my_filename.js file that contains jquery.js, jquery.plugin.js and app.js. Minified and compressed.

Development

  • prepare php capable web server
  • open <your_teacss_url>/build
  • click on "Build <your_teacss_url>/src/build.tea [close]"
  • done (teacss.js is built in lib folder now)

Tests

To run tests

  • open <your_teacss_url>/tests/ in your browser

License

Application is MIT licensed.

teacss's People

Contributors

boomyjee avatar

Stargazers

 avatar  avatar  avatar  avatar Leonardo Silva avatar  avatar  avatar  avatar Conecta avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar Lucas Saraiva Cordeiro avatar  avatar Andrea Foschi avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar Jidé avatar  avatar Anton Vasyunin avatar  avatar Evgeny Sinitsyn avatar Viktor avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.