Could someone please extend the so called API on the website with clearer examples? #534
Comments
|
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
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 <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 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. 🙇 |
|
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
sam@blaasvaer.dk
Ådiget 16
2610 Rødovre
www.blaasvaer.dk
… On 6 Jul 2017, at 21.52, Cory Simmons ***@***.***> 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:
<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. 🙇
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#534 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABI1KQa_PIjbLkTTlhvyjmBoKoWumjGhks5sLTrpgaJpZM4OP-sl>.
|
|
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
sam@blaasvaer.dk
Ådiget 16
2610 Rødovre
www.blaasvaer.dk
… On 6 Jul 2017, at 21.52, Cory Simmons ***@***.***> 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:
<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. 🙇
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#534 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABI1KQa_PIjbLkTTlhvyjmBoKoWumjGhks5sLTrpgaJpZM4OP-sl>.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 ...).
The text was updated successfully, but these errors were encountered: