Holy Grail Layout with Basic Drop...

User 10077 Photo


Senior Advisor
976 posts

Some people learn better by starting from a theme and customizing it. Personally, I learn better if I learn the basics and expand from there. If you are struggling with CSS Grid, I highly encourage you to watch the 3 videos that Bob "The Builder" made.

https://cssgrid.cc/video-tutorials/

The videos will do two things for you.
1. You'll learn how CSS Grid is put together.
This may help you gain a better understanding of how Grid works.

2. You'll learn about Fallback First.
You may not realize this, but for Q1 2018, IE11 is 2nd in use behind Chrome with almost 12% of the market -- more than Firefox, Safari and Edge. ( See: https://tinyurl.com/ybk77t3m ) There are a number of reasons for this, but a big one is that larger companies are finally upgrading to Win10, but they are installing IE11 as well so that they can use it instead of MS Edge. The problem is that IE11 does not recognize CSS Grid, and it should not be ignored with that much market share right now. That's what "Fallback First" is for. It allows you to create what IE11 (and other older browsers) will display.

Back to the discussion about the videos.

Video 1: Introduces you to CSS Grid and setting it up
Video 2: Sizing grid rows, columns and gutter
Video 3: Put it all together by creating the "Holy Grail Layout"

If you watch for what Bob is actually doing in the RSD settings, you'll not only learn how Grid works and how to put together a basic layout, you will learn how to use the Grid Editor which is an awesome feature IMO.

For those who like to start with a theme, I've attached a SD3 file that already has a "holy grail layout" and also contains a basic dropdown navigation menu.

NOTE: I wasn't the original creator of the dropdown menu. I created it from another forum member's drop-down, but I tweaked it a little. (I can't remember who it was that posted it originally.)
Attachments:
Brian

Want personal and specialized help with RLM, RSD or with converting your VSD (or other) site to RLM/RSD? Email me at cchelp@uscni.org or call 865-687-7698.
User 2624742 Photo


Registered User
51 posts

Could be my base template for some things. Thank you, Brian...
User 244626 Photo


Registered User
651 posts
Online Now

Yes, well done Brian. I have saved the layout as a component which I saved in a folder I created in components called "Layouts"
User 232214 Photo


COO
823 posts

Twinstream wrote:
I have saved the layout as a component which I saved in a folder I created in components called "Layouts"


A layout component, nice! :cool:
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2903050 Photo


Registered User
144 posts
Online Now

Sorry to hijack the post. I am trying to recreate Bob's video 1. What does he use to create the blue boxes lettered a-h? Are they containers or images? Thanks Phil
P.s great work Brian.
User 10077 Photo


Senior Advisor
976 posts

They are containers with a heading inside them.
Brian

Want personal and specialized help with RLM, RSD or with converting your VSD (or other) site to RLM/RSD? Email me at cchelp@uscni.org or call 865-687-7698.
User 2903050 Photo


Registered User
144 posts
Online Now

That's what I did you recreate but came up unstuck. The containers all had gaps around but no padding or margins. Will have another go me thinks?
User 10077 Photo


Senior Advisor
976 posts

Watch closely the styles panel in the video and pause it to copy Bob's settings. That might help.
Brian

Want personal and specialized help with RLM, RSD or with converting your VSD (or other) site to RLM/RSD? Email me at cchelp@uscni.org or call 865-687-7698.
User 48096 Photo


Registered User
7 posts

Brian Durfee wrote:
They are containers with a heading inside them.



So Brian are they containers inside one container ??? I am too trying to recreate Bob's video 1 to learn but as soon as i got to the part he said he cheated and already created a component it was all over red rover .. LOL until i have found a way to make that component

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.