peterramsing/lost

Lost Grid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.

Michael Maier

@maiermic

Mattia Astorino

@equinusocio

..and i think you don’t know how many cell you will have inside the container

Michael Maier

@maiermic

I know the cell count

I'd like to use different grids depending on the cell count

I'd like to be able to use the example grid for 4 to 6 cells

it should be possible that a specific cell spans multiple colums

for example

|-----|-----|-----|  \
|  1  |  2  |  3  |  |
|-----|-----|-----|  } 100vh
|  4  |     5     |  |
|-----|-----|-----|  /

\--------v-------/
       100vw

further I need a vertical and horizontal gutter

Mattia Astorino

@equinusocio

have you checked the documentation?

so, using flexbox you can achieve the first need

@lost flexbox flex;

.container {
  lost-flex-container: row;
  height: 100vh;
}


.cell {
  background-color: lightgreen;
  lost-column: 1/3 3;
}

Michael Maier

@maiermic

sadly I cann't use flexbox, because it is not supported on my target platform

Michael Maier

@maiermic

I'll try to calculate the height manually with calc and use lost-waffle with the gutter option

I guess that's the right mix :D

Peter Ramsing

@peterramsing

lost-waffle is where I'd start for that. Sounds like you already got it working. 👍🏻🕺🏼

Michael Maier

@maiermic

yes, so far it is working

future will tell how solid it is to calculate it manually

thanks for your support

and this great tool :+1:

Peter Ramsing

@peterramsing

Awesome!

Michael Maier

@maiermic

I'm using postcss

and I'd like to use a variable for @lost gutter var(--gutter);

postcss-cssnext runs before lost

webpack builds without an error

but the variable is not replaced correctly

but it is replaced correctly in padding: var(--gutter);

Peter Ramsing

@peterramsing

Hmm. That sounds like postcss-cssnext is only offering you what would be valid CSS that a browser would be able to understand. Because Lost isn't understood by the browser then it will not transform it for the LostGrid declarations.

Michael Maier

@maiermic

I agree

do you know an alternative?

Peter Ramsing

@peterramsing

There might be a configuration in cssnext that will let you do that, though.

I'd read their docs to see if there is a way to still use their tool. Other than that, the only thing I know off the top of my head is to use a pre-processor.

What you could also do is put the LostGrid gutter setting with your variable settings so they're right next to each other so you'd just change both of them if you wanted to change your gutter.

Michael Maier

@maiermic

thanks for your suggestions

Peter Ramsing

@peterramsing

Gonna jump offline-then I have a super busy day at the office but I'll keep an eye here if you have any more questions. That variable thing is interesting. Not sure how to solve that within LostGrid. Hmm

Michael Maier

@maiermic

seems to me that CSS next variables can not be used in @lost gutter var(--gutter);

probably it requires a lost specific postcss-plugin for this use case

Krestian Weken

@chrisk8er

hi there...

Krestian Weken

@chrisk8er

i follow this tutorial The LostGrid Cycle on tutorial lostgrid . but i get unexpected behavior. the right box are always going down (or not fit). i'm new with lostcss. here's my experiment with codepen i have tried with webpack loader and get the same result. sorry for my bad english.

Mattia Astorino

@equinusocio

@chrisk8er you add the padding to the cells. You need box-sizing: border-box;

This message was deleted

Krestian Weken

@chrisk8er

thanks @equinusocio that fix my problem...

Ruskin

@jonnyparris

Hey Folks, does anyone have any experiencing using the Lostgrid postcss plugin with VueJS/Nuxt? My columns are refusing to render inline even when I try the simplest example from the Lostgrid docs

Ruskin

@jonnyparris

no worries, fixed it (docs could do with an update..)

Peter Ramsing

@peterramsing

@jonnyparris, the install/build docs are still needing some work. There are so many variants so it's tough to catch them all. Would you be able to add an example project here: https://github.com/lostgrid/lostgrid-examples?

(an example VueJS/Nuxt project)*

Michael Singh

@wadadli

Sorry for nic spam, I forgot other's would see it >.<

Cory Simmons

@corysimmons

Anyone know what happened to that Issue that was basically like a Showcase of sites built with Lost?

Ruskin

@jonnyparris

@peterramsing I'm not sure if my solution is useful to package as a whole example project - I basically have to wrap any lost-columns within an element that has lost-flex-container: row; in order to get them working. Not sure why it works, but it didn't seem obvious in the docs that it's required so maybe it's just a Nuxt.js quirk?

Peter Ramsing

@peterramsing

@corysimmons Here: lostgrid/lostgrid-site#6

@jonnyparris Hmm. Any chance you could share a link to your CSS?

Mattia Astorino

@equinusocio

@peterramsing i have the same ruskin issue. I need to put lost-flex-container: row to make it works using @lost flex

Where communities thrive

People

Repo info

Activity