Layout scaffolding for Web apps.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 1.3 KiB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. # Viewfinder
  2. Layout scaffolding for Web apps.
  3. This library is made to avoid custom repetitive layout code.
  4. ## Usage
  5. Just import:
  6. ```tsx
  7. import * as React from 'react'
  8. import { Basic, LeftSidebar, LeftSidebarWithMenu, RightSidebarStatic } from '@tesseract-design/viewfinder'
  9. const Page: React.FC = ({
  10. avatar,
  11. fullName,
  12. }) => (
  13. <Basic.Layout
  14. brand={
  15. <a href="/">
  16. <img
  17. src="logo.svg"
  18. alt="ACME Inc."
  19. />
  20. </a>
  21. }
  22. topBarCenter={
  23. <form>
  24. <input
  25. type="search"
  26. name="q"
  27. />
  28. </form>
  29. }
  30. userLink={
  31. <a href="/profile">
  32. <img
  33. src={avatar}
  34. alt={fullName}
  35. />
  36. </a>
  37. }
  38. >
  39. <Basic.ContentContainer>
  40. Hello world!
  41. </Basic.ContentContainer>
  42. </Basic.Layout>
  43. )
  44. export default Page
  45. ```
  46. Other examples can be found in the `example` directory in the repository. Please check them out for hints
  47. on styling and using the different available layouts.
  48. The available props per layout are included as a TypeScript declarations file.
  49. ## Configuration
  50. There are CSS variables that can be declared in the parent of the `*.Layout` components
  51. (preferably `:root`) for customizing the metrics of the layout:
  52. ### `--height-topbar`
  53. Default value: `4rem`
  54. Height of the top bar widget.
  55. ### `--size-menu`
  56. Default value: `4rem`
  57. Width or height of the menu, depending on the orientation it is rendered.