trello/trellisheets

Guidelines, resources, and examples for writing CSS for Trello

trellisheets's Issues

Serve run problem

./tools/watch, to build and watch styles

[18:34:11] Requiring external module coffee-script/register
[18:34:13] Using gulpfile ~/workspace/github/trellisheets/gulpfile.coffee
[18:34:13] Starting 'watch'...
[18:34:13] Finished 'watch' after 19 ms

./tools/serve, to serve the site

Starting up http-server, serving ./public
Available on:
  http:127.0.0.1:8080
  http:192.168.0.109:8080
Hit CTRL-C to stop the server

But there is no /styles in ./public, so 404 for http://192.168.0.109:8080/styles/core.css

Is there something wrong with ./tools/watch ?

Component layout in structure

Following the comment to corresponding gist:

My proposition is about using specific syntax for component layout. Namely this:

// Usage:
// <div class="component">
//   <p class="component-decendant">
//     <span class="component-decendant-descendant"></span>
//   </p>
// </div>
//
// (How it's used.)

I've come up with another way of illustrating component structure, that should be transparent enough.
This resulted in the project; you can find the documentation here.

And here is the practical example of some sort.

So the previous code could be re-written as this:

/* cssg

    component
        component-descendant
            component-descendant-descendant

*/

// all other code

There are some points backing this stuff:

• html can be generated differently (jade, react, handlebars, ...), it is possible to write it once in css, but after some changes maintaining can become a problem (talking about 113 components ;))
• in CSSG approach you illustrate all possible mods and states of component, not only one
• it's easier to read and grasp the structure at a glance
• easier to refactor and share snippets with colleagues

I'd like to take it to the next level actually and make a common thing between CSS-engaged front-end teams. Hope you'll find it useful as well!

Sass version

Is a Sass port on the roadmap for this project?