Problem with flexbox in sass

[Alexzanderk]

I have problem with flex box.
When I write the code in my style.sass

@lost flexbox flex

section 
  lost-center: 980px

div 
  lost-column: 1/3

Everything's broken!! How I must write this @lost flexbox flex in style.sass?

[peterramsing]

@wellapex Could you provide a bit more code as reference to help see what's up?

Thanks! 😄

[Keats]

I think the issue is that all the docs are using postcss and there's nohting on how to use it from sass or less etc

[peterramsing]

@Keats I hear you. There should be a way to make it clearer for those using preprocessors as this has come up several times.

In theory, there shouldn't be any special docs needed for preprocessors like Sass or LESS. The properties should be treated like margin-right might. The preprocessor passes it along without any care. So just like margin or padding doesn't care about the preprocessor neither should lost-column. @Keats Does that help? I think this might be wort documenting a bit better and having some examples to show this.

[Keats]

From my point of view, not sure about @wellapex :
I'm currently looking for a grid for an app and I've looked at Susy, Foundation for apps and ended up on this one. Since I don't use postcss (well apart from autoprefixer), I don't really know how it would fit in my build, ie i'm guessing i need to put a gulp-postcss call somewhere but having how to use at the top of the README would be nice

[peterramsing]

You're totally right about getting something at the top of the README.md. Since inheriting this project last week I'm tying to prioritize what things to do and when. Documentation is coming soon but just not quite yet. This doc is going to be replaced soon but might help.

I also have a testing project that has gulp working.

[corysimmons]

@peterramsing It might be a good idea to create a few different repos:

• lost-css-example
• lost-scss-example
• lost-sass-example
• lost-less-example
• lost-stylus-example

And just make them as barebones as possible demos. Then you can link to them in the README as well as on the future website, as well as in these Issues.

It'd also be nice to have just to confirm Lost works in all the preprocessors without special treatment.

I know you've got a lot going on, so feel free to backburner this.

I'd also try to start collecting other people's Lost projects in a Wiki or something to send people to who are curious about more complex uses.

[Keats]

Completely missed the Installation link in the readme as it's part of the table of content but is actually a link

[peterramsing]

@Keats Would you mind creating a Gist and copy the raw README.md in there and somehow identify anything that is confusing to you? You're more than welcome to explain exactly what is confusing but even if you just identify areas that don't make sense that would be amazing! I'll take that to help write update the existing README and also where I need to focus on the documentation.

Hopefully that can help answer questions for you as well! No pressure of course. Let me know if I can help in any way with your app.

PS: I'm not asking out of lazy, I promise. I've just gone through it enough that I don't spot the things that need attention. 😄

[Keats]

I'll do that next week but from a quick look the readme seems to be doing the job of a website, ie something like http://neat.bourbon.io/examples/
Another really cool thing to do (if there is time) is examples like http://foundation.zurb.com/apps/page-templates.html

[peterramsing]

@Keats You're reading my mind. I'm currently looking for the best option for creating the docs. I'm hoping to have them out of the README soon. There is currently a page that has some examples but there is no documentation that goes with it. This is also coming soon. Not enough time in the day, I suppose.

[peterramsing]

@Keats And thanks for your help!

[Keats]

I'll just comment here rather than making a gist:

• Installation in table of contents is a link to the wiki, not a part of the README like you would expect. How to use with gulp/grunt and sass/stylus/less/etc would be better imo
• I don't find comparison tables useful if you need to click to see what the author meant for a row and a paragraph is usually better imo, comparing like that always feel like a bad selling technique. So a paragraph/list at the beginning explaining what lost is, what does it do, what is a waffle grid (still not sure about that one, a visual explanation would help), that it can do flexbox grid (and drawbacks/advantages) etc
• Keep the global settings and move all the api docs to the website
• Eventually link to some examples repo if it exists

Overall as I said before, more stuff on the website since you can have visual examples there.
I'll probably try to use Lost this week so I might have more to add after that