├── documentation
    ├── sencss.png
    ├── baseline.gif
    └── index.html
├── MIT-LICENSE
├── README.textile
├── minified
    ├── sen.extra.min.css
    ├── sen.min.css
    └── sen.full.min.css
├── source
    ├── sen.extra.css
    └── sen.css
└── index.html


/documentation/sencss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kilian/sencss/HEAD/documentation/sencss.png


--------------------------------------------------------------------------------
/documentation/baseline.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kilian/sencss/HEAD/documentation/baseline.gif


--------------------------------------------------------------------------------
/MIT-LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2008 - 2010 Kilian Valkhof
 2 | 
 3 | Permission is hereby granted, free of charge, to any person
 4 | obtaining a copy of this software and associated documentation
 5 | files (the "Software"), to deal in the Software without
 6 | restriction, including without limitation the rights to use,
 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the
 9 | Software is furnished to do so, subject to the following
10 | conditions:
11 | 
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | 


--------------------------------------------------------------------------------
/README.textile:
--------------------------------------------------------------------------------
 1 | h2. SenCSS - A Sensible Standards CSS baseline
 2 | 
 3 | SenCSs stands for Sensible Standards CSS baseline, (pronounced "sense"). It supplies sensible styling for all repetitive parts of your CSS, and doesn't force a lay-out system on you. This allows you to focus on actually developing your website's style.
 4 | 
 5 | h3. What SenCSs is and is not
 6 | 
 7 | For one, SenCSs isn’t a framework like other CSS frameworks.
 8 | 
 9 | It doesn't include a layout system littered with silly classes and pre-set grids, so what does SenCSs do for you? SenCSs does everything else: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more. All the stuff that's almost the same in every project, but that you keep writing again and again …and again. *SenCSs handles that for you. _And nothing more_.*
10 | 
11 | h3. What does SenCSs do for you?
12 |   * Stays close to the browsers base styling, but adding some sense to it
13 |   * Sets a vertical rhythm for all elements (18px baseline)
14 |   * Sets a common typographic standard across browsers
15 |   * Has fonts specified for windows, mac and linux
16 |   * Is optimised, meaning no “double resets”, to make the CSS as efficient as possible
17 | 
18 | h3. What does SenCSs not do?
19 |   * Force a lay-out system on you
20 |   * Sneak in unsemantic classes
21 | 
22 | Visit "sencss.kilianvalkhof.com":htpp://sencss.kilianvalkhof.com for documentation
23 | 
24 | 


--------------------------------------------------------------------------------
/minified/sen.extra.min.css:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | /**
 3 |  * Sen.extra.CSS - Sensible Standards CSS framework extra's
 4 |  *
 5 |  * Copyright (c) 2008-2009 Kilian Valkhof (kilianvalkhof.com)
 6 |  * Visit sencss.kilianvalkhof.com for more information and changelogs.
 7 |  * Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php
 8 |  *
 9 |  */
10 |  .amp{font-family:Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", "URW Chancery L", Gentium, serif;font-style:italic}
11 | .quo{font-family:Georgia, Gentium, "Times New Roman", Times, serif}
12 | .lquo{font-family:Georgia, Gentium, "Times New Roman", Times, serif;margin:0 0 0 -.55em}
13 | .introParagraphArticle:first-letter{float:left;font-size:3.2em;font-weight:700;line-height:1em;margin:0 0 -.2em;padding:.125em .1em 0 0}
14 | .message{background:#eee;border:1px solid #999;margin:1.5em;padding:.666em}
15 | .error{background:#fee;border:1px solid red;margin:1.5em;padding:.666em}
16 | .notice{background:#eef;border:1px solid #00f;margin:1.5em;padding:.666em}
17 | .success{background:#efe;border:1px solid #0f0;margin:1.5em;padding:.666em}
18 | .warning{background:#ffe;border:1px solid #ff0;margin:1.5em;padding:.666em}
19 | .aside-left{clear:left;float:left;overflow:hidden;margin:0 1.5em 1.5em 0}
20 | .aside-right{clear:right;float:right;overflow:hidden;margin:0 0 1.5em 1.5em}
21 | .horizontalForm button{clear:left;float:left;margin:.25em 0 0}
22 | .horizontalForm input,.horizontalForm textarea{float:left;width:49%;margin:0 0 .8em}
23 | .horizontalForm select{float:left;_margin:0 0 1.25em;margin:0 0 .75em}
24 | .horizontalForm label{clear:left;float:left;width:49%;padding:.375em 0}
25 | .horizontalForm label input{height:1em;line-height:1.5em;width:auto;margin:.25em .5em 0 0}
26 | .horizontalForm label.singleLine{clear:both;float:none;height:1.5em;width:100%;padding:0}
27 | 
28 | 


--------------------------------------------------------------------------------
/source/sen.extra.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | /**
  3 |  * Sen.extra.CSS - Sensible Standards CSS framework extra's
  4 |  *
  5 |  * Copyright (c) 2008-2010 Kilian Valkhof (kilianvalkhof.com)
  6 |  * Visit sencss.kilianvalkhof.com for more information and changelogs.
  7 |  * Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php
  8 |  *
  9 |  */
 10 | /* Typography classes
 11 |  */
 12 | .amp{
 13 |   font-family:Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", "URW Chancery L", Gentium, serif;
 14 |   font-style:italic;
 15 | }
 16 | .quo{
 17 |   font-family:Georgia, Gentium, "Times New Roman", Times, serif;
 18 | }
 19 | .lquo{
 20 |   font-family:Georgia, Gentium, "Times New Roman", Times, serif;
 21 |   margin:0 0 0 -0.55em;
 22 | }
 23 | .introParagraphArticle:first-letter{
 24 |   float:left;
 25 |   font-size:3.2em;
 26 |   font-weight:700;
 27 |   line-height:1em;
 28 |   margin:0 0 -0.2em;
 29 |   padding:0.125em 0.1em 0 0;
 30 | }
 31 | /* Messageboxes and aside styles
 32 |  */
 33 | .message{
 34 |   background:#eee;
 35 |   border:1px solid #999;
 36 |   margin:1.5em;
 37 |   padding:0.666em;
 38 | }
 39 | .error{
 40 |   background:#fee;
 41 |   border:1px solid red;
 42 |   margin:1.5em;
 43 |   padding:0.666em;
 44 | }
 45 | .notice{
 46 |   background:#eef;
 47 |   border:1px solid #00f;
 48 |   margin:1.5em;
 49 |   padding:0.666em;
 50 | }
 51 | .success{
 52 |   background:#efe;
 53 |   border:1px solid #0f0;
 54 |   margin:1.5em;
 55 |   padding:0.666em;
 56 | }
 57 | .warning{
 58 |   background:#ffe;
 59 |   border:1px solid #ff0;
 60 |   margin:1.5em;
 61 |   padding:0.666em;
 62 | }
 63 | .aside-left{
 64 |   clear:left;
 65 |   float:left;
 66 |   margin:0 1.5em 1.5em 0;
 67 |   overflow:hidden;
 68 | }
 69 | .aside-right{
 70 |   clear:right;
 71 |   float:right;
 72 |   margin:0 0 1.5em 1.5em;
 73 |   overflow:hidden;
 74 | }
 75 | /* horizontal form settings
 76 |  */
 77 | .horizontalForm button{
 78 |   clear:left;
 79 |   float:left;
 80 |   margin:0.25em 0 0;
 81 | }
 82 | .horizontalForm input,.horizontalForm textarea{
 83 |   float:left;
 84 |   margin:0 0 0.75em;
 85 |   *margin:0 0 0.8em;
 86 |   width:49%;
 87 | }
 88 | .horizontalForm select{
 89 |   float:left;
 90 |   margin:0 0 0.75em;
 91 |   _margin:0 0 1.25em;
 92 |   width:49%;
 93 | }
 94 | .horizontalForm label{
 95 |   clear:left;
 96 |   float:left;
 97 |   padding:0.375em 0;
 98 |   width:49%;
 99 | }
100 | .horizontalForm label input{
101 |   height:1em;
102 |   line-height:1.5em;
103 |   margin:0.25em 0.5em 0 0;
104 |   width:auto;
105 | }
106 | .horizontalForm label.singleLine{
107 |   clear:both;
108 |   float:none;
109 |   height:1.5em;
110 |   padding:0;
111 |   width:100%;
112 | }
113 | 
114 | 


--------------------------------------------------------------------------------
/minified/sen.min.css:
--------------------------------------------------------------------------------
 1 | @charset utf-8;
 2 | /**
 3 |  * SenCSS - Sensible Standards CSS framework
 4 |  *
 5 |  * Copyright (c) 2008-2009 Kilian Valkhof (kilianvalkhof.com)
 6 |  * Visit sencss.kilianvalkhof.com for more information and changelogs.
 7 |  * Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php
 8 |  *
 9 |  */
10 | html,body,div,span,object,iframe,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,var,fieldset,form,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{vertical-align:baseline;margin:0;padding:0}
11 | article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {display:block}
12 | body{background:#fff;color:#000;font:75%/1.5em Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;position:relative}
13 | textarea{font:101%/1.5em Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;width:100%;margin:0;padding:.29em 0}
14 | blockquote,q{quotes:none}
15 | blockquote:before,blockquote:after,q:before,q:after{content:none}
16 | :focus{outline:none}
17 | a{text-decoration:underline;border:0}
18 | a:hover,a:focus{text-decoration:none}
19 | a img{border:0}
20 | abbr,acronym{border-bottom:1px dotted;cursor:help;font-variant:small-caps}
21 | address,cite,em,i{font-style:italic}
22 | blockquote p{margin:0 1.5em 1.5em;padding:.75em}
23 | code,kbd,tt{font-family:"Courier New", Courier, monospace, serif;line-height:1.5}
24 | del{text-decoration:line-through}
25 | dfn{border-bottom:1px dashed;font-style:italic}
26 | dl{margin:0 0 1.5em}
27 | dd{margin-left:1.5em}
28 | h1,h2,h3,h4,h5,h6{font-weight:700;padding:0}
29 | h1{font-size:2em;margin:0 0 .75em}
30 | h2{font-size:1.5em;margin:0 0 1em}
31 | h3{font-size:1.1666em;margin:0 0 1.286em}
32 | h4{font-size:1em;margin:0 0 1.5em}
33 | h5{font-size:.8333em;margin:0 0 1.8em}
34 | h6{font-size:.666em;margin:0 0 2.25em}
35 | img{display:inline-block;vertical-align:text-bottom}
36 | ins{text-decoration:overline}
37 | mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}
38 | ol{list-style:outside decimal}
39 | p{font-weight:300;margin:0 0 1.5em}
40 | pre{font-family:"Courier New", Courier, monospace, serif;margin:0 0 1.5em}
41 | sub{top:.4em;font-size:.85em;line-height:1;position:relative;vertical-align:baseline}
42 | sup{font-size:.85em;line-height:1;position:relative;bottom:.5em;vertical-align:baseline}
43 | ul{list-style:outside disc}
44 | ul,ol{margin:0 0 1.5em 1.5em;padding:0}
45 | li ul,li ol{margin:0 0 1.5em 1.5em;padding:0}
46 | table{border-collapse:collapse;border-spacing:0;margin:0 0 1.5em;padding:0}
47 | caption{font-style:italic;text-align:left}
48 | tr.alt td{background:#eee}
49 | td{border:1px solid #000;vertical-align:middle;padding:.333em}
50 | th{font-weight:700;vertical-align:middle;padding:.333em}
51 | button{cursor:pointer;display:block;font-size:1em;height:2em;line-height:1.5em;margin:1.75em 0 0;padding:0 .5em}
52 | button::-moz-focus-inner{border:0}
53 | fieldset{border:0;position:relative;margin:0 0 1.5em;padding:1.5em 0 0}
54 | fieldset fieldset{clear:both;margin:0 0 1.5em;padding:0 0 0 1.5em}
55 | input{border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;font-size:12px;height:1.5em;line-height:1.5em;width:100%;margin:0 0 .75em;padding:.29em 0}
56 | input[type=file]{height:2.25em;padding:0}
57 | select{border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;font-size:1em;height:2.25em;_margin:0 0 1.3em;margin:0 0 .8em;padding:.2em 0 0}
58 | optgroup{font-weight:700;font-style:normal;text-indent:.2em}
59 | optgroup + optgroup{margin-top:1em}
60 | option{font-size:1em;height:1.5em;text-indent:1em;padding:0}
61 | label{cursor:pointer;display:block;height:auto;line-height:1.4em;width:100%;margin:0;padding:0}
62 | label input{background:0;border:0;height:1.5em;line-height:1.5em;width:auto;margin:0 .5em 0 0;padding:0}
63 | legend{font-size:1.1666em;font-weight:700;left:0;margin:0;padding:0}
64 | dt,strong,b{font-weight:700}
65 | 
66 | 


--------------------------------------------------------------------------------
/minified/sen.full.min.css:
--------------------------------------------------------------------------------
 1 | @charset utf-8;
 2 | /**
 3 |  * SenCSS - Sensible Standards CSS framework
 4 |  *
 5 |  * Copyright (c) 2008-2009 Kilian Valkhof (kilianvalkhof.com)
 6 |  * Visit sencss.kilianvalkhof.com for more information and changelogs.
 7 |  * Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php
 8 |  *
 9 |  */
10 | html,body,div,span,object,iframe,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,var,fieldset,form,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{vertical-align:baseline;margin:0;padding:0}
11 | article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {display:block}
12 | body{background:#fff;color:#000;font:75%/1.5em Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;position:relative}
13 | textarea{font:101%/1.5em Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;width:100%;margin:0;padding:.29em 0}
14 | blockquote,q{quotes:none}
15 | blockquote:before,blockquote:after,q:before,q:after{content:none}
16 | :focus{outline:none}
17 | a{text-decoration:underline;border:0}
18 | a:hover,a:focus{text-decoration:none}
19 | a img{border:0}
20 | abbr,acronym{border-bottom:1px dotted;cursor:help;font-variant:small-caps}
21 | address,cite,em,i{font-style:italic}
22 | blockquote p{margin:0 1.5em 1.5em;padding:.75em}
23 | code,kbd,tt{font-family:"Courier New", Courier, monospace, serif;line-height:1.5}
24 | del{text-decoration:line-through}
25 | dfn{border-bottom:1px dashed;font-style:italic}
26 | dl{margin:0 0 1.5em}
27 | dd{margin-left:1.5em}
28 | h1,h2,h3,h4,h5,h6{font-weight:700;padding:0}
29 | h1{font-size:2em;margin:0 0 .75em}
30 | h2{font-size:1.5em;margin:0 0 1em}
31 | h3{font-size:1.1666em;margin:0 0 1.286em}
32 | h4{font-size:1em;margin:0 0 1.5em}
33 | h5{font-size:.8333em;margin:0 0 1.8em}
34 | h6{font-size:.666em;margin:0 0 2.25em}
35 | img{display:inline-block;vertical-align:text-bottom}
36 | ins{text-decoration:overline}
37 | mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}
38 | ol{list-style:outside decimal}
39 | p{font-weight:300;margin:0 0 1.5em}
40 | pre{font-family:"Courier New", Courier, monospace, serif;margin:0 0 1.5em}
41 | sub{top:.4em;font-size:.85em;line-height:1;position:relative;vertical-align:baseline}
42 | sup{font-size:.85em;line-height:1;position:relative;bottom:.5em;vertical-align:baseline}
43 | ul{list-style:outside disc}
44 | ul,ol{margin:0 0 1.5em 1.5em;padding:0}
45 | li ul,li ol{margin:0 0 1.5em 1.5em;padding:0}
46 | table{border-collapse:collapse;border-spacing:0;margin:0 0 1.5em;padding:0}
47 | caption{font-style:italic;text-align:left}
48 | tr.alt td{background:#eee}
49 | td{border:1px solid #000;vertical-align:middle;padding:.333em}
50 | th{font-weight:700;vertical-align:middle;padding:.333em}
51 | button{cursor:pointer;display:block;font-size:1em;height:2em;line-height:1.5em;margin:1.75em 0 0;padding:0 .5em}
52 | button::-moz-focus-inner{border:0}
53 | fieldset{border:0;position:relative;margin:0 0 1.5em;padding:1.5em 0 0}
54 | fieldset fieldset{clear:both;margin:0 0 1.5em;padding:0 0 0 1.5em}
55 | input{border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;font-size:1em;height:1.5em;line-height:1.5em;width:100%;margin:0 0 .75em;padding:.29em 0}
56 | input[type=file]{height:2.25em;padding:0}
57 | select{border:1px solid #ccc;border-bottom-color:#eee;border-right-color:#eee;font-size:1em;height:2.25em;_margin:0 0 1.3em;margin:0 0 .8em;padding:.2em 0 0}
58 | optgroup{font-weight:700;font-style:normal;text-indent:.2em}
59 | optgroup + optgroup{margin-top:1em}
60 | option{font-size:1em;height:1.5em;text-indent:1em;padding:0}
61 | label{cursor:pointer;display:block;height:auto;line-height:1.4em;width:100%;margin:0;padding:0}
62 | label input{background:0;border:0;height:1.5em;line-height:1.5em;width:auto;margin:0 .5em 0 0;padding:0}
63 | legend{font-size:1.1666em;font-weight:700;left:0;margin:0;padding:0}
64 | dt,strong,b{font-weight:700}
65 | .amp{font-family:Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", "URW Chancery L", Gentium, serif;font-style:italic}
66 | .quo{font-family:Georgia, Gentium, "Times New Roman", Times, serif}
67 | .lquo{font-family:Georgia, Gentium, "Times New Roman", Times, serif;margin:0 0 0 -.55em}
68 | .introParagraphArticle:first-letter{float:left;font-size:3.2em;font-weight:700;line-height:1em;margin:0 0 -.2em;padding:.125em .1em 0 0}
69 | .message{background:#eee;border:1px solid #999;margin:1.5em;padding:.666em}
70 | .error{background:#fee;border:1px solid red;margin:1.5em;padding:.666em}
71 | .notice{background:#eef;border:1px solid #00f;margin:1.5em;padding:.666em}
72 | .success{background:#efe;border:1px solid #0f0;margin:1.5em;padding:.666em}
73 | .warning{background:#ffe;border:1px solid #ff0;margin:1.5em;padding:.666em}
74 | .aside-left{clear:left;float:left;overflow:hidden;margin:0 1.5em 1.5em 0}
75 | .aside-right{clear:right;float:right;overflow:hidden;margin:0 0 1.5em 1.5em}
76 | .horizontalForm button{clear:left;float:left;margin:.25em 0 0}
77 | .horizontalForm input,.horizontalForm textarea{float:left;width:49%;margin:0 0 .8em}
78 | .horizontalForm select{float:left;_margin:0 0 1.25em;margin:0 0 .75em}
79 | .horizontalForm label{clear:left;float:left;width:49%;padding:.375em 0}
80 | .horizontalForm label input{height:1em;line-height:1.5em;width:auto;margin:.25em .5em 0 0}
81 | .horizontalForm label.singleLine{clear:both;float:none;height:1.5em;width:100%;padding:0}
82 | 
83 | 


--------------------------------------------------------------------------------
/source/sen.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | /**
  3 |  * SenCSS - Sensible Standards CSS framework
  4 |  *
  5 |  * Copyright (c) 2008-2010 Kilian Valkhof (kilianvalkhof.com)
  6 |  * Visit sencss.kilianvalkhof.com for more information and changelogs.
  7 |  * Licensed under the MIT license. http://www.opensource.org/licenses/mit-license.php
  8 |  *
  9 |  */
 10 | html,body,div,span,object,iframe,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,var,fieldset,form,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{
 11 |   margin:0;
 12 |   padding:0;
 13 |   vertical-align:baseline;
 14 | }
 15 | article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {
 16 |   display:block;
 17 | }
 18 | body{
 19 |   background:#fff;
 20 |   color:#000;
 21 |   font:75%/1.5em Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;
 22 |   position:relative;
 23 | }
 24 | textarea{
 25 |   font:101%/1.5em Arial, Helvetica, "DejaVu Sans",  "Liberation sans", "Bitstream Vera Sans", sans-serif;
 26 | }
 27 | blockquote,q{
 28 |   quotes:none;
 29 | }
 30 | blockquote:before,blockquote:after,q:before,q:after{
 31 |   content:'';content:none;
 32 | }
 33 | :focus{
 34 |   outline:none;
 35 | }
 36 | /* Baseline and common looks - Sets a vertical rhythm and styles the different elements.
 37 |  */
 38 | a{
 39 |   text-decoration:underline;
 40 |   border:0;
 41 | }
 42 | a:hover,a:focus{
 43 |   text-decoration:none;
 44 | }
 45 | a img{
 46 |   border:0;
 47 | }
 48 | abbr,acronym{
 49 |   border-bottom:1px dotted;
 50 |   cursor:help;
 51 |   font-variant:small-caps;
 52 | }
 53 | address,cite,em,i{
 54 |   font-style:italic;
 55 | }
 56 | blockquote p{
 57 |   margin:0 1.5em 1.5em;
 58 |   padding:0.75em;
 59 | }
 60 | code,kbd,tt{
 61 |   font-family:"Courier New", Courier, monospace, serif;
 62 |   line-height:1;
 63 |   *line-height:1.5;
 64 | }
 65 | del{
 66 |   text-decoration:line-through;
 67 | }
 68 | dfn{
 69 |   border-bottom:1px dashed;
 70 |   font-style:italic;
 71 | }
 72 | dl{
 73 |   margin:0 0 1.5em;
 74 | }
 75 | dt{
 76 |   font-weight:700;
 77 | }
 78 | dd{
 79 |   margin-left:1.5em;
 80 | 
 81 | }
 82 | h1,h2,h3,h4,h5,h6{
 83 |   font-weight:700;
 84 |   padding:0;
 85 | }
 86 | h1{
 87 |   font-size:2em;
 88 |   margin:0 0 0.75em;
 89 | }
 90 | h2{
 91 |   font-size:1.5em;
 92 |   margin:0 0 1em;
 93 | }
 94 | h3{
 95 |   font-size:1.1666em;
 96 |   margin:0 0 1.286em;
 97 | }
 98 | h4{
 99 |   font-size:1em;
100 |   margin:0 0 1.5em;
101 | }
102 | h5{
103 |   font-size:0.8333em;
104 |   margin:0 0 1.8em;
105 | }
106 | h6{
107 |   font-size:0.666em;
108 |   margin:0 0 2.25em;
109 | }
110 | img{
111 |   display:inline-block;
112 |   vertical-align:text-bottom;
113 | }
114 | ins{
115 |   text-decoration:overline;
116 | }
117 | mark {
118 |   background-color:#ff9;
119 |   color:#000;
120 |   font-style:italic;
121 |   font-weight:bold;
122 | }
123 | ol{
124 |   list-style:outside decimal;
125 | }
126 | p{
127 |   font-weight:300;
128 |   margin:0 0 1.5em;
129 | }
130 | pre{
131 |   font-family:"Courier New", Courier, monospace, serif;
132 |   margin:0 0 1.5em;
133 | }
134 | sub{
135 |   top:0.4em;
136 |   font-size:0.85em;
137 |   line-height:1;
138 |   position:relative;
139 |   vertical-align:baseline;
140 | }
141 | sup{
142 |   font-size:0.85em;
143 |   line-height:1;
144 |   position:relative;
145 |   bottom:0.5em;
146 |   vertical-align:baseline;
147 | }
148 | strong,b{
149 |   font-weight:700;
150 | }
151 | ul{
152 |   list-style:outside disc;
153 | }
154 | ul,ol{
155 |   margin:0 0 1.5em 1.5em;
156 |   padding:0;
157 | }
158 | li ul,li ol{
159 |   padding:0;
160 |   margin:0 0 1.5em 1.5em;
161 | }
162 | table{
163 |   border-collapse:collapse;
164 |   border-spacing:0;
165 |   margin:0 0 1.5em;
166 |   padding:0;
167 | }
168 | caption{
169 |   font-style:italic;
170 |   text-align:left;
171 | }
172 | tr.alt td{
173 |   background:#eee;
174 | }
175 | td{
176 |   border:1px solid #000;
177 |   padding:0.333em;
178 |   vertical-align:middle;
179 | }
180 | th{
181 |   font-weight:700;
182 |   padding:0.333em;
183 |   vertical-align:middle;
184 | }
185 | button{
186 |   cursor:pointer;
187 |   display:block;
188 |   font-size:0.99em;
189 |   height:2em;
190 |   line-height:1.5em;
191 |   margin:0.8em 0 0;
192 |   *margin:1.75em 0 0;
193 |   padding:0 0.5em;
194 | }
195 | button::-moz-focus-inner {
196 |   border: 0;
197 | }
198 | fieldset{
199 |   border:0;
200 |   margin:0 0 1.5em;
201 |   position:relative;
202 |   padding:1.5em 0 0;
203 | }
204 | fieldset fieldset{
205 |   clear:both;
206 |   margin:0 0 0.75em;
207 |   padding:0 0 0 1.5em;
208 | }
209 | input{
210 |   border:1px solid #ccc;
211 |   border-bottom-color:#eee;
212 |   border-right-color:#eee;
213 |   box-sizing:border-box;
214 |   -moz-box-sizing:border-box;
215 |   -webkit-box-sizing:border-box;
216 |   -ms-box-sizing:border-box;
217 |   font-size:1em;
218 |   height:2.25em;
219 |   *height:1.5em;
220 |   line-height:1.5em;
221 |   padding:0.29em 0;
222 |   width:100%;
223 |   margin:0 0 0.75em;
224 | }
225 | input[type=file]{
226 |   height:2.25em;
227 |   font-size:1em;
228 |   padding:0;
229 |   border:0;
230 |   border:1px solid #ccc !ie;
231 | }
232 | textarea{
233 |   border:1px solid #ccc;
234 |   border-bottom-color:#eee;
235 |   border-right-color:#eee;
236 |   box-sizing:border-box;
237 |   -moz-box-sizing:border-box;
238 |   -webkit-box-sizing:border-box;
239 |   -ms-box-sizing:border-box;
240 |   margin:0;
241 |   padding:0.29em 0;
242 |   width:100%;
243 | }
244 | select{
245 |   border:1px solid #ccc;
246 |   border-bottom-color:#eee;
247 |   border-right-color:#eee;
248 |   font-size:1em;
249 |   line-height:1.5em;
250 |   margin-bottom:0.75em;
251 |   padding:0.25em;
252 |   height:2.25em;
253 | }
254 | optgroup {
255 |   font-weight:700;
256 |   font-style:normal;
257 |   text-indent:0.2em;
258 | }
259 | optgroup + optgroup {
260 |   margin-top:1em;
261 | }
262 | option{
263 |   font-size:1em;
264 |   height:1.5em;
265 |   padding:0;
266 |   text-indent:1em;
267 | }
268 | label{
269 |   cursor:pointer;
270 |   display:block;
271 |   height:1.5em;
272 |   *height:auto;
273 |   *line-height:1.4em;
274 |   margin:0;
275 |   padding:0;
276 |   width:100%;
277 | }
278 | label input{
279 |   background:0;
280 |   border:0;
281 |   height:1em;
282 |   *height:1.5em;
283 |   line-height:1.5em;
284 |   margin:0 0.5em 0 0;
285 |   padding:0;
286 |   width:auto;
287 | }
288 | legend{
289 |   font-size:1.1666em;
290 |   font-weight:700;
291 |   left:0;
292 |   margin:0;
293 |   padding:0;
294 | }
295 | 
296 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 | <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5 | <meta name="author" content="Kilian Valkhof" />
  6 | <title>SenCSs - the sensible standards CSS baseline</title>
  7 | <link href="source/sen.css" rel="stylesheet" type="text/css" />
  8 | <link href="source/sen.extra.css" rel="stylesheet" type="text/css" />
  9 | <style type="text/css">
 10 | body {
 11 | 	position:relative;
 12 | 	background:url("documentation/baseline.gif") repeat 0 0;
 13 | }
 14 | #wrap {
 15 | 	width:560px;
 16 | 	margin:auto;
 17 | 	padding:1.5em 10px;
 18 | }
 19 | .block {width:45%;float:left;clear:left;}
 20 | .block2{margin-left:10%;clear:none;}
 21 | </style>
 22 | </head>
 23 | <body>
 24 | <div id="wrap">
 25 | <h1><img src="documentation/sencss.png" alt="SenCSs" /></h1>
 26 | 
 27 | <p class="firstParagraphArticle">SenCSs stands for Sensible Standards CSS baseline, (pronounced "<em>sense</em>").
 28 |  It supplies <strong>sensible styling</strong> for all
 29 | repetitive parts of your CSS, and doesn't force a lay-out system on you. This allows you to focus on
 30 | <strong>actually developing your website's style</strong>.</p>
 31 | 
 32 | <div class="block">
 33 | <h2>Download</h2>
 34 | <ul>
 35 |   <li><a href="source/sen.css">sen.css</a> 5 kb</li>
 36 |   <li><a href="source/sen.extra.css">sen.extra.css</a> 2 kb</li>
 37 | </ul>
 38 | <ul>
 39 |   <li><a href="/minified/sen.min.css">sen.min.css</a> 4 kb</li>
 40 |   <li><a href="/minified/sen.extra.min.css">sen.extra.min.css</a> 2 kb</li>
 41 |   <li><a href="/minified/sen.full.min.css">sen.full.min.css</a> 5 kb</li>
 42 | </ul>
 43 | </div>
 44 | <div class="block block2">
 45 | <h2>Documentation</h2>
 46 | <p>The <a href="documentation/index.html">example file</a> shows all the functionality SenCSs offers.</p>
 47 | </div>
 48 | <h2 style="clear:both">About SenCSs</h2>
 49 | 
 50 | <p class="firstParagraphArticle"><strong>For one, SenCSs isn’t a framework like other CSS frameworks.</strong></p>
 51 | 
 52 | <p>It doesn't include a
 53 | layout system littered with silly classes and pre-set grids, so what does SenCSs do for you? SenCSs does <em>everything else</em>:
 54 | baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.
 55 | All the stuff that's almost the same in every project, but that you keep writing again and again …and again.
 56 | <strong>SenCSs handles that for you. <em>And nothing more</em>.</strong></p>
 57 | 
 58 | <dl>
 59 | 	<dt>What does SenCSs do for you?</dt>
 60 |   <dd>Stays close to the browsers base styling, but adding some sense to it</dd>
 61 | 	<dd>Sets a vertical rhythm for all elements (18px baseline)</dd>
 62 |   <dd>Sets a common typographic standard across browsers</dd>
 63 |   <dd>Has fonts specified for windows, mac and linux</dd>
 64 |   <dd>Is optimised, meaning no “double resets”, to make the CSS as efficient as possible</dd>
 65 | </dl>
 66 | 
 67 | <div class="">
 68 | <h2>Further reading</h2>
 69 | <ul>
 70 |   <li>Read all <a href="http://kilianvalkhof.com/category/sencss/">blogposts tagged with SenCSs</a> for more information</li>
 71 |   <li><a href="http://github.com/kilian/sencss/">SenCSs at GitHub</a></li>
 72 | </ul>
 73 | 
 74 | <h2>Thank you!</h2>
 75 | <p>A thank you for the people that in any way contributed, helped and gave feedback.</p>
 76 | <ul>
 77 |   <li>Eric Meyer</li>
 78 |   <li>Paul Chaplin</li>
 79 |   <li>Wouter Klein Heerenbrink</li>
 80 |   <li>Andy Ford (and Sava CMS)</li>
 81 |   <li>Jonathan Snook</li>
 82 |   <li>Bert Visser</li>
 83 |   <li>Matt Varone</li>
 84 |   <li>Anatoli Papirovski</li>
 85 |   <li>Arjan Eising</li>
 86 |   <li>Probably some others I shamefully forgot :)</li>
 87 | </ul>
 88 | <div class="notice">
 89 | <h2>Wanna help out?</h2>
 90 | <p>Fork SenCSs on <a href="http://github.com/kilian/sencss">Github</a> or contact me via <a href="http://twitter.com/kilianvalkhof">Twitter</a> or my <a href="http://kilianvalkhof.com/contact">website</a> with ideas. Cheers!</p>
 91 | </div>
 92 | </div>
 93 | 
 94 | <h2 style="clear:both;">Changelogs</h2>
 95 | <h3>Changelog for version 0.8.1 (released 01 July 2010)</h3>
 96 | <ul>
 97 |   <li>add in display:block for HTML5 elements (transitional)</li>
 98 | </ul>
 99 | <h3>Changelog for version 0.8 (released 26 April 2010)</h3>
100 | <ul>
101 |   <li>Fix for font-size in textarea in firefox</li>
102 |   <li>Remove border around linked images</li>
103 |   <li>rhythm fixes for multiple form elements</li>
104 |   <li>fix rhythm issues for h3</li>
105 |   <li>Add dejaVu sans font for recent ubuntu versions</li>
106 | </ul>
107 | <h3>Changelog for version 0.7 (released 22 February 2010)</h3>
108 | <ul>
109 |   <li>move all helper classes to an external file</li>
110 |   <li>Fix vertical rhythm for certain form elements</li>
111 |   <li>Remove the text-align center from message styles</li>
112 |   <li>add explicit font-weight declarations to the heading elements</li>
113 |   <li>clean up documentation and repository</li>
114 |   <li>move fully to GitHub</li>
115 |   <li>hide focus effect on buttons in firefox</li>
116 |   <li>clean up form css</li>
117 |   <li>add a number of IE8 fixes</li>
118 | </ul>
119 | 
120 | <h3>Changelog for version 0.6 (released 23 February 2009)</h3>
121 | <ul>
122 | <li>tweaked sub/sup styling to make them easier to work with</li>
123 | <li>removed explicit link colour, unneeded background colours, .section declaration</li>
124 | <li>placed back missing quote functionality in the css reset</li>
125 | <li>moved list style from the list item to the list container</li>
126 | <li>fixed safari bug with monospaced fonts</li>
127 | <li>reworked form styling
128 |   <ul>
129 |     <li>added borders</li>
130 |     <li>refitted to the vertical rhythm</li>
131 |     <li>added optgroup styling for firefox</li>
132 |     <li>pixel perfect in firefox and ie6/ie7</li>
133 |   </ul>
134 | </li>
135 | </ul>
136 | 
137 | <h3>Changelog for version 0.5  (released 24 December 2008)</h3>
138 | <ul>
139 | <li>fixed problematic styling of tt/kbd/code and sub/sup in firefox and ie6 + 7 on windows</li>
140 | <li>removed search form styling, horizontal description lists first-line style</li>
141 | <li>improved firstParagraph:first-letter</li>
142 | <li>many form styling improvements</li>
143 | <li>removed changelogs from the SenCSs file</li>
144 | <li>start made for @CSSDOC style comments</li>
145 | </ul>
146 | <h3>changelog for version 0.4.6 (released 28 July 2008)</h3>
147 | <ul>
148 | <li>fixed a missing comma in the font-family of textarea</li>
149 | <li>fixed a firefox 3 bug and opera bug in .firstParagraphArticle:first-letter</li>
150 | <li>fixed img styling inside elements</li>
151 | <li>added table styling</li>
152 | </ul>
153 | <h3>changelog for version 0.4.5 (released 21 June 2008)</h3>
154 | <ul>
155 | <li>removed background:transparant;</li>
156 | <li>set explicit focus styles</li>
157 | <li>added liberation sans as the 2nd fallback font</li>
158 | <li>removed small-caps from code, kbd and tt</li>
159 | <li>added a warning style</li>
160 | <li>changed the first paragraph style
161 | 	<ul>
162 | 		<li>removed all-bold paragraph</li>
163 |  		<li>set the first line to bold, removes small-caps</li>
164 | 		<li>positioned the first letter crossbrowser</li>
165 | 	</ul>
166 | </li>
167 | <li>added i and b styling</li>
168 | <li>added a two column DL style</li>
169 | <li>improved sub rendering in opera and ie</li>
170 | <li>rewrote all margin-* & padding-* to margin/padding</li>
171 | <li>added a font-size-adjust to pre, tt, kbd and code</li>
172 | <li>added explicit line-height for safari 2</li>
173 | <li>added acronym stylings</li>
174 | </ul>
175 | <h3>changelog for version 0.4 (released 15 June 2008)</h3>
176 | <p>This is the first release, so there are no changes here :)</p>
177 | 
178 | <p><strong><span class="amp">&amp;</span> this is the last sentence on this page, fin!</strong></p>
179 | </div>
180 | </body>
181 | </html>
182 | 
183 | 


--------------------------------------------------------------------------------
/documentation/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 | <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5 | <meta name="author" content="Kilian Valkhof" />
  6 | <title>SenCSs documentation</title>
  7 | <link href="../source/sen.css" rel="stylesheet" type="text/css" />
  8 | <link href="../source/sen.extra.css" rel="stylesheet" type="text/css" />
  9 | <style type="text/css">
 10 | body {
 11 | 	position:relative;
 12 | 	background:url("baseline.gif") repeat 0 0;
 13 | }
 14 | #wrap {
 15 | 	/*this bit is for show only*/
 16 | 	width:760px;
 17 | 	margin:auto;
 18 | 	padding:1.5em 10px;
 19 | }
 20 | </style>
 21 | </head>
 22 | <body>
 23 | <div id="wrap">
 24 | <h1><img src="sencss.png" alt="SenCSs" /> Documentation</h1>
 25 | <p class="firstParagraphArticle">Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec,
 26 |   molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae,
 27 |   purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec,
 28 |   molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae,
 29 |   purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh.
 30 |   Etiam viverra augue non enim.</p>
 31 | <ul>
 32 |   <li><a href="http://sencss.kilianvalkhof.com">SenCSS Homepage</a></li>
 33 | </ul>
 34 | <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec,
 35 |   molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae,
 36 |   purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh.
 37 |   Etiam viverra augue non enim.</p>
 38 | <blockquote>
 39 |   <p>Blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu.
 40 |     Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.
 41 |     Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo.
 42 |     Nam libero leo, elementum in, dapibus a, suscipit vitae, purus.</p>
 43 | </blockquote>
 44 | <p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec,
 45 |   molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae,
 46 |   purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh.
 47 |   Etiam viverra augue non enim.</p>
 48 | <h2>Level 02 Heading</h2>
 49 | <h3>Level 03 Heading</h3>
 50 | <h4>Level 04 Heading</h4>
 51 | <h5>Level 05 Heading</h5>
 52 | <h6>Level 06 Heading</h6>
 53 | <address>
 54 | Address:  Kilian Valkhof, The Netherlands
 55 | </address>
 56 | <p><a href="#">the a element</a> <br />
 57 |   <abbr title="test">the abbr element</abbr> <br />
 58 |   <cite>the cite element</cite> <br />
 59 |   <del>the del element</del> <br />
 60 |   <dfn>the dfn element</dfn> <br />
 61 |   <em>the em element</em> <br />
 62 |   <ins>the ins element</ins> <br />
 63 |   <q>the q element</q> <br />
 64 |   <span>the span element</span> <br />
 65 |   <strong>the strong element</strong> <br />
 66 |   <var>the var element</var> <br />
 67 |   <code>the code element</code><br />
 68 |   <kbd>the kbd element</kbd> <br />
 69 |   <sub>the sub element</sub> <br />
 70 |   <sup>the sup element</sup> <br />
 71 |   <tt>the tt element</tt>
 72 | </p>
 73 | <pre><strong>Preformated:</strong>Testing one row
 74 |      and another</pre>
 75 | <ul>
 76 |   <li>Unordered list 01</li>
 77 |   <li>Unordered list 02</li>
 78 |   <li>Unordered list 03
 79 |     <ul>
 80 |       <li>Unordered list inside list level 2</li>
 81 |       <li>Unordered list inside list level 2
 82 |         <ul>
 83 |           <li>Unordered list inside list level 3</li>
 84 |           <li>Unordered list inside list level 3</li>
 85 |         </ul>
 86 |       </li>
 87 |     </ul>
 88 |   </li>
 89 | </ul>
 90 | <ol>
 91 |   <li>Ordered list 01</li>
 92 |   <li>Ordered list 02</li>
 93 |   <li>Ordered list 03
 94 |     <ol>
 95 |       <li>Ordered list inside list level 2</li>
 96 |       <li>Ordered list inside list level 2
 97 |         <ol>
 98 |           <li>Ordered list inside list level 3</li>
 99 |           <li>Ordered list inside list level 3</li>
100 |         </ol>
101 |       </li>
102 |     </ol>
103 |   </li>
104 | </ol>
105 | <dl>
106 |   <dt>Description list title 01</dt>
107 |   <dd>Description list description 01</dd>
108 |   <dt>Description list title 02</dt>
109 |   <dd>Description list description 02</dd>
110 |   <dd>Description list description 03</dd>
111 | </dl>
112 | <dl class="horizontalDescriptionList">
113 |   <dt>Horizontal description list title 01</dt>
114 |   <dd>Description list description 01</dd>
115 |   <dt>Description list title 02</dt>
116 |   <dd>Description list description 02</dd>
117 |   <dd>Description list description 03</dd>
118 | </dl>
119 | <p style="clear:both;">Regular text</p>
120 | <p class="error">Error! Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec,
121 |   molestie sed, tellus. Quisque justo. </p>
122 | <p class="warning">Warning! Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec,
123 |   molestie sed, tellus. Quisque justo. </p>
124 | <p class="notice">Notice! Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec,
125 |   molestie sed, tellus. Quisque justo. </p>
126 | <p class="success">Success! Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec,
127 |   molestie sed, tellus. Quisque justo. </p>
128 | 
129 | <table summary="" cellspacing="0" cellpadding="0">
130 | 	<caption>A caption :)</caption>
131 | 	<thead>
132 | 		<tr>
133 | 			<th></th>
134 | 			<th>col 1</th>
135 | 			<th>col 2</th>
136 | 			<th>col 3</th>
137 | 			<th>col 4</th>
138 | 		</tr>
139 | 	</thead>
140 | 	<tfoot>
141 | 		<tr>
142 | 			<th></th>
143 | 			<th>col 1</th>
144 | 			<th>col 2</th>
145 | 			<th>col 3</th>
146 | 			<th>col 4</th>
147 | 		</tr>
148 | 	</tfoot>
149 | 	<tbody>
150 | 		<tr>
151 | 			<th>row 1</th>
152 | 			<td>value 1</td>
153 | 			<td>value 2</td>
154 | 			<td>value 4</td>
155 | 			<td>value 5</td>
156 | 		</tr>
157 | 		<tr class="alt">
158 | 			<th>row 2</th>
159 | 			<td>value 1</td>
160 | 			<td>value 2</td>
161 | 			<td>value 4</td>
162 | 			<td>value 5</td>
163 | 		</tr>
164 | 		<tr>
165 | 			<th>row 3</th>
166 | 			<td>value 1</td>
167 | 			<td>value 2</td>
168 | 			<td>value 4</td>
169 | 			<td>value 5</td>
170 | 		</tr>
171 | 		<tr class="alt">
172 | 			<th>row 4</th>
173 | 			<td>value 1</td>
174 | 			<td>value 2</td>
175 | 			<td>value 4</td>
176 | 			<td>value 5</td>
177 | 		</tr>
178 | 	</tbody>
179 | </table>
180 |   <h2><span class="lquo">&ldquo;</span>some pretty quotes <span class="amp">&</span> an ampersand<span class="quo">&rdquo;</span></h2>
181 | 
182 | <form method="post" action="#" style="width:49%;">
183 |   <fieldset>
184 |   <legend>A vertical form</legend>
185 |   <label for="firstitem">First Item</label>
186 |   <input type="text" id="firstitem" name="firstitem"/>
187 |   <label for="firstitem2">First Item Again</label>
188 |   <input type="text" id="firstitem2" name="firstitem2"/>
189 |     <label for="seconditem">Second Item</label>
190 |   <select name="seconditem" id="seconditem">
191 |   	<optgroup label="first options">
192 | 	    <option value="1">first value</option>
193 |     	<option value="2">second value</option>
194 | 	</optgroup>
195 |   	<optgroup  label="second options">
196 | 	    <option value="1">first value</option>
197 |     	<option value="2">second value</option>
198 | 	</optgroup>
199 |   	<optgroup  label="third options">
200 | 	    <option value="1">first value</option>
201 |     	<option value="2">second value</option>
202 | 	</optgroup>
203 |   </select>
204 |   <fieldset>
205 | 	  <legend>You can pick one (an inner fieldset)</legend>
206 | 	  <label for="one">
207 | 	  <input type="radio" name="radio" id="one" />
208 | 	  One</label>
209 | 	  <label for="two">
210 | 	  <input type="radio" name="radio" id="two" />
211 | 	  Two</label>
212 | 	  <label for="sthree" class="singleLine">
213 | 	  <input type="radio" name="radio" id="sthree" />
214 | 	  Three</label>
215 |   </fieldset>
216 |   <label for="fourthitem">
217 |   <input type="checkbox" name="fourthitem" id="fourthitem"/>
218 |   Fourth Item</label>
219 |   <label for="fifthitem">Fifth Item</label>
220 |   <textarea name="fifthitem" id="fifthitem" rows="5" cols="20" style="height:7.5em;"></textarea>
221 |   <button type="submit">Submit</button>
222 |   </fieldset>
223 | </form>
224 | <form method="post" action="#" class="horizontalForm" style="width:49%;">
225 |   <fieldset>
226 |   <legend>A horizontal form</legend>
227 |   <label for="hfirstitem">First Item</label>
228 |   <input type="text" id="hfirstitem" name="hfirstitem"/>
229 |   <label for="hfirstitem2">First Item Again</label>
230 |   <input type="text" id="hfirstitem2" name="hfirstitem2"/>
231 |   <label for="hseconditem">Second Item</label>
232 |   <select name="hseconditem" id="hseconditem">
233 |   	<optgroup label="first options">
234 | 	    <option value="1">first value</option>
235 |     	<option value="2">second value</option>
236 | 	</optgroup>
237 |   	<optgroup  label="second options">
238 | 	    <option value="1">first value</option>
239 |     	<option value="2">second value</option>
240 | 	</optgroup>
241 |   	<optgroup  label="third options">
242 | 	    <option value="1">first value</option>
243 |     	<option value="2">second value</option>
244 | 	</optgroup>
245 |   </select>
246 |     <fieldset>
247 | 	  <legend>You can pick one (an inner fieldset)</legend>
248 | 	  <label for="sone" class="singleLine">
249 | 	  <input type="radio" name="radio" id="sone" />
250 | 	  One</label>
251 | 	  <label for="stwo" class="singleLine">
252 | 	  <input type="radio" name="radio" id="stwo" />
253 | 	  Two</label>
254 | 	  <label for="sthree" class="singleLine">
255 | 	  <input type="radio" name="radio" id="sthree" />
256 | 	  Three</label>
257 |   </fieldset>
258 |   <label for="hfourthitem" class="singleLine" style="margin-bottom:1.5em">
259 |   <input type="checkbox" name="hfourthitem" id="hfourthitem" />
260 |   Fourth Item</label>
261 |   <label for="hfifthitem">Fifth Item</label>
262 |   <textarea name="hfifthitem" id="hfifthitem" rows="5" cols="20" style="height:7.5em;"></textarea>
263 |   <button type="submit">Submit</button>
264 |   </fieldset>
265 | </form>
266 | 
267 | <form method="post" action="#" style="clear:both;" class="horizontalForm">
268 |   <fieldset>
269 |   <legend>Problem elements:</legend>
270 |   <label for="ofirstitem">File input</label>
271 |   <input type="file" id="ofirstitem" name="ofirstitem"/>
272 |     </fieldset>
273 | </form>
274 | <p><span class="amp">&amp;</span> this is the last sentence, fin!</p>
275 | </div>
276 | </body>
277 | </html>
278 | 
279 | 


--------------------------------------------------------------------------------