10. Don't Repeat Yourself – Let's Create a Simple CSS Framework | Professional CSS3

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Professional CSS3

By : Piotr Sikora

2 (2)

Professional CSS3

2 (2)

By: Piotr Sikora

Overview of this book

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Foundations and Tools

1. Foundations and Tools

Choosing the right IDE

Cross browser compatibility – which browsers should you install?

Preprocessor – why should you use them?

SASS foundation

Simple automatization (with Gulp)

Pixelperfect layouts tools

Checking compatibility

Good assumptions in code

Creating proper selectors

Preparing your project

Summary

2. Mastering of Fundamentals

2. Mastering of Fundamentals

Traditional box model

Floating elements

Display types

CSS elements positioning

Summary

3. Mastering of Pseudoelements and Pseudoclasses

3. Mastering of Pseudoelements and Pseudoclasses

Pseudoclasses

Usage of pseudoclasses

Supporting forms styling with pseudoclasses

Drawing primitives with CSS

Pseudoelements

Summary

4. Responsive Websites – Prepare Your Code for Specific Devices

4. Responsive Websites – Prepare Your Code for Specific Devices

The foundation of responsive websites

Media queries – where can you use it

Usage sample – main navigation

Summary

5. Using Background Images in CSS

5. Using Background Images in CSS

CSS backgrounds

Retina problems

Summary

6. Styling Forms

6. Styling Forms

Forms – the most known issues

Forms – enable superpowers

Summary

7. Resolving Classic Problems

7. Resolving Classic Problems

Centering elements

Dealing with opacity

Summary

8. Usage of Flexbox Transform

8. Usage of Flexbox Transform

Flexbox

More about transform

Summary

9. Calc, Gradients, and Shadows

9. Calc, Gradients, and Shadows

The calc() method

Gradients in CSS

How to add box-shadow

How to add text-shadow

Additional font and text features

Data attribute

Summary

10. Don't Repeat Yourself – Let's Create a Simple CSS Framework

10. Don't Repeat Yourself – Let's Create a Simple CSS Framework

File structure

Short forms of useful elements

Other mixins

Media queries

Grids

Standard reusable structures

Gathering other reusable mixins

Let's test and use our framework

Remember!

Summary

11. Mailers Fundamentals

11. Mailers Fundamentals

Testing your mailer

Back to tables

Targeting specific devices through media queries

Inlining the e-mail template

Tips for e-mail template development

Testing with Litmus

Summary

12. Scalability and Modularity

12. Scalability and Modularity

Building scalable and modular code

CSS methodologies

Which methodology should you use?

Maybe your own methodology?

Summary

13. Code Optimization

13. Code Optimization

Self-optimization

Summary

14. Final Automatization and Processes Optimization

14. Final Automatization and Processes Optimization

Gulp

Jade as your templating engine

UnCSS

Minifying CSS

Final automatizer

Summary

Index

Index

Customer Reviews

2 (2)

5 star

0%

4 star

0%

3 star

50%

2 star

0%

1 star

50%

Short forms of useful elements

In CSS code (and not only CSS), you wish to get the final effect more quickly each time you repeat a part of the code. So why don't you create short forms for some CSS declarations as well? Let's check what we can make shorter:

/* Text decoration */
=tdn
  text-decoration: none

=tdu
  text-decoration: underline


/* Text align */
=tac
  text-align: center

=tar
  text-align: right

=tal
  text-align: left


/* Text transform */
=ttu
  text-transform: uppercase

=ttl
  text-transform: lowercase


/* Display */
=di
  display: inline

=db
  display: block

=dib
  display: inline-block


/* Margin 0 auto */
=m0a
  margin: 0 auto

Now, each time you want to make some text uppercase, you are just using code:

.sampleClass
  +ttu

Here's the compiled CSS:

.sampleClass {
    text-transform: uppercase;
}

Another example of usage of short mixins is a element which will be displayed as a block element and text will be centered:

.sampleClass
  +db
  +tac

Here's the compiled CSS...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Professional CSS3

Search

Your notes and bookmarks