Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jul 05 17:02
    YPetremann commented #23
  • Jul 05 16:02
    sylvainpolletvillard closed #24
  • Jul 05 16:02
    sylvainpolletvillard commented #24
  • Jul 05 15:48
    sylvainpolletvillard closed #23
  • Jul 05 15:48
    sylvainpolletvillard commented #23
  • Jul 05 15:47

    sylvainpolletvillard on master

    v3.0.2 (compare)

  • Jul 05 15:47

    sylvainpolletvillard on master

    fix issue #23 (compare)

  • Jul 05 15:28
    sylvainpolletvillard commented #23
  • Jul 05 08:00
    YPetremann edited #24
  • Jul 05 07:59
    YPetremann opened #24
  • Jul 05 07:24
    YPetremann opened #23
  • May 13 08:47

    sylvainpolletvillard on master

    revert formatting changes on re… (compare)

  • May 10 22:40

    sylvainpolletvillard on master

    travis: set node minimum versio… (compare)

  • May 10 19:43

    sylvainpolletvillard on master

    dependencies updates Merge remote-tracking branch 'o… (compare)

  • May 10 19:33

    dependabot[bot] on npm_and_yarn

    (compare)

  • May 10 19:33
    sylvainpolletvillard closed #21
  • May 10 19:33

    sylvainpolletvillard on master

    Bump lodash from 4.17.20 to 4.1… Merge pull request #21 from syl… (compare)

  • May 10 19:33

    dependabot[bot] on npm_and_yarn

    (compare)

  • May 10 19:32

    sylvainpolletvillard on master

    Bump hosted-git-info from 2.8.8… Merge pull request #22 from syl… (compare)

  • May 10 19:32
    sylvainpolletvillard closed #22
SeeYouTomorrow
@pixxx
Also I suppose that's the whole idea simply to not use the arrows but rest stays good old same i guess :blush:
alright :new_moon_with_face: nite!
Sylvain Pollet-Villard
@sylvainpolletvillard
We can't use [] because it matches attributes as a selector
[footer] targets <div footer></div> for example
Sylvain Pollet-Villard
@sylvainpolletvillard
After a night of thought I think the change is currently not worth it. Most of time the zones are not large enough to get a visual intuition of the content alignement based on position of the selector. I let the issue open so that other people can react and propose ideas, but currently I am not sold.
SeeYouTomorrow
@pixxx
@sylvainpolletvillard :+1:
Sure but | is all you need as you already had shown.
Sylvain Pollet-Villard
@sylvainpolletvillard
yes, but not necessarily better than arrows. See how to left-align sidebar in previous example. | would be more confusing than
SeeYouTomorrow
@pixxx
why would you use it for left align when the idea was to let it out for actually putting the text to the left for instance, that's why those made no sense to me.
Sylvain Pollet-Villard
@sylvainpolletvillard
in the example the zone is currently too small. We would need to make it at least twice bigger to actually see the intended alignement
I tried to update the preset examples this way and this is not as intuitive as I thought it would be.
especially for horizontal alignment
Sylvain Pollet-Villard
@sylvainpolletvillard
+--150px-----+    +--150px-----+    +--150px-----+    +--150px-----+ 
|.sidebar    |    |  .sidebar  |    |    .sidebar|    | |.sidebar| |
+------------+    +------------+    +------------+    +------------+

+--150px-----+    +--150px-----+    +--150px-----+    +--150px-----+ 
| .sidebar ← |    |  .sidebar  |    | → .sidebar |    |→ .sidebar ←|
+------------+    +------------+    +------------+    +------------+
Sylvain Pollet-Villard
@sylvainpolletvillard
┌──────────────┐  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│   .header    │  │              │  │              │  │     ---      │
│              │  │   .header    │  │              │  │   .header    │
│              │  │              │  │   .header    │  │     ---      │
└──────────────┘  └──────────────┘  └──────────────┘  └──────────────┘

┌──────────────┐  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│   .header    │  │              │  │       ↓      │  │      ↓       │
│       ↑      │  │   .header    │  │   .header    │  │   .header    │
└──────────────┘  │              │  └──────────────┘  │      ↑       │
                  └──────────────┘                    └──────────────┘
vertical alignment is more visual, but probably because of the 3-row requirement
Conclusion: good idea if zones are extra large ; bad idea for most of practical examples
SeeYouTomorrow
@pixxx
mhm agree @sylvainpolletvillard
Gee I'm jealously trying to catch up on grid, trying to wrap my head around it, boy did they give us a lot of options for it :dizzy:
Sylvain Pollet-Villard
@sylvainpolletvillard
good luck about that
SeeYouTomorrow
@pixxx
:laughing: @sylvainpolletvillard thanks!
Actually glad Rachel did this tutorial it's helping quite a bit!
Daniel Box
@dbox
@sylvainpolletvillard question(s):
  1. could css grid make this
2 . could anything besides css grid make this
Daniel Box
@dbox
nm got it I htink
Sylvain Pollet-Villard
@sylvainpolletvillard
how much flexibility do you need for this layout ?
i.e. how many different configurations depending on screen size ?
it's totally feasible with grid but can be tedious if you have more than 5-6 layouts different
Daniel Box
@dbox
i figured it out
pretttyyyy cooll
jsut going to have 2 dif layouts
so not a biggie
Sylvain Pollet-Villard
@sylvainpolletvillard
nice
I quickly reproduced it with grid-kiss for info
with asciiflow.com it took me ~5 minutes
image.png
Sylvain Pollet-Villard
@sylvainpolletvillard
@dbox can't post on codepen, the plugin size is too big for codepen generator to handle but here is the code in case you want to try it on the grid-kiss playground : https://pastebin.com/fu74BUYs
Daniel Box
@dbox
@sylvainpolletvillard wow. awesome!
And it has fallbacks for ie?
Pretty incredible
Sylvain Pollet-Villard
@sylvainpolletvillard
yes it has :)
Daniel Box
@dbox
:bow: so cool man
Daniel Box
@dbox
i was just telling some folks about grid-kiss
and the more i dig in the more impressed i am. really great work @sylvainpolletvillard
holy moly asciiflow
Sylvain Pollet-Villard
@sylvainpolletvillard
thanks, really appreciate
to be honest this project was quite easy to make
I'm surprised no one already thought doing it