diff options
Merge branch 'master' into gh-pages
5 files changed, 184 insertions, 39 deletions
| -rw-r--r-- | demo/index.html | 71 | ||||
| -rw-r--r-- | dist/spectre.css | 38 | ||||
| -rw-r--r-- | index.html | 71 | ||||
| -rw-r--r-- | src/layout.less | 41 | ||||
| -rw-r--r-- | src/typography.less | 2 |
diff --git a/demo/index.html b/demo/index.html index 767a41a..cd247b4 100644 --- a/demo/index.html +++ b/demo/index.html @@ -7,7 +7,7 @@ <link rel="stylesheet" href="font/style.css"> <style> header > h4 { - margin-top: 6rem; + margin-top: 8rem; margin-bottom: 2rem; } .bg-grey { @@ -15,6 +15,13 @@ padding: 1rem; border-radius: .3rem; } + .grid-hero { + margin-top: 10rem; + margin-bottom: 10rem; + } + .grid-hero h3 { + margin-bottom: 5rem; + } .notes { margin: 2rem 0; color: #666; @@ -22,18 +29,33 @@ </style> </head> <body> - <section class="container grid-960"> - <section id="overview"> + <section class="container bg-grey"> + <section id="overview" class="grid-hero grid-960"> <header class="text-center"><h3>Project Spectre</h3></header> - <header class="text-center"><h4>introduction</h4></header> - <section class="notes"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">Project Spectre</a> is a lightweight and clean CSS framework for faster and extendable development.</p> + <section> + <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p> <ul> <li>lightweight and clean starting point for your project</li> <li>flexbox and responsive layout friendly</li> <li>built in useful components and utilities</li> </ul> </section> + <section class="notes text-center"> + <div class="btn-group"> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + <a href="#get-started" class="btn btn-primary">Documentation</a> + </div> + </section> + </section> + </section> + <section class="container grid-960"> + <section id="get-started"> + <!--<header class="text-center"><h4>get started</h4></header> + <section class="notes"> + <p>You can either manually install Spectre CSS framework to your website or app.</p> + <h5>Bower</h5> + <h5>NPM</h5> + </section>--> </section> <section id="typography"> @@ -96,7 +118,7 @@ <header class="text-center"><h4>flexbox layout</h4></header> <section class="notes"> <p><strong>layout.less</strong> includes flexbox based grid system with 12 columns. </p> - <p>Add the class <span class="label">columns</span> to a container. Add any element you want with class <span class="label">column</span> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <span class="label">col-[1-12]</span>.</p> + <p>Add the class <span class="label">columns</span> to a container. Add any element you want with classname <span class="label">column</span> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <span class="label">col-[1-12]</span>.</p> </section> <div class="columns"> <div class="column"> @@ -208,9 +230,10 @@ <button class="btn btn-link loading">link button</button> </div> </div> + <header class="text-center"><h5>button sizes</h5></header> <section class="notes"> - <p>Add the class <span class="label">btn-sm</span> or <span class="label">btn-lg</span> for small or large size. Also, you can add the class <span class="label">btn-block</span> for a full-width button.</p> + <p>Add the class <span class="label">btn-sm</span> or <span class="label">btn-lg</span> for small or large size. Icons with the class <span class="label">icon</span> can be correctly rendered in each button size. Also, you can add the class <span class="label">btn-block</span> for a full-width button. </p> </section> <div class="columns"> <div class="column"> @@ -227,10 +250,8 @@ <button class="btn btn-block">block button</button> </div> </div> - </section> - <section id="button-groups"> - <header class="text-center"><h4>button groups</h4></header> + <header class="text-center"><h5>button groups</h5></header> <section class="notes"> <p>If you want to use buttons as a group, add the class <span class="label">btn-group</span> to the container. </p> </section> @@ -254,6 +275,10 @@ <section id="forms"> <header class="text-center"><h4>forms</h4></header> + <section class="notes"> + <p><strong>forms.less</strong> provides the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch. </p> + <p> </p> + </section> <div class="columns"> <div class="column col-5"> <form> @@ -375,10 +400,8 @@ </form> </div> </div> - </section> - <section id="input-groups"> - <header class="text-center"><h4>input groups</h4></header> + <header class="text-center"><h5>input groups</h5></header> <div class="columns"> <div class="column"> <div class="input-group"> @@ -400,10 +423,10 @@ <header class="text-center"><h4>media</h4></header> <div class="columns"> <div class="column col-6"> - <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" /> + <img src="img/osx-el-capitan.jpg" class="img-responsive rounded hide-sm" /> </div> <div class="column col-6"> - <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded" /> + <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-lg" /> </div> </div> </section> @@ -541,6 +564,10 @@ <section id="labels"> <header class="text-center"><h4>labels</h4></header> + <section class="notes"> + <p><strong>labels.less</strong> .</p> + <p>Add the class <span class="label">label</span> to span elements.</p> + </section> <div class="columns"> <div class="column"> <span class="label">default label</span> @@ -571,6 +598,10 @@ <section id="toasts"> <header class="text-center"><h4>toasts</h4></header> + <section class="notes"> + <p><strong>toasts.less</strong> is used to show alert or information to users.</p> + <p>Add a container element with the class <span class="label">toast</span>. You can add any text within the container, and even icons. You may also add a close button with the class <span class="label">btn-clear</span> if you need. </p> + </section> <div class="columns"> <div class="column"> <div class="toast"> @@ -615,6 +646,10 @@ <section id="menus"> <header class="text-center"><h4>menus</h4></header> + <section class="notes"> + <p><strong>menus.less</strong> is a vertical list links or buttons for actions and navigations.</p> + <p>Add a container element with the class <span class="label">menu</span>. And add child elements with the class name <span class="label">menu-item</span>. That is a basic menu component.</p> + </section> <div class="columns"> <div class="column col-3"> <menu class="menu"> @@ -764,6 +799,10 @@ <section id="badges"> <header class="text-center"><h4>badges</h4></header> + <section class="notes"> + <p><strong>badges.less</strong> is often used as unread number indicator.</p> + <p>Add the class <span class="label">badge</span> to non self closing elements. And add the attribute <span class="label">data-badge</span> to define the content of a badge. The badge will appear in the top-right direction of the element.</p> + </section> <div class="columns"> <div class="column"> <span class="badge" data-badge="1"> diff --git a/dist/spectre.css b/dist/spectre.css index 5f698ed..622e322 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -416,7 +416,7 @@ h6 { font-weight: 300; line-height: 1.1; margin-top: 2.5rem; - margin-bottom: 1rem; + margin-bottom: 1.5rem; color: inherit; } h1 { @@ -558,8 +558,17 @@ ol ol { padding-right: 1rem; } @media screen and (min-width: 961px) { - .container.grid-960 { + .grid-960 { width: 96rem; + margin-left: auto; + margin-right: auto; + } +} +@media screen and (min-width: 481px) { + .grid-480 { + width: 48rem; + margin-left: auto; + margin-right: auto; } } .columns { @@ -634,6 +643,31 @@ ol ol { width: 8.33333333%; } } +@media screen and (max-width: 480px) { + .hide-xs { + display: none !important; + } +} +@media screen and (max-width: 600px) { + .hide-sm { + display: none !important; + } +} +@media screen and (max-width: 840px) { + .hide-md { + display: none !important; + } +} +@media screen and (max-width: 960px) { + .hide-lg { + display: none !important; + } +} +@media screen and (max-width: 1280px) { + .hide-xl { + display: none !important; + } +} .img-responsive { display: block; max-width: 100%; @@ -7,7 +7,7 @@ <link rel="stylesheet" href="demo/font/style.css"> <style> header > h4 { - margin-top: 6rem; + margin-top: 8rem; margin-bottom: 2rem; } .bg-grey { @@ -15,6 +15,13 @@ padding: 1rem; border-radius: .3rem; } + .grid-hero { + margin-top: 10rem; + margin-bottom: 10rem; + } + .grid-hero h3 { + margin-bottom: 5rem; + } .notes { margin: 2rem 0; color: #666; @@ -22,18 +29,33 @@ </style> </head> <body> -<section class="container grid-960"> - <section id="overview"> +<section class="container bg-grey"> + <section id="overview" class="grid-hero grid-960"> <header class="text-center"><h3>Project Spectre</h3></header> - <header class="text-center"><h4>introduction</h4></header> - <section class="notes"> - <p><a href="https://github.com/picturepan2/spectre" target="_blank">Project Spectre</a> is a lightweight and clean CSS framework for faster and extendable development.</p> + <section> + <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p> <ul> <li>lightweight and clean starting point for your project</li> <li>flexbox and responsive layout friendly</li> <li>built in useful components and utilities</li> </ul> </section> + <section class="notes text-center"> + <div class="btn-group"> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + <a href="#get-started" class="btn btn-primary">Documentation</a> + </div> + </section> + </section> +</section> +<section class="container grid-960"> + <section id="get-started"> + <!--<header class="text-center"><h4>get started</h4></header> + <section class="notes"> + <p>You can either manually install Spectre CSS framework to your website or app.</p> + <h5>Bower</h5> + <h5>NPM</h5> + </section>--> </section> <section id="typography"> @@ -96,7 +118,7 @@ <header class="text-center"><h4>flexbox layout</h4></header> <section class="notes"> <p><strong>layout.less</strong> includes flexbox based grid system with 12 columns. </p> - <p>Add the class <span class="label">columns</span> to a container. Add any element you want with class <span class="label">column</span> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <span class="label">col-[1-12]</span>.</p> + <p>Add the class <span class="label">columns</span> to a container. Add any element you want with classname <span class="label">column</span> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <span class="label">col-[1-12]</span>.</p> </section> <div class="columns"> <div class="column"> @@ -208,9 +230,10 @@ <button class="btn btn-link loading">link button</button> </div> </div> + <header class="text-center"><h5>button sizes</h5></header> <section class="notes"> - <p>Add the class <span class="label">btn-sm</span> or <span class="label">btn-lg</span> for small or large size. Also, you can add the class <span class="label">btn-block</span> for a full-width button.</p> + <p>Add the class <span class="label">btn-sm</span> or <span class="label">btn-lg</span> for small or large size. Icons with the class <span class="label">icon</span> can be correctly rendered in each button size. Also, you can add the class <span class="label">btn-block</span> for a full-width button. </p> </section> <div class="columns"> <div class="column"> @@ -227,10 +250,8 @@ <button class="btn btn-block">block button</button> </div> </div> - </section> - <section id="button-groups"> - <header class="text-center"><h4>button groups</h4></header> + <header class="text-center"><h5>button groups</h5></header> <section class="notes"> <p>If you want to use buttons as a group, add the class <span class="label">btn-group</span> to the container. </p> </section> @@ -254,6 +275,10 @@ <section id="forms"> <header class="text-center"><h4>forms</h4></header> + <section class="notes"> + <p><strong>forms.less</strong> provides the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch. </p> + <p> </p> + </section> <div class="columns"> <div class="column col-5"> <form> @@ -375,10 +400,8 @@ </form> </div> </div> - </section> - <section id="input-groups"> - <header class="text-center"><h4>input groups</h4></header> + <header class="text-center"><h5>input groups</h5></header> <div class="columns"> <div class="column"> <div class="input-group"> @@ -400,10 +423,10 @@ <header class="text-center"><h4>media</h4></header> <div class="columns"> <div class="column col-6"> - <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" /> + <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded hide-sm" /> </div> <div class="column col-6"> - <img src="demo/img/osx-el-capitan-2.jpg" class="img-responsive rounded" /> + <img src="demo/img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-lg" /> </div> </div> </section> @@ -541,6 +564,10 @@ <section id="labels"> <header class="text-center"><h4>labels</h4></header> + <section class="notes"> + <p><strong>labels.less</strong> .</p> + <p>Add the class <span class="label">label</span> to span elements.</p> + </section> <div class="columns"> <div class="column"> <span class="label">default label</span> @@ -571,6 +598,10 @@ <section id="toasts"> <header class="text-center"><h4>toasts</h4></header> + <section class="notes"> + <p><strong>toasts.less</strong> is used to show alert or information to users.</p> + <p>Add a container element with the class <span class="label">toast</span>. You can add any text within the container, and even icons. You may also add a close button with the class <span class="label">btn-clear</span> if you need. </p> + </section> <div class="columns"> <div class="column"> <div class="toast"> @@ -615,6 +646,10 @@ <section id="menus"> <header class="text-center"><h4>menus</h4></header> + <section class="notes"> + <p><strong>menus.less</strong> is a vertical list links or buttons for actions and navigations.</p> + <p>Add a container element with the class <span class="label">menu</span>. And add child elements with the class name <span class="label">menu-item</span>. That is a basic menu component.</p> + </section> <div class="columns"> <div class="column col-3"> <menu class="menu"> @@ -764,6 +799,10 @@ <section id="badges"> <header class="text-center"><h4>badges</h4></header> + <section class="notes"> + <p><strong>badges.less</strong> is often used as unread number indicator.</p> + <p>Add the class <span class="label">badge</span> to non self closing elements. And add the attribute <span class="label">data-badge</span> to define the content of a badge. The badge will appear in the top-right direction of the element.</p> + </section> <div class="columns"> <div class="column"> <span class="badge" data-badge="1"> diff --git a/src/layout.less b/src/layout.less index b101ca0..ccdd609 100644 --- a/src/layout.less +++ b/src/layout.less @@ -8,10 +8,17 @@ &:extend(.clearfix all); } @media screen and (min-width: 961px) { - .container { - &.grid-960 { - width: 96rem; - } + .grid-960 { + width: 96rem; + margin-left: auto; + margin-right: auto; + } +} +@media screen and (min-width: 481px) { + .grid-480 { + width: 48rem; + margin-left: auto; + margin-right: auto; } } @@ -82,3 +89,29 @@ } } +// Responsive breakpoint system +@media screen and (max-width: 480px) { + .hide-xs { + display: none !important; + } +} +@media screen and (max-width: 600px) { + .hide-sm { + display: none !important; + } +} +@media screen and (max-width: 840px) { + .hide-md { + display: none !important; + } +} +@media screen and (max-width: 960px) { + .hide-lg { + display: none !important; + } +} +@media screen and (max-width: 1280px) { + .hide-xl { + display: none !important; + } +}
\ No newline at end of file diff --git a/src/typography.less b/src/typography.less index bd4c576..0051ba0 100644 --- a/src/typography.less +++ b/src/typography.less @@ -8,7 +8,7 @@ h6 { font-weight: 300; line-height: 1.1; margin-top: 2.5rem; - margin-bottom: 1rem; + margin-bottom: 1.5rem; color: inherit; } h1 { |