Smart & simple Silex template: one page responsive website with a hero section and animations

[lexoyo]

Smart and simple website template

Here is a template advertising a fictional mobile app or online service. This is an HTML template to edit with Silex website editor, the open source website builder(free and open source).

It is made with Silex, and can be hosted anywhere. It is responsive to fit any screen size with the maximum reach.

• download then follow instructions bellow
• preview

Instructions

To make your own website based on this template, download the archive here, unzip it to your Dropbox and open the file /smart-simple/editable.html with Silex editor (online).

Then edit the texts, change the links and publish your site online (file menu, then "publish")

Related templates

• Galaxee template, one page responsive website with active menu ($8)
• "Online Services" template (free)
• Tiptop organization template (1$)

[ghost]

Hello Lexoyo, Thanks for this nice template!

I just have two questions about using this template ...

When I open it in Silex Editor is appears as a whole bunch of elements overlapping and on top of each other and I can only select some elements - and not all of the obvious ones where I need to insert my own text and images. It doesn't appear to let me select all elements.

1. how do I select each of the elements to insert my own text or images? (I'm using a 13inch laptop - does that matter?)

2. The second issue is that when opening the downloaded (editable etc) file through my dropbox it warns me that the template was saved with a newer version of Silex editor. What is happening there? (I thought the use of Silex Editor (at URL: https://editor.silex.me/ ) would ensure I was always using the latest editor.

Thanks again and sorry if these turn out to be simplistic questions - I'm a beginner.

[lexoyo]

hi @travex99 Sorry about that, I have updated the templates a few days ago to work with the new version of Silex, which we are testing on preprod.silex.me I will try to release this new version today, so either use preprod.silex.me or wait for a few hours

[ghost]

Thanks.

[felixtkn]

Hi @lexoyo, First of all, appreciated your very nice animated template. I'm working on this template since some time but since yesterday, I start to have problem of scrolling "from-left", "from-right" etc on mobile view after publishing using Silex Editor. The scrolling animation stopped working leaving empty areas on the page. It is happening same to the original Smart-Simple template. It was working fine on the previous published page but not to the newly published page on mobile. Could you help up on this? Thanks a lot.

[singchan]

it works fine on my phone

• what is your phone and browser?
• can you provide your site url?

[felixtkn]

Dear @singchan,

I'm working on Iphone7Plus and Samsung Note3 together with chrome. I tried to compare every files and found something changed in front-end.js... May I understand more on the min-width:'' and min-height:'' for mobile view?

I tried to inspect it using PC's chrome then toggle device toolbar, et voila....probleme.... Then I revert back to the old front-end.js, no more problem...

There are still some other problems on mobile view like:

1. page never load at the top of the page when we open second page
2. scrolling down/up of the page is not smooth on Android phone. When we scroll down, the page always return back a few steps to the top. When we slowly scroll up, we might suddenly reach the top of the page.

Appreciate your assistance. Merci Bcp!

[singchan]

hi to sum it up you have 3 problems, all on mobile right?

• it looks messed up
• page never load at the top of the page when we open second page
• strange scroll behavior

let's start with the 1st one, can you share your website with me on dropbox (billy321 at im-paris.fr) or github?

[singchan]

Hi @felixtkn

I got your files but only published files, not the "editable" version. Anyway if you say it is the same with the original template, I can not reproduce...

Here is what I see on my desktop and it is the same on my phone:

Is it also what you see and what is the problem exactly?

[lexoyo]

Hello I can reproduce the "strange scroll behavior"

[lexoyo]

ok, I found several bugs caused by the animation library (reveal) the bugs are only on real devices and I think that it was not the case in old versions of this template... can you confirm that these bugs are fixed please?

• it looks messed up
• strange scroll behavior

this is what I have changed (so you can do the same in your version of the template):

In the Javascript editor (or alt+j) I replaced this code

/*
animation widget from here: https://github.com/silexlabs/Silex/issues/443
*/
$(function() {
    window.sr = ScrollReveal({
        distance: '100px'
    });
    sr.reveal('.from-left', { origin:  'left'});
    sr.reveal('.from-right', { origin:  'right'});
    sr.reveal('.from-top', { origin:  'top'});
    sr.reveal('.from-bottom', { origin:  'bottom'});

})

... with this new code

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

/*
 * animation widget from here: https://github.com/silexlabs/Silex/issues/443
 */
$(function() {
    if(!isMobile) {
        window.sr = ScrollReveal({
            distance: '100px'
        });
        sr.reveal('.from-left', { origin:  'left'});
        sr.reveal('.from-right', { origin:  'right'});
        sr.reveal('.from-top', { origin:  'top'});
        sr.reveal('.from-bottom', { origin:  'bottom'});
    }
})

[felixtkn]

Dear @lexoyo,

Thanks for your concern! Ya, a few bugs here especially after the update of front-end.js.

Few Problems:

1. "Reveal" Animation not working and blank spaces - only this template - only on IOS and Android - Fixed if revert back to old front-end.js

2. Page stuck at Youtube Iframe while scrolling down - every template - only on IOS - Fixed if revert back to old front-end.js or make the youtube iframe very small

3. Next page never loaded at the top - never tested other template - IOS, Android, PC - Not Fixed and may reproduce on PC browser by resizing the browser's length and using my links shared above (click on "Apply Picture Card", then click on "Accept"). I believe that the page-terms-conditions and page-form are not loaded at the top of the page.

4. Strange scroll behavior - never tested other template - IOS and Android - Fixed if disable "reveal" animation on mobile view following your solution provided above. BUT... the scrolling up and down is very slow.

Merci Bcp @lexoyo !

[singchan]

Thx Felix for this useful bug report. I think that some of them are features we did not think about and that are needed. We must definitely work on this so that Silex sites look great!

"Reveal" Animation not working and blank spaces - only this template - only on IOS and Android - Fixed if revert back to old front-end.js

It will be fixed also if you change the code as @lexoyo suggested (disables ScrollReveal on mobile)

Page stuck at Youtube Iframe while scrolling down - every template - only on IOS - Fixed if revert back to old front-end.js or make the youtube iframe very small

seems also fixed by @lexoyo 's fix please confirm

Next page never loaded at the top - never tested other template - IOS, Android, PC - Not Fixed and may reproduce on PC browser by resizing the browser's length and using my links shared above (click on "Apply Picture Card", then click on "Accept"). I believe that the page-terms-conditions and page-form are not loaded at the top of the page.

if I understand well, this one is a duplicate of this feature request #559 can you confirm? in this case I can develop it soon

Strange scroll behavior - never tested other template - IOS and Android - Fixed if disable "reveal" animation on mobile view following your solution provided above. BUT... the scrolling up and down is very slow.

is it fixed with @lexoyo 's fix?

[felixtkn]

Dear @singchan,

I'm always looking forward that Silex sites keep on looking greater !

1. "Reveal" Animation not working and blank spaces

   It will be fixed also if you change the code as @lexoyo suggested (disables ScrollReveal on mobile)

Yes, after disabling ScrollReveal, no more blank space problem. The only concern is the scrolling up and down of the page become very slow on IOS and Android. It's not as smooth as other template.

2. Page stuck at Youtube Iframe while scrolling down

   seems also fixed by @lexoyo 's fix. please confirm

No, it's not fixed even after disabling ScrollReveal. I tested another template with pre-existing youtube iframe and it's the same problem, only on IOS (no problem on Android and PC). The only way to fix is to revert back to old Front-end.js or to make the youtube iframe very small.

3. Next page never loaded at the top

   if I understand well, this one is a duplicate of this feature request #559. can you confirm? in this case I can develop it soon

Yes, I think it's the same case.

4. Strange scroll behavior

   is it fixed with @lexoyo 's fix?

Yes, but the concern is the scrolling up and down of the page become very slow (same as 1st).

Merci Bcp!

[singchan]

ok interesting answers thx the difference between the 2 versions of front-end.js are:

    // set the body size to contain all the elements
    // this has to be done manually since the elements are absolutely positioned
      bodyEl.css({
        'min-width': width + 'px',
        'min-height': height + 'px'
      });

being replaced by

    // set the body size to contain all the elements
    // this has to be done manually since the elements are absolutely positioned
    // only on desktop since in mobile the elements are in the flow
    if(win.width() >= 480 || !bodyEl.hasClass('enable-mobile')) {
      bodyEl.css({
        'min-width': width + 'px',
        'min-height': height + 'px'
      });
    }
    else {
      bodyEl.css({
        'min-width': '',
        'min-height': ''
      });
    }

[felixtkn]

Dear @singchan ,

Yes, that's the difference. As per my previous question, may I understand what will be the interest if we hardcode min-width and min-height to '' since the previous min-width=width+px and min-height=height+px already working fine in mobile view?

Merci Bcp!

[singchan]

I believe forcing the min-width/height in mobile is useless because everything is in the flow (position:relative) whereas it is needed in desktop because the elements are absolute positioned

I'll try to understand

[singchan]

the scrolling up and down of the page become very slow on IOS and Android. It's not as smooth as other template.

This I can not reproduce, could you try and tell me if it is the case with this site? https://singchan.github.io/silex-tests/mobile-debug.html

[singchan]

Next page never loaded at the top

please see a solution here: #559

[felixtkn]

It's ok @singchan , I just revert back to the old version of front-end.js which can solve most of the problem. Please advise later on if there is real interest of using new version of front-end.js.

Merci Bcp!

[singchan]

Please advise later on if there is real interest of using new version of front-end.js.

the new version of front-end.js fixes this issue: #544

and it evolves with Silex. for example the new components (feature under development) will not work with an old version of this file...

but for this site only I guess you could keep the old version