diff options
code cleanup
1 files changed, 246 insertions, 187 deletions
| -rw-r--r-- | index.html | 433 |
@@ -6,13 +6,12 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="author" content="https://github.com/picturepan2/spectre" /> - <title>Spectre.css: a lightweight, responsive and modern CSS framework</title> + <title>Spectre.css - a lightweight, responsive and modern CSS framework</title> <link rel="stylesheet" href="dist/spectre.css" /> <link rel="stylesheet" href="demo/font/style.css" /> <style> header > h4, header > h5 { - padding-top: 4rem; margin-top: 4rem; margin-bottom: 2rem; } @@ -61,8 +60,8 @@ </style> </head> <body> - <section class="container bg-grey"> - <section id="overview" class="grid-hero grid-960"> + <section class="section bg-grey"> + <section id="overview" class="grid-hero container grid-960"> <header class="text-center"><h3>Spectre.css</h3></header> <section> <p><strong>Spectre.css</strong> is a lightweight, responsive and modern CSS framework for faster and extensible development.</p> @@ -83,8 +82,8 @@ </section> </section> </section> - <section class="container"> - <section id="getting-started" class="grid-960"> + <section class="section"> + <section id="getting-started" class="container grid-960"> <header class="text-center"><h4>getting started</h4></header> <section class="notes"> <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.</p> @@ -110,7 +109,7 @@ </section> </section> - <section id="compiling" class="grid-960"> + <section id="compiling" class="container grid-960"> <header class="text-center"><h4>compiling custom version</h4></header> <section class="notes"> <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>.</p> @@ -125,7 +124,7 @@ </section> </section> - <section id="elements" class="grid-960"> + <section id="elements" class="container grid-960"> <section class="notes text-center"> <ul class="tab inline-flex"> <li class="tab-item active"> @@ -134,6 +133,11 @@ </a> </li> <li class="tab-item"> + <a href="#layout"> + layout + </a> + </li> + <li class="tab-item"> <a href="#components"> components </a> @@ -148,7 +152,6 @@ <section class="notes text-center"> <div class="btn-group"> <a href="#typography" class="btn btn-primary">typography</a> - <a href="#layout" class="btn btn-primary">layout</a> <a href="#tables" class="btn btn-primary">tables</a> <a href="#buttons" class="btn btn-primary">buttons</a> <a href="#forms" class="btn btn-primary">forms</a> @@ -157,7 +160,7 @@ </section> </section> - <section id="typography" class="grid-960"> + <section id="typography" class="container grid-960"> <header class="text-center"><h4>typography</h4></header> <section class="notes"> <p><strong>Typography</strong> sets default styles for headings, paragraphs, blockquote, lists and code elements. </p> @@ -273,158 +276,7 @@ </section> - <section id="layout" class="grid-960"> - <header class="text-center"><h4>flexbox layout</h4></header> - <section class="notes"> - <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p> - </section> - <div class="columns"> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - </div> - - <div class="columns"> - <div class="column col-12"> - <div class="bg-grey">col-12 (100%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-9"> - <div class="bg-grey">col-9 (75%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-6"> - <div class="bg-grey">col-6 (50%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-3"> - <div class="bg-grey">col-3 (25%)</div> - </div> - </div> - - <section class="notes"> - <p>Add the class <code>columns</code> to a container with the class <code>container</code>. And add any element you want with classname <code>column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code>col-[1-12]</code>.</p> - </section> - - <!-- layout example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-3"</span>>col-3<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-2"</span>>col-2<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-1"</span>>col-1<<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</pre> - - <div class="columns"> - <div class="column col-md-6"> - <div class="bg-grey">col-md-6</div> - </div> - <div class="column col-md-3"> - <div class="bg-grey">col-md-3</div> - </div> - <div class="column col-md-3"> - <div class="bg-grey">col-md-3</div> - </div> - </div> - - <div class="columns"> - <div class="column col-sm-6"> - <div class="bg-grey">col-sm-6</div> - </div> - <div class="column col-sm-3"> - <div class="bg-grey">col-sm-3</div> - </div> - <div class="column col-sm-3"> - <div class="bg-grey">col-sm-3</div> - </div> - </div> - - <div class="columns"> - <div class="column col-xs-6"> - <div class="bg-grey">col-xs-6</div> - </div> - <div class="column col-xs-3"> - <div class="bg-grey">col-xs-3</div> - </div> - <div class="column col-xs-3"> - <div class="bg-grey">col-xs-3</div> - </div> - </div> - - <section class="notes"> - <p>Spectre also provides a neat responsive layout grid system. There are <code>.col-xs-[1-12]</code>, <code>.col-sm-[1-12]</code> and <code>.col-md-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p> - <ul> - <li>For window width less than <strong>480px</strong>, all columns will show as a single row.</li> - <li><code>col-xs-[1-12]</code> apply to window width greater than or equal to <strong>481px</strong>. </li> - <li><code>col-sm-[1-12]</code> apply to window width greater than or equal to <strong>601px</strong>. </li> - <li><code>col-md-[1-12]</code> apply to window width greater than or equal to <strong>841px</strong>. </li> - </ul> - </section> - - <!-- layout example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-6"</span>>col-xs-6<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-3"</span>>col-xs-3<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-3"</span>>col-xs-3<<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</pre> - - <section class="notes"> - <p>For hiding elements on specific viewport sizes, there are classes <code>.hide-xs</code>, <code>.hide-sm</code>, <code>.hide-md</code>, <code>.hide-lg</code> and <code>.hide-xl</code> available.</p> - <ul> - <li><code>hide-xs</code> hides elements when the viewport is smaller than or equal to <strong>480px</strong>. </li> - <li><code>hide-sm</code> hides elements when the viewport is smaller than or equal to <strong>600px</strong>. </li> - <li><code>hide-md</code> hides elements when the viewport is smaller than or equal to <strong>840px</strong>. </li> - <li><code>hide-lg</code> hides elements when the viewport is smaller than or equal to <strong>960px</strong>. </li> - <li><code>hide-xl</code> hides elements when the viewport is smaller than or equal to <strong>1280px</strong>. </li> - </ul> - </section> - - </section> - - <section id="tables" class="grid-960"> + <section id="tables" class="container grid-960"> <header class="text-center"><h4>tables</h4></header> <section class="notes"> <p><strong>Tables</strong> include default styles for tables and data sets.</p> @@ -440,7 +292,7 @@ </tr> </thead> <tbody> - <tr class="selected"> + <tr> <td>The Shawshank Redemption</td> <td>2h 22min</td> <td>Crime, Drama</td> @@ -495,7 +347,7 @@ </section> - <section id="buttons" class="grid-960"> + <section id="buttons" class="container grid-960"> <header class="text-center"><h4>buttons</h4></header> <section class="notes"> <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p> @@ -588,6 +440,15 @@ </div> </div> </div> + <div class="columns"> + <div class="column"> + <div class="btn-group"> + <button class="btn btn-sm">first button</button> + <button class="btn btn-sm">second button</button> + <button class="btn btn-sm">third button</button> + </div> + </div> + </div> <section class="notes"> <p>If you want to use buttons as a group, add the class <code>btn-group</code> to the container. You can add the class <code>btn-group-block</code> for a full-width button group.</p> </section> @@ -603,7 +464,7 @@ </section> - <section id="forms" class="grid-960"> + <section id="forms" class="container grid-960"> <header class="text-center"><h4>forms</h4></header> <section class="notes"> <p><strong>Forms</strong> provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch. </p> @@ -876,7 +737,7 @@ </section> - <section id="media" class="grid-960"> + <section id="media" class="container grid-960"> <header class="text-center"><h4>media</h4></header> <section class="notes"> <p><strong>Media</strong> include responsive image and video class. </p> @@ -911,7 +772,195 @@ </section> - <section id="components" class="grid-960"> + <section id="layout" class="container grid-960"> + <section class="notes text-center"> + <ul class="tab inline-flex"> + <li class="tab-item"> + <a href="#elements"> + elements + </a> + </li> + <li class="tab-item active"> + <a href="#layout"> + layout + </a> + </li> + <li class="tab-item"> + <a href="#components"> + components + </a> + </li> + <li class="tab-item"> + <a href="#utilities"> + utilities + </a> + </li> + </ul> + </section> + <section class="notes text-center"> + <div class="btn-group"> + <a href="#grid" class="btn btn-primary">flexbox grid</a> + <a href="#grid" class="btn btn-primary">responsive</a> + </div> + </section> + </section> + + <section id="grid" class="container grid-960"> + <header class="text-center"><h4>flexbox grid</h4></header> + <section class="notes"> + <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p> + </section> + <div class="columns"> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + <div class="column"> + <div class="bg-grey"></div> + </div> + </div> + + <div class="columns"> + <div class="column col-12"> + <div class="bg-grey">col-12 (100%)</div> + </div> + </div> + <div class="columns"> + <div class="column col-9"> + <div class="bg-grey">col-9 (75%)</div> + </div> + </div> + <div class="columns"> + <div class="column col-6"> + <div class="bg-grey">col-6 (50%)</div> + </div> + </div> + <div class="columns"> + <div class="column col-3"> + <div class="bg-grey">col-3 (25%)</div> + </div> + </div> + + <section class="notes"> + <p>Add the class <code>columns</code> to a container with the class <code>container</code>. And add any element you want with classname <code>column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code>col-[1-12]</code>.</p> + </section> + + <!-- layout example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-3"</span>>col-3<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-2"</span>>col-2<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-1"</span>>col-1<<span class="tag">/div</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</pre> + + </section> + + <section id="responsive" class="container grid-960"> + <header class="text-center"><h4>responsive grid</h4></header> + <div class="columns"> + <div class="column col-md-6"> + <div class="bg-grey">col-md-6</div> + </div> + <div class="column col-md-3"> + <div class="bg-grey">col-md-3</div> + </div> + <div class="column col-md-3"> + <div class="bg-grey">col-md-3</div> + </div> + </div> + + <div class="columns"> + <div class="column col-sm-6"> + <div class="bg-grey">col-sm-6</div> + </div> + <div class="column col-sm-3"> + <div class="bg-grey">col-sm-3</div> + </div> + <div class="column col-sm-3"> + <div class="bg-grey">col-sm-3</div> + </div> + </div> + + <div class="columns"> + <div class="column col-xs-6"> + <div class="bg-grey">col-xs-6</div> + </div> + <div class="column col-xs-3"> + <div class="bg-grey">col-xs-3</div> + </div> + <div class="column col-xs-3"> + <div class="bg-grey">col-xs-3</div> + </div> + </div> + + <section class="notes"> + <p>Spectre also provides a neat responsive layout grid system. There are <code>.col-xs-[1-12]</code>, <code>.col-sm-[1-12]</code> and <code>.col-md-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p> + <ul> + <li>For window width less than <strong>480px</strong>, all columns will show as a single row.</li> + <li><code>col-xs-[1-12]</code> apply to window width greater than or equal to <strong>481px</strong>. </li> + <li><code>col-sm-[1-12]</code> apply to window width greater than or equal to <strong>601px</strong>. </li> + <li><code>col-md-[1-12]</code> apply to window width greater than or equal to <strong>841px</strong>. </li> + </ul> + </section> + + <!-- layout example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-6"</span>>col-xs-6<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-3"</span>>col-xs-3<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-3"</span>>col-xs-3<<span class="tag">/div</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</pre> + + <section class="notes"> + <p>For hiding elements on specific viewport sizes, there are classes <code>.hide-xs</code>, <code>.hide-sm</code>, <code>.hide-md</code>, <code>.hide-lg</code> and <code>.hide-xl</code> available.</p> + <ul> + <li><code>hide-xs</code> hides elements when the viewport is smaller than or equal to <strong>480px</strong>. </li> + <li><code>hide-sm</code> hides elements when the viewport is smaller than or equal to <strong>600px</strong>. </li> + <li><code>hide-md</code> hides elements when the viewport is smaller than or equal to <strong>840px</strong>. </li> + <li><code>hide-lg</code> hides elements when the viewport is smaller than or equal to <strong>960px</strong>. </li> + <li><code>hide-xl</code> hides elements when the viewport is smaller than or equal to <strong>1280px</strong>. </li> + </ul> + </section> + + </section> + + <section id="components" class="container grid-960"> <section class="notes text-center"> <ul class="tab inline-flex"> <li class="tab-item"> @@ -919,6 +968,11 @@ elements </a> </li> + <li class="tab-item"> + <a href="#layout"> + layout + </a> + </li> <li class="tab-item active"> <a href="#components"> components @@ -948,7 +1002,7 @@ </section> </section> - <section id="avatars" class="grid-960"> + <section id="avatars" class="container grid-960"> <header class="text-center"><h4>avatars</h4></header> <section class="notes"> <p><strong>Avatars</strong> are user profile pictures. </p> @@ -1024,7 +1078,7 @@ </section> - <section id="chips" class="grid-960"> + <section id="chips" class="container grid-960"> <header class="text-center"><h4>chips</h4></header> <section class="notes"> <p><strong>Chips</strong> are complex entities in small blocks. </p> @@ -1094,7 +1148,7 @@ </section> - <section id="autocomplete" class="grid-960"> + <section id="autocomplete" class="container grid-960"> <header class="text-center"><h4>autocomplete</h4></header> <section class="notes"> <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p> @@ -1255,7 +1309,7 @@ </section> - <section id="tooltips" class="grid-960"> + <section id="tooltips" class="container grid-960"> <header class="text-center"><h4>tooltips</h4></header> <section class="notes"> <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p> @@ -1287,7 +1341,7 @@ </section> - <section id="labels" class="grid-960"> + <section id="labels" class="container grid-960"> <header class="text-center"><h4>labels</h4></header> <section class="notes"> <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p> @@ -1310,7 +1364,7 @@ </section> - <section id="badges" class="grid-960"> + <section id="badges" class="container grid-960"> <header class="text-center"><h4>badges</h4></header> <section class="notes"> <p><strong>Badges</strong> are often used as unread number indicators.</p> @@ -1350,7 +1404,7 @@ </section> - <section id="toasts" class="grid-960"> + <section id="toasts" class="container grid-960"> <header class="text-center"><h4>toasts</h4></header> <section class="notes"> <p><strong>Toasts</strong> are used to show alert or information to users.</p> @@ -1404,7 +1458,7 @@ </section> - <section id="menus" class="grid-960"> + <section id="menus" class="container grid-960"> <header class="text-center"><h4>menus</h4></header> <section class="notes"> <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p> @@ -1529,7 +1583,7 @@ </section> - <section id="navigation" class="grid-960"> + <section id="navigation" class="container grid-960"> <header class="text-center"><h4>navigation</h4></header> <section class="notes"> <p><strong>Navigation</strong> includes several components, including breadcrumbs and tabs.</p> @@ -1856,7 +1910,7 @@ </section> - <section id="modals" class="grid-960"> + <section id="modals" class="container grid-960"> <header class="text-center"><h4>modals</h4></header> <section class="notes"> <p><strong>Modals</strong> are flexible dialog prompts.</p> @@ -1996,7 +2050,7 @@ </section> - <section id="cards" class="grid-960"> + <section id="cards" class="container grid-960"> <header class="text-center"><h4>cards</h4></header> <section class="notes"> <p><strong>Cards</strong> are flexible content containers.</p> @@ -2080,7 +2134,7 @@ </section> - <section id="utilities" class="grid-960"> + <section id="utilities" class="container grid-960"> <section class="notes text-center"> <ul class="tab inline-flex"> <li class="tab-item"> @@ -2089,6 +2143,11 @@ </a> </li> <li class="tab-item"> + <a href="#layout"> + layout + </a> + </li> + <li class="tab-item"> <a href="#components"> components </a> @@ -2111,7 +2170,7 @@ </section> </section> - <section id="position" class="grid-960"> + <section id="position" class="container grid-960"> <section class="notes"> <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> </section> @@ -2139,7 +2198,7 @@ </section> - <section id="display" class="grid-960"> + <section id="display" class="container grid-960"> <section class="notes"> <p><strong>Display utilities</strong> are used for display and hidden things.</p> </section> @@ -2168,7 +2227,7 @@ </section> - <section id="text" class="grid-960"> + <section id="text" class="container grid-960"> <section class="notes"> <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> </section> @@ -2208,7 +2267,7 @@ </section> - <section id="shapes" class="grid-960"> + <section id="shapes" class="container grid-960"> <section class="notes"> <p><strong>Shape utilities</strong> are used for change element shapes.</p> </section> @@ -2223,7 +2282,7 @@ </section> - <section id="divider" class="grid-960"> + <section id="divider" class="container grid-960"> <section class="notes"> <p>A <strong>Divider</strong> is used for separating elements.</p> </section> @@ -2241,7 +2300,7 @@ </section> - <section id="loading" class="grid-960"> + <section id="loading" class="container grid-960"> <section class="notes"> <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the class <code>loading</code> to buttons for loading status.</p> </section> @@ -2259,9 +2318,9 @@ </section> </section> <footer class="bg-grey"> - <section id="copyright" class="grid-footer grid-960"> + <section id="copyright" class="grid-footer container grid-960"> <p> - <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.18 + <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.19 </p> <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </section> |