xclasses.css
これらのクラスのアプリケーションの原始的なデモンストレーションはこのアドレスで利用可能です。
/*<br/>
"w-" -- width<br/>
"t-" -- text<br/>
"b-" -- block<br/>
"l-" -- list<br/>
*/ <br/>
.clear-both <br/>
{ <br/>
clear : both ;<br/>
} <br/>
.w-full <br/>
{ <br/>
width : 100 % ;<br/>
} <br/>
.w-half <br/>
{ <br/>
width : 50 % ;<br/>
} <br/>
/* Block */ <br/>
.b-inline <br/>
{ <br/>
display : inline ;<br/>
} <br/>
.b-center <br/>
{ <br/>
margin : 0 auto ;<br/>
} <br/>
.b-float <br/>
{ <br/>
float : left ; <br/>
} <br/>
.b-floatr <br/>
{ <br/>
float : right ;<br/>
} <br/>
/* Text */ <br/>
.t-right <br/>
{ <br/>
text-align : right ;<br/>
} <br/>
.t-left <br/>
{ <br/>
text-align : left ;<br/>
} <br/>
.t-center <br/>
{ <br/>
text-align : center ;<br/>
} <br/>
.t-middle <br/>
{ <br/>
vertical-align : middle ;<br/>
} <br/>
.t-bold <br/>
{ <br/>
font-weight : bold ;<br/>
} <br/>
/* State */ <br/>
.error <br/>
{ <br/>
color : #F00 ;<br/>
} <br/>
.warn <br/>
{ <br/>
color : #FF0 ;<br/>
} <br/>
.ok <br/>
{ <br/>
color : #0F0 ;<br/>
} <br/>
.hidden <br/>
{ <br/>
display : none ;<br/>
} <br/>
/* List */ <br/>
ul .l-nostyle <br/>
{ <br/>
list-style-type : none ; <br/>
} <br/>
ul.l-nopad , <br/>
ul .l-nopad > li<br/>
{ <br/>
padding : 0;<br/>
margin : 0;<br/>
} <br/>
ul .l-flat > li<br/>
{ <br/>
display : inline ;<br/>
} <br/>
/* Border */ <br/>
.border-all > *, <br/>
.border <br/>
{ <br/>
border : solid 1px ;<br/>
} <br/>
/* Links */ <br/>
.lnk-nounderline <br/>
{ <br/>
text-decoration : none ;<br/>
} <br/>
.lnk-border <br/>
{ <br/>
text-decoration : none ;<br/>
border-bottom : dashed 1px ;<br/>
} <br/>
/**/ <br/>
.enum <br/>
{ <br/>
padding-left : 10px ;<br/>
}
説明
これは何のためですか? 個人的には、マークアップを準備するプロセス、ページで作業するプロセスでこれらのクラスが必要です。
使用すべきでない場合。 ページの最終バージョンには、これらのクラスを含めないか、最小限の量で含める必要があります。これは、すべてのページ要素に、スタイルの厳密な定義を持つ独自のクラスが含まれている必要があるためです。
このセットは、他の多くの必要なスタイルが含まれるまで、独自に作成されました。 しかし、これは時間と欲望の問題であり、現時点では、このセットは私を満足させます。 私自身の用途では、たとえば「.enum」クラスの定数値を変更する必要があるかもしれません。 このクラスのセットが面白いと思う人は、追加または改善することをお勧めします。
PS:自分のバイクを作成するすべての相手に、通り過ぎるようにお願いします。あなたの意見は事前に知っています