Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 06 07:31
    lynzrand commented #445
  • Mar 06 05:18
    BarryThePenguin closed #396
  • Nov 24 2020 19:27
    codebysubtract removed as member
  • Nov 11 2020 00:14
    peterramsing edited #446
  • Nov 08 2020 23:21
    peterramsing edited #446
  • Nov 08 2020 09:26
    codecov[bot] commented #446
  • Nov 08 2020 09:17
    codecov[bot] commented #446
  • Nov 08 2020 09:16
    codecov[bot] commented #446
  • Nov 08 2020 09:16
    codecov[bot] commented #446
  • Nov 08 2020 03:31
    peterramsing opened #446
  • Nov 08 2020 03:30

    peterramsing on 445-upgrade-postcss-8

    :recycle: Moves to the AtRule f… (compare)

  • Nov 08 2020 02:47

    peterramsing on 445-upgrade-postcss-8

    :recycle: Moves to using prepar… (compare)

  • Nov 07 2020 21:56

    peterramsing on 445-upgrade-postcss-8

    :recycle: Refactors to use new … :wrench: Changes up the dev ins… (compare)

  • Nov 07 2020 03:18
    peterramsing edited #445
  • Nov 07 2020 03:18
    peterramsing edited #445
  • Nov 07 2020 03:18
    peterramsing edited #445
  • Nov 07 2020 03:15

    peterramsing on master

    :see_no_evil: Adds DS_Store to … (compare)

  • Nov 07 2020 03:11
    peterramsing labeled #445
  • Nov 07 2020 03:11
    peterramsing labeled #445
  • Nov 07 2020 03:11
    peterramsing labeled #445
Michael Maier
@maiermic
I'd like to create a full page grid with multiple rows and columns
how can I do this with lost if all cells are in one container
for example I'd like to show the following markup as a grid with 3 rows and 2 columns
<div class="my-grid">
  <div class="my-grid-cell">1</div>
  <div class="my-grid-cell">2</div>
  <div class="my-grid-cell">3</div>
  <div class="my-grid-cell">4</div>
  <div class="my-grid-cell">5</div>
  <div class="my-grid-cell">6</div>
</div>
Michael Maier
@maiermic
|-----|-----|-----|  \
|  1  |  2  |  3  |  |
|-----|-----|-----|  } 100vh
|  4  |  5  |  6  |  |
|-----|-----|-----|  /

\--------v-------/
       100vw
Mattia Astorino
@equinusocio
@maiermic Hi, you can use the cycle lost-column: 1/3 3;
.my-grid-cell {
  lost-column: 1/3 3;
}
Michael Maier
@maiermic
@equinusocio thanks, but how about the height?
Mattia Astorino
@equinusocio
are you using flexbox?
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..)