TWE: Dev: Design System: Create Grid System

[kristindailey]

Dependencies

• TWE Design System Components: Grid System #415

Overview

We need to create Design System Grid System Component HTML and SASS / connect Figma design to finished code, and build microsite page so that developers can see and easily change component examples, states, code and location.

Assumptions

• You have read the CONTRIBUTING.md in the Design System repo
  • You have set up your development environment for working with the Internship Design System Repository: https://github.com/hackforla/internship-website-design-system
  • You will continue to follow the instructions in CONTRIBUTING.md file

Action Items

• Review the Microsite page mockup you will be working from (Resource 1.01)
• Name the Branch you create Grid System
• Determine if any JS or CSS hacks need to be included to style this component (see Resource 1.02 for examples of prior hacks). If you need to use a hack, don't forget to update the examples.
• Include necessary files in the /docs folder (Resource 1.03) and project config file mkdocs.yml (Resource 1.04)
• Determine what variables are needed for this component and add them to variables.scss (Resource 1.05)
• Code Microsite component page
  • file locations
    • md file goes into the /docs folder (Resource 1.03)
    • SASS file goes into the /docs/components/sass/components folder (Resource 1.06)
  • Create variables in sass sheet as necessary, add color varialbles with name determined by HTML Color Codes (Resource 1.07, 1.08)
  • Create component classes and states within the page
  • Include Files via code snippets to create the code section (see Resource 1.09 for details)
  • Add links to SASS and Markdown files below the code (see examples in Resource 1.10)
• Review template frontend for errors
• Make a PR
• Once PR is merged
  • connect component in Figma to GitHub Files (Resource 1.10)
  • Add links to Resources gathered during the completion of this issue section
    • 2.01 MD file(s) created
    • 2.02 SASS file(s) created
    • 2.03 link to Header Microsite page on live site: If the site is live when this issue is worked on.

Resources

Resources for working on this issue

• 1.01 Design Reference
  • Figma, Grid System Microsite page
  • Design Systems Figma
• 1.02 WIKI: Design system microsite JavaScript and sass hacks
• 1.03 MKdocs folder: /docs on repo
• 1.04 MDdocs config file: mkdocs.yml on repo
• 1.05 variables file: /docs/components/sass/abstracts/_variables.scss on repo
• 1.06 SASS file folder: /docs/components/sass/components
• 1.07 Variables SASS Sheet: /docs/components/sass/abstracts/variables.sss
• 1.08 HTML Color Code Names: HTMLColorCodes.com
• 1.09 WIKI: How to Create a Design System Microsite Page using Snippets
• 1.10 e.g.,
  • below the CSS tab, it would say CSS: https://github.com/hackforla/internship-website-design-system/blob/main/docs/components/sass/components/_Grid.scss
  • below the HTML tab it would say HTML: https://github.com/hackforla/internship-website-design-system/blob/main/docs/Grid.md
• 1.11 Connect component in Figma to GitHub Files
• 1.12 Original Design Issue: TWE Design System Components: Grid System #415
  • Microsite Epic Issue with list of design issues: #Develop Design System Microsite based on Material for MKDocs #455 (comment)

Resources gathered during the completion of this issue

• 2.01 MD file(s) created: [Grid.md] - link the name to the file in the repo
• 2.02 SASS file(s) created: [Grid.scss] - link the name to the file in the repo
• 2.03 link to Header Microsite page on live site: [Grid](Replace with - link to the live URL If the site is live when this issue is worked on.