- #BOOTSTRAP 3 RESPONSIVE DESIGN TUTORIAL FUNDAMENTALS HOW TO#
- #BOOTSTRAP 3 RESPONSIVE DESIGN TUTORIAL FUNDAMENTALS FULL#
Your design might need to be more specific, in which case you'd add another breakpoint as necessary. All of my phone, phablet, and tablet devices will be created first, and laptop, desktop, and large screens will be in the query. I like to keep things simple, and have only one breakpoint. Whatever your mobile device styles are will be on the main stylesheet, and any styles for a larger device will be added on. The main effect this will have on our code is that we'll be using min-width queries, not max-width. The concept is that you build your content to look great for mobile, and scale up from there.
You may have heard the phrase mobile first flying around a lot. Google Developers suggests basing breakpoints on content, not specific devices, and I agree. A breakpoint sets the pixel width at which the content will collapse - when your navigation bar will transform in some way, and your grid will break into individual elements.
#BOOTSTRAP 3 RESPONSIVE DESIGN TUTORIAL FUNDAMENTALS FULL#
This will ensure that your site has no horizontal scroll - the full site will be visible, and users will not have to zoom on mobile to see the content.Ī CDN is a link to a stylesheet or script generously provided by a large company that will access the file on a server close to the location of the client. Foundation Define Viewportīefore you do anything else, you have to define the width of the viewport in your HTML.
#BOOTSTRAP 3 RESPONSIVE DESIGN TUTORIAL FUNDAMENTALS HOW TO#
There is satisfaction that comes with truly creating something from scratch, and having a deep understanding of how your code works and how to manipulate it. If you're a more experienced developer, you might know how to grab the parts you want and integrate with LESS or Sass, but the average person is simply including the vanilla CSS and JS files, and overriding them in separate files. The documentation for these frameworks is massive. The likely reality is that you don't need even a fraction of what the frameworks come with. Breakpoints - at what point content will collapse.
It's important to know what's going on under the hood.Īt the end of the day, it's really not as scary as it seems. However, if you can't confidently put together a responsive site without the aid of a framework, you should definitely consider learning. If you use them, there's absolutely nothing wrong with that. Now, don't get me wrong - I think frameworks are fantastic tools that can drastically increase the speed of development while solving common problems, and all at the cost of a little creativity.
Good thing we have CSS and JavaScript frameworks like Bootstrap and Foundation to figure all that out for us, right? Responsive web design is an approach to creating websites in which the layout adapts to fit the device's screen - whether it's a phone, tablet, laptop, desktop, TV, or hologram.