Hello, firstly thanks for this great project!

Ok so I've been trying the mobile first approach with the breakpoints and I've encountered an issue when using stack(). Because stack() assigns the margins with the !important flag the margins stay set to auto even after going past the breakpoint. So any columns created after the breakpoints will have alignment issues.

In my case the issue can be solved by removing the !important flags for stack(), is there any need for the !important flags?

So I have been doing a few tests with Jeet 2 and, found a few problems with the last column not getting the right width.
You can see the demo here: http://fuzzy-archer.pagodabox.com/
And the code used: https://github.com/marcorivm/fuzzy-archer/blob/master/css/styl/style_styl.styl

It'd be cool if you return widths rather than assign floating styles and such. Something like:

form
    width col_width(10)

Unluckily the Jeet application does not work... :(

--- ~/dev » jeet -t create jeet_sbox 

Creating jeet_sbox
    Downloading Repo ... 
/usr/local/lib/node_modules/jeet/node_modules/github-download/lib/github-download.js:143
  return path.join(os.tmpDir(), Date.now().toString() + '-' + Math.random().to
                      ^
TypeError: Object #<Object> has no method 'tmpDir'
    at generateTempDir (/usr/local/lib/node_modules/jeet/node_modules/github-download/lib/github-download.js:143:23)
    at GithubDownloader.downloadZip (/usr/local/lib/node_modules/jeet/node_modules/github-download/lib/github-download.js:117:16)
    at Request._callback (/usr/local/lib/node_modules/jeet/node_modules/github-download/lib/github-download.js:101:53)
    at Request.callback (/usr/local/lib/node_modules/jeet/node_modules/github-download/node_modules/request/main.js:122:22)
    at Request.emit (events.js:70:17)
    at Request.<anonymous> (/usr/local/lib/node_modules/jeet/node_modules/github-download/node_modules/request/main.js:661:16)
    at Request.emit (events.js:88:20)
    at IncomingMessage.<anonymous> (/usr/local/lib/node_modules/jeet/node_modules/github-download/node_modules/request/main.js:623:14)
    at IncomingMessage.emit (events.js:88:20)
    at HTTPParser.parserOnMessageComplete [as onMessageComplete] (http.js:130:23)

Hello,

I get a SASS and Stylus problem when commiting .css, .stylus, .scss to SVN- then console brakes - it says

if (filename.substr(-5) === ".styl" {

"TypeError: Cannot call method ''substr" of null at FSWatcher (C:/....npm\node_modules\jeet\jeet.js:63:19)
at FSWatcher.EventEmitter.emit (events.js: 98:17)
at FSEvent.FSWatcher._handle.onchange (fs:js:1039:12)

I installed and imported "Modular-scale", i am using aptana...

Greetings...

After successful (=no errors thrown) installation:

--- ~ » jeet -h
/usr/bin/env: node: No such file or directory

The problem is fixable by aliasing nodejs to node as follows:

--- ~ » sudo ln -s /usr/bin/node{js,}

Cheers!

I have Ruby set in my system variables, see here http://i.imgur.com/o8WWUAE.png

After typing jeet watch I get a compiling scss error see here http://i.imgur.com/0fvb7rl.png

I tried running cmd as admin but still didn't work. It worked fine on my laptop but that's a 32-bit system and my desktop is 64. Does that have anything to do with it?

Jeet was made to work with IE7+ and relies heavily on :last-child to work without leaving .last classes lying around the markup.

IE8 and below don't support :last-child, but the 4kb selectivizr for jQuery is a good polyfill. Light and functional.

In response to this: http://www.reddit.com/r/web_design/comments/1c4ol1/jeet_has_been_ported_to_scss_in_case_any_of_you/c9d32ex

We can use @extend to not repeat compiled CSS: http://learnboost.github.io/stylus/docs/extend.html

The installation instructions on Github and website are very Stylus-centric. Need to update these. Might put it off until I've settled on a folder structure and have time to update the doc referenced here: #14

I executed next command

roots template add jeet https://github.com/jenius/jeet-template

There is no error. But,

roots new example --jeet
undefined

There is no new project directory.

My environment is that

git clone (roots.git)
git pull (roots.git) marionette-template
sudo npm install (local roots directory) -g

And then

roots new mjexample --marionette

is success.

There's really only so much we can do with a modern framework, and those browsers don't have much support anyway, but just kind of as a "fuck you" to other frameworks, it'd be nice to support these better.

Please use this issue to mention any little issues you see with IE. After we've fixed enough of them and I'm happy with IE support, I'll close this.

I'll start...

@monkeez Notice how the nav breaks on http://jeetframework.com in IE8 when you shrink the viewport down to mobile size? If you modify one of the links a couple pixels, it fits. I'm guessing this is a rounding issue maybe related to https://github.com/twigkit/semantic.gs/blob/master/stylesheets/styl/grid.styl

@Jenius Still not getting a background colors on buttons. Could you update the npm package with the latest version of axis-css then I can npm update -g axis-css and recompile stuff and get bg colors from now on?

Right now everything is fine if you just compile SCSS OR Stylus, but if you are watching both, then you're repeating about 30 lines of code. It's not a big deal at all, but the repeated code is mostly boilerplate styling so a lot of it can be dumped into a .css file and loaded before the 's for scss and stylus.

When nesting columns, you have to wrap them in an element that simply has row() applied to it. This sucks.

Good math and a new syntax for columns would fix this.

col(number of columns, number of columns in containing row)

Any help would be greatly appreciated. Here's another ticket on it. tylertate/semantic.gs#80

Hi Cory,
I've got a little problem with compiling SCSS. Termial (under OSX 10.8.4) shows an "Error" without a statement. Compiling Stylus works fine. What can it be?

I hope, you can help me. I would like to use your powerful framework for my next project. :-)
Thx a lot!
Bye

Easy enough.

• npm install -g jeet
  • npm install -g stylus axis-css
  • Create jeet executable
    • jeet create: git clones Jeet repo to current directory
    • jeet create foo: creates foo directory and git clones to it
    • jeet watch: runs ./watch and activates an npm LiveReload package

LiveReload's support of Stylus libraries (nib, Axis, etc.) is complete shit you have to do it through a LiveReload npm package.

Our Jeet 2 npm package did all this stuff but we got some bug reports on it (I never experienced any of these) and it had custom, very bare bones, error reporting. I'd like the new package to be clean, concise, and try to make use of Stylus' built-in error reporting if possible.

If you're interested in contributing to this, checkout a new branch of https://github.com/CorySimmons/jeet-npm and submit pull requests there. It should be easier since we're no longer supporting SCSS and all that stuff.

Bonus points if you add some flags in there for SCSS, SASS, and LESS ports. For instance...

• npm install -g jeet: would install Compass/LESS/Stylus/Axis
• jeet create -scss (-sass, -less, -styl) foo: Defaults to ONLY Stylus. Anytime a project is created, we just pull one branch from repo to keep folder structure clean. Pulls a different branch of the Jeet repo. (note: this branch doesn't exist yet, but very well may)
• jeet watch -scss (-sass, -styl): Defaults to ONLY Stylus. We're not doing any of that "having 2-3 watchers running at once" thing anymore. Just one watcher at a time.

Cool thing that one can pick the preprocessor they prefer, yet from the docs as they are now, it looks that you can pick one, but your installation is dependent on both.

If this is the case, then it shouldn't be (jeet should still work when only one of the two is installed). If this is not the case, then the documents should clarify this.

Hi,

I installed your framework and is not working for me. I installed node.js using Homebrew.

I checked that in fact node.js was install on my machine.

[23:59:31] [leonardojimenez@Ledigitale-MacBook-Pro ../Sites/TestJeet]$ which is node
/usr/local/bin/node
[00:02:31] [leonardojimenez@Ledigitale-MacBook-Pro ../Sites/TestJeet]$ node -v
v0.10.17

I then donwloaded "Codekit" to start watching my files but I got the following error when I tried to compile my file:

/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/bin/stylus:516
throw err;
^
Error: /Users/leonardojimenez/Sites/TestJeet/css/styl/jeet/framework.styl:1

1| @import 'nib'
2|
3| /* Syntax quick reference
4| * ----------------------

failed to locate @import file nib.styl

at Evaluator.visitImport (/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/lib/visitor/evaluator.js:701:21)
at Evaluator.Visitor.visit (/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/lib/visitor/index.js:28:40)
at Evaluator.visit (/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/lib/visitor/evaluator.js:92:18)
at Evaluator.visitBlock (/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/lib/visitor/evaluator.js:564:39)
at Evaluator.Visitor.visit (/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/lib/visitor/index.js:28:40)
at Evaluator.visit (/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/lib/visitor/evaluator.js:92:18)
at Evaluator.visitImport (/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/lib/visitor/evaluator.js:732:18)
at Evaluator.Visitor.visit (/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/lib/visitor/index.js:28:40)
at Evaluator.visit (/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/lib/visitor/evaluator.js:92:18)
at Evaluator.visitRoot (/Volumes/SNOW LEOPARD SSD/Users/ledigitale/Downloads/CodeKit.app/Contents/Resources/engines/stylus/lib/visitor/evaluator.js:551:27)

I then tried to do it manually via Terminal and I got the following error for Livereload and SCSS:

[23:55:34] [leonardojimenez@Ledigitale-MacBook-Pro ../leonardojimenez/Sites]$ cd TestJeet
[23:55:42] [leonardojimenez@Ledigitale-MacBook-Pro ../Sites/TestJeet]$ jeet watch

Watching App

Compiling Stylus ... OK!
Saving Compiled Stylus ... OK!

The livereload port seems to be in use by another app, so live-reload will be turned off

Compiling SCSS ... Error!

I'm not sure what's the problem but when I edit style.styl in "ST2" I can see that style.css gets compile but the changes don't take effect on my browser.

What I mean is that I can see the output file (style.css) being created but none of the functionality take places in Chrome when I'm editing the file.

For example:

CSS

@import 'jeet/framework'
@import 'jeet/goodies'

header
div
background-color: #ededed;
center()

// Mobile
bp()

endbp()

HTML

DOES NOT CENTER header in the page.

I'm not sure what the problem is. Any help would be greatly appreciated.

Cheers.

How to implement 100% height floated aside with jeet?

#containeer
    section
    aside

section
    w(2,3,s)
aside
    w(1,3,s)

I want to section and aside to have same height always.
aside
height 100% didn't help because aside floated

When i run jeet watch, instead of live reloading, it quits and gives me this error:

Compiling SCSS ... OK!
Saving Compiled SCSS ... OK!

... Reload .subl29.tmp ...
... Reload .subl29.tmp ...
... Reload .subl29.tmp ...
... Reload .subl29.tmp ...
... Reload .subl29.tmp ...

C:\Users\caleb\AppData\Roaming\npm\node_modules\jeet\jeet.js:44
var ext = filename.substr(-4);
^
TypeError: Cannot call method 'substr' of null
at FSWatcher. (C:\Users\caleb\AppData\Roaming\npm\node_modules\je
et\jeet.js:44:22)
at FSWatcher.EventEmitter.emit (events.js:98:17)
at FSEvent.FSWatcher._handle.onchange (fs.js:1039:12)

Hi, thanks for a really interesting project.

I did:

sudo npm install -g jeet
jeet create MyApp

result:

Creating Hi
Downloading Repo ... Error: EXDEV, rename '/var/folders/pk/[long string]/jeet-master'

why?
I think it's because I'm trying to create on a different disk than Jeet was installed on, see this Bower thread, which links to the fix they used:
bower/bower#51

Thanks again,

• S.

Basically go down Bootstrap's list and add all that kind of styling to Jeet in the form of a customizable mixin.

That way all Jeet sites will look different, while still providing some really easy way to implement some core styling.

For instance, if you only wanted forms styled you could do:

form
    form(border_color, blur_border_color, border_radius)

Or if you wanted custom typography (font families will be built from CSSfontstack.com):

html
    typo(font_family, base_font_size, base_modular_scale)

Tables:

table
    table(border_color, zebra_striped_color1, zebra_striped_color2)

These are just some examples, but if anyone has any suggestions or suggested parameters/parameter-order, I'm all ears.

The current website looks nice and functions well, but the doc is kind of a PITA to scroll through and read. I always prefer sidebar doc like http://docs.meteor.com with working examples and code snippets.

Hello,

I have a strange issue with variable with stylus - when I put like this in main style_styl.styl

.test
color base_color

Color code is rendered fine...

When I put same class in settings.styl or goodies.styl, it renders base_color instead of color code...

Any ideas ?

Thanks,

Matija

Just curious, why was support for SASS added? Does this mean each change to the core needs to be added in both languages?

Right now column gutters lose proportion as you nest. This is how Bootstrap does it, and it's fine unless you're using a very detailed mockup.

http://semantic.gs

I followed the instructions, but possibly there is something wrong with the PATH?
http://i.imgur.com/7opslM2.png
I wasn't sure which path to put it in. Tried both. XD
There is noone named "global" in Win 8, it seems.

This is what happens when I try to create a new project:

Creating JeetProject
Downloading Repo ... Error: EXDEV, rename 'C:\Users\NEWADM~1\AppData\Local\T
emp\1369642290541-5518297299277037\jeet-master'

Hello,

when I use col or w() - example

.half {
w(2.5, 5)
}

My problem is this - this html doesn't float to the right but jump below the first div... but if I reset the "margin-right: 0" then it works...

what am I doing wrong ?

Thank you...

The current site was made in about an hour and looks like it. Finish redesign and deploy.

Uh, ahm, well, that's pretty noob but i don't find a way to see the precise error using jeet -watch, the prompt said me:

util.print: Use console.log instead

util.print: Use console.log instead
    Compiling Stylus ... util.print: Use console.log instead
util.print: Use console.log instead
Error!util.print: Use console.log instead
util.print: Use console.log instead

So, i use the simple logic and type jeet -h, the option "-d or --debug" appear and i use it, but ehem, nothing, the same log appear when i write a intentional error ...

My question is how i can see the precise error with jeet, print what, what console.log? D: i'm a bit confused

Thanks! ;)

Not sure if I should convert IE hacks to conditional comment classes or just get rid of the huge amount of conditional comments at the top.

Essentially just change max-width to min-width and add the argument for mf designers.

We can change output dir for compass in config.rb, and for stylus with -o option to ../style.css. Than in index.html path will be the same for both: css/style.css. Pull on the way :)

Bourbon/Neat does this really well. Check out the nesting section: http://neat.bourbon.io/examples/

Notice how the columns are equally sized? This is really preferred as it makes the whole concept behind a grid HAVE A POINT!!!

Notice how Bootstrap newbs this up? http://twitter.github.io/bootstrap/examples/fluid.html

Most fluid frameworks newb this up. We're currently newbing this up too, but I just can't figure out the math involved.

It definitely seems like there is a pattern there to be unearthed because you can change the custom gutter setting for every level of nested columns to a few more % than before and you can get equi-distant columns.

Anyway, this is the pinnacle of an awesome grid. If anyone can figure this out I'll slap your name all over everything I ever do.

I'm pretty desperate for this awesomeness.

Instrucions
"Install NodeJS
npm install -g stylus axis-css
git clone https://github.com/CorySimmons/jeet.git foo
cd foo
./watch
Hack away at index.html and css/custom.styl"

Did install Nodejs and stylus axis-css successfully ...

I follow those - but got error - 'git' is not recognized as an internal or external command, operable program or batch file.

Typography

Look into ZURB Foundation's implementation of modular scale and implement as such...

typo('golden', 14px, 44px)

Buttons

Will require math to make sure contrast looks correct.

Syntax:

btn(background, radius, style)

Usage:

btn(#0000ff, 10px, glossy)

Compiling Stylus ... OK!
Saving Compiled Stylus ... OK!


Compiling Stylus ... OK!
Saving Compiled Stylus ... OK!


Compiling Stylus ... OK!
Saving Compiled Stylus ... OK!


Compiling Stylus ... OK!
Saving Compiled Stylus ... OK!


Compiling Stylus ... OK!
Saving Compiled Stylus ... OK!

events.js:72
throw er; // Unhandled 'error' event
^
Error: socket hang up
at createHangUpError (http.js:1425:15)
at Socket.socketOnEnd as onend
at Socket.g (events.js:175:14)
at Socket.EventEmitter.emit (events.js:117:20)
at _stream_readable.js:883:14
at process._tickCallback (node.js:415:13)

As much as I believe in the principal 'less is more', i think it can be slightly discouraging for newcomers to see c(), u(), s() when they are learning about the framework.

column(), unit(), span() are a bit more self-documenting and can provide a path of least resistance. We could then alias these functions to c(), u(), s(), for those of us who understand the framework/methodology a bit more. (And those of us who are lazy..er 'efficient' and don't want to type the extra characters.)

Any thoughts on this?

While I think that packaging for node is a nice idea, the instruction given in the repo should allow a dev to use the code in a package-agnostic way.

In other words: the method described in the first video tutorial (with cloning and stylus in watch mode) should still be documented in the readme.md file.

Packaging is a delicate business, and it will not work on some system, at some point (not because the package is of poor quality, but because packagers can't test the package on every single possible system configuration).

There is no reason why a broken package should prevent somebody to use the framework, though.

This is a problem with the formula of span() itself. Basically it was working before when content-box was the box-sizing method, but the problem was when you added borders it would break. So border-box absolutely has to be the sizing method, it's just a matter of figuring out the exact formula to make sure it works consistently.

Something like unit(1) to generate a column size. Could be used for things like box padding to make it fluid and even with the rest of the layout.

How to implement 100% height floated aside with jeet?

section
aside

It would be excellent if the grid system lived on it's own in a separate repo. While the rest of the tools around this are awesome, it's good for those just interested in the grid to be able to use, track, and contribute to it without worrying about the small build system that has cropped up around it.

We'd be happy to fork this to roots and work on maintaining it if that's what you'd like, or if you want to split it out yourself that would be sweet as well 🐔

Hello,

I parsed

opacity(0.2)

and got

opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=border-radius: 20;)";filter:alpha(opacity=border-radius: 20;)

What am I doing wrong...

Thank you in advance ...

When trying to do something like this:

.test 
   w(1, 2, s, c, f)

we get that output:

.test {
  *zoom: 1;
  display: inline;
  float: left;
  width: 31.914893617021278%;
  margin-right: 2.127659574468085%;
  *width: 31.179078014184398%;
  *margin-right: 2.083333333333333%;
  width: 33.33333333333333%;
  *width: 33.33333333333333% -correction;
  *behavior: url("js/vendor/boxsizing.htc");
  margin-right: 0;
  float: none !important;
  display: block !important;
  margin-right: auto !important;
  margin-left: auto !important;
  *margin-right: auto !important;
  *margin-left: auto !important;
}

Will try get rid of this repeated width's and margin's with more if-else statments.

Vertical centering is so finicky. I'm afraid if I write one and someone can't figure out how to implement it instantly that they'll get pissed at the framework. Regardless, it's becoming a PITA to vertically center things so hopefully someone will contribute a nice mixin.

If I try to watch my project and run:

--- dev/jeet » jeet -t watch

It initially seems that it worked:

Watching App

    Compiling Stylus ... OK!
    Saving Compiled Stylus ... OK!

    Live Reload is on and listening !

However, at the first save of my index.html document I get:

events.js:48
        throw arguments[1]; // Unhandled 'error' event
                       ^
Error: connect ECONNREFUSED
    at errnoException (net.js:670:11)
    at Object.afterConnect [as oncomplete] (net.js:661:19)

...and I get thrown back at prompt.

I'm using the script, http://benfrain.com/downloads/respond.html to determine my browser viewport at various resizes. However, imputing the shown size in my bp() doesn't work correctly. If I specify let's say, bp(885px) with a declaration of hiding the body, the body will not hide until 790px, not 885px.

Any ideas?