Thanks UXC! I've been having issues making grids, using them efficiently and coding them. Then I watched your video and all those issues disappeared! lol Keep up the great work~
was looking for this for a long time. Current sketch version has Grid Layout option which makes this pretty easy. It is weird that you still need to calculate manually you're overall site padding, that should be in that grid layout menu as well (it only has an offset option)
love this video as it touches on the developer side of things slightly. If you could expound on the developer side of creating the responsive design you'd really be onto something. There seems to be no content for translating the sketch design to the actual html/css grid coding
True @bolerophon , current versions of sketch have a default grid system function built within. Thanks for the video tho, it give a clear understanding of the grid system.
@UXClub.com What do you mean by saying the "default grid option" is buggy but the "built-in grid system" is fine? Are you saying there are two built-in grid tools, and if so, which one do you think is best? And if one of them's good, is Gridmansky still necessary?
Can gutter and column size be different when designing for responsive? Or they must be the same? Let's say for Large desktop, my column size is 80px, and the gutter size is 16, for desktop size, I set the gutter 15, and column size 70. Thanks.
Hi! I'm new to grids so my question may come off as stupid but still I'd like to know why the width for the desktop was set to 1280 px? How was this calculated? I'm actually designing a website for a 1440 px wide so I need to make sure that I understand the measurements for the grids correctly in general right from the start. thanks!
you don't want to use Layout Settings? It also can calculate everything in 1 page so you dont have to click then forget what you typed. Wondering the Pros and Cons
Can gutter and column size be different when designing for responsive? Or they must be the same? Let's say for Large desktop, my column size is 80px, and the gutter size is 16, for desktop size, I set the gutter 15, and column size 70. Thanks.
Are you supposed to change the text size in mobile? That's always been my question for responsive, how does code work if you change font sizes across different devices?
You also determine font sizes in a similar way using media queries. When resizing, you'll check how things adapt visibly. When you see that the text needs adjusting for mobile, you could wrap all of your mobile styles in a particular display width (AKA "breakpoint") - basically saying "anything 640px and smaller, do this". See this page to play: giona.net/tools/css3-mediaquery-generator/ ... type 640px in the value field, and resize your browser to simulate a mobile width. You can quickly see how media queries work.
Rulergrid isn't compaible with sketch anymore. Luckily, someone forked it (before I did 😉 ) and made a version that works in sketch. It's called Gridmansky now. The only thing is instead of making a grid on your artboard itself, you have to create a shape (rectangle) and make the grid there. Else everything works. github.com/davidhellmann/gridmansky
everyone talks about this bootstrap sh!t, not a single video tells how to maintain a grid system while designing a full-screen dashboard with a fuking sidebar...I am frustrated with the research man there's no video on that everyone is about this bootstrap sh!t I fuking know thattttt already...I promise guys when I found out how to actually master the grids in UI I will make a video to help you guys...I won't just make a video on the most common sh!t that even the beginners know...
Showing the connection between the code and the column design.. brilliant, really makes you understand!
This is most amazing video I have watched in years, so relatable and accurate for designers and coders. Thanks a lot
No dislikes! This itself tells how helpful this was! Thank you! Would love see more of your content! GOD BLESS!
Thanks Md ajaaz! Glad you enjoyed the video :)
Thanks UXC! I've been having issues making grids, using them efficiently and coding them.
Then I watched your video and all those issues disappeared! lol
Keep up the great work~
I came to check something simple but ended up learning so much more thanks! Great explanation of what's happening under the hood using bootstrap.
This is an incredible explanation of working with grids and designing responsively, the best one I have seen. Thanks!
Thank you!
one of the simplest explanation on this topic, thanks! useful for Photoshop users no less than for Sketch users.
Thank you very much
that was great, answering most of my questions, thank you
was looking for this for a long time. Current sketch version has Grid Layout option which makes this pretty easy. It is weird that you still need to calculate manually you're overall site padding, that should be in that grid layout menu as well (it only has an offset option)
Thanks for this tutorial, really helpful
love this video as it touches on the developer side of things slightly. If you could expound on the developer side of creating the responsive design you'd really be onto something. There seems to be no content for translating the sketch design to the actual html/css grid coding
Awesome video UXClub !!
Thanks
No problem, glad you enjoyed it
Thank you for sharing this!
True @bolerophon , current versions of sketch have a default grid system function built within. Thanks for the video tho, it give a clear understanding of the grid system.
I tend to find the default grid option a little buggy but that's just me. Either Gridmansky or the built in grid system does the job really
@UXClub.com What do you mean by saying the "default grid option" is buggy but the "built-in grid system" is fine? Are you saying there are two built-in grid tools, and if so, which one do you think is best? And if one of them's good, is Gridmansky still necessary?
this great and well explained, thanks!
In Sketch, you can create the same Grid without that plugin...
Can gutter and column size be different when designing for responsive? Or they must be the same? Let's say for Large desktop, my column size is 80px, and the gutter size is 16, for desktop size, I set the gutter 15, and column size 70. Thanks.
Loved the explanation!
Thanks Akanksha :)
thanks for this video!
Hi! I'm new to grids so my question may come off as stupid but still I'd like to know why the width for the desktop was set to 1280 px? How was this calculated? I'm actually designing a website for a 1440 px wide so I need to make sure that I understand the measurements for the grids correctly in general right from the start. thanks!
Gutters are almost never percentage based when implemented in grid systems like Bootstrap or Foundation which by default they are using 30px gutters
Awesome voice 👍
you don't want to use Layout Settings? It also can calculate everything in 1 page so you dont have to click then forget what you typed. Wondering the Pros and Cons
thanks
Lovely video
Thanks Emir!
By the way you can calculate right in spotlight
I could not find the plugin to download. does someone have the link?
how do you setup your css file for this grid ? what is the Mathematik behind?
Can gutter and column size be different when designing for responsive? Or they must be the same? Let's say for Large desktop, my column size is 80px, and the gutter size is 16, for desktop size, I set the gutter 15, and column size 70. Thanks.
where can you fin the plugin? Thanks
ruler grid plug in is not visible in my sketch after installing. restarted, still the same.
What about when users rotate their devices to landscape? Will the other mobile column classes be called as well?
I would go 6 col on mobile and treat the landscape tablet like a notebook size- 12 columns
Why desktop isn't 1440-40? Why is 1280? Why iPad and iPhone is total width -40?
Are you supposed to change the text size in mobile? That's always been my question for responsive, how does code work if you change font sizes across different devices?
You also determine font sizes in a similar way using media queries. When resizing, you'll check how things adapt visibly. When you see that the text needs adjusting for mobile, you could wrap all of your mobile styles in a particular display width (AKA "breakpoint") - basically saying "anything 640px and smaller, do this". See this page to play: giona.net/tools/css3-mediaquery-generator/ ... type 640px in the value field, and resize your browser to simulate a mobile width. You can quickly see how media queries work.
Which tool you are using ?
Whats the name of that plugin? And where i can found it?
It's called Gridmansky now. Will post an update to this lesson shortly :)
Thanks for the video man keep it up.
Does anyone know if this plugin still works? Cant get it to work!
I used this plugin and sketch's own grid layout....both of them don't work correctly, the best way is to make it manually.
Rulergrid isn't compaible with sketch anymore. Luckily, someone forked it (before I did 😉 ) and made a version that works in sketch. It's called Gridmansky now.
The only thing is instead of making a grid on your artboard itself, you have to create a shape (rectangle) and make the grid there.
Else everything works.
github.com/davidhellmann/gridmansky
Thanks for the tip Adrian, will post an update to this lesson shortly
The plugin isn't working for me :/
Try Gridmansky James
everyone talks about this bootstrap sh!t, not a single video tells how to maintain a grid system while designing a full-screen dashboard with a fuking sidebar...I am frustrated with the research man there's no video on that everyone is about this bootstrap sh!t I fuking know thattttt already...I promise guys when I found out how to actually master the grids in UI I will make a video to help you guys...I won't just make a video on the most common sh!t that even the beginners know...
He went reverse, should have done mobile first, much better practice. This is great information however.