Build email template

[addania]

PR: https://github.com/namjul/gumption-ui/pull/2

---

Description: Build the first email template according to: https://dribbble.com/shots/3032303-Desktop-Email-Client-Concept

Other link for inspiration: https://dribbble.com/search/email%20client http://react.pixelstrap.com/endless/email-app/emailDefault

Tasklist:

• [ ] Build the layout
• [ ] Style the template
• [ ] Use quark (box, link)

Questions:

• [x] How to start a project like this? Some tips? Start with static page, or with component logic, strucure?
• [x] Can we use https://fontawesome.com/ or https://materializecss.com/icons.html ?
• [x] Can we use flex box to position items instead of bootstrap grid?

Questions - Part 2 :)

• [ ] should I re-create all the functionality of this page? clickable buttons, submenus with redirects, etc?
• [ ] why elements like, path, navigation icons, etc are ul, li tags (in original page)?
• [ ] should icons be buttons or a tags?
• [ ] if I import fontawesome to project, do I also need to npm install it (I did not yet)? or do I need to add it to dependencies in package.json? or is this done automatically?
• [ ] should we think about theming entire thing in one place, rather then having individual (for example color) styles on each element?
• [ ] should we think of how data will be provided? like list of emails, user info (name, pic) etc? Or these will be hard-coded for now?

[namjul]

How to start a project like this? Some tips? Start with static page, or with component logic, strucure?

The important step is to identify the UI hierarchy, so you ask yourself "what kind of component is this little section here" and they generally will fall into certain groups. You can layout components and primitives/general components and then you can the more specific ones. These can be further categorized into "data entry" and "data display" components. And even further navigation, feedback components.

But just start somewhere and don't overanalyse. Just go with the flow and you will discover the proper boundaries.

Can we use flex box to position items instead of bootstrap grid?

Yes you can create a Flex component with

const Flex = quark('div', { baseStyle: { display: 'flex'})`

// it like
<Flex css={{ justifyContent: 'center' }}>
      <quark.a>a link</quark.a>
      <quark.div>my div</quark.div>
      <quark.p>my p</quark.p>
</Flex>

Can we use https://fontawesome.com/ or https://materializecss.com/icons.html ?

Sure and https://react-icons.netlify.com/ is also an option