Join Ray Villalobos for an in-depth discussion in this video Analyzing our project, part of Building a Responsive Single-Page Design with Sass.
- View Offline
Before we get started, I wanted to take a minute to show you what we'll be building in this course and talk about some of the technologies that we'll be using. Now the project is designed to help you learn a lot of cutting edge techniques using modern tools while creating a responsive, single page website. Now here's a site that we're going to be creating. It's for a brand called the Landon Hotel. Since this is a single page, it means that all of our content will be on one quote unquote page, but there's technically other pages that you can jump to. You can see the navigation down here.
Now a responsive site means that our content will adjust to the width of the device. So if we take this window and make it smaller, you’ll see that our photo is still the width and height of the page no matter what that is. Let me make this smaller, and you can see that as soon as I start scrolling down, you'll be able to see the menu underneath. But this picture is always as big as the browser window. Now next you'll notice that our menu that we get by scrolling down a little bit has three different modes depending on the width of the device. This is also due to the responsiveness of the site.
In super wide mode you can see that there's text as well as some icons for the different pages in the design. Now as you approach a thinner width, you'll notice that the icons go away. And when you go into very thin mode, you can see that the only thing we can navigate are these little icons. Now if you scroll down to the Welcome section, you'll see that sometimes, we have five pictures, right on top of this text right here. So if I make this very big, you'll see five pictures, but if we make it thinner, you'll see four.
And if we get to a very thin width, you'll see no pictures at all. Now as you scroll down past the essential information, you'll notice that the menu is docked at the top of the screen. So no matter where I am on the website, the menu stays in place. Now, it's at the bottom of this screen when we first load the website, but as soon as we scrolled, it will scroll and then dock at the very top of the page. Now if you go into the info section, notice that the page scrolls as I click on these different sections.
So if I click on Info, it'll scroll all the way to the top. And if I then click on Rooms, it'll go past into this room section. Let's go back into Info and show you some of the other responsive features. So here you can see that in wide mode we have three different columns. And if we make this thinner we'll go into a version where we have one column at the top for this arrival information and then two columns for the rest of the content. If you go into a very thin configuration, you'll see a single column for all the content within this area.
And in this Landon Green Program section, if we make the page very wide, we'll see an icon. Let's go ahead and make it a little bit wider, so you can see an icon of the world right here. It'll disappear as soon as you start going into thinner widths. Now also notice that the menu will highlight the section that we're in. Because we're inside the Info section, this info area is highlighted. If we go into Rooms, I'll click on this, and then scroll down a little bit, you'll see that Rooms now remains highlighted. Let's go up, and you'll see that because we're entering this Info section, Rooms gets unhighlighted, and then the Info section gets highlighted.
So, that's pretty cool as well. The way that I'm doing these different layouts is by adding the style sheets, not into any of the HTML code. If you're used to using something like Bootstrap, you know that you have all these different classes that you have to add. But if we take a look at our source core right here, I'm going to right-click and select Inspect Element. You'll see that we have no code for columns in any of these different sections. So all of the style sheets and the column widths are done in CSS not in HTML.
That makes our HTML a lot more semantic since we never put any sort of layout information in HTML. This is going to make the layout of our pages a lot easier to update in the future. Now you can see a similar example of this in the Dining section. So here we have a three column layout with a bigger column at the very top. And if we make this thinner, you'll see that it goes into a single column layout right here. So if I scroll down there's the smoothie bar, breakfast and coffee bar.
If we go very wide it goes into a three column layout. So, back over here and that looks pretty nice. Now if you click on this last page called Attractions, you'll notice that there is a tweened animation. This local attractions box kind of zooms into view. Now I'm going to scroll up a little bit, and it'll go away in an animation. So as soon as I get to this Attraction section, I'm going to scroll up a little bit, you'll see that that animation will play automatically. I'm going to do this using jQuery and a library called Scroll Magic that makes creating these types of tween effects super easy.
I use a similar technique in the section called Rooms in a slightly different way. If we click on this, let's go ahead and make the window bigger and go into this Rooms section, notice that it's highlighted in the menu. If I scroll up, take a look at the scroll bar right here. It's a little hard to see on MacOS. But if I scroll, you'll see that as I keep on scrolling down, you can see this right here move down. You'll see that my animation place, and it's controlled by how much I scroll.
So, if I keep on scrolling, notice the second picture comes into view. And I'm going to scroll a little more, and you can see my animation start to play. If I scroll the other way, you can see that that animation will go away because I'm moving up. So the actual position of our animation is being controlled by how much I scroll. Now behind the scenes, I'm using a tool called Node.js and Gulp.js to create a workflow that takes care of all the processing of Sass and converting things into CSS plus also reloading the images automatically for you when you edit the code.
There's going to be a lot of extra set-up at the beginning, but it's going to pay off big time when we start working on the project.
- Compass, whose Sass mixins help you leverage CSS3 features like Flexbox
- Susy 2, the framework that "subtracts" the math from responsive grid design
- ScrollMagic, for adding "magical" scroll effects
- Breakpoint, which makes writing media queries in Sass a snap
But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.
- Analyzing the project before you begin
- Creating basic styles
- Building your own Sass mixins
- Coding the navigation
- Making the navigation responsive, with grids
- Using a split layout
- Creating tween animations
- Controlling scenes with scrolling