https://github.com/iansinnott/css-patterns
https://github.com/iansinnott/css-patterns
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/iansinnott/css-patterns
- Owner: iansinnott
- Created: 2015-08-06T06:59:39.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-08-06T17:26:49.000Z (almost 11 years ago)
- Last Synced: 2025-06-15T23:05:23.447Z (about 1 year ago)
- Language: CSS
- Size: 109 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Idioms
Simple solutions to the most common problems we face when authoring CSS.
## Why?
I write a lot of CSS (well, [Stylus][] actually) and I often find myself reaching for the same CSS patterns over and over again. So I finally decided I should really write these down somewhere, for my own sake at least and hopefully for the benefit of others too. Let's jump in.
## Terminology
- **Fixed Size:** Any value defined by you that . Example: `width: 200px;`, `padding: 2%;`
Examples of non-fixed, or partially-fixed size would be `width: auto;`, `margin: 0 auto;`
- **Variable Size:** When an elements size is dependent on the content you put inside it. This is the default for most block elements
## General Rules
### Use a preprocessor
You'll be doing yourself a huge favor. Even if you pre-process [CSS Next][] down to regular CSS this is a big win. Once you write nested styles and variables you will never go back to plain CSS.
Here are some options:
* [Stylus][]
* [Sass][]
* [Less][]
* [CSS Next][]
My favorite is [Stylus][], but use what you feel most comfortable with. The snippets you will find here are all written in Stylus, but I've included a compiled plain CSS file for anyone who's uncomfortable with Stylus syntax.
[Stylus]: https://learnboost.github.io/stylus/
[CSS Next]: https://github.com/cssnext/cssnext
[Sass]: http://sass-lang.com/
[Less]: http://lesscss.org/
### Use `box-sizing border-box`
The `box-sizing border-box` property is [supported all the way back to IE8][box-sizing] so there's really no reason not to use it. It will _gretaly_ simplify your life authoring CSS.
For anyone not familiar `box-sizing border-box` basically makes the CSS box model actually reasonable. When you set `width 300px` that's what you get. Borders and padding will push the content of the element inward instead of increasing the effective width of the element outward.
Still curious? [Read this](http://www.paulirish.com/2012/box-sizing-border-box-ftw/).
Then add this to the beginning of all your style files:
```css
* { box-sizing: border-box; }
```
[box-sizing]: http://caniuse.com/#feat=css3-boxsizing
## Layout
CSS layout, if anything, is often the most vexing part of creating CSS. For that reason most of the idioms to follow revolve around achieving some layout.
### Vertical Center
- **Fixed Size Vertical Center:**
If you're targetting only browsers that aren't terrible you can use the nifty `transform translateY(-50%)` in conjunction with absolute positioning:
```stylus
// Containing element needs position relative of course
.vertical-center-parent
position relative
//
// By translating the element up (using a negative percentate)
.vertical-center
position absolute
top 50%
transform translateY(-50%)
```
However, if you or your requirements insist on supporting terrible browsers you'll have to resort to the `display table` method:
- **Variable Size Vertical Center:**
### Horizontal Center
- **Fixed Size Vertical Center:**
- **Variable Size Vertical Center:**
### Absolute Center