Ask DN: Creating personal UI Frameworks, advice please!

over 6 years ago from Sam Garson, Designer Developer in London

  • Paul BestPaul Best, over 6 years ago (edited over 6 years ago )

    One requirement that is non-negotiable....it MUST be modular. Which tools or platforms you want to use depend on what you know, the needs of the projects, technical requirements.

    Foundation is great for pulling together things on the fly. However, "Foundation" and "Bootstrap" are style systems. It sounds like Sam wants is a way to create his own style system. We can discuss the motivations for this task in another thread, but as a designer who works with code, you don't need to convince me of the merits.

    You should boil down the project into a list of finite "things" that need to be addressed in your style system. Read this article for a starting point: https://medium.com/@paulbest88/deliver-web-projects-faster-with-a-style-system-2f8e90ca55f

    Here is a sample structure for your project: app folder/identity/ --colors/ --typography/ --iconography/ layout/ --grid/ --header/ --sidebar/ --content-areas/ --footer/ patterns/ --buttons/ --forms/ --modal/ --pagination/ --navigation/ --tables/ --tabs/ --etc/ print/ --print-styles/ utility/ --normalize/ --polyfill/ --animation/

    I suggest putting both your SASS partials and and required Javascript written as modules in each folder, rather than splitting them out.

    9 points
    • Sam GarsonSam Garson, over 6 years ago

      Thanks for the indepthness (?) of your reply. I came from branding so I'm pretty comfortable with style guides in terms of an identity, but this is slightly more on the technical side as I want to bring in layout based stuff.

      That looks like a good system, if anything covering too many bases for this project, but it's a great start!

      I also read recently something which advised using feature based organisation over language based (i.e. put scss, js, partials, etc in the same folder relevant to what they concern, rather than a dir for each language) and I like that idea—especially putting js which concerns forms in which the scss which does the same. Will give it a go, thanks!

      0 points
    • Sam Pierce LollaSam Pierce Lolla, over 6 years ago

      That directory structure looks good.

      But I would put the media queries (for print, small screens, etc) for each component in the main file for that component.

      For ex, I prefer to edit button print styles right at the bottom of /button.scss rather than /print.scss or /print/button.scss

      0 points