Gateway Styleguide

8 Responses

  1. Daniel Eden Daniel 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.

    about 1 year ago

  2. Mike Stezycki Mike Stezycki

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

    about 1 year ago

  3. Eli Schiff Eli Schiff

    I can't wait to try this.

    about 1 year ago

  4. Kyle Decker Kyle Decker

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

    likes

    about 1 year ago

  5. Adam Whitcroft 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?

    about 1 year ago

  6. Daniel Eden Daniel 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.

    about 1 year ago

  7. Steven Reynolds 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.

    about 1 year ago

  8. about 1 year ago

keyboard shortcuts: previous shot next shot L or F like