jeet icon indicating copy to clipboard operation
jeet copied to clipboard

Could someone please extend the so called API on the website with clearer examples?

Open blaasvaer opened this issue 6 years ago • 3 comments

As it is VERY vague at best. I find it hard to see exactly HOW this is so much greater that other grid systems, as I'm having a hard time figuring out exactly what MOVE does. What's it good for? When I click the View example button, it scrolls me to a section with three cols that's prefixed with the word SHIFT!? Totally confusing ...

Could someone please elaborate on the API documentation without assuming a hell of a lot?

Thanks (if anyone is listening at all ...).

blaasvaer avatar Jul 06 '17 17:07 blaasvaer

Hey, sorry, yes the docs on the website are wrong. I'm so sorry for wasting your time.

I'm extremely poor right now or I'd fix them. These docs are correct: https://github.com/mojotech/jeet/tree/master/docs

And if you'd like to help others who might be in your situation, feel free to fork/clone this repo, checkout gh-pages, follow the README (https://github.com/mojotech/jeet/tree/gh-pages), and update the docs to be correct.

shift was replaced with move since "shift" is a reserved word in Stylus (and maybe Sass as well).

It's used for source ordering (http://zurb.com/word/source-order). tl;dr If you want a sidebar to be on the right on desktop, and content on the left. But on mobile you want the sidebar to appear above the content, you'd need to either use flexbox order (which is what most people do nowadays—Jeet is pretty old and move is really only useful for old browsers), or you could have the html look like this:

<body>
  <aside>Sidebar</aside>
  <div>Content</div>
</body>

...then on desktop have some CSS that turns it into columns:

@media (min-width: 700px) {
  div {
    float: left;
    width: 75%;
  }

  aside {
    float: right;
    width: 25%;
  }
}

This is just an example of the concept of "source ordering". Jeet, and many other grids, does this shifting around (or "moving") via position: relative; left: some percentage.

Hope that clears it up.

Again, I'm extremely sorry for the frustration. Please help me out and contribute so others don't run into this problem. 🙇

corysimmons avatar Jul 06 '17 19:07 corysimmons

Hi Cory,

Sorry to hear that. And I’d be more than happy to help. My problem is, that I simply don’t understand the docs. The description of what move and offset actually do is unclear – it should be shown by an example (I’d be happy to provide those if I understood their purpose).

At the moment I’m trying (very time consuming) to have jeet ‘ignore’ the first child of a container. And in that process I can see a major problem with jeet: If I assign a method to a child with a specific class ALL children are taken into consideration – classname or not. I can therefore not get jeet to ignore the first child, let me explain by example:

I’m trying to achieve this (and I have to have them all in the same container due to the flow):

But this is what I get:

Now, I thought (!) that either offset or move would be what I’d need in a situation like this. Well, it’s not. And reading the docs didn’t clear that up.

Now using simple illustrations like the ones above, I’m sure that it would be easier to explain what the various methods actually do …

I’ll help all that I can. But need help understanding the basics (and I don’t get the $cycle either, as it seems like just doubling the functionality of ratio – why is 1/2 not enough to have two cols? .. cycle is somewhat redundant).

Sam Blåsvær Senior Frontend Architect 20 70 33 60 [email protected]

Ådiget 16 2610 Rødovre

www.blaasvaer.dk

On 6 Jul 2017, at 21.52, Cory Simmons [email protected] wrote:

Hey, sorry, yes the docs on the website are wrong. I'm so sorry for wasting your time.

I'm extremely poor right now or I'd fix them. These docs are correct: https://github.com/mojotech/jeet/tree/master/docs https://github.com/mojotech/jeet/tree/master/docs And if you'd like to help others who might be in your situation, feel free to fork/clone this repo, checkout gh-pages, follow the README (https://github.com/mojotech/jeet/tree/gh-pages https://github.com/mojotech/jeet/tree/gh-pages), and update the docs to be correct.

shift was replaced with move since "shift" is a reserved word in Stylus (and maybe Sass as well).

It's used for source ordering (http://zurb.com/word/source-order http://zurb.com/word/source-order). tl;dr If you want a sidebar to be on the right on desktop, and content on the left. But on mobile you want the sidebar to appear above the content, you'd need to either use flexbox order (which is what most people do nowadays—Jeet is pretty old and move is really only useful for old browsers), or you could have the html look like this:

Content
...then on desktop have some CSS that turns it into columns:

@media (min-width: 700px) { div { float: left; width: 75%; }

aside { float: right; width: 25%; } } This is just an example of the concept of "source ordering". Jeet, and many other grids, does this shifting around (or "moving") via position: relative; left: some percentage.

Hope that clears it up.

Again, I'm extremely sorry for the frustration. Please help me out and contribute so others don't run into this problem. 🙇

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mojotech/jeet/issues/534#issuecomment-313501145, or mute the thread https://github.com/notifications/unsubscribe-auth/ABI1KQa_PIjbLkTTlhvyjmBoKoWumjGhks5sLTrpgaJpZM4OP-sl.

blaasvaer avatar Jul 08 '17 10:07 blaasvaer

And if it’s used to reverse the order of dom flow, then move gives the wrong association (move over, as do offset). Reverse would be more descriptive.

Sam Blåsvær Senior Frontend Architect 20 70 33 60 [email protected]

Ådiget 16 2610 Rødovre

www.blaasvaer.dk

On 6 Jul 2017, at 21.52, Cory Simmons [email protected] wrote:

Hey, sorry, yes the docs on the website are wrong. I'm so sorry for wasting your time.

I'm extremely poor right now or I'd fix them. These docs are correct: https://github.com/mojotech/jeet/tree/master/docs https://github.com/mojotech/jeet/tree/master/docs And if you'd like to help others who might be in your situation, feel free to fork/clone this repo, checkout gh-pages, follow the README (https://github.com/mojotech/jeet/tree/gh-pages https://github.com/mojotech/jeet/tree/gh-pages), and update the docs to be correct.

shift was replaced with move since "shift" is a reserved word in Stylus (and maybe Sass as well).

It's used for source ordering (http://zurb.com/word/source-order http://zurb.com/word/source-order). tl;dr If you want a sidebar to be on the right on desktop, and content on the left. But on mobile you want the sidebar to appear above the content, you'd need to either use flexbox order (which is what most people do nowadays—Jeet is pretty old and move is really only useful for old browsers), or you could have the html look like this:

Content
...then on desktop have some CSS that turns it into columns:

@media (min-width: 700px) { div { float: left; width: 75%; }

aside { float: right; width: 25%; } } This is just an example of the concept of "source ordering". Jeet, and many other grids, does this shifting around (or "moving") via position: relative; left: some percentage.

Hope that clears it up.

Again, I'm extremely sorry for the frustration. Please help me out and contribute so others don't run into this problem. 🙇

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mojotech/jeet/issues/534#issuecomment-313501145, or mute the thread https://github.com/notifications/unsubscribe-auth/ABI1KQa_PIjbLkTTlhvyjmBoKoWumjGhks5sLTrpgaJpZM4OP-sl.

blaasvaer avatar Jul 08 '17 10:07 blaasvaer