8

Ask DN: Creating personal UI Frameworks, advice please!

over 6 years ago from , Designer Developer in London

So I'm about to dive into developing a fairly complex webapp. I've designed it with modularity and consistency in mind, so there are common styles and animations, and only 3 or 4 types of repeated data representation etc. and (in my head) I have a set of pretty consistent, thorough guidelines.

I've never liked using libraries like Foundation, Bootstrap etc due to their excessive weight and my preference of making my own stuff.

So does anyone have any advice about how to set up a UI framework for this project and projects of this brand going forward?

I think I'm going to set up a SCSS library using BIM, and a number of angular directives for modular things (like buttons).

Do I do this first, or build it as I go? Any other tips from people who have done this before would be most appreciated.

13 comments

  • 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
  • Nick MNick M, over 6 years ago

    Done something similar a couple of times. What I'd suggest is building your UI components AFTER you've done your design work (wireframing, etc).

    Do a pattern inventory first, after you know what your functionality and general screen design looks like, and you will be able to keep yourself honest as you move along. I'm a big fan of combining SMACSS for my code and Brad Frost's Atomic design for UI principles. It helps to categorize your patterns and then really look at them with a discerning eye to understand the differences in behavior (which should be very very low) and look and feel (which could be higher, but you should still aim to keep low) across contexts.

    1 point
    • Sam GarsonSam Garson, over 6 years ago

      Hey Nick, I have already mocked up a large number of the states of the app, with the idea in mind of keeping the behaviour and style consistent across them, although I will check out those resources as I think I could probably get a little more clinical with ensuring the differences stay low! Cheers

      1 point
    • Sam Pierce LollaSam Pierce Lolla, over 6 years ago (edited over 6 years ago )

      This is a good point. The whole idea of roll-your-own component libraries is to tailor your UI to the unique needs of your use case.

      My first time I followed this process:

      1. built a component library
      2. tried to use the components I built to make my app UI
      3. ignored the components and built what I needed when I hit a wall
      4. built the component set I actually needed by removing the ones I never used and modularizing the extra UI I had hacked together
      1 point
  • Matthew SaforrianMatthew Saforrian, over 6 years ago (edited over 6 years ago )

    Out of curiosity, do you really feel that you can come up with something easier to maintain and less bloated then Foundation*?

    Personally, I really like the framework because you can exclude unnecessary components and make your site semantic using mixins. Moreover, it's well documented, easy to configure (see _settings.scss) and battle tested. In terms of time vs. benefit, Foundation usually wins the battle for my projects.**

    That being said, if you are going way off the ranch then maybe Foundation doesn't make sense.

    If I was rolling something from scratch, I would still use either Compass or Bourbon to ensure cross-browser compatibility. You don't want to be spending your time researching style rules to determine what needs browser prefixes. Even still, I would take a deep look at Foundation and Bootstrap to see how they built their frameworks up as a jumping off point.

    *Disclaimer: I haven't used Bootstrap in years, so only speaking to Foundation.

    **If I was building a startup I would consider rolling my own.

    1 point
    • Sam Pierce LollaSam Pierce Lolla, over 6 years ago

      I've never used Foundation, but I will say that basing my components off Bootstrap was one of the worst decisions I made. It saved a ton of time for the first two weeks and has been dragging me down ever since!

      2 points
  • Jonathan CutrellJonathan Cutrell, over 6 years ago

    I'd recommend getting very familiar with another framework and perhaps taking pieces of that framework and rolling your own from it.

    Specifically, I'd recommend taking someone else's compatibility-based things (mixins, etc) and only rolling things that are truly unique to your stuff. Leave the cruft behind.

    I've found that the bloat comes from a bunch of the stuff I don't use but still end up rewriting myself, like buttons, alerts, wells, carousel styles, etc. Take that stuff out, and set up some kind of consistent style guide. Don't go 100% either direction.

    0 points
    • Sam GarsonSam Garson, over 6 years ago

      Thanks for the reply. I've used Bourbon before and it's gone very smoothly, so I intend to continue with that to cover the compatibility stuff, and basically add on my own ui based stuff...

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

      To each his own I suppose.

      If I did this I'd waste a lot of time reading other peoples CSS and probably bloat my codebase with it. I've pulled code from Bootstrap before only to find they used a complicated abstract JS solution when all I needed was one line of CSS.

      My two cents: if you have very high CSS proficiency, just go for it solo :)

      1 point
      • Sam GarsonSam Garson, over 6 years ago

        I think we're on the same side! Bourbon is just a library of scss mixins for compatibility based stuff.

        That's exactly the reason I don't want to use Bootstrap etc, I like to think I am pretty proficient but I've never taken on a project as complex as this before, I guess I was just asking for best practices when creating your own frameworky type thing.

        1 point