Share your websites made with Site...

User 131545 Photo


Registered User
687 posts

Phil Dias

Can you please send the program file rsd so I can learn how this grid works

Kind regards
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 2903050 Photo


Registered User
260 posts

Which part of the grid are you referring to? Regards Phil
User 131545 Photo


Registered User
687 posts

Phil Dias

The whole project in the program file (rsd file) so I can learn how it works
Kind regards
Stephane
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 2699991 Photo


Registered User
5,010 posts
Online Now

STEFKE wrote:
Phil Dias

The whole project in the program file (rsd file) so I can learn how it works
Kind regards
Stephane

10 out of 10 for persistence Stefke
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 2903050 Photo


Registered User
260 posts

Hi STEFKE. Unfortunately, it's not something I can do. I have spent an incredible amount of time getting my website to where it is now. Many hours learning about html CSS and JavaScript, reading articles, watching videos and tutorials on YouTube away from CoffeeCup site Designer, even subscribed to Codecademy to try and better my amateur skills. CSS grid is very new to alot of us and to understand that took time and I work 6 days a week and have a young family so to give away my project that I am proud of as my first Responsive design and have spent as I have said soooo much time and energy in would feel wrong and slightly insulting to me.
As others have done, I am happy to give advice and help with little things and understanding isdues but to basically create a full working site for free, sorry no.
I am not sure having a full project would necessarily help you create a site for yourself. In my opinion you need to do it and work with the challenges you face to really understand the design.
Kind regards Phil
User 244626 Photo


Registered User
811 posts

Phil Dias wrote:
Thank you for all the advice and pointers.
Here is the finished website minus a few bits like adding Google analytics etc. Let me know what you think?

https://phildias.com


Great job Phil, you have great creative website design skills.

I know I supplied a bit of code for the burgerx icon. I found a small bug where the code can get tricked though by a window resize action and the icon will get out of sync so you can end up with a cross when the menu is collapsed. I think this is caused by Foundation collapsing the menu if it goes past the breakpoint set. Since we are changing the icon "onclick" it never recieves a signal the menu collapsed which then leave the cross icon applied.

I solved this issue by adding a small bit of code to check for a class thats added on a opened menu and if the window is larger than a certain size. You will need to add the data-toggler attribute to the #sub-nav and set the value to .expanded. Then replace the script for the burgerx with the new one I have pasted in the footer. Now if the screen (like on a Ipad) is rotated when the menu was opened on the smaller screen when its rotated back the menu will be closed (like usual) but the icon will toggle back to menu7.

Let me know if you have questions but I used one of your early Foundation menu examples you had posted to update the changes so you could see.
Attachments:
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

Hi Twinstream. Thank you for your kind comments.
I've just had a look and turned my phone and see what you mean.
I'll try and work it out but I have done a lot of work in a html editor so a lot of changes are without the SD3 program so am reluctant to go into the SD3 program again. Is it a case of adding the toggler attribute to the sub-nav ID and replacing the script?
Regards Phil
User 244626 Photo


Registered User
811 posts

Phil Dias wrote:
Hi Twinstream. Thank you for your kind comments.
I've just had a look and turned my phone and see what you mean.
I'll try and work it out but I have done a lot of work in a html editor so a lot of changes are without the SD3 program so am reluctant to go into the SD3 program again. Is it a case of adding the toggler attribute to the sub-nav ID and replacing the script?
Regards Phil


Yes, that about it.


<nav class="container" id="sub-nav" data-toggler=".expanded">



<script>
$('#burgerx').click(function() {
$("i", this).toggleClass("coffeecup-icons-cross2 coffeecup-icons-menu7");
});

$(window).resize(function() {
if (($(window).width() >= 640) && $('#sub-nav').hasClass('expanded')) {
$('#burgerx >i').toggleClass("coffeecup-icons-cross2 coffeecup-icons-menu7");
$('#sub-nav').removeClass('expanded');
}
});
</script>


I do not know what your breakpoint is for mobile to desktop so you may have to change the bold setting in the script.
Bootstrap 5 CSS Grid.
User 2903050 Photo


Registered User
260 posts

Brilliant, I will make a copy and try it out on a test site. On foundation I believe the change to tablet screen is 640px so am I right in thinking I just need to leave it as the 640. Kind regards, Phil
User 2903050 Photo


Registered User
260 posts

Works an absolute treat Twinstream. Thank you for sharing as would never have noticed. Very easy to edit now in atom.io too so thank you. Regards

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.