CodePills:

A super simple way of displaying tech 'brands' in pill form.
Made to look good and be customisable.

Default:

With no arguments, Codepills will output all available pills with no styling attached.

Example:

createBrandPills()

Generates:

Options and Config

Configuring pills is simple, the createBrandPills function takes three arguments.

1. HTMLElement you wish the Pills to be inserted into.
2. ( Optional ) - An array of brand names you'd like to display
3. ( Optional ) - Options to configure CodePills with a variety of options!

createBrandPills(ArrayOfBrands, OptionsObject)

ArrayOfBrands

The first argument for createBrandPills is an array of strings. The strings should each be a brand name. For example "html5" or "css".

const arrayofBrands = ['vuejs','digitalocean','vite','gatsby','tailwindcss','netlify','php']

If an empty array is passed as the first argument, createBrandPills will return the full list of Pills. Useful for debugging.

OptionsObject

The second argument, is an Object with the following OPTIONAL attributes

By combining options together, you can truly customise CodePills to your project.

Property	Description	Type	Default	Supported Values
Rounded	Apply rounded corners to the pills	Boolean	false	true,false
Spacing	Set the margin around each item	String	'small'	'small', 'medium', 'large'
Alignment	Set the alignment of the items	String	'left'	'left', 'center', 'centre', 'large'
IconsEnabled	Display icons in the pills?	Boolean	true	true, false
Outline	Display Outlined Styling	Boolean	false	true, false
Links	Enable linking to brand homepage, if exists	Boolean	false	true, false
Text	Enable Human Readable text in the pill.	Boolean	true	true, false
Random	Enable Random Sorting On Items	Boolean	false	true, false
Animation	Pass a string to enable animations on creation	String	null	'fade'
Gradient	Enable gradients on items	Boolean	false	true, false

Specific list:

Passing in an array of strings to Codepills will generate pills based on that array.

Example:

const exampleBrands = ['vuejs', 'digitalocean', 'vite', 'gatsby', 'tailwindcss', 'netlify', 'php']
  createBrandPills(HTMLElement, exampleBrands)

Generates:

Rounded list:

You may enable, rounding, by passing the second argument as true. Default is false.

Example:

createBrandPills([], {rounded: true})

Generates:

Spacing Example:

Spacing changes the spacing between each item. It may be 'small', 'medium', or 'large'

Example:

createBrandPills(HTMLElement, [],{ spacing: 'large'})

Generates:

Alignment Example:

Alignment changes the alignment of the container for the pills.
It may be 'left', 'center', 'centre', or 'right'

These examples, all use a predefined array of brand names, to simplify the demo.

Example 1:

createBrandPills(HTMLElement, exampleArrayBrands,{ alignment: 'left'})

Generates:

Example 2:

createBrandPills(HTMLElement, exampleArrayBrands,{ alignment: 'centre'})

Generates:

Example 3:

createBrandPills(HTMLElement, exampleArrayBrands,{ alignment: 'right'})

Generates:

IconsEnabled Example:

You can enable or disable the icons, by setting the IconsEnabled attribute.

Example:

createBrandPills(HTMLElement, [], { iconsEnabled: false})

Generates:

Outline Example:

You can enable or outlines, by setting the outline attribute.

Example:

createBrandPills(HTMLElement, [], { outline: true})

Generates:

Link Example:

You can enable or disable links.
If available. They will open in a new tab.

Example:

createBrandPills(HTMLElement, [], { links: true})

Generates:

Text Example:

You can enable or text. If disabled, text will not show in the pip.

If you disable text and also disable Icons - text will be output to ensure items are not empty.

Example:

createBrandPills(HTMLElement, [], { text: false})

Generates:

Random Example:

Enabling Random will shuffle the Pills in a random order.

Example:

createBrandPills(HTMLElement, [], { random: true})

Generates:

Animations Example: - Fade

Setting the value to a valid Animation type ( found in attribute table ) will apply that animation to the items.

Example:

createBrandPills(HTMLElement, [], { animation: 'fade'})

Generates:

Gradient Example

Enabling gradients will add a subtle gradient to each pill

Example:

createBrandPills(HTMLElement, [], { gradient: true})

Generates: