BlogFebruary 2019

Using starter layouts to learn and enhance your workflow

author
By Todd Wilson

I found a few patterns in front-end development that are extremely useful to have around in the form of a “starter” layouts or templates. Similarly, I’ve found common libraries like Bootstrap with WordPress layout builders to also be quite effective in building out site designs.

Here are two customizable front-end frameworks that I’ve been working with recently, so I created a few starter layouts using Nuxt. Here are the two open-source repos as an example:

Nuxt starter project with ThemeBlvd/frontstreet

  • – Starter layout and navigation using the Frontstreet.io framework with Nuxt.

Nuxt starter project with Bulma

  • Bulma starter layout with Nuxt which includes a navigation bar and “about” page example.

Exploring Common Layout Patterns

When I explore a new front-end framework, I find it helpful to review existing examples and begin by using the layout and components. Reviewing how the responsive breakpoints are handled with various elements on the page as a mobile-first approach.

This way, you can get familiar with how the essential element styling and building components will come together. When you have another project come up that matches those set of libraries (or preferences), you can begin rapid prototyping and configuration.

I hope you find these open-source repos useful in learning or help in building out your next site or project using Nuxt.

bulma, front-end, frontstreet, nuxtjs, vuejs
logoCreated with Sketch.

Secure, Fast Browsing with Brave Rewards

Help support content creators and earn rewards by opting into privacy-respecting ads. We're now a verified Brave Creator that can receive tips.