How to Make a Single Page Responsive Website with Flat UI Pro

How to Make a Single Page Responsive Website with Flat UI Pro (Part 1)

David East takes you step-by-step through the process of creating a simple website using Designmodo’s Flat UI Pro framework.

In this video tutorial, you will learn to create a simple, single-page responsive website using components from Flat UI Pro.

East takes you through the process of using the kit and customization to create a website from start to finish, from creating simple navigation to adding specific fonts, colors and images. As an added bonus, this kit works with the Twitter Bootstrap framework, making it fully responsive. The tutorial will help you build the site, fix any issues that pop up between screen sizes and publish.

While you do need some knowledge of coding and web design basics, this tutorial is easy to follow and can have you on the way to building a great website in a matter of minutes!

What you will learn in this tutorial: How to create a single-page website using Flat U Pro. The video is designed to help small business owners create a company website, but the tools showcased can be used to create a variety of different types of websites.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

Video run time: 27 minutes

Part 1

Now that you have the tools to create a single page website, David East helps you add animation to the site using tools from Designmodo’s Flat UI Pro kit.

In this video tutorial, you will learn to create simple animations.

East first shows you how to code simple text animations in CSS3 for an already-built website and explains how to write the animation code so that it views properly on different devices. (Note that the animation technique taught here does not work for iOS devices.)

East then takes you through how to create a simple hover animation effect in a matter of minutes, showing you how to stretch, spin or shake an element.

The animation technique used by East in this video is simple and looks professional, making it a tool that will work for a variety of projects.

While you do need some knowledge of coding and web design basics, this tutorial is easy to follow, making the addition of animation to a website easier than you might think.

What you will learn in this tutorial: How to create simple animation using CSS3. This video is best viewed after the tutorial How to Make a Single Page Responsive Website with Flat UI Pro.

Video run time: 12 minutes

Part 2

David East

David East is a Developer Programs Engineer for Google, working on Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @_davideast.

Newsletter

55 Comments
  1. kwater Sep 23, 9:06 pm

    The part 1 is great. What about part 2 ? When will part 2 be available ?

    Reply
    +16
  2. Sunny Sep 24, 6:30 am

    Awesome start! I’m looking forward to the part 2, 3 and more… :)

    Reply
    +3
  3. Albert Sep 24, 1:15 pm

    Hi, great tutorial. Only one question: why did you used the “data-loc” attribute instead of reading the “href” content for the navigation? Using this second option, it would be backwards compatible, isn’t it?

    Thank you and looking forward the second part!

    Reply
    +4
    • David East
      David East Sep 24, 6:10 pm

      You’re totally right, I probably should have used the href attribute. I think I was more focused on highlighting the data- attribute and I didn’t see the obvious native solution.

      Reply
      +5
  4. Caio Sep 25, 12:13 am

    What is the code editor used in this video?

    Reply
    0
  5. Jordan Sep 25, 8:29 am

    I just purchased the Flat Pro Bundle and was having some problems getting started with the HTML. This video was really great. Not too hard, not too easy for somebody who knows HTML/CSS but is new to Bootstrap.

    Your pacing was great, your cuts very professional, I look forward to Part 2 with the animations. Thank you very much!

    Reply
    +2
    • David East
      David East Sep 25, 8:34 am

      Thank you so much for the kind words. Part two should be up soon!

      Reply
      +1
  6. JH Sep 27, 1:32 am

    David,

    Thanks for sharing!

    I am completely new to all this… so please excuse some basic questions:

    –> If I want to create a responsive website (mobile first) would it be better to use Bootstrap or Foundation? Dose Flat UI use Javascript to create the interactions? I’m reading that using Javascript is not the best approach, that a pure CSS approach is better. Based on this, I have been looking at how to build navigation elements entirely with CSS and also looking at things like PURE (http://purecss.io/).

    –> Does Designmodo make UI Kits for Foundation?

    –> Should I be looking into a combination approach like Boilerplate and Boostrap? Like here at GitHub:

    https://gist.github.com/mklabs/1422879

    or here at Initializer:

    http://www.initializr.com/

    I have Dreamweaver CS6 to work with, should I be looking into Coda 2 or Sublime Text 2? I’m not a coder by any means and a WYSIWYG makes sense to me, although I understand that doesn’t really carry over to how responsive design works (break points etc.). I’m thinking that as I drop components from the UI kit into place that at least I can see the basics of the code and have a visual way to dissect it all.

    Have you used Divshot, Froont, UXPin, Adobe Edge Reflow? I’m not too crazy about an all cloud work environment and apps that are rented on a monthly basis… I like having things locally and having the ability to not upgrade all the time. Thoughts?

    Thanks in advance for any help/guidance! I’m looking forward to a Part 3.

    Reply
    0
    • David East
      David East Sep 27, 2:37 pm

      Hey JH! I’ll try to answer some of your questions as best as I can.

      Bootstrap or Foundation?
      This is a Pepsi or Coke kind of question. It’s really a matter of preference, both are totally amazing and totally free UI frameworks.

      If I want to create a responsive website (mobile first) would it be better to use Bootstrap or Foundation?
      Like I said before, it’s a matter of preference. Both Bootstrap 3 and Foundation 4 are mobile first UI frameworks and will do the job just fine.

      Does Flat UI use Javascript to create the interactions?
      Responsive design is normally done with CSS3 media queries. Media queries are the best practice, but JavaScript can do that. You’ll learn that JavaScript can really do anything, though (“Any application that can be written in JavaScript, will eventually be written in JavaScript.” – Jeff Atwood).

      Should I be looking into a combination approach like Boilerplate and Bootstrap?
      This is also a matter of preference. If you feel that it will help you out, then definitely do it. You’ll be fine even if you start with a basic Bootstrap template.

      I have Dreamweaver CS6 to work with, should I be looking into Coda 2 or Sublime Text 2?
      I hate to sound like a broken record, but that is a matter of preference as well. However, Sublime Text has some extremely powerful features that I have not seen in any other editor. I’d suggest watching Jeffrey Way’s course on Sublime Text to learn why it’s so amazing.
      http://net.tutsplus.com/articles/news/perfect-workflow-in-sublime-text-free-course/

      Have you used Divshot, Froont, UXPin, Adobe Edge Reflow?
      I have used Edge Reflow and I’ve been tempted to try UXPin for awhile now. However, this kind of work doesn’t really fit into my daily workflow as a developer. I’m much more of a code monkey than artist.

      Also, there will be no trilogy. The series sadly ends with part two. There will be more other tutorials coming in the future however, so stay tuned!

      Reply
      +2
      • JH Sep 28, 6:14 am

        David,

        Thank you for taking the time to answer my questions. I hope you have a great weekend. I look forward to your next tutorial.

        One note on UXPin, I will see if I can dig up the link on this… someone was saying that it created a separate object instance at each break point for each of your elements… leading to messy code… I asked the DivShot folks if they had the same issue… their reply was no, the code will be clean… I have so much to learn… my head is swimming.

        Thanks again.

        All the Best.

        Reply
        0
  7. Lucas Sep 27, 3:47 am

    I have Flat UI Pro but i can’t find the jquery.scrollTo.js file, i’m really excited with this tutorial but can’t finish :(

    Reply
    0
  8. John Oct 2, 10:23 pm

    The title really piqued my interest but video-only tutorials do not interest me. Some people love them. However, considering this is about web design without making it more tangible on the web is a little baffling.

    Reply
    0
    • David East Oct 7, 6:55 pm

      I would love to put a tangible demo out there, but then I’d be giving away Flat UI Pro for free.

      Reply
      0
  9. Carlene Oct 4, 12:04 am

    Hi David, Would you be able to post your example pages somewhere? It really helps for me to debug and to study your code as I go along and build my own page too. That way I’m not going back and forth between the paused video and my editor too much!

    Thanks!

    Reply
    0
    • David East Oct 7, 6:01 pm

      Hey Carlene,

      I would have loved to put the demo online, but I used Flat UI Pro which is a paid product. So I can’t just throw at a demo with Flat UI Pro for free. If you’ve purchased Flat UI Pro, I believe these resources are being put in a future release with Flat UI Pro.

      Reply
      0
      • Sunny Oct 7, 6:49 pm

        ha ha… I was thinking, why David didn’t post the src files, then realized okay that would be like giving away flat ui pro for free! however, wouldn’t that be great! :P

        Reply
        0
      • Carlene Oct 8, 3:22 am

        Hi David, I’ve purchased Flat UI Pro – I tried the tutorial and something didn’t come out right – so I’m trying to debug. but no avail.

        Thanks!

        Reply
        0
  10. Ervin Oct 4, 9:27 am

    I would love if you post us the .js scrollto file somewhere :)
    I got the pro version but I cant get the js file to work.

    Reply
    0
  11. Jose Oct 9, 5:34 am

    I followed the tutorial step by step and checked my code so many times but I still can’t get the $panelToScrollTo.scrollTop(); to work, I downloaded the .js you posted above, imported it the console.log($panelToScrollTo[0]); worked fine but the scroll won’t happen :( any help?

    Reply
    0
    • David East
      David East Oct 9, 6:00 am

      I’m not sure if this is a typo in your post, but it’s not .scrollTop(), it’s .scrollTo().

      Reply
      0
      • Jose Oct 9, 6:02 am

        It was a typo on the comment, on my code it’s .scrollTo() haha
        I just got to the animate.css and all that worked, but still no scrolling :(

        Reply
        +2
  12. Grace Wu Oct 15, 11:03 am

    oops !! youtobe has been blocked in china, so I can’t open the video…Now I have no idea about what to do. Does anyone has a vpn or have a way to see the tutorial ??

    Reply
    0
  13. Adrian Oct 24, 8:55 pm

    Hi Nick, you questions are referred to our support team, please open a question here – https://github.com/designmodo/Flat-UI-Pro-Support/issues?state=open

    Reply
    0
  14. Rasmus Nov 5, 7:58 am

    I’ve followed the video guide thoroughly and the scrollTo jquery function will still not work. And yes, I have already downloaded the .js file from the link you provided.

    This is my code:

    (function ($) {

    $(‘#navbar, #bottom-nav’).on(‘click’, ‘li a’, function() {
    var $clickedAnchor = $(this),
    $panelToScrollTo = $(‘#’ + $clickedAnchor.data(‘loc’));
    $panelToScrollTo.scrollTo();

    console.log($panelToScrollTo[0]);
    });
    }(jQuery));

    I can see in the console (dev mode Chrome) that it can easily identfy all my sections, but NOTHING happens. It seems like it’s the following line that’s not working, cause everything I did up untill then worked like in the video:

    $panelToScrollTo.scrollTo();

    PLEASE HELP!!!
    Rasmus

    Reply
    0
    • David East
      David East Nov 5, 8:24 am

      Hey Rasmus,

      Your JavaScript is a bit wrong. You’re confusing the self invoking anonymous function with jQuery’s document ready function. I don’t use jQuery’ document.ready in this video. Everything is in a SIAF. If you want to learn more about the SIAF, I recommend watching my video on Flat UI Maps, where I explain it more in detail.

      I commented below where you’re code is breaking.

      (function ($) { // This is the start of document.ready

      $(‘#navbar, #bottom-nav’).on(‘click’, ‘li a’, function() {
      var $clickedAnchor = $(this),
      $panelToScrollTo = $(‘#’ + $clickedAnchor.data(‘loc’));
      $panelToScrollTo.scrollTo();
      console.log($panelToScrollTo[0]);
      }); // this is the end of document.ready

      }(jQuery)); // this is the end of a SIAF, but you don’t have a beginning.

      Reply
      0
    • Rasmus Nov 5, 8:40 am

      Even if I fill in the following (a fixed place), nothing happens:

      scrollTo(150, 800);

      Please, please help me as this is for my bachelor project at college.

      Regards

      Reply
      0
      • David East
        David East Nov 5, 8:42 am

        Did you read my answer to your first comment? You need to stop trying use jQuery’s document.ready function and use a SIAF.

        Reply
        0
        • Rasmus Nov 5, 3:09 pm

          Please help me David! :) I would be forever in debt to you, hehe.

          Reply
          0
      • sebastienbarre Nov 9, 9:10 pm

        I think David is using a different version of scrollTo than the one he pointed at http://flesler.com. To solve your issue, you need to invoke scrollTo this way:
        var $clicked = $(this);
        var scrollto = ‘#’ + $clicked.data(‘loc’);
        $.scrollTo(scrollto, 200);
        i.e. the destination is the first parameter, and it has to be a string, not an jQuery obj (even though the doc says otherwise).
        That worked for me, though I would recommend you simply change your links into:

        <a href="#home" rel="nofollow">Home</a>

        so that they work even without JavaScript. Then use scrollTo like this:
        $(‘#navbar, #bottom-nav’).on(‘click’, ‘li a’, function (event) {
        event.preventDefault();
        var scrollto = $(this).attr(‘href’);
        $.scrollTo(scrollto, 200);
        });

        Reply
        +2
    • Rasmus Nov 5, 8:42 am

      Oh, sorry – didnt see you commented already. I will look at it tomorrow and reply. It’s getting late :)

      Reply
      0
  15. Rasmus Nov 5, 8:53 am

    Hm, thanks for your reply David, but I must say you have me utterly confused now as I am in NO WAY a coding expert – at all. :)

    Anyways, I don’t understand how my code can be breaking when it is an EXACT copy of what you have in your video?

    From what I can read this is a SIAF: https://gist.github.com/uzartom/1984936

    And am I wrong by stating that is exactly what I have done in my code by writing:

    (function ($) {

    … and ending it with:

    })(jQuery);

    Sorry for perhaps being a dick here, but can you fix these lines of code for me, cause I am utterly confused. Also, I have no idea what a document.ready function is. Would really appreciate it.

    /Rasmus

    Reply
    0
    • David East
      David East Nov 5, 5:25 pm

      Ah yes, I see. You do have that part right. I was reading it incorrectly.

      Make sure you are referencing your js files properly. jQuery first, then scrollTo. I really can’t tell you what’s going on though because it’s most likely something outside of the snippet you provided.

      I would try some good old fashioned debugging. Check to see if you can scroll to a section when the page loads, like I did in the video. If that works, continue forward slowly. Check every time you make a change. Also, make sure that the sections and the data-loc attributes match up exactly.

      Reply
      0
      • Rasmus Nov 5, 6:47 pm

        The following works: console.log($panelToScrollTo[0]);

        It works when I click on the navbar — the console then shows the right section.

        As soon as I add the code that makes it scroll to a section when the page loads, nothing happens. It was an exact copy of what you did in the video.

        This is how I loads the JS file btw:

        Also, the sections and the data-loc attributes match up 100 %.

        I am using the Flat-UI-Pro 1.2.2 – which version are you using? And did the information I provided help you more in perhaps solving my issue?

        Reply
        0
    • Jose Nov 5, 6:29 pm

      Rasmus,

      Try this…

      Download this: https://mega.co.nz/#!iARilTAD!O72Ta08-dJTxTFMVqE907i70LgsP6jrf-2r82OUo73o

      then all the way at the bottom of your tag add this:

      <script
      <script src="/jquery.easing.min.js”>

      $(document).ready(function() {
      $(“a.”).click(function() {
      $(“html, body”).animate({
      scrollTop: $($(this).attr(“href”)).offset().top + “px”
      }, {
      duration: 1200,
      easing: “jswing”
      });
      return false;
      });
      });

      then on the link you want to click to scroll name the class=”…” anything and then href=”#SECTION TO SCROLL”…

      in the section you want to scroll to name the id=”…” whatever you put on the href on the link (without the ‘#’)

      in the scripts you pasted make sure you modify the with the correct names ;)

      let me know if it works…

      Reply
      0
      • Jose Nov 5, 6:30 pm

        wow…it completely changed what i wrote! hahaha let me put it on a .txt for easier reading!

        Reply
        +1
  16. Rasmus Nov 5, 7:18 pm

    Hi Jose, and thanks for helping me. I simply cannot make it work. First of all, it says href attribute is not allowed my >section id=”contact” class=”scroll-panel”>

    Also, in your code it looks like you add the EXACT same of code line twice:

    <script src=“
<script src=“/jquery.easing.min.js”>

    I know this is a reach, but HERE is my complete project folder. Perhaps someone (maybe you Jose) can fix my fucking code so I can move on with my bachelor project. Hehe :)

    https://mega.co.nz/#!1101wKZT!EySHGgCemrBG5a4MXMA5zihhKxJITM-XMK4qnw0gwso

    MUCH appreciated! :)

    Reply
    0
  17. musu Nov 29, 1:31 pm

    The part 1-2 are great. What about part 3? When will part 3 be available ?

    Reply
    0
  18. Rich Feb 5, 9:14 pm

    Hi David, Great video. Thanks. Question…where did you end up using the helper class .no-margin. You created it early in the demo but I don’t see that it’s ever used.

    Thanks

    Reply
    0
    • ndrphotos Feb 8, 3:56 pm

      I had to set no margin on .row or else the horizontal scroll showed up at certain viewpoint… probably I could have used .no-margin…

      Reply
      0
  19. ndrphotos Feb 8, 3:53 pm

    Hi,

    Does jquery.scrollTo.js comes only with PRO version?

    Also my site did not work for IE11. What should I do?

    Novel

    Reply
    0
  20. Haresh Moradia Feb 19, 5:06 am

    Dude, awesome work and I love the speed. You did a great job with the first (half) and second tutorials. Do you have additional tutorials like this? You really do a well job instructing and at the speed that I am comfortable with. I would like to see more of your work and if you have a donate page, let me know, do not mind at all donating to your work!!!!

    Thanks again for really doing a great job!

    Reply
    0
  21. Dave Apr 16, 3:29 pm

    Hi, can you please post a link to download the mountain image you used. thanks

    Reply
    0
  22. RACHMAN Apr 19, 9:48 pm

    David – great tutorial! However, I purchased Flat UI Pro and was following along with the tutorial and noticed that the “showcase-item” and “showcase” classes are missing from the css included with the purchased version. Perhaps there’s another *.css file that I need to use?

    Kind regards,

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters