New Middleman Extension Directory

#1

Work-in-progress, tell us what you think.

http://directory.middlemanapp.com

How to build a site like directory.middlemanapp.com
#2

This topic is now pinned. It will appear at the top of its category until it is either unpinned by a moderator, or the Clear Pin button is pressed.

#3

Looks excellent!

The ribbon is a bit wonky for me, though: http://puu.sh/2TU2j.png

Also it seems like most of it is flat design, or almost flat, except for the buttons. To me, they look a little out of place compared with the rest.

#4

Thanks for the feedback. Now that you mention that everything but the buttons are flat, they do stand out to me now :). Shame about the ribbon being wonky ( what browser is that? ).

#5

It’s Chrome on Windows 7. It often has issues with css3-transformed type, though. So I’m not sure I’d worry too much about it.

#6

Very nice! An elegant blend of presentation and functionality.

One small are that seems worth addressing: The hover states on the gitHub buttons have the text effectively “disappearing.” I’m also in Chrome on Windows 7 (and the ribbon text does look a bit wonky).

#7

Looks nice!

However, the generated links contain script-tags and don’t work (at least in Chrome). I guess it should be <a {{bindAttr href=links.github}} target="_blank">{{name}}</a> instead of <a href="{{links.github}}" target="_blank">{{name}}</a>.

#8

Thanks, fixing this now.

#9

I like it, it looks good.
I do have two cents to throw in though… :slight_smile:

I realize that you may know about all of these things! I am just throwing them out there.

Github Ribbon at Small Screen Widths

  • It overlaps the text for the subcategories as the screen width gets small enough.

It might look kind of cool to hide the Add Your Extension text with some display:none; at the screen sizes below the layout transition point. You would then be left with just the Github logo.
I played around with the .github-fork-ribbon-wrapper.right .github-fork-ribbon, css values: top:0px; and right:-85px;. The subcategories still go under the ribbon at certain widths, but a little padding/margin would fix that.

Subcategory Things

  • No option to filter by Community
  • Every subcategory “tag” that, that isn’t Official or Community, is the same color (grey).

General Things

  • For favicon-maker and svg-fallback, at the max width, the subcategory marker on the end of the line jumps down to a new line.

It just jumped out at me, not sure why. More of them do this as soon as the width reduces…so…who really cares I guess.

  • I found myself trying/wanting to click on the subcategory markers shown after the name of the extension.

I am not saying that they should be links that would filter the results… Just saying that I did try and click them because they look like buttons.

Github Buttons

  • I think that the Github buttons take up a lot of space on the smaller layout.

By “smaller layout” I mean the point where all of the github buttons transition down below the description text.

Again, I played with some CSS for .list-container .listjs-list .well, I kind of liked:

  • margin-left: auto;
  • margin-right: auto;
  • max-width: 300px;

I know that when I ask people to take a look at a design…they don’t usually realize that there are usually reasons why something is not ideal. So I get that that may be the case. I also understand how much can be over-looked by staring at a design for hours. Hopefully I don’t come across as being some know-it-all internet clown.

Respectfully, Dale

P.S. I just discovered Middleman and have been loving it so far. Great job, super awesome!

#10

PR’s welcome, just keep the individual changes separate.

#11