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
Kristian Frost
@kfrost89
p
compiled to:
    display: flex;

    flex-flow: row wrap;

    max-width: 960px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 20px;

    padding-right: 20px;

    @media (min-width: 992px) {
    display: flex;
    flex-flow: row wrap;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
  }
terrible
Peter Ramsing
@peterramsing
What does it output before LostGrid transpiles it?
(If you comment out LostGrid or something along those lines...)
And is it still throwing the "split" error?
Kristian Frost
@kfrost89
No
Peter Ramsing
@peterramsing
So the issue that odd formatting, now?
(Sorry, now I'm confused what's broken. 😳)
...and I need to get some sleep. Either answer here and I'll try to get back to you or if you think there is a bug you can create an issue and I'll for sure see that.
Kristian Frost
@kfrost89
As Cory said, it seems as if the mixins plugin in postcss is broken
Cory Simmons
@corysimmons
Yeah, they do that ugly formatting stuff too. PostCSS itself is a bit complicated to write plugins in. It's no wonder the ecosystem is littered with nasty plugins.
Peter Ramsing
@peterramsing
:( That means that we need to be even more sure that LostGrid doesn’t output dirty code. :thumbsup:
Cory Simmons
@corysimmons
I don't think it does, but I spent a lot of time making sure ant worked well with well-written plugins. In particular where ant has funky syntax it was tricky.
I seem to remember bumping into this with Lost as well. And Lost was usually not the culprit so I wouldn't sweat it too much Peter.
Mattia Astorino
@equinusocio
hi all
Cory Simmons
@corysimmons
:wave:
Peter Ramsing
@peterramsing
:wave:
Michael Maier
@maiermic
hi
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