Starter Template for Wappler

Coffee Lounge
#1

Here is a quick template I put together that you can use as the base for a new Project in Wappler.

  • BS4 CDN.
  • HTML/CSS.
  • Smooth Scroll.
  • Collapsible navigation.
  • Six sections (each will fit the browser window 100% horizontal and vertical).
  • Back to top button.
  • Includes style sheet.
  • Fully commented.

Download:

Template-001-Sectioned-Scroll.zip (282.4 KB)

dave-template
dave-template.gif1440×812 153 KB

:slight_smile:

8 Likes
Themes for Wappler
Can someone please lay this out for me?
How to add class when page scroll reach at specific id?
#2

Hey Dave,
That’s a nice template/starter kit. Just one thing:

   <!--To Top Script -->
    <script type="text/javascript">
        $(document).ready(function(){
            $(window).scroll(function(){
                if($(this).scrollTop() > 100){
                    $('#scroll').fadeIn();
                }else{
                    $('#scroll').fadeOut();
                }
            });
            $('#scroll').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 600);
                return false;
            });
        });
    </script>

You don’t need custom jquery to achieve this :slight_smile: It can be done entirely using the browser component and the smooth scroll component :slight_smile:

  • with the browser component check the scroll position and change element’s properties
  • with the smotthscroll component scroll to top smoothly :slight_smile:
2 Likes
#3

Thanks Teodor. If anyone wishes to make changes and upload variations please feel free to do so. I tried to do this with pure css but it didn’t work out so added the jquery as a quick fix.

:slight_smile:

2 Likes
#4

For anyone interested here’s the same template - i just removed the jquery code and added the same functionality using only Wappler Components:

dave-template.zip (276.6 KB)

7 Likes
#5

Small screenshot would help :ok_hand:t4:

Update: Thank you! Woow animated amazing! Well done! Thank you

2 Likes
#6

Teodor beat me to it! :smiley:

You’re very welcome. It is only simple but could save some time and is a good base to launch from.

2 Likes
#7

More templates!! Is there a template gallery coming up in Wappler @Teodor ? This would be genius. Something where everyone can submit a theme and also charge money for it if they want.

1 Like
#8

I’m being mindful now as to save a blank version of what I’m working on, a sanitized version, that I can offer here to the Users of Wappler. As these files have already been ‘paid’ for (in theory) I’m happy to give them away. Hopefully one or two a month, maybe more…

3 Likes