Responsive web design has taken the web design industry by storm. It's not a trend but a norm; it is something that is now normally expected from a website. You might have read and come across many discussions about responsive web design on blogs, forums, Facebook, and Twitter. Likewise, you want your website to be responsive in order to make it presentable on any screen size. Hence, this is the book you are looking for.
This book teaches you how to build presentable, responsive websites through examples, tips, and best practices of code writing and project organization. Additionally, you will also learn how to use CSS preprocessors, LESS, and Sass, which allows you to compose leaner style rules.
Chapter 1, Responsive Web Design, looks at the basic principle behind responsive web design, explains the basic technicalities to build a responsive website and features a couple of responsive frameworks as well as the advantages of using one.
Chapter 2, Web Development Tools, helps you to prepare, install, and set up the software to run projects and build responsive websites.
Chapter 3, Constructing a Simple Responsive Blog with Responsive.gs, introduces the Responsive.gs framework and builds the HTML structure of a blog using several HTML5 elements and the Responsive.gs grid system.
Chapter 4, Enhancing the Blog Appearance, composes CSS style rules to enhance the blog's look and feel. You will also learn how to manage blog styles modularly with partial style sheets and to compile them together into a single style sheet with a compiler.
Chapter 5, Developing a Portfolio Website with Bootstrap, builds a portfolio website with the Bootstrap framework components, including the grid system, button, and form as the base. We also learn how to use Bower to manage project libraries.
Chapter 6, Polishing the Responsive Portfolio Website with LESS, explores and teaches us the use of several LESS features, such as nesting, variables, and mixins, to write leaner and reusable style rules and eventually to polish the responsive portfolio website.
Chapter 7, A Responsive Website for Business with Foundation, builds a responsive website for a startup business using the Foundation framework grid system and components.
Chapter 8, Extending Foundation, teaches how to use Sass and SCSS syntax, such as variables, mixins, and function, to write maintainable and reusable styles for the responsive startup website.
Appendix, Pop Quiz Answers, contains answers to the multiple choice pop quizzes you will find throughout the book.
You need to have a basic understanding of HTML and CSS; at least, you should know what an HTML element is and how to style an HTML element with CSS in its fundamental form. Some degree of familiarity and experience with HTML5, CSS3, and command lines, though not essential, will be a great help to get the most out of this book. We will explain each step and all the techniques in full, along with some handy tips and references.
Furthermore, you will also need a computer running Windows, OS X, or Ubuntu; an Internet browser (preferably Google Chrome or Mozilla Firefox); and a code editor (in this book, we will use Sublime Text).
Responsive Web Design by Example Beginner's Guide Second Edition teaches readers how to build presentable responsive websites through practical examples and guides readers through the process bit by bit with in-depth explanation. It is the perfect book for anyone who wants to learn and build responsive websites quickly up and running regardless of the reader's proficiency, that is, new or seasoned web designers.
In this book, you will find several headings that appear frequently (Time for action, What just happened?, Pop quiz, and Have a go hero).
To give clear instructions on how to complete a procedure or task, we use these sections as follows:
Action 1
Action 2
Action 3
Instructions often need some extra explanation to ensure they make sense, so they are followed with these sections:
This section explains the working of the tasks or instructions that you have just completed.
You will also find some other learning aids in the book, for example:
These are short multiple-choice questions intended to help you test your own understanding.
You will also find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "The boxsizing.htc file that comes with Responsive.gs will apply similar functionality as in the CSS3 box-sizing property."
A block of code is set as follows:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/scripts/boxsizing.htc);
}When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/scripts/boxsizing.htc);
}Any command-line input or output is written as follows:
cd \xampp\htdocs\portfolio bower init
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: " Check the Source Map option for both style sheets to generate the source map files, which would help us when debugging."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.