tw2.lesscss /

The default branch has multiple heads

Filename Size Date modified Message
docs
tests
tw2
138 B
81 B
1.3 KB
26 B
1.3 KB
2.1 KB

LessCSS for ToscaWidgets 2

This module adds the ability to link LessCSS based stylesheets.

More Information on LessCSS: Less CSS.

Using TW2's LessCSS resource with TurboGears2

Lets use LessCSS to define a simple box with rounded corners.

Create a file in the public folder TG2 project called 'simple.less'.

.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    padding: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}
.shaded-rounded-corners {
    .rounded-corners;
    background-color: #333;
    color: #eee;
}

Now we need to tell ToscaWidgets2 to add it to all of your requested pages. In the top of your TG2 base-controller (projectname/lib/base.py) add:

from tg import url
from tw2.lesscss import LessCSSLink

class SimpleLess(LessCSSLink):
    link=url('simple.less')

Above the return in the __call__ function of BaseController add:

LessTest.inject()

This will inject the less file on every call to the controller.

Now you can use the lesscss class in your templates!

<div class="shaded-rounded-corners">Hello!</div>
http://github.com/toscawidgets/tw2.lesscss/raw/master/docs/img/hello-div.png
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.