From the course: Learning Responsive Web Design in the Browser

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Modularize the design

Modularize the design - WordPress Tutorial

From the course: Learning Responsive Web Design in the Browser

Start my 1-month free trial

Modularize the design

“

- [Voiceover] There's one more step I like to take before diving into the actual design in the browser. Modularizing the design. What I mean by this is identifying individual modules, or main areas, within my layouts and making sure they're treated as individual units. There are many other names and approaches for this process. The most talked about right now is Brad Frost's Atomic Design which breaks apart all the elements of a view into atoms, molecules, organisms, templates and pages. In modularizing your design, you're basically grouping together atoms and molecules to identify organisms. To give you a practical example, if you look at my website at MOR10.COM, you can quickly identify some modules. At the top, we have the header module which has three sub-modules. The site icon in the top left-hand corner, the title and description module, and the menu. In the main index area, we have a post module repeated over and over for each post. And within that module, we have the featured…

Contents