I have a potential project that a site like the one above might work perfectly. Any suggestions on how best to recreate it using Foundation?
That’s a (multiple) Section Box site. Andy did a similar thing in the Box sample site.
1 Like
From memory its all down to proportional section width
1 Like
You won’t be able to build that in Foundation unless you just use it as a blank theme. Source easily would build that home page and you could use your slider of choice. Other pages would probably need BWD Blueprint and or Sections. Very cool site.
1 Like
I would use RWSkinz and Intrinsic. The vineyard example I host is built to a similar concept of grids / boxes.
4 Likes
Yes very cool site
1 Like
Agreed. But it does my head in. I’d spend 20 mins thinking what a cool site it was before giving up trying to find anything. At least when you buy the book it’s Shopify - an oasis of calm in the designer madness!
3 Likes
Remind me in a week or two on WS and I will build this with JUST Foundation 6 stacks. It’ll be a piece fo cake.
2 Likes
Yuk. That’s one of the fugliest sites I’ve seen in a long time. Should’ve been strangled at conception.
Change my mind.
2 Likes
Agree! It’s horrible. I looked ta it over the weekend on my phone, where it’s just a load of stacks blocks, and wondered what the fuss was about. Now seeing it on desktop I have to agree with Marten, why the feck would anyone want a site like that?
Desktop use is falling, tablet use is flatlining, smartphone use is growing now that screens have settled at a much bigger size. I bet the next set of figures are going to show a big move to smaller screens for users, questioning why anyone is bothering with cool looking sites with fancy animations that only work/loo cool on big landscape screens.
Personally, I’ve all but given up worry too much about how a site looks on a desktop, my focus is almost entirely portrait views now, where almost everything stacks and animations don’t work.
I think it is a cool site that is very appropriate for the subject. It has a distinctive look and colour scheme and fits the target market IMHO.
Where it doesn’t work is in the over aggressive mobile version where content is thrown away instead of trying to make it work on smaller screens. The desktop version is fairly straight forward but it becomes quite challenging as the screen width reduces.
1 Like
Thanks, Gary - I totally agree. For the right product, it’s a very cool site. And, it could be made to work on mobile devices with a bit of work.
The synced sliders are pretty cool which you will only see this if you don’t move your mouse over contact. Nice effect to have running as a desktop screen saver in their office.
Wan’t someone going to build this site in RW a few weeks ago?
I recreated this site using Source. The site is built with just the source Grid and Containers as well as the Header and images stacks ( i.e. just 5 stacks) and uses only 3 lines of CSS. I haven’t added in any sliders, but the navigation buttons are ready for this.
The original site is a challenging mix of fixed width borders and proportional heights for some of the elements. This mix of fixed and proportional height never works perfectly but I have used the same technique as the original. It could do with some more fine tuning but really it should be built completely in proportional heights. Luckily this is easy to do with Source and had it originally been built with 1 big Source grid, it could be better behaved and look more elegant with repositioned grid items at all 4 breakpoint ranges, instead of the older 2 column collapse approach, used in the original layout.
The demo site is at https://www.webdeersign.com/xdemo/
5 Likes
That’s a beautiful recreation, Gary! Luckily for you, though, I purchased one of your templates and used it instead. And, when I was asked to build another site for a new client with an extremely short turn-around, I purchased a different template of yours. It turned out pretty darn nicely, too. https://www.vortexhvactech.com/
If you knock your demo up and sell it - I’m liable to purchase it too. A different author approached me a few weeks ago about building a site for him, too. I guess that’d be good for Stuart, too. :)
1 Like
Thanks. I wouldn’t parcel it up as a Project because it is someone else’s design, but the exercise was really just to see how quickly and completely that the layout could be built with just Source. You can learn a lot by tying to reproduce challenging layouts
That looks great! Good job. Recreating sites / designs is definitely is the best way to learn. And that’s a great layout to test out grid designs with!
I think this could actually be done with a single Source Grid Plus stack. I’ll give it a go and post if successful!
5 Likes
I updated this demo site to use all % borders (0.5vh) to match the % heights used throughout, and it behaves as it needs to in fringe screen sizes.
Great to read about this in the recent Source blog post (https://source.shakingthehabitual.com/source-blog/block-grid) using Grid Pro Plus and some of the more recent enhancements. What is amazing, is to realise that this original post thread, is from over a year ago.
@dave Hey Dave, what happened with this in the end?
I found this demo on my server and was about to delete it when I thought I would leave it there. It has been a long time since this was created yet it is still as fresh and ground breaking now as it was then.
With some of the new Source stuff added since this was built such as the Utillty and Image Fit stacks, it would now be an even easier build in Source.
2 Likes