21 CSS techniques I used for my new about me page

Recently, I designed my “about me” page without using any CSS frameworks. Here are some of the CSS techniques I used, along with the resources to learn more about them.

Here’s the link to my “about me” page and the source code (HTML/CSS).

1. Use SCSS mixins and breakpoint variables to set media queries

It’s faster to type.

Code: http://bit.ly/1E2APRT
Learn more: Write Better Media Queries with Sass

2. Style mobile first

First write mobile style, then write style for larger screens using media query mixins.

Code: http://bit.ly/1E2B3IT
Learn more: 7 Habits of Highly Effective Media Queries

3. Use em for media queries

By doing this, media queries work better with page zooming.

Code: http://bit.ly/17elFMC
Learn more: 7 Habits of Highly Effective Media Queries

4. Use px for html tag and use rem for other font sizes

It becomes easier to change font size on different screen size.

Code: http://bit.ly/1yS4iYh
Learn more: Font Size Idea: px at the Root, rem for Components, em for Text Elements

5. Use unitless line-height

By doing this, line height changes when font size changes. Also, use smaller line-height for headings so they look better.

Code: http://bit.ly/1EKCedH
Learn more: Mobify CSS Style Guide — Size Units

6. Use border-box for everything

It’s easier to calculate box sizes.

Code: http://bit.ly/1EKCw4s
Learn More: * { Box-sizing: Border-box } FTW

7. Use single directional margins

It’s easier to reason about the vertical rhythm.

Code: http://bit.ly/1EKCHMZ
Learn More: Single-direction margin declarations

8. Use BEM for naming classes

It’s easier to think in terms of components.

Code: http://bit.ly/1EKCPMz
Learn More: MindBEMding — getting your head ’round BEM syntax

9. Use the component’s name for its file’s name

It’s easier to find the corresponding files.

Code: http://bit.ly/1EKCYQc
Learn More: Mobify CSS Style Guide — Self Documenting Selectors

10. Use “is-*” classes for state

It’s easier to know which classes are set from JS.

Code: http://bit.ly/1EKD5eq
Learn More: Mobify CSS Style Guide — State

11. Use utility classes if they make the code simpler

Code: http://bit.ly/1E2BUJv

12. Avoid tag selectors when possible

By doing this, the code becomes more portable. In this case, I didn’t write “ul.social-links”.

Code: http://bit.ly/1E2BWkD
Learn More: CSS Architecture

13. Avoid selectors that depend on location

The code becomes more predictable and reusable. In this case, I didn’t write “.footer .social-links”.

Code: http://bit.ly/1E2C57R
Learn More: CSS Architecture

14. Use placeholder selectors to DRY the code

…when it doesn’t make sense to break down to more components/classes.

Code: http://bit.ly/1E2C6IE
Learn More: Mobify CSS Style Guide — @extends

15. Use section → container → inner pattern

• Section (or header/footer) sets the background and margin bottom
• Container sets the common width and centers the content
• Inner positions the text
• Use more classes/components if necessary

Code: http://bit.ly/1EKDzkW
Learn More: CSS Architecture

16. Use percent-based vertical padding to position text over an image

Because I use background-size: cover, the image scales with the page width. Percent based vertical padding scales with the width, so it scales with the image too.

Code: http://bit.ly/1EKDI7W

17. Use comments when the code is not clear

Code: http://bit.ly/1EKDT32
Learn more: Mobify CSS Style Guide — Commenting Best Practice

18. Use negative left margin for grid rows (same size as column gutters)

Bootstrap uses the same technique.

Code: http://bit.ly/1EKDZri
Learn more: Why does the bootstrap .row has a default margin-left of -30px?

19. Use nth-child for responsive column resets

Code: http://bit.ly/1E2Ct64

20. Columns only take care of horizontal positioning. For vertical positioning, add a different class.

It keeps the grid system simple.

Code: http://bit.ly/1E2CCGD
Learn More: CSS Architecture

21. Use simple CSS animations

I used animate.css and wow.js.

That's all!

Here’s the link to my “about me” page and the source code (HTML/CSS).

Feel free to follow me on Twitter.

Thanks to Shu Uesugi for revising my English.