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
- Bitbucket repo: nuxt-frontstreet-starter – Starter layout and navigation using the Frontstreet.io framework with Nuxt.
Nuxt starter project with Bulma
- Bitbucket repo: nuxt-bulma-starter – 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.