Gateway Styleguide

8 Responses

1. Dan Eden

   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.

   Full view.

   3 months ago

2. Pro Mike Stezycki

   Beautiful work Dan! I love how you display the code to the right of the example. Top stuff, sir.

   3 months ago

3. Pro Eli Schiff

   I can't wait to try this.

   3 months ago

4. Kyle Decker

   Going to start using the 'butt' class for buttons now, thanks.

   1likes

   3 months ago

5. Adam Whitcroft

   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?

   3 months ago

6. Dan Eden

   @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.

   3 months ago

7. Steven Reynolds

   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.

   3 months ago

8. Gateway Admin Gots to have a nice back end.

   Rebound

   Gateway Admin

   by Dan Eden

   Gots to have a nice back end.

   • 20
   • 5
   • 590

   3 months ago