39,59 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Sprache: Englisch
Harness the power of CSS3 to design stunning, modern websites
About This Book
- Explore the CSS files structures, add the right methodologies, and get a final product without any code chaos
- Make your websites faster, more responsive, and more efficient using the minimum CSS code
- Design better and more modern websites using the new features of CSS3
Who This Book Is For
This book is for web designers who wish to learn the best ways to work with CSS for web development.
What You Will Learn
- Familiarize yourself with the concepts of CSS and the SASS pre-processor
- Get familiar with selectors to build better CSS code
- Gain knowledge on the common issues with CSS and discover the solutions
- Write scalable code using various CSS methodologies and optimization techniques
- Create a simple and reusable framework based on SASS
- Explore the various tools involved in CSS code creation
In Detail
CSS is the preferred technology to design modern web pages. Although CSS is often perceived as a simple language, applying modern styles to web pages with CSS and maintaining the code for larger websites can be quite tricky.
We will take you right from understanding CSS to designing high-quality web pages in CSS3. We'll quickly take you through CSS3's features, and show you how to resolve common issues so you can build your basic framework. Finally, you will learn about code architecture and CSS methodologies used in scalable apps and you'll explore the various new features of CSS3, such as FlexBox, to help you create the most modern layout methodologies. By the end of the book, you will be a master at creating pure CSS web pages and will know sophisticated web design techniques, giving you an edge over other web designers.
Style and approach
This book is packed with several code examples that you can easily test in all types of browsers.
Each example provides a detailed description of the inner workings of CSS techniques.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 227
Veröffentlichungsjahr: 2016
Ähnliche
Table of Contents
Professional CSS3
Professional CSS3
Copyright © 2016 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: May 2016
Production reference: 1260516
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78588-094-0
www.packtpub.com
Credits
Author
Piotr Sikora
Reviewer
Ed Wheeler
Commissioning Editor
Priya Singh
Acquisition Editor
Prachi Bisht
Content Development Editor
Rashmi Suvarna
Technical Editor
Shivani K. Mistry
Copy Editors
Sameen Siddiqui
Roshni Banerjee
Project Coordinator
Judie Jose
Proofreader
Safis Editing
Indexer
Hemangini Bari
Graphics
Abhinash Sahu
Production Coordinator
Melwyn Dsa
Cover Work
Melwyn Dsa
About the Author
Piotr Sikora is lead frontend developer at Nitro Digital, based in Kielce, Poland. He started working on web projects when he was in high school. Over the years, he has been a Flash developer, project manager, and team supervisor. He loves digital projects and dealing with all things digital.
Piotr is a b-boy (break dancer) and has learned a lot of artistic stuff from dance. He teaches dance in his free time.
I would like to thank my wife and daughter for giving me great inspiration and motivating me to write this book. I also give deep thanks to my parents, who always supports me.
I would also like to thank all my friends and mentors that I've had over the years—mentors such as Wojciech Świderski of the Apollo13 team who showed me how to think in CSS and JavaScript; Krzysztof Łosiak of Reborn team for first web ideas and knowledge sharing; the Nitro Digital team for their support, cooperation and still new possibilities; the Broken Glass 2 crew for providing inspiration, creative and open-minded thinking. Without you guys, writing this book would have been impossible!
About the Reviewer
Ed Wheeler works as a frontend developer focused on building reusable and scalable interfaces for websites. With over 10 years of experience in building frontend code, Ed has helped small, medium, and large organizations alike. Ed has also been the technical reviewer for Packt Publishing's video series Mastering CSS.
www.PacktPub.com
eBooks, discount offers, and more
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Preface
CSS is often perceived as a simple language. In fact, while being declarative and apparently simple, it is pretty hard to maintain. For a growing large-scale web application, maintainability is crucial. This book is about ways to leverage known tricks and hacks, new CSS level 3 module techniques, preprocessors, and other tools to create really high-quality products. This will include examples on techniques such as float handling and component-based CSS.
What this book covers
Chapter 1, Foundations and Tools, is about the tools that will help you build better CSS code. It describes the features of preprocessors before providing foundational knowledge about SASS. In this chapter, you will get basic knowledge about automatization of repeatable processes in frontend development with GULP.js. You will also find an example of file structures, which you can use to divide a project into files that are small and easy to edit and maintain.
Chapter 2, Mastering of Fundamentals, helps you master the box model, floating CSS, positioning troubleshooting, and display types. After this chapter, you will be more aware of foundations of HTML and CSS.
Chapter 3, Mastering of Pseudoelements and Pseudoclasses, describes pseudoclasses and pseudoelements and how you can use them. It will cover the problem of drawing primitives and how to use them as a part of optimized CSS code.
Chapter 4, Responsive Websites – Prepare Your Code for Specific Devices, provides knowledge about RWD and how to prepare projects. It will cover problems of modern websites and optimization techniques.
Chapter 5, Using Background Images in CSS, addresses the fact that images are on almost every webpage. This chapter will teach you how to craft an optimal website with images displayed correctly on a wide spectrum of modern devices, including mobile phones and tablets.
Chapter 6, Styling Forms, teaches you about styling forms and which elements of CSS you can and cannot use.
Chapter 7, Resolving Classic Problems, is about troubleshooting classic problems in CSS: dealing with opacity, transforms, and centering elements.
Chapter 8, Usage of Flexbox Transform, teaches you about new features of CSS and where to use them.
Chapter 9, Calc, Gradients, and Shadows, will provide information about calc function, which will help you with math operations in CSS. This chapter will reveal the gradient functions and how can you use them in HTML layouts. In this chapter, you will also get a basic knowledge about CSS shadows and its usage. After this chapter, you will know how to add shadow to boxes and texts.
Chapter 10, Don't Repeat Yourself – Let's Create a Simple CSS Framework, is about building reusable code and how to later use it as a foundation for your own projects. This chapter will cover problems related to creating basic CSS frameworks.
Chapter 11, Mailers Fundamentals, is a short introduction to mailers and problems that can occur during the mailer building process. The chapter is focused on fundamental knowledge.
Chapter 12, Scalability and Modularity, teaches you how to prepare scalable code in CSS.
Chapter 13, Code Optimization, is about the final process that takes place after building CSS code. It's mainly about optimization and minification tools. It covers the problems involved in preparing your code before you start coding and during the creation of CSS code.
Chapter 14, Final Automatization and Processes Optimization, is about the automatization of operations over CSS code.
What you need for this book
To use this book, it is recommended you install your favorite IDE, which should support the following:
For better understanding of the code and its debugging, you will need a browser such as:
Additionally, you will need the following:
Who this book is for
This book is meant for all frontend developers who want to learn how to use the features of CSS and SASS. The book covers a number of topics that can be interesting for developers at each level. If you are a beginner, it will introduce you to CSS and SASS. If you an intermediate/expert programmer, this book can be a good refresher of some CSS and SASS features. Additionally, the final chapter is for all developers who want to start working as a frontend developer and want to automatize a bunch of tasks such as the minification of CSS code.
Conventions
In this book, you will find a number of tools. Mainly it will be SASS and CSS code but as you know CSS is not working by itself and we will be using basic HTML structures. Additionally there will be a bunch of JS code which will describe Gulp.js taks.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "With preprocessor, each @import makes a merging for you, and in this place you will have a content of mentioned file "
A block of code is set as follows:
Any command-line input or output is written as follows:
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "The easiest way to invoke inspector is to right-click on an element and choose Inspect ."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
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.
Customer support
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.
Downloading the example code
You can download the example code files for this book from your account at http://www.packtpub.com. 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.
You can download the code files by following these steps:
You can also download the code files by clicking on the Code Files button on the book's webpage at the Packt Publishing website. This page can be accessed by entering the book's name in the Search box. Please note that you need to be logged in to your Packt account.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Professional-CSS3. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Downloading the color images of this book
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from http://www.packtpub.com/sites/default/files/downloads/ProfessionalCSS3_ColorImages.pdf.
Errata
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
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.
Questions
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.
Chapter 1. Foundations and Tools
It is important to learn about the foundations in each area. You need to have basic information to be a professional. Good usage of tools is almost as important as the foundation. Without good tools, your foundation won't be used well.
This chapter is about tools that will help to build better CSS code. It describes features of preprocessors and finally the foundation knowledge about SASS. In this chapter, you can get basic knowledge about automatization of repeatable processes in frontend development with GULP.js. Finally, you can find an example of file structure, which will partialize your project into small, easy to edit, and maintainable files.
In this chapter, we will:
Choosing the right IDE
Building CSS code is pretty simple. If you want to start, you just need a simple text editor and start writing your code. If you want to speed up the process, you will need to choose the right text editor or integrated development environment (IDE). Currently the most popular editors/IDEs for frontend developers are as follows:
Your choice will be based on price and quality. You should use the editor that you feel most comfortable with.
Speeding up the programming process with snippets/Emmet
When you are creating a code, you have parts of codes that you repeat in all projects/files. You will need to create snippets that will help you to speed up the process of writing code. As a frontend developer, I recommend you to get a basic knowledge about Emmet (previously Zen Coding). This is a collection of HTML/CSS snippets, which will help you build code faster. How to use it? It is basically included in modern frontend editors (Sublime Text, Atom, Brackets, WebStorm, and so on). If you want to check how Emmet works in CSS you need to start a declaration of some class for example .className, open the brackets ({}) and write for example:
Then press the Tab button, which will trigger the Emmet snippet. As a result, you will get the following:
Following are examples of the most used properties and values:
Emmet form
Result
bg
Background
bgc
Background color
m
Margin
ml, mr, mt, mb
Margin-left, margin-right, margin-top, margin-bottom
ml20px
Margin-left: 20px
c
Color
fl
Float: left
p20px20p
Padding: 20px 20%
tac
Text-align: center
tdn
Text-decoration: none
ttu
Text-transform: uppercase
dib
Display: inline-block
!
!important
For a better understanding of Emmet and to get a full list of features, it is recommended to check the official website of the project at: http://emmet.io/.
Keyboard shortcuts
Do you remember when you learned the most impressive keyboard shortcuts Ctrl + C ,Ctrl + V? It helped you to save about 2 seconds each time you wanted to make an operation of copying and pasting some text or any other element. But what about automizing some processes in building code? Yeah, it's going to be helpful and you can do it with keyboard shortcuts.
Shortcuts that you should know in your IDE are as follows:
Cross browser compatibility – which browsers should you install?
To test your code, you will need all the modern web browsers. In your list, you should have the following browsers:
Internet Explorer (IE) is the biggest issue in frontend developers' lives because you will need a bunch of IEs on your machine, for example, 9, 10, and 11. The list is getting smaller because back in the days the list was longer. IE6, 7, 8, 9, and so on. Now IE6, 7, and 8 are mostly not supported by the biggest web projects like YouTube and Facebook. But it sometimes occurs in big companies in which the changing of operating systems is a pretty complicated process.
To easily test your code on a bunch of browsers, it is good to use online tools dedicated for this test:
But an easy and free way to do it is to create a virtual machine on your computer and use the system and browser which you need. To collect the required versions of IE, you can refer to http://modern.ie. With modern.ie, you can select the IE version you need and your version of virtual machine platform (VirtualBox, Parallels, Vagrant, VMware).
How to use inspector
Dealing with HTML and CSS code is almost impossible nowadays without inspector. In this tool, you can see the markup and CSS. Additionally, you can see the box model. This is well known too in browsers for web developers. A few years ago, everybody was using Firebug dedicated for Firefox. Now each modern browser has its own built-in inspector, which helps you to debug a code.
The easiest way to invoke inspector is to right-click on an element and choose Inspect. In Chrome, you can do it with a key shortcut. In Windows, you have to press F12. In MAC OSX, you can use cmd + alt + I to invoke inspector.
Key shortcuts
For faster using of your browser, it's good to know some key combinations that will speed up the process.
Key combination
Function
Ctrl + R, cmd + R
Reload
Ctrl + Shift + R, cmd + shift + R
Reload with cache
cmd + I, F12
Inspector
Ctrl + U, cmd + alt + U
Source of page
Preprocessor – why should you use them?
A preprocessor is a program that will build CSS code from other syntax similar or almost identical to CSS. The main advantages of preprocessors are as follows:
Nesting elements in preprocessors
Preprocessors give you the advantage of building code with nesting of declarations. In simple CSS, you have to write the following:
In the preprocessor, you just need to write the following:
Or in SASS with the following indentation:
And it will simply compile to code:
The proper usage of nesting will give you the best results. You need to know that good CSS code.
Using variables to parametrize your CSS code
In good CSS code, there is no possibility to use variables in all browsers. Sometimes you are using same value in the few places, but when you have change requests from client/project manager/account manager, you just immediately need to change some colors/margins, and so on. In CSS, usage of variables is not supported in old versions of Internet Explorer. Usage of variables is possible with CSS preprocessors.
Using mixins in preprocessors
In classic
