Barebones components

Barebones is a Component library built for Vue and Nuxt with the aim of giving developers and their teams complete design freedom. You can find the docs here: Barebones documentation You can read a bit of the background behind the project below or read the full story at Dev.to: Getting started with Barebones 1. Backstory In early May of this year, I lost my job as a Lead Developer at a subscription start-up, along with all my colleagues. When I joined the company they had recently had an investment of £4m (Around $4.8m) and since then we had been beating all of our targets. We’d been beating them to the point that company had managed to agree on a deal for a further £10m investment this year. Unfortunately for those of us that worked there, the current economic climate and threat of another recession in the UK by the end of 2022 led our biggest investors to pull out last minute, this led to other investors following and the deal falling apart. The company went into Administration the next day and we all lost our jobs. 2. The idea behind Barebones After losing my job so suddenly I decided to take a little bit of time to work on some personal projects, trying to solve some of the issues that I’d come across while working at my last company. This is where the idea for Barebones was born. I wanted to create a component library that allowed developers to build applications fast without design constraints. Have access to all the types of components they’re using in almost every project, with complete design freedom. 3. How does Barebones work? Put simply, Barebones uses local configuration to map styles to component parts. But, what does that mean exactly? Well, when installing Barebones in a project you must add the local configuration files. The local configuration for each component is made up of 2 files a .parts.ts file and a .props.ts file, which work in unison map styles to component parts, component parts are the elements which make up a component. 3.1. props.ts files .props.ts files allow developers to set up props, which values can be mapped to styles for each component part. This allows developers and teams to set up their own preferred variables for styling components. 3.2. parts.ts files .parts.ts files allow developers to define style mapping keys and values for any component part based on a prop defined in .parts.ts in the components .props.ts file. 3.3. Component parts Each component element is a defined component part and can be referenced in the .parts.ts file and assigned relevant component props and values to map styles.