Skip to content

Commit

Permalink
Add new elements
Browse files Browse the repository at this point in the history
  • Loading branch information
Matt Blewitt committed May 1, 2014
1 parent ee6c50f commit 3ee675d
Show file tree
Hide file tree
Showing 8 changed files with 323 additions and 53 deletions.
14 changes: 7 additions & 7 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,13 @@ module.exports = function(grunt) {
livereload: true,
},

js: {
files: 'js/**/*.js',
tasks: ['jshint'],
options: {
spawn: false,
}
},
// js: {
// files: 'js/**/*.js',
// tasks: ['jshint'],
// options: {
// spawn: false,
// }
// },

css: {
//directory path and it's subdirectories,
Expand Down
4 changes: 2 additions & 2 deletions css/main.auto.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions css/main.css
View file

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions css/ui/_elements.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,11 @@ pre {
background: $ui-color-light;
border-radius: $brand-round;
border: 1px solid $base-ui-color;
overflow-x: auto;
overflow: hidden;
white-space: pre;
}

pre {
.html-snippet pre {
display: none;
}

Expand Down
3 changes: 2 additions & 1 deletion css/ui/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ body {
}

.wrapper {
max-width: 960px;
margin: 0 auto;
position: relative;
@extend .cf;
}

.pattern-wrapper {
width: 66.666%;
float: right;
padding-right: $base-padding;

@include breakpoint(alpha){
float: none;
Expand Down
138 changes: 118 additions & 20 deletions css/ui/_modules.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,38 +76,136 @@
background: $ui-color-lighter;
}

/* ACCORDION */
/* Accordion */

.accordion {
margin: 0 0 $base-margin 0;
border: 1px solid $ui-color;
}

dt, dd {
padding: $base-padding/2;
border: 1px solid $ui-color;
border-bottom: 0;
.accordion__header {
padding: $base-padding/2;
position:relative;
border-top: 1px solid $ui-color;

&:last-of-type {
border-bottom: 1px solid $ui-color;
}
a {
display: block;
color: $font-color;;
font-weight: bold;
text-decoration: none;
}

a {
display: block;
color: $font-color;;
font-weight: bold;
text-decoration: none;
}
&:nth-child(1) {
border-top: none;
}

&:before {
position: absolute;
content: "+";
line-height: 5px;
text-align: center;
margin-top:-7px;
top:50%;
right:10px;
width:14px;
height:14px;
z-index: 10;
}
}

.accordion__header.active {
&:before {
content:"-";
}
}

.accordion__content {
padding: $base-padding/2;
}

dd {
border-top: 0;
&:last-of-type {
border-top: 1px solid $ui-color-lighter;
position: relative;
top: -1px;
/* Tabs */

.tabs {

border: 1px solid $ui-color;
margin-bottom: $base-margin;

> .tabs__content {
display: none;
padding: 1em;
position: relative;
border-top: 1px solid $ui-color;
}
> .active {
display: block;
}
}

.tabs__nav {
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
padding: 0;
border-right: 1px solid $ui-color;
border-bottom: 0;

}
a {
display:block;
text-decoration: none;
padding: .5em;
&.active {
position: relative;
}
}
@media (max-width: 700px) {
ul {
border-bottom: 0;
overflow: hidden;
position: relative;
background: #fff; /* fallback */

&::after {
content: "☰";
position: absolute;
top: 5px;
right: 10px;
z-index: 2;
pointer-events: none;
}
&.open {
a {
position: relative;
display: block;
}
}
}
li {
display: block;
border: 0;
}
a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.active {
border: 0;
z-index: 1;
background: #fff;
}
}
}
}




.demo {
box-shadow: 1px 1px 10px;
margin-top: $base-margin;
Expand Down
112 changes: 103 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,24 @@ <h2><a name="blockquote" class="anchor" href="#blockquote"><span class="octicon
</div>
</section>

<section class="pattern">
<h2><a name="address" class="anchor" href="#address"><span class="octicon octicon-link"></span></a>Address</h2>
<div class="html-snippet">
<address>
Article by <a title="Posts by Jack Osborne" href="#">Jack Osborne</a>
</address>
</div>
</section>

<section class="pattern">
<h2><a name="time" class="anchor" href="#time"><span class="octicon octicon-link"></span></a>Time</h2>
<div class="html-snippet">
<address>
<time>2011-11-12 14:54</time>
</address>
</div>
</section>

<section class="pattern">
<h2><a name="link" class="anchor" href="#link"><span class="octicon octicon-link"></span></a>Link</h2>
<div class="html-snippet">
Expand Down Expand Up @@ -474,6 +492,13 @@ <h2><a name="button" class="anchor" href="#button"><span class="octicon octicon-
</div>
</section>

<section class="pattern">
<h2><a name="progress" class="anchor" href="#progress"><span class="octicon octicon-link"></span></a>Progress</h2>
<div class="html-snippet">
<p>Progress: <progress> <span id="p">20</span>% </progress> </p>
</div>
</section>

</div>
<!-- end #forms -->

Expand Down Expand Up @@ -537,19 +562,88 @@ <h2><a name="loading" class="anchor" href="#loading"><span class="octicon octico
<section class="pattern">
<h2><a name="accordion" class="anchor" href="#accordion"><span class="octicon octicon-link"></span></a>Accordion</h2>
<div class="html-snippet">
<dl class="accordion">
<dt><a href="">Panel 1</a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt><a href="">Panel 2</a></dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt><a href="">Panel 3</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
</dl>
<div class="js-accordion accordion">
<div class="accordion__header"><a href="#">Panel 1</a></div>
<div class="accordion__content">Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</div>
<div class="accordion__header"><a href="#">Panel 2</a></div>
<div class="accordion__content">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</div>
</div>
</div>
</section>

<section class="pattern">
<h2><a name="hcard" class="anchor" href="#hcard"><span class="octicon octicon-link"></span></a>Microformat hCard</h2>
<div class="html-snippet">
<p class="vcard">

<a class="fn org" href="http://www.w3.org/Consortium/contact-keio" title="Contact Information for W3C/Keio">
<span class="organization-name">University of Leeds</span>

</a>

<span class="adr">

<a class="extended-address" href="http://www.keio.ac.jp/english/about_keio/campus_info/sfc1.html">University of Leeds</a>

<span class="street-address">Street Name</span>,

<span class="locality">Leeds</span>,

<span class="region">West Yorkshire</span>
<span class="postal-code">LS2 9JT</span>

<b class="country">UK</b>

<span class="tel">Telephone:
<span class="value">+44 (0) 113 243 1751</span>
</span>
<span class="tel">
<span class="type">Fax</span>:
<span class="value">+44 (0) 113 244 3923</span>
</span>
</span>
</p>
</div>
</section>

<section class="pattern">
<h2><a name="tabs" class="anchor" href="#tabs"><span class="octicon octicon-link"></span></a>Tabs</h2>

<div class="html-snippet">

<div class="tabs">

<nav role='navigation' class="tabs__nav">
<ul>
<li><a href="#tab-1" class="active">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
</nav>

<div id="tab-1" class="tabs__content active">
<h3>Tab 1</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum non iure magnam dolores earum nemo quo tempora ab unde!
</div>

<div id="tab-2" class="tabs__content">
<h3>Tab 2</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur est natus esse minima nihil quidem tenetur alias pariatur.
</div>

<div id="tab-3" class="tabs__content">
<h3>Tab 3</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores numquam cupiditate aliquam quisquam repellendus fugit eaque asperiores voluptatem ut accusamus soluta corporis in facere quae provident itaque magni eum repellat ducimus dolore.
</div>

</div>

</div>

</section>

</div>
<!-- end #widgets -->

</div>

</div>
Loading

0 comments on commit 3ee675d

Please sign in to comment.