As the stylesheet grows, we need a way to visualise the elements that have been styled, the elements yet to be styled, and the code used to generate the elements we require on pages. So I whipped up a styleguide page.
10 months ago
Beautiful work Dan! I love how you display the code to the right of the example. Top stuff, sir.
I can't wait to try this.
Going to start using the 'butt' class for buttons now, thanks.
Interesting - so would people scroll horizontally within the sidebar area to see the code? I think presenting it off to the side like that is a little awkward, as in none of the examples there could the entire markup structure be seen without having to scroll about?
I think a more traditional above/below placement would be better suited for what you're trying to achieve?
@Adam Whitcroft I was hoping someone would catch me out on this! The reasons for structuring the layout of the page that way are two-fold:
- It’s not just developers who are going to be looking at this page. The client and project managers (non-coders) are also going to see it at some point, and I wanted to ensure that the focus for them is on the design, not the code
- The way the code blocks are laid out is almost identical to the way some helper text will be displayed in the sidebar for users. I wanted to visualise the sidebar in use without having to create dummy helper text
As always, it’s work in progress, and I may switch this layout for an above/below placement like you suggested. Also it may be worth noting that the layout reverts to above/below on narrow viewports.
Is there going to be a way to reveal the code when it's in the sidebar so it's not clipped for the developers? Or is that not the purpose...
I've always wanted to do something like this for the university I work for. We're planning a redesign soon and this might be a great way to standardize how our team approaches web design in the future.
by Daniel Eden
Gots to have a nice back end.
10 months ago
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter