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

1.10 Bedrock Docs - Add a guide on how to style the style guide to your specific project #201

Open
Wolfr opened this Issue May 20, 2018 · 5 comments

Comments

Projects
None yet
1 participant
@Wolfr
Contributor

Wolfr commented May 20, 2018

No description provided.

@Wolfr Wolfr referenced this issue May 20, 2018

Closed

Clean up styleguide styling logic #197

3 of 3 tasks complete
@Wolfr

This comment has been minimized.

Contributor

Wolfr commented Jun 9, 2018

Basically you need to set up variables according to your project's CSS.

Here is an example:

    //-
        Styleguide styling
        In this file, insert the classes that you use for buttons, headings and
        lists to make your styleguide styled by your project's styles. Meta, right?
    
    //- 
        Styleguide classes - Buttons
        Style buttons like your project's buttons. Enter a class here, like "btn" depending on your project
    - var styleguideButtonClass = "c-button"

    //-
        Styleguide classes - Headings
        Style headings in styleguide like your project's headings.
        Enter a class here, like "h3", depending on your project.

    //- Class for brand on top left of style guide, usually needs to be a bit smaller, e.g. h4
    - var styleguideBrandClass = "c-h4"

    //-
        Class for the bigger title on top of content of component page of style guide,
        usually needs to be a bit bigger, e.g. h2
    - var styleguideComponentGroupHeaderClass = "c-h2"

    //-
        Class for the title on top of each component sample
        usually needs to be one level smaller than the previous one, e.g. h3
    - var styleguideSampleHeadingClass = "c-h3"
    - var styleguideComponentListingCategoryClass = "c-h3"


    //-
        Class for the navigation holder
        * usually empty/unncessary, unless you use convoluted markup ;)
        * you might also put a class here that “activates rich content” for a bulleted list
    - var styleguideNavigationHolderClass = ""

    //-
        Class for rich text above each sample, and for general docs introductions using rich text
        * if you use a CSS system where you only activate “rich content” with a specific class put it here
    - var styleguideRichContentClass = "c-content"

    //-
        Class for the styleguide nav list title
        usually something small like h4
    - var styleguideNavListTitleClass = "c-h4 u-spacer-top"

    //-
        Class for the styleguide nav list itself

    - var styleguideNavListClass = "c-bordered-list"

    - var styleguideNavListItemActiveClass = ""
    - var styleguideNavListItemClass = ""

    - var styleguideNavListItemLinkClass = ""
    - var styleguideNavListItemLinkActiveClass = ""
@Wolfr

This comment has been minimized.

Contributor

Wolfr commented Jun 9, 2018

This should be tested and improved upon. Then we can add it to the docs on the website.

@Wolfr

This comment has been minimized.

Contributor

Wolfr commented Jun 10, 2018

There could be an article

Making your own Bedrock base

  • Decide your config
  • Do some basic documentation of your components
  • Set up styles

@Wolfr Wolfr self-assigned this Jun 13, 2018

@Wolfr Wolfr changed the title from Add a guide on how to style the style guide to your specific project to 1.10 Docs - Add a guide on how to style the style guide to your specific project Jun 15, 2018

@Wolfr

This comment has been minimized.

Contributor

Wolfr commented Jun 20, 2018

Here's a text that we need to add to the website,

text needs to be combined with the existing text at https://bedrockapp.org/documentation/styling-the-style-guide/

Styling the styleguide

Here's the problem: bedrock supports any kind of CSS, but as framework author we have no idea whether

  • You are using a CSS reset or normalize
  • Whether you have spacing on your headings by default or that they need a class
  • Whether your button styling is appropriate for style guide purposes

So, when creating a custom Bedrock install we asks you to customize Bedrock according to your needs.

We will create a small tutorial video that shows how to set up a custom Bedrock base at some point.

Basically it involves entering the right CSS classes into variables, and then maybe doing some additional styling based on your CSS by adding additional styles to styleguide.css.

This way, you keep your base CSS clean and devoid of any styles that are necessary for the “correct” display in Bedrock.

@Wolfr

This comment has been minimized.

Contributor

Wolfr commented Jun 28, 2018

Revised text

Styling the styleguide

Here's the problem: Bedrock supports any kind of CSS, but as a framework author we have no idea whether

  • You are using a CSS reset or normalize
  • Whether you have spacing on your headings by default or that they need a class to get styling
  • Whether your button styling is appropriate for style guide purposes

When creating a Bedrock prototype you can add some classes to easily style the style guide depending on your project's needs.
Basically it involves entering the right CSS classes into variables, and then maybe doing some additional styling based on your CSS by adding additional styles to styleguide.css (depending on how your code works).

This way, you keep your base CSS clean and devoid of any styles that are necessary for the “correct” display in Bedrock.

@Wolfr Wolfr changed the title from 1.10 Docs - Add a guide on how to style the style guide to your specific project to 1.10 Bedrock Docs - Add a guide on how to style the style guide to your specific project Jun 28, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment