Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Mar 15 14:43
    negropop opened #442
  • Feb 27 20:55
    peterramsing labeled #441
  • Feb 27 20:55
    peterramsing labeled #441
  • Feb 27 20:55
    peterramsing labeled #441
  • Feb 27 20:55
    peterramsing closed #441
  • Feb 27 20:55
    peterramsing commented #441
  • Feb 23 07:10
    eddietohier commented #441
  • Feb 23 06:37
    eddietohier opened #441
  • Feb 12 20:09
    mverissimo closed #440
  • Feb 12 19:44
    mverissimo edited #440
  • Feb 12 19:44
    mverissimo edited #440
  • Feb 12 19:42
    mverissimo edited #440
  • Feb 12 19:41
    mverissimo opened #440
  • Feb 10 02:44
    peterramsing commented #430
  • Feb 10 02:41
    codecov[bot] commented #439
  • Feb 10 02:39
    codecov[bot] commented #439
  • Feb 10 02:38
    codecov[bot] commented #439
  • Feb 10 02:37
    peterramsing unlabeled #424
  • Feb 10 02:37
    peterramsing labeled #424
  • Feb 10 02:37
    peterramsing labeled #424
Michael Maier
@maiermic
no
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