Professional CSS3

Professional CSS3

by Piotr Sikora
Released May 2016
Publisher(s): Packt Publishing
ISBN: 9781785880940

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

    Table of contents

    1. Professional CSS3
      1. Table of Contents
      2. Professional CSS3
      3. Credits
      4. About the Author
      5. About the Reviewer
      6. www.PacktPub.com
        1. eBooks, discount offers, and more
          1. Why subscribe?
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Foundations and Tools
        1. Choosing the right IDE
          1. Speeding up the programming process with snippets/Emmet
          2. Keyboard shortcuts
        2. Cross browser compatibility – which browsers should you install?
          1. How to use inspector
          2. Key shortcuts
        3. Preprocessor – why should you use them?
          1. Nesting elements in preprocessors
          2. Using variables to parametrize your CSS code
          3. Using mixins in preprocessors
          4. Mathematical operations
          5. Logic operations and loops
          6. Joining of multiple files
          7. Less – a short introduction
          8. CSS with Stylus
          9. SASS – the most mature preprocessor
          10. Short comparison
        4. SASS foundation
          1. Variables – where and how to use
          2. Simple mixins – where and how to use (@mixin, @include)
          3. Extending classes (@extend)
          4. Importing files (@import)
          5. Using of & in SASS
          6. Compass features
        5. Simple automatization (with Gulp)
        6. Pixelperfect layouts tools
          1. Pixelfperfect plugin
          2. MeasureIT plugin
        7. Checking compatibility
        8. Good assumptions in code
        9. Creating proper selectors
          1. Using IDs
          2. Using classes
          3. Grouping selectors
          4. Interesting selectors
            1. Adjacent sibling combinatory +
            2. Child combinator ">"
            3. Adjacent sibling combinatory ~
            4. Getting elements by attributes
            5. Attributes with exact value [attribute="value"]
            6. Attributes which begin with [attribute^="value"]
          5. Whitespace separated attribute values [attribute~="value"]
          6. Attribute values ending with [attribute$="value"]
          7. Attributes containing strings [attribute*="value"]
          8. Using !important in CSS
        10. Preparing your project
          1. Files structure
          2. How to keep variables in a project
          3. How and where to keep mixins (local and global)
          4. Keep typography styles in a separate file
          5. Views of specific elements
        11. Summary
      9. 2. Mastering of Fundamentals
        1. Traditional box model
          1. Padding/margin/border/width/height
          2. Omitting problems with the traditional box model (box-sizing)
        2. Floating elements
          1. Possibilities of floating elements
          2. Most known floating problems
          3. Defining clear fix/class/mixins
          4. Example of using floating elements
        3. Display types
          1. Block elements
          2. Inline elements
          3. Inline-block display
          4. Where can you use other types of elements – navigation
          5. Where can you use other types of elements – problem of equal boxes
        4. CSS elements positioning
          1. Static, relative, absolute, fixed – differences
          2. Lists with fixed images (on the right or left) and descriptions
        5. Summary
      10. 3. Mastering of Pseudoelements and Pseudoclasses
        1. Pseudoclasses
          1. How can we check :active, :hover state?
          2. Usage – multilevel menu
          3. Usage – CSS hover rows
        2. Usage of pseudoclasses
          1. How to use :first-child, :last-child, :nth-child()
          2. Usage – styling table
          3. Exploring :nth-child parameters
          4. How to use :nth-last-child
          5. How to use :first-of-type, :last-of-type, :nth-of-type, and :nth-last-of-type
          6. Empty elements with the :empty pseudoclass
        3. Supporting forms styling with pseudoclasses
          1. Validation with :valid and :invalid
          2. Adding input statuses :focus, :checked, :disabled
          3. Additional aspect – colorize the placeholder
        4. Drawing primitives with CSS
          1. How to draw a rectangle/square
          2. How to draw a circle
          3. How to draw a ring
          4. How to draw a triangle with CSS
        5. Pseudoelements
          1. What is :before and :after?
          2. Where can we use :before and :after?
          3. First letter and first line – simple text manipulation
          4. How to change selection color? Usage of ::selection
        6. Summary
      11. 4. Responsive Websites – Prepare Your Code for Specific Devices
        1. The foundation of responsive websites
          1. Desktop first methodology
          2. Mobile first methodology
          3. Adjusting the viewport in HTML
          4. Choosing the right viewport
          5. Above the fold
        2. Media queries – where can you use it
          1. How to build media queries
          2. How media queries work?
          3. Media queries for specific views/devices
          4. How to choose proper media queries for mobile devices
        3. Usage sample – main navigation
        4. Summary
      12. 5. Using Background Images in CSS
        1. CSS backgrounds
          1. Repeating of background
          2. Background size
          3. Background position
          4. Multiple backgrounds
          5. How to create and use sprites
          6. Usage of base64
        2. Retina problems
        3. Summary
      13. 6. Styling Forms
        1. Forms – the most known issues
        2. Forms – enable superpowers
          1. How to style simple input
          2. Don't forget about placeholders
          3. Complex form based on input[type="text"] and labels
          4. How to style textarea
          5. Styling of select (drop down)
        3. Summary
      14. 7. Resolving Classic Problems
        1. Centering elements
          1. Inline elements – horizontal centering
          2. Block elements – centering in both axes
          3. Using transform in centering
        2. Dealing with opacity
          1. Opacity versus RGBA – differences and where can we use them
          2. Opacity in the past – fallback for old IE versions
        3. Summary
      15. 8. Usage of Flexbox Transform
        1. Flexbox
          1. Flexbox property align-items
          2. Flexbox property flex-wrap
          3. Flexbox property justify-content
          4. Flexbox property align-content
          5. Flexbox property flex-direction
          6. Usage of flexbox – creating page structure
          7. Usage of flexbox – change order of boxes in mobile/tablet view
        2. More about transform
        3. Summary
      16. 9. Calc, Gradients, and Shadows
        1. The calc() method
        2. Gradients in CSS
          1. Linear gradients
          2. Using gradient mixins
          3. Radial gradients
        3. How to add box-shadow
        4. How to add text-shadow
        5. Additional font and text features
          1. Using non-standard fonts in browsers
          2. Using CSS animations
        6. Data attribute
          1. Issue – bold on hover moves the navigation
        7. Summary
      17. 10. Don't Repeat Yourself – Let's Create a Simple CSS Framework
        1. File structure
        2. Short forms of useful elements
        3. Other mixins
          1. Clearfix
        4. Media queries
          1. Media queries template
        5. Grids
          1. Standard grids 16/12
        6. Standard reusable structures
          1. Reusable multilevel menus
          2. How to create reusable buttons
        7. Gathering other reusable mixins
          1. Primitives
        8. Let's test and use our framework
        9. Remember!
        10. Summary
      18. 11. Mailers Fundamentals
        1. Testing your mailer
        2. Back to tables
          1. Resetting styles
        3. Targeting specific devices through media queries
          1. CSS properties in e-mail templates
          2. Responsive e-mail templates
        4. Inlining the e-mail template
        5. Tips for e-mail template development
          1. The e-mail template framework INK by ZURB
        6. Testing with Litmus
        7. Summary
      19. 12. Scalability and Modularity
        1. Building scalable and modular code
        2. CSS methodologies
          1. SMACSS
            1. Base rules
            2. Layout rules
            3. Module rules
            4. State rules
            5. Theme rules
            6. Summary of SMACSS
          2. OOCSS
            1. Using OOCSS in our sample
            2. Summary of OOCSS
          3. Block Element Modifier (BEM)
            1. Using BEM in our sample
            2. Using BEM in SASS
            3. How to use modifier?
        3. Which methodology should you use?
        4. Maybe your own methodology?
        5. Summary
      20. 13. Code Optimization
        1. Self-optimization
          1. A few steps before you push code live
          2. Using short forms
            1. Short forms of paddings/margins
            2. Short forms of borders
            3. Short forms in fonts styling
            4. Short forms in backgrounds
          3. Checking repetitions
        2. Summary
      21. 14. Final Automatization and Processes Optimization
        1. Gulp
        2. Jade as your templating engine
          1. Installing and using Jade
          2. Basics of Jade
          3. Mixins in Jade
          4. Include and extend functions in Jade
          5. Jade in gulp.js
        3. UnCSS
          1. Integrating UnCSS in Gulp
        4. Minifying CSS
        5. Final automatizer
        6. Summary
      22. Index

    Product information

    • Title: Professional CSS3
    • Author(s): Piotr Sikora
    • Release date: May 2016
    • Publisher(s): Packt Publishing
    • ISBN: 9781785880940