Skip to content

Commit

Permalink
re nuke changed folders
Browse files Browse the repository at this point in the history
  • Loading branch information
nikolaswise committed Aug 29, 2014
2 parents 152da91 + c7fdc0c commit 92b52de
Show file tree
Hide file tree
Showing 3 changed files with 360 additions and 2 deletions.
53 changes: 53 additions & 0 deletions docs/source/assets/css/all.css.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,55 @@
@import "github";
@import "calcite-web";

// TEST
.grid-example [class*="column-"] {
span {
width: 100%;
display: block;
color: $white;
background-color: rgba(blue, 0.6);
font-family: monospace;
padding-top: 2em;
padding-bottom: 2em;
margin-top: 1em;
text-align: center;
}
}

.nested-demo [class*="column-"] {
[class*="column-"] {
span {
background-color: rgba(blue, 0.4);
}
[class*="column-"] {
span {
background-color: rgba(blue, 0.2);
}
[class*="column-"] {
span {
background-color: rgba(blue, 0.1);
}
}
}
}
}

.gridlines {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -10;
div {
height: 100vh;
}
span {
@include box-sizing(border-box);
height: 100vh;
width: 100%;
display: inline-block;
background-color: rgba($gray, 0.05);
border: 1px solid $lighter-gray;
}
}
307 changes: 306 additions & 1 deletion docs/source/index.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,309 @@ title: Homepage
<%# a sample styleguide block with modifier classes %>
<% styleguide "1.1" do %>
<div class="$modifier_class">Sample Component</div>
<% end %>
<% end %>

<div class="container grid-example leader-1">
<h1>Avenir Next</h1>
<p>
Frutiger
</p>
<p class="secondary-face">
Charter
</p>
</div>

<!-- TEST -->
<div class="container grid-example leader-1">
<div class="column-24"><span>24</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
<div class="column-1"><span>1</span></div>
</div>

<div class="container leader-1">
<div class="column-14 pre-3">
<div class="content-area">
{{md 'site/source/copy/columns.md'}}
</div>
</div>
</div>

<div class="container grid-example leader-1">
<div class="column-1"><span>1</span></div>
<div class="column-23"><span>.column-23</span></div>
<div class="column-2"><span>2</span></div>
<div class="column-22"><span>.column-22</span></div>
<div class="column-3"><span>3</span></div>
<div class="column-21"><span>.column-21</span></div>
<div class="column-4"><span>4</span></div>
<div class="column-20"><span>.column-20</span></div>
<div class="column-5"><span>.column-5</span></div>
<div class="column-19"><span>.column-19</span></div>
<div class="column-6"><span>.column-6</span></div>
<div class="column-18"><span>.column-18</span></div>
<div class="column-7"><span>.column-7</span></div>
<div class="column-17"><span>.column-17</span></div>
<div class="column-8"><span>.column-8</span></div>
<div class="column-16"><span>.column-16</span></div>
<div class="column-9"><span>.column-9</span></div>
<div class="column-15"><span>.column-15</span></div>
<div class="column-10"><span>.column-10</span></div>
<div class="column-14"><span>.column-14</span></div>
<div class="column-11"><span>.column-11</span></div>
<div class="column-13"><span>.column-13</span></div>
<div class="column-12"><span>.column-12</span></div>
<div class="column-12"><span>.column-12</span></div>
</div>

<div class="container leader-5">
<div class="column-14 pre-3">
<div class="content-area">
{{md 'site/source/copy/responsive-columns.md'}}
</div>
</div>
</div>

<div class="container grid-example leader-1">
<div class="column-24">
<div class="column-1 tablet-column-4 phone-column-1">
<span class="tablet-hide">1</span>
<span class="tablet-only">.tablet-column-4</span>
<span class="phone-show">.phone-column-1</span>
</div>
<div class="column-23 tablet-column-8 phone-column-5">
<span class="tablet-hide">.column-23</span>
<span class="tablet-only">.tablet-column-8</span>
<span class="phone-show">.phone-column-5</span>
</div>
</div>

<div class="column-24">
<div class="column-2 tablet-column-8 phone-column-5">
<span class="tablet-hide">2</span>
<span class="tablet-only">.tablet-column-8</span>
<span class="phone-show">.phone-column-5</span>
</div>
<div class="column-22 tablet-column-4 phone-column-1">
<span class="tablet-hide">.column-22</span>
<span class="tablet-only">.tablet-column-4</span>
<span class="phone-show">.phone-column-1</span>
</div>
</div>

<div class="column-24">
<div class="column-3 tablet-column-5 phone-column-2">
<span class="tablet-hide">.column-3</span>
<span class="tablet-only">.tablet-5</span>
<span class="phone-show">.phone-column-2</span>
</div>
<div class="column-21 tablet-column-7 phone-column-4">
<span class="tablet-hide">.column-21</span>
<span class="tablet-only">.tablet-7</span>
<span class="phone-show">.phone-column-4</span>
</div>
</div>

<div class="column-24">
<div class="column-4 tablet-column-7 phone-column-4">
<span class="tablet-hide">.column-4</span>
<span class="tablet-only">.tablet-7</span>
<span class="phone-show">.phone-column-4</span>
</div>
<div class="column-20 tablet-column-5 phone-column-2">
<span class="tablet-hide">.column-20</span>
<span class="tablet-only">.tablet-5</span>
<span class="phone-show">.phone-column-2</span>
</div>
</div>

<div class="column-24">
<div class="column-5 tablet-column-6 phone-column-3">
<span class="tablet-hide">.column-5</span>
<span class="tablet-only">.tablet-6</span>
<span class="phone-show">.phone-column-3</span>
</div>
<div class="column-19 tablet-column-6 phone-column-3">
<span class="tablet-hide">.column-19</span>
<span class="tablet-only">.tablet-6</span>
<span class="phone-show">.phone-column-3</span>
</div>
</div>

<div class="column-24">
<div class="column-6 tablet-column-6 phone-column-3">
<span class="tablet-hide">.column-6</span>
<span class="tablet-only">.tablet-6</span>
<span class="phone-show">.phone-column-3</span>
</div>
<div class="column-18 column-6 tablet-column-6 phone-column-3">
<span class="tablet-hide">.column-18</span>
<span class="tablet-only">.tablet-6</span>
<span class="phone-show">.phone-column-3</span>
</div>
</div>
</div>

<div class="container leader-5">
<div class="column-14 pre-3">
<div class="content-area">
{{md 'site/source/copy/nested-columns.md'}}
</div>
</div>
</div>

<div class="container grid-example nested-demo leader-1">
<div class="column-18 tablet-column-8">
<span class='tablet-hide'>.column-18</span>
<span class='tablet-show'>.tablet-column-8</span>

<div class="column-4 tablet-column-4">
<span class='tablet-hide'>.column-4</span>
<span class='tablet-show'>.tablet-column-4</span>

<div class="column-1 tablet-column-4"><span class='tablet-hide'>1</span>
<span class='tablet-show'>.tablet-column-4</span></div>
<div class="column-1 tablet-column-4 tablet-first-column"><span class='tablet-hide'>1</span>
<span class='tablet-show'>.tablet-column-4</span></div>
<div class="column-1 tablet-column-4 tablet-first-column"><span class='tablet-hide'>1</span>
<span class='tablet-show'>.tablet-column-4</span></div>
<div class="column-1 tablet-column-4 tablet-first-column"><span class='tablet-hide'>1</span>
<span class='tablet-show'>.tablet-column-4</span></div>
</div>

<div class="column-2 tablet-column-4 tablet-last-column phone-first-column"><span class='ablet-hide'>2</span>
<span class='tablet-show'>.tablet-column-4</span></div>

<div class="column-10 tablet-column-8 tablet-first-column">
<span class='tablet-hide'>10</span>
<span class='tablet-show'>.tablet-column-8</span>
<div class="column-5 tablet-column-4">
<span class='tablet-hide'>.column-5</span>
<span class='tablet-show'>.tablet-column-4</span>
</div>
<div class="column-5 tablet-column-4 phone-first-column">
<span class='tablet-hide'>.column-5</span>
<span class='tablet-show'>.tablet-column-4</span>
<div class="column-2 tablet-column-4 phone-first-column">
<span class='tablet-hide'>2</span>
<span class='tablet-show'>.tablet-column-4</span>
</div>
<div class="column-3 tablet-column-4 tablet-first-column phone-first-column">
<span class='tablet-hide'>.column-3</span>
<span class='tablet-show'>.tablet-column-4</span>
</div>

</div>
</div>

<div class="column-1 tablet-column-4 tablet-first-column"><span class='tablet-hide'>1</span>
<span class='tablet-show'>.tablet-column-4</span></div>
<div class="column-1 tablet-column-5 tablet-first-column"><span class='tablet-hide'>1</span>
<span class='tablet-show'>.tablet-column-5</span></div>
</div>

<div class="column-6 tablet-column-4">
<span class='tablet-hide'>.column-6</span>
<span class='tablet-show'>.tablet-column-4</span>

<div class="column-6 tablet-column-4">
<span class='tablet-hide'>.column-6</span>
<span class='tablet-show'>.tablet-column-4</span>
<div class="column-4 tablet-column-2"><span class='tablet-hide'>.column-4</span>
<span class='tablet-show'>.tablet-column-2</span></div>
<div class="column-2 tablet-column-2"><span class='tablet-hide'>2</span>
<span class='tablet-show'>.tablet-column-2</span></div>
</div>

<div class="column-4 tablet-column-4 column-first tablet-first-column"><span class='ablet-hide'>.column-4</span>
<span class='tablet-show'>.tablet-column-4</span></div>
</div>
</div>


<div class="container leader-5">
<div class="column-14 pre-3">
<div class="content-area">
{{md 'site/source/copy/columns-as-row.md'}}
</div>
</div>
</div>

<div class="container grid-example leader-1">
<div class="column-2"><span>.column-2 With a lot of content, so it pushes down.</span></div>
<div class="column-22"><span>.column-22</span></div>
<div class="column-4"><span>.column-4</span></div>
<div class="column-4"><span>.column-4</span></div>
<div class="column-4"><span>.column-4</span></div>

<div class="column-24">
<div class="column-2"><span>.column-2 With a lot of content, so it pushes down.</span></div>
<div class="column-22 tablet-first-column"><span>.column-22</span></div>
</div>
<div class="column-4"><span>.column-4</span></div>
<div class="column-4"><span>.column-4</span></div>
<div class="column-4"><span>.column-4</span></div>
</div>

<!-- <div class="container leader-5">
<div class="column-14 pre-3">
<div class="content-area">
{{md 'site/source/copy/nested-column-rows.md'}}
</div>
</div>
</div> -->

<!-- D E M O -->

<div class="container leader-5">
<div class="column-14 pre-3">
<div class="content-area">
{{md 'site/source/copy/pre-post.md'}}
</div>
</div>
</div>

<div class="container grid-example leader-1">
<!-- PRE -->
<div class="column-24">
<div class="column-4 pre-2"><span>4 pre-2</span></div>
<div class="column-4 pre-3"><span>4 pre-3</span></div>
<div class="column-4 pre-4"><span>4 pre-4</span></div>
</div>
<!-- POST -->
<div class="column-24">
<div class="column-4 post-2"><span>4 post-2</span></div>
<div class="column-4 post-3"><span>4 post-3</span></div>
<div class="column-4 post-4"><span>4 post-4</span></div>
<div class="column-3"><span>3</span></div>
</div>
<!-- COMBO -->
<div class="column-24 trailer-5">
<div class="column-1"><span>1</span></div>
<div class="column-4 pre-1 post-2"><span>4 pre-1 post-2</span></div>
<div class="column-4 pre-2 post-2"><span>4 pre-2 post-2</span></div>
<div class="column-4 pre-1 post-2"><span>4 pre-1 post-2</span></div>
<div class="column-1"><span>1</span></div>
</div>
</div>
2 changes: 1 addition & 1 deletion lib/sass/calcite-web/type/type-cabinet.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@
@import 'type-unicode-variables';
@import 'typesetting-mixins';
@import 'type-faces';
@import 'modular-scale';
@import 'type-scale';
@import 'type-styles';

0 comments on commit 92b52de

Please sign in to comment.