Share your websites made with Site...

User 176817 Photo


Registered User
61 posts

I had some time and wanted to play with some Grid in Site Designer. After playing with Grid Area based placement, that is great if you have a full layout planed and takes some time since the placement container needs named in one area then defined in another. Then you have to redesign your layout at each breakpoint and pretty much have to have a full design in mind.
I prefer a top to bottom design, as well as desktop down design. So, I use the Frameworkless – Desktop Down template. Decided I like to use ‘Mini Grids’, down the page instead of the full grid design. I made a page based on Visions demo that worked on the top down design I like and decided to play Grid. My page is called 'Dream Land' at the website ….

http://dream-land-506188.netlify.app/

The header is composed of a Main Grid with three Sub Grids. The main grid uses ‘auto-fit 405 1fr’ repeat/minmax to create the responsive transitions, instead of breakpoints. The three sub grids are just used for centering of the containers both left and right and up and down (Justify and Align) and width control. The gap command is used as I strip all the padding and margin added when adding items as I have better control with the Gap command. Had to use one breakpoint to change the Grid flow direction for the Menu Buttons as grid cannot change this, and change some Grid autofits, but most transitions are done with the autofits to allow better flow when resizing screen.
The Hero is not grid, but the Wonderful and Romantic are sub grids in a grid wrapper to provide the transition. The Wonderful, Romantic, and Exotic are grids that contain a picture (downloadable) and the text overlays are made by Grid overlap. Taking the text and overlapping on the pix allows both the pictures and text as selectable. No breakpoints or backgrounds used here, and grid controls all the responsive transitions.
The footer is one Grid for transition control and four sub grids used for centering and width control. Controlling width, centering and gaps from one screen is nice. So, I started from the top and went down and have thirteen grid areas on this site. It also has no flex as I have not ventured there yet.
I designed the transitions to look good on a 10-inch tablet down (I own both apples and android devices) to a thin phone, but works on the desktop as well. And I know this site being all grid will not look in IE11 at all, and I do not care. Most web viewing is done on a phone or tablet and if they are the 1 to 2% who have not moved on from IE11 then that is their problem.
Jay Shrimplin
User 122279 Photo


Senior Advisor
14,550 posts
Online Now

Interesting project! And it is not bad in IE11 either, the only thing I can see is that the text and the menu in the header section get a bit too close.
I was a bit sceptic to the use of sub-grids. Last time I checked on caniuse.com (about a month ago) it said it had barely a wee bit of support in Firefox, but I see it works in Edge, so maybe it will work after all.

It would be interesting to see your project file. Do you mind posting it?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 176817 Photo


Registered User
61 posts

Inger wrote:
Interesting project! And it is not bad in IE11 either, the only thing I can see is that the text and the menu in the header section get a bit too close.
I was a bit sceptic to the use of sub-grids. Last time I checked on caniuse.com (about a month ago) it said it had barely a wee bit of support in Firefox, but I see it works in Edge, so maybe it will work after all.

It would be interesting to see your project file. Do you mind posting it?


The Sub Grid, that I refer to is not the Subgrid commands that will come out in version 2 of grid. My reference of sub grid is a grid inside another grid. These work well for me now, but next version that is only available on Firefox Nightly for now is just testing for Version 2 of Grid. You can play with it now, but even though SD can preview in Firefox Nightly, the SD interface will have to be updated to use these commands. The feature of the CSS Grid Layout Module Level 2 allows a grid-item with its own grid to align in one or both dimensions with its parent grid. Once these are implemented then setting up cards that are responsive and fully aligned will almost automatic. And wild layouts will be available to us then.

I use the Grids inside of grids and can work with outer alignment, and transitioning, but the inner alignment will come later.
I have attached the Dream Land project files so you can view my method. If you find any new ways to use these then please share. This grid stuff is new and exciting.
http://jshrimp.coffeecup.com/storage/Dreamland.zip
Jay Shrimplin
User 176817 Photo


Registered User
61 posts

Subgrid will make things so much better, but here is my playing with Cards in Grid for now. I have made the cards different heights for now so you can see that cards adjust to different heights as dictated from side to side. The Cards1 has no breakpoints and transitions on grid commands only.
https://cards1-3bc228.netlify.app/
Cards2 uses one breakpoint to control the cards for tablets better. No data changed, just the Main Grid values.
https://cards2-d20947.netlify.app/
The design is a Grid with auto-fit 294px 1fr grid with a card grid installed inside the grid. Then adding elements inside the card. Then all I do is copy the card container over and over and placing new elements into them. The card will size itself to fit the data. This shows that the height of the sub grids sizes on its data or to the size of the card next to it if it is larger.
Note the buttons do not align as spacing on grids is using gaps only and each card is independent of each other in grid version 1 I will use this layout to note my favorite restaurants with notes for each, and will also use this to make myself some contact cards as the cards look great in large screens and small phones. I can copy the card container and add as many cards as I want and it will be auto responsive.
Jay Shrimplin
User 122279 Photo


Senior Advisor
14,550 posts
Online Now

Hi Jay, thanks for posting the project file! I have downloaded it, but because I have a 'millstone' hanging over my head until the end of this month, I will check it out after that ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2855676 Photo


Registered User
7 posts

Hi Folks,

I redesigned my business website using Site Designer v4. I use Site Designer on a Mac desktop and a Windows laptop, with project files synced using OneDrive (Microsoft 365). The site uses the Foundation 6 framework and was build up from using the CoffeeCup Holker Houses template as a starting point.

https://www.henwig.com/

I love being able to make alterations to the site irrespective of whether I'm in the office or out and about. My previous web design app was Mac only and it was frustrating not being able to do any work on the site when on a train journey/business trip/etc.

A massive shout out goes to Wayan Jaya, who provided a massive amount of help to me with regards to web design best practices and how to use Site Designer. I cannot thank him enough for his knowledge and patience with me.

In addition, thank you to everyone else who helped me via this forum. It was very gratefully received.

The design of the site is ongoing. I want to do some page loading performance improvements, and the creation of the support section of the site has taken a massive delay due to Covid-19 (I'm one of the people who wasn't granted massive amounts of free time when lockdown hit the UK). The blog section should have had more content by now, but I'm just going to say 'Covid' regarding that too!

All feedback greatfully received.

All the best everyone.
User 2622524 Photo


Registered User
97 posts

Hi All

My latest project for a client:

https://www.ict-s.co.za/

I used the following to design it design it:

1) Site Designer 4.0 - Materialize
2) Responsive Content Slider
3) Web Form Builder
User 2792467 Photo


Registered User
161 posts

Hi Chris,
Microsoft Edge has a small height problem with the hamburger menu section.
See attached screenshot.
Attachments:
Eindhoven :: Netherlands

It's easy to see, once you see it.
User 2699991 Photo


Registered User
5,091 posts
Online Now

Chris wrote:
Hi All

My latest project for a client:

https://www.ict-s.co.za/

I used the following to design it design it:

1) Site Designer 4.0 - Materialize
2) Responsive Content Slider
3) Web Form Builder


And on my phone the slider has a small jump for the first slide only small but enough to be noticeable, otherwise everything else seems ok, nice looking clean website

Update
Actually on closer inspection it could be the little grey slider indicator buttons causing it, to appear to jump whereas it would seem that the buttons container only appears on the last slide
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2088758 Photo


Senior Advisor
3,105 posts

Chris wrote:
Hi All

My latest project for a client:

https://www.ict-s.co.za/

I used the following to design it design it:

1) Site Designer 4.0 - Materialize
2) Responsive Content Slider
3) Web Form Builder



Well Done Chris!!! I love the use of those high rez images it really brings a ZIP BANG BOOM to the website. Very visually stimulating. Keep up the great work!

Steve
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA

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.