cityofnewyork / access-nyc-patterns Goto Github PK

The separation between the section header (in this case "Buttons") and the first example/demo (in this case "Base Styling") is unclear. Implementing something similar to the section divider on the About page (below) is one option.

Up to 959px the layout has a left and right-margin (as pictured below):

At 960px the layout no longer has this margin (as pictured below) and the layout looks broken/messy:

Integrating the library into Rails breaks at @import 'tailwind'; The reason is because Rails asset pipeline doesn't look into config folder. Possible solution would be to move tailwind.js into vendor or assets.js?

I'm not sure what link I need to provide in order to import the color and icon utilities.

https://cityofnewyork.github.io/ACCESS-NYC-PATTERNS/colors
https://cityofnewyork.github.io/ACCESS-NYC-PATTERNS/icons

imply that the name of these dependencies could be imported with
'access-nyc-patterns/src/utilities/color-components' and 'access-nyc-patterns/src/utilities/icons/icons-program-category', but these are not the correct import paths for these patterns.

Can you specify how to import these patterns?

Might be helpful to provide links to where the elements, components, and objects are being used on ACCESS NYC. To see it in action!

Overlap from 758px - 1098px

Mobile nav demo doesn't display at 960px breakpoint:

Up to 960px, demo displays but the code snippet isn't fully in view.

Separating out the H1..H5 tag code snippets or preceding the examples with "Hx" will help clarify which heading belongs to which code snippets at first glance.

1. If the code snippet is multiline, it looks very crowded. Ideally in this case, it should break into a new line
2. Add more spacing between the code snippet and it's respective title (in most cases this would be fixed by breaking into a new line)

Loading the ACCESS_NYC_PATTERNS library into rails application break on @import 'components/header/header'; The error states Invalid CSS after "...typography-h1()": expected "}", was "margin-bottom: ..."