Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Questions: Custom template and nav structure #70

Open
welding11 opened this issue Mar 6, 2019 · 2 comments
Open

Questions: Custom template and nav structure #70

welding11 opened this issue Mar 6, 2019 · 2 comments

Comments

@welding11
Copy link

welding11 commented Mar 6, 2019

Apologies if this is the wrong place to ask this but I am attempting to implement the style guide myself, which may I add is great so far. I have a couple of questions which I am hoping you can clear up.

  1. Creating a custom template appears to be relatively straightforward in that I have to use the template property in the options. I have copied over the templates that are originally used and am going to edit them, as far as the style guide styles, would removing the main style sheet and adding my own to the css that is copied over be sufficient? Or am I going about it the wrong way?

  2. I would like to list the entire menu as a side nav but with child components as pages, not one long page with sections. For example:

    Overview
    - Introduction
    - Getting started
    - Design Principles
    

    I would like the three sub-nav items to be sectionsOf Overview but as links to their own page. I've not
    had too much experience with .hbs, how would I go about doing this?

    I know the below isn't correct but you can see what I mean

    /**
      * @section Design Principles
      * @sectionOf Overview
      * @page Design Principles
    **/
    
    /**
      * @section Getting Started
      * @sectionOf Overview
      * @page Getting Started
    **/
    
    /**
     * @page Overview
     */
    
@straker
Copy link
Owner

straker commented Mar 6, 2019

This is a great place to ask questions.

  1. There's no wrong way to go about it, it just depends on what you're trying to do. For example, the FamilySearch Style Guide only uses a single custom handlebars template and just loads the styleguide css in the main page.

  2. It's been awhile for me, so I'm not sure off the top of my head how to do this. Testing your example it looks like it generates the 3 separate pages and the top nav

image

So it seems that all you would need to do is style the top nav as a side nav and you'd be close to what you want.

@welding11
Copy link
Author

I see, I have gone over the template again with some new found knowledge of the syntax and it all makes a lot more sense now. I didn't realise at first how the js/css was being inserted into the page with the use of partials. I can see how I can replace it all now.

As for the second part, I get what you are getting at and it could possibly work. What I had in mind was something like that but with a title section such as below:

Section A (not a page or link, simply a title)
- page 1
- page 2

Section B (not a page or link, simply a title)
- page 3
- page 4

A bit like

image

I think what you have suggested is a good start and I should be able to experiment. I can always manually do the nav in a partial. Will need to decide if it is worth the effort.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants