Comments on Learning from Lego: A Step Forward in Modular Web Design

30 Reader Comments

Back to the Article
  1. Awesome.  So elegantly simple!  For someone fairly new to the front end world, this seems to make perfect sense to me to use with the component driven architecture of some of today’s frameworks like Angular 2 or React.

    Copy & paste the code below to embed this comment.
  2. Wow. Excellent article. You are a genius.

    Copy & paste the code below to embed this comment.
  3. Nice article…. but I think its preaching to the converted here. In my experience it’s the designers of the page that should think about this and it would be a relief if some popular UI design programs would support and encourage this kind of thinking.

    Copy & paste the code below to embed this comment.
  4. Hi Samantha.
    Thanks for sharing your knowledge and insight with us. I want to put this to use. But the main reason I always stick to a FE framework like Bootstrap, is tested in as many browsers on as many REAL devices. Financially, and on my own, I can only do so much testing on different devices.
    So, what sort of devices was this tested on?
    (I realise that it is only padding.)

    Copy & paste the code below to embed this comment.
  5. @Samantha Zhang Thanks. I will.
    P.S. The current comment #4 (by sniya) looks like spam to me.

    Copy & paste the code below to embed this comment.
  6. I`ve stumbled upon a series of scenarios where your approach of designing grids would`ve fit so well. But still, I had to rely on heavy JS libraries, just because this is the way we`re used to building stuff. I agree that we need to shift our thinking and move from the comfort zone we`re stuck into.

    This is pure gold and probably the future!

    Happy Holidays!

    Copy & paste the code below to embed this comment.
  7. The current comment #9 (by sniyaarora) is also spam.

    Copy & paste the code below to embed this comment.
  8. Regarding backgrounds, `background-clip` would have been useful here.

    Copy & paste the code below to embed this comment.
  9. @Nexii With background-clip you would forfeit a sizable area of the background image or colour because of clipping.

    - With border-box, the image/colour would be clipped and bleed under padding and under border.
    - With padding-box, the image/colour would be clipped and bleed under padding.
    - With content-box, the image would be clipped and not bleed, but stay under the content only.

    Copy & paste the code below to embed this comment.
  10. Excellent article. Modular application design has benefits beyond flexibility. It allows you to separate different aspects of design to be worked upon and make them independent of each other. It also encourages re-use of the developed components allowing web development companies to increase profits.

    Management of such websites become easier and speedy.

    Copy & paste the code below to embed this comment.
  11. @Samantha / @moyicat Since you’re using React at Graphiq I would be really interested in your experiences (pains and gains) of this Lego-approach in combo with React.

    Did I even inspire a follow-up post? ;)

    Copy & paste the code below to embed this comment.
  12. “Instead, apply the background to a child div within the .element div:”

    Are you advocating adding additional markup purely to achieve a visual effect? Wont this lead to code bloat, and in any case, doesn’t this create an additional ‘layer’ that goes against your analogy with the bricks all being on the same level? At this point surely you’re nesting?

    Copy & paste the code below to embed this comment.
  13. I was thinking the same as Cyberi4n. You could avoid that extra div with background-origin: content-box and background-repeat: no-repeat. You would have to add padding to the elements inside though.

    I like the approach discussed in the article, I think is really clever, but it feels like there are too many divs.

    Copy & paste the code below to embed this comment.
  14. Thanks for sharing this insight, Samantha. The Pinterest example was helpful.

    Copy & paste the code below to embed this comment.
  15. Hi Samantha, Thanks for throwing light on a topic that can transform the future of designing and prove to be beneficial for all web development firms. The way you explained the whole concept is great, even the ones who are new to this world can get an insight.

    Copy & paste the code below to embed this comment.
  16. To those who are trying to troubleshoot the extra divs and background clipping… Maybe I’m thinking too simplistically, but those gutters don’t ever need a background on them, so why couldn’t we just use margins instead of padding to achieve the gutters? The top/bottom margins would collapse so you’d have to make them double the full gutter height and have a 50% negative top/bottom margin on the column containers, but then you could have the background and border be exactly where you expect it to be.

    Please tell me why my thinking is wrong, because I’m tempted to start using this right away :)

    Copy & paste the code below to embed this comment.
  17. Maybe I’m missing something here, but wouldn’t the space-between option of flexbox give me the same thing with a LOT less coding?

    Copy & paste the code below to embed this comment.
  18. @Paul d’Aoust My thought exactly, margins also work. They behave a bit differently but seem easier to use to me.

    If you use flexbox the margins don’t collapse so you can use the same values horizontally and vertically.

    I used a similar technique with margins in this Pen:
    http://codepen.io/malvese/pen/bwxXjX

    Copy & paste the code below to embed this comment.
  19. This is terrific, Samantha! Thanks for sharing!

    Copy & paste the code below to embed this comment.
  20. Still choose Bootstrap for my projects. I think it’s still the best for next years.
    Anyway, your article is really excellent!

    Copy & paste the code below to embed this comment.
  21. Really nice explained, Samantha. You kept it simple, but totally clear to understand. We also take similar approach in WONDROUS and write component based css. Btw with the scss mixin for components is this approach first step to the styleguides world ;)

    Copy & paste the code below to embed this comment.
  22. This idea is awesome!  I’ve been playing around with it and have realized some things I wanted to share.

    I wanted the pad amount rolled up into a variable that was consumed by my styles.  In other words, instead of hard coding the margin/padding to make things lego-y, I import that variable from my theme file and use it instead.  This makes it so that I can change the amount of padding from one place at any time.

    To keep myself honest and make sure that I was consistently using this variable value, I set it to randomize between 8 and 15 (I’m using styled-components so I did this with javascript, but I’m betting that you could also use a less or sas var).  Now as I refresh, the pad between my blocks changes and I can visually tell if something is trying to hard code the pad.

    Copy & paste the code below to embed this comment.
  23. Isn’t most of this much easy to do with Semantic UI? These designs he did…I’ve made related space-splitting with semantic, and it didn’t need nearly the number of code that was pasted in the samples.

    Copy & paste the code below to embed this comment.
  24. Wow Samantha - I have never thought about padding or margins like a “lego” before, I really like that idea and makes a design consistent. BIG PLUS.

    Copy & paste the code below to embed this comment.
  25. Great analogy! Truly. Implementing this style of layout works well with padding: calc(X - vw); or a simple padding:  4vw; (just an example) as well for padding that way a ratio is maintained across screen sizes/devices and it scales with size (with correct media queries in place when it becomes too large). Thoughts on that approach?

    Copy & paste the code below to embed this comment.
  26. Fine way of telling, and pleasant article to obtain facts about my presentation focus, education which i am going to present in institution of higher education.

    Copy & paste the code below to embed this comment.