Skip to content

Commit 4334ae9

Browse files
mdomdo
committed
simple jekyll site with cname
1 parent 88c201c commit 4334ae9

39 files changed

+867
-58
lines changed

‎.gitignore

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Ignore docs files
2+
_gh_pages
3+
_site
4+
.ruby-version
5+
6+
# Numerous always-ignore extensions
7+
*.diff
8+
*.err
9+
*.orig
10+
*.log
11+
*.rej
12+
*.swo
13+
*.swp
14+
*.zip
15+
*.vi
16+
*~
17+
18+
# OS or Editor folders
19+
.DS_Store
20+
._*
21+
Thumbs.db
22+
.cache
23+
.project
24+
.settings
25+
.tmproj
26+
*.esproj
27+
nbproject
28+
*.sublime-project
29+
*.sublime-workspace
30+
.idea
31+
32+
# Komodo
33+
*.komodoproject
34+
.komodotools
35+
36+
# grunt-html-validation
37+
validation-status.json
38+
validation-report.json
39+
40+
# Folders to ignore
41+
node_modules
42+
bower_components

‎CNAME

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
wtfhtmlcss.com

‎README.md

+8-58
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,18 @@
11
# WTF, HTML and CSS?
22

3-
Open an issue or a pull request to suggest changes or additions. Support for items listed below is not provided. Links to additional resources are provided whenever possible.
3+
**WTF, HTML and CSS?** is a list of reasons your shit is fucked. Put another way, it's a list of common HTML and CSS quandaries, miscues, and dilemmas created with the goal of making them *less* common.
44

5-
### Contents
5+
**[Start reading ☞](http://wtfhtmlcss.com)**
66

7-
- [Set your doctype](#set-your-doctype)
8-
- [Box model math](#box-model-math)
9-
- [Floats come first](#floats-come-first)
10-
- [Floats and clearing](#floats-and-clearing)
11-
- [Floats and computed height](#floats-and-computed-height)
12-
- [Vertical margins often collapse](#vertical-margins-often-collapse)
13-
- [Styling table rows](#styling-table-rows)
14-
- [Firefox fubars `<input>` buttons](#firefox-fubars-input)
15-
- [Always set a `type` on `<button>`s](#always-set-a-type-on-buttons)
16-
- [Internet Explorer's selector limit](#internet-explorers-selectors)
17-
- [Position explained](#position-explained)
18-
- [Position and width](#position-and-width)
19-
- [`transform` and `position: fixed`](#transform-and-position-fixed)
7+
---
208

21-
-----
9+
### Contribute
2210

23-
### Set your doctype
24-
Always include the HTML5 doctype, `<!DOCTYPE html>`, otherwise you'll run into tons of issues like malformed tables, inputs, and the like.
11+
Open an issue or a pull request to suggest changes or additions.
2512

26-
### Box model math
27-
Elements that have a set `width` become *wider* when they have `padding` and/or `border-width`. To avoid these problems, make use of the now common [`box-sizing: border-box` reset](http://www.paulirish.com/2012/box-sizing-border-box-ftw/).
2813

29-
### Floats come first
30-
Floated elements should always come first in the document order. Floats have to have something to wrap around, otherwise they can cause a step down effect.
14+
### License
3115

32-
### Floats and clearing
33-
If you float it, you *probably* need to clear it. Any content that follows an element with a `float` will wrap around that element until cleared. Use [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) to clear your floats. Setting `overflow: [hidden|auto]` on the parent of a floated element with will also work, with some side affects.
16+
Released under MIT by, and copyright 2014, @mdo.
3417

35-
### Floats and computed height
36-
A parent element that has only floated content will have a computed `height: 0;`. Add a clearfix to the parent to trigger a proper computer height.
37-
38-
### Floated elements are block level
39-
Any element with a `float` set automatically becomes `display: block`, thus you do not need to set a `float` and a `display`. Years ago we had to set `display: inline` for floats to work properly in IE6, but those days have passed.
40-
41-
### Vertical margins often collapse
42-
Top and bottom margins can and will collapse in many situations, but never for floated or absolutely positioned elements. [Read this MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) to find out more. **Horizontal margins will never collapse.**
43-
44-
### Styling table rows
45-
Table rows, `<tr>`s, cannot be styled unless you set `border-collapse: separate;` on the parent `<table>`.
46-
47-
### Firefox fubars `<input>` buttons
48-
Don't use button or submit buttons (e.g., `<input type="button">...</input>` or `<input type="submit">...</input>`). Firefox still sets styles that cannot be overridden by custom CSS, thus causing these buttons to be taller than a `<button>` element.
49-
50-
### Always set a `type` on `<button>`s
51-
The default value is `submit`, meaning any button in a form can submit the form. Use `type="button"` for anything that doesn't submit the form and `type="submit"` for those that do.
52-
53-
### Internet Explorer's selector limit
54-
Internet Explorer 9 and below have a max of 4,096 selectors per stylesheet. Anything after this limit is ignored by the browser. Either split your CSS up, or start refactoring. I'd suggest the latter.
55-
56-
### Position explained
57-
Elements with `position: fixed;` are placed relative to the browser viewport. Elements with `position: absolute;` are placed relative to their closest parent with a position other than `static` (e.g., `relative`, `absolute`, or `fixed`).
58-
59-
### Position and width
60-
You don't need to set `width: 100%` on an element with `position: [absolute|fixed]` with both `left` and `right` values declared. Use either `width` or `left` and `right`, but not both.
61-
62-
### `transform` and `position: fixed`
63-
`position: fixed` breaks when an element's parent has a `transform` set. Using transforms creates a new containing block, effectivly forcing the parent to have `position: relative` and the fixed element to behave as `position: absolute`. [See the demo](http://jsbin.com/yabek/1/) and read [Eric Meyer's post on the matter](http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/).
64-
65-
-----
66-
67-
## Copyright and license
68-
Copyright Mark Otto and released under the MIT license.
18+
<3

‎_config.yml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
name: WTF, HTML and CSS?
2+
url: http://wtfhtmlcss.com
3+
github: https://github.com/mdo/wtf-html-css
4+
twitter: https://twitter.com/mdo
5+
6+
markdown: redcarpet
7+
permalink: pretty
8+
pygments: true

‎_includes/css/class-names.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* Bad example */
2+
.t { ... }
3+
.red { ... }
4+
.header { ... }
5+
6+
/* Good example */
7+
.tweet { ... }
8+
.important { ... }
9+
.tweet-header { ... }

‎_includes/css/comments.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* Bad example */
2+
/* Modal header */
3+
.modal-header {
4+
...
5+
}
6+
7+
/* Good example */
8+
/* Wrapping element for .modal-title and .modal-close */
9+
.modal-header {
10+
...
11+
}

‎_includes/css/declaration-order.css

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.declaration-order {
2+
/* Positioning */
3+
position: absolute;
4+
top: 0;
5+
right: 0;
6+
bottom: 0;
7+
left: 0;
8+
z-index: 100;
9+
10+
/* Box-model */
11+
display: block;
12+
float: right;
13+
width: 100px;
14+
height: 100px;
15+
16+
/* Typography */
17+
font: normal 13px "Helvetica Neue", sans-serif;
18+
line-height: 1.5;
19+
color: #333;
20+
text-align: center;
21+
22+
/* Visual */
23+
background-color: #f5f5f5;
24+
border: 1px solid #e5e5e5;
25+
border-radius: 3px;
26+
27+
/* Misc */
28+
opacity: 1;
29+
}

‎_includes/css/import.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- Use link elements -->
2+
<link rel="stylesheet" href="core.css">
3+
4+
<!-- Avoid @imports -->
5+
<style>
6+
@import url("more.css");
7+
</style>

‎_includes/css/media-queries.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.element { ... }
2+
.element-avatar { ... }
3+
.element-selected { ... }
4+
5+
@media (min-width: 480px) {
6+
.element { ...}
7+
.element-avatar { ... }
8+
.element-selected { ... }
9+
}

‎_includes/css/nesting.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Without nesting
2+
.table > thead > tr > th { … }
3+
.table > thead > tr > td { … }
4+
5+
// With nesting
6+
.table > thead > tr {
7+
> th { … }
8+
> td { … }
9+
}

‎_includes/css/organization-comments.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* Component section heading
3+
*/
4+
5+
.element { ... }
6+
7+
8+
/*
9+
* Component section heading
10+
*
11+
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
12+
*/
13+
14+
.element { ... }
15+
16+
/* Contextual sub-component or modifer */
17+
.element-heading { ... }

‎_includes/css/organization-files.txt

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
stylesheets/
2+
├── normalize.css
3+
├── buttons.css
4+
├── forms.css
5+
├── grid.css
6+
├── header.css
7+
├── footer.css
8+
├── pagination.css
9+
└── input-group.css

‎_includes/css/prefixed-properties.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* Prefixed properties */
2+
.selector {
3+
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
4+
box-shadow: 0 1px 2px rgba(0,0,0,.15);
5+
}

‎_includes/css/selectors.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* Bad example */
2+
span { ... }
3+
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
4+
.avatar { ... }
5+
6+
/* Good example */
7+
.avatar { ... }
8+
.tweet-header .username { ... }
9+
.tweet .avatar { ... }

‎_includes/css/shorthand.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* Bad example */
2+
.element {
3+
margin: 0 0 10px;
4+
background: red;
5+
background: url("image.jpg");
6+
border-radius: 3px 3px 0 0;
7+
}
8+
9+
/* Good example */
10+
.element {
11+
margin-bottom: 10px;
12+
background-color: red;
13+
background-image: url("image.jpg");
14+
border-top-left-radius: 3px;
15+
border-top-right-radius: 3px;
16+
}

‎_includes/css/single-declarations.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* Single declarations on one line */
2+
.span1 { width: 60px; }
3+
.span2 { width: 140px; }
4+
.span3 { width: 220px; }
5+
6+
/* Multiple declarations, one per line */
7+
.sprite {
8+
display: inline-block;
9+
width: 16px;
10+
height: 15px;
11+
background-image: url(../img/sprite.png);
12+
}
13+
.icon { background-position: 0 0; }
14+
.icon-home { background-position: 0 -20px; }
15+
.icon-account { background-position: 0 -40px; }

‎_includes/css/syntax.css

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* Bad CSS */
2+
.selector, .selector-secondary, .selector[type=text] {
3+
padding:15px;
4+
margin:0px 0px 15px;
5+
background-color:rgba(0, 0, 0, 0.5);
6+
box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF
7+
}
8+
9+
/* Good CSS */
10+
.selector,
11+
.selector-secondary,
12+
.selector[type="text"] {
13+
padding: 15px;
14+
margin: 0 0 15px;
15+
background-color: rgba(0,0,0,.5);
16+
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
17+
}

‎_includes/footer.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<footer class="footer">
2+
<p>&lt;3</p>
3+
<p>Made with all the love in the world by <a href="{{ site.twitter }}">@mdo</a>.</p>
4+
<p>Open sourced under MIT. Copyright {{ site.time | date: '%Y' }}.</p>
5+
6+
<ul class="quick-links">
7+
<li>
8+
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&repo=wtf-html-css&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
9+
</li>
10+
<li>
11+
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&repo=wtf-html-css&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
12+
</li>
13+
</ul>
14+
<ul class="quick-links">
15+
<li class="follow-btn">
16+
<a href="{{ site.twitter }}" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @mdo</a>
17+
</li>
18+
<li class="tweet-btn">
19+
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://mdo.github.com/wtf-html-css" data-count="horizontal" data-via="mdo">Tweet</a>
20+
</li>
21+
</ul>
22+
</footer>

‎_includes/header.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<header class="masthead">
2+
<div class="container">
3+
<span class="icon">✌</span>
4+
<h1>{{ site.name }}</h1>
5+
<p class="lead">Reasons your HTML and CSS are fucked. A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.</p>
6+
<p class="lead">Created by <a href="{{ site.twitter }}">@mdo</a>.</p>
7+
8+
<p class="masthead-links">
9+
<a href="{{ site.github }}">
10+
<span class="icon icon-github-circled"></span>
11+
</a>
12+
<a href="{{ site.twitter }}">
13+
<span class="icon icon-twitter"></span>
14+
</a>
15+
</p>
16+
</div>
17+
</header>

‎_includes/html/attribute-order.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<a class="..." id="..." data-modal="toggle" href="#">
2+
Example link
3+
</a>
4+
5+
<input class="form-control" type="text">
6+
7+
<img src="..." alt="...">

‎_includes/html/boolean-attributes.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<input type="text" disabled>
2+
3+
<input type="checkbox" value="1" checked>
4+
5+
<select>
6+
<option value="1" selected>1</option>
7+
</select>

‎_includes/html/doctype.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
</head>
5+
</html>

‎_includes/html/encoding.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<head>
2+
<meta charset="UTF-8">
3+
</head>

‎_includes/html/ie-compatibility-mode.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

‎_includes/html/lang.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<html lang="en-us">
2+
<!-- ... -->
3+
</html>

‎_includes/html/naming.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.element {
2+
...
3+
}
4+
.element-title {
5+
...
6+
}
7+
.element-button {
8+
...
9+
}

‎_includes/html/reducing-markup.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- Not so great -->
2+
<span class="avatar">
3+
<img src="...">
4+
</span>
5+
6+
<!-- Better -->
7+
<img class="avatar" src="...">

0 commit comments

Comments
 (0)