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

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

2. Style mobile first

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

3. Use em for media queries

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

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

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

6. Use border-box for everything

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

7. Use single directional margins

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

8. Use BEM for naming classes

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

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

10. Use “is-*” classes for state

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

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

13. Avoid selectors that depend on location

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

14. Use placeholder selectors to DRY the code

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

15. Use section → container → inner pattern

  • 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

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)

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.

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

21. Use simple CSS animations

That's all!

Feel free to follow me on Twitter.

Thanks to Shu Uesugi for revising my English.

UI/UX Developer in Vancouver, BC. About me: http://ellekasai.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store