Skip to content

Commit

Permalink
Merge pull request #390 from DFurnes/gallery-tweaks
Browse files Browse the repository at this point in the history 
Gallery tweaks
  • Loading branch information
@DFurnes
DFurnes committed Jan 13, 2015
2 parents aa3efa6 + 5910c98 commit bcec9ad
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 31 deletions.
26 changes: 18 additions & 8 deletions scss/_modules/_gallery.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// Module class for all galleries. Add additional modifier classes to designate styling for a specific type of gallery.
// Module class for all galleries. Galleries can contain items of any type (e.g. tile, media, etc.)
// Add additional modifier classes to designate styling for a specific type of gallery.
//
// Styleguide Gallery

Expand All @@ -11,16 +12,25 @@

> li {
margin: gutter() 0;
}

@include media($tablet) {
@include span(3 of 12);
// Quartet Gallery. Four items per row.
//
// Styleguide Gallery - Quartet
&.-quartet {
li {
@include media($tablet) {
@include span(3 of 12);
}
}
}

// Featured Gallery. Emphasizes the first item in the gallery.
// Works best when paired with `.-quartet.`
//
// Styleguide Gallery - Featured
&.-featured {
> li:first-child {
width: 100%;

@include media($tablet) {
@include span(6 of 12);
}
Expand All @@ -33,7 +43,7 @@
}
}

// Triad Gallery. Defaults to using images with same dimensions.
// Triad Gallery. Three items per row.
//
// .-aligned - Tiles with image flushed to top and minimum
// height to force content below to line up with adjacent tiles
Expand All @@ -44,7 +54,7 @@
&.-triad {
> li {
@include media($tablet) {
@include gallery(4 of 12);
@include span(4 of 12);
}
}

Expand All @@ -65,7 +75,7 @@
}
}

// Duo Gallery serves as a container for two tiles that sit side by side. Tiles can be of any style.
// Duo Gallery. Two items per row.
//
// Styleguide Gallery - Duo
&.-duo {
Expand Down
22 changes: 7 additions & 15 deletions scss/_modules/_media.scss
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,27 @@
// Module class for media tile blocks that can be placed in multiple contexts on a page. Specifically used for reportback tiles on user profiles, but can be used for other content as well.
// A media tile block can contain an image, title, and description with the image in the left column and the content in the right.
// Module class for media blocks that can be placed in multiple contexts on a page. A media block
// contains an image and description. See [Nicole Sullivan's introductory article](http://goo.gl/Gnfw7d).
//
// Styleguide Media

.media {
@include clearfix;
text-align: left;
padding-bottom: 27px;

> .wrapper {
img {
margin-left: 0;
margin-right: 0;
width: 100%;
height: auto;
}
> .media__image {
float: left;
padding-right: gutter();
}

.media__body {
@include span(4 of 6);
overflow: hidden;
padding-left: gutter();
}

.media__title {
color: $dark-gray;
line-height: 1.1;
margin: 0 0 9px;
}

.media__description {
line-height: 1.2;

p {
margin: 0;
}
Expand Down
71 changes: 63 additions & 8 deletions styleguide/index.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,8 +293,8 @@
<% end %>

<h4 id="gallery">Gallery</h4>
<% styleguide_block 'Gallery' do %>
<ul class="gallery">
<% styleguide_block 'Gallery - Quartet' do %>
<ul class="gallery -quartet">
<li>
<article class="tile">
<a class="wrapper" href="#">
Expand Down Expand Up @@ -338,6 +338,61 @@
</ul>
<% end %>

<% styleguide_block 'Gallery - Featured' do %>
<ul class="gallery -quartet -featured">
<li>
<article class="tile">
<a class="wrapper" href="#">
<div class="tile__meta">
<h1 class="tile__title">Kitten Overlord</h1>
</div>
<img alt="kitten overlords" src="http://placekitten.com/g/300/300" />
</a>
</article>
</li>
<li>
<article class="tile">
<a class="wrapper" href="#">
<div class="tile__meta">
<h1 class="tile__title">Kitten Overlord</h1>
</div>
<img alt="kitten overlords" src="http://placekitten.com/g/300/300" />
</a>
</article>
</li>
<li>
<article class="tile">
<a class="wrapper" href="#">
<div class="tile__meta">
<h1 class="tile__title">Kitten Overlord</h1>
</div>
<img alt="kitten overlords" src="http://placekitten.com/g/300/300" />
</a>
</article>
</li>
<li>
<article class="tile">
<a class="wrapper" href="#">
<div class="tile__meta">
<h1 class="tile__title">Kitten Overlord</h1>
</div>
<img alt="kitten overlords" src="http://placekitten.com/g/300/300" />
</a>
</article>
</li>
<li>
<article class="tile">
<a class="wrapper" href="#">
<div class="tile__meta">
<h1 class="tile__title">Kitten Overlord</h1>
</div>
<img alt="kitten overlords" src="http://placekitten.com/g/300/300" />
</a>
</article>
</li>
</ul>
<% end %>

<% styleguide_block 'Gallery - Triad' do %>
<ul class="gallery -triad $modifier_class">
<li>
Expand Down Expand Up @@ -385,8 +440,8 @@
<ul class="gallery -duo">
<li class="-first">
<article class="media">
<div class="wrapper">
<img alt="kitten overlords" src="http://placekitten.com/g/300/300" />
<div class="media__image">
<img alt="kitten overlords" src="http://placekitten.com/g/75/75" />
</div>

<div class="media__body">
Expand All @@ -404,8 +459,8 @@

<li class="-second">
<article class="media">
<div class="wrapper">
<img alt="kitten overlords" src="http://placekitten.com/g/300/300" />
<div class="media__image">
<img alt="kitten overlords" src="http://placekitten.com/g/75/75" />
</div>

<div class="media__body">
Expand Down Expand Up @@ -438,8 +493,8 @@
<h4 id="media">Media</h4>
<% styleguide_block 'Media' do %>
<article class="media">
<div class="wrapper">
<img alt="kitten overlords" src="http://placekitten.com/g/300/300" />
<div class="media__image">
<img alt="kitten overlords" src="http://placekitten.com/g/75/75" />
</div>

<div class="media__body">
Expand Down

0 comments on commit bcec9ad

Please sign in to comment.