Background
I created this web plugin because I wanted a cool way to display projects that I've worked on. I tinkered with different ideas and decided I wanted to have a list of circles(bubbles) that could display different project information. I also knew that I work on new projects relatively often and would be adding to the list frequently so it needed to be easily scalable.
After some Googling I wasn't able to find anything out there capable of implementing what I wanted so I decided to make it myself.
Information
This plugin can be used to make a circular list of bubbles. There are different settings for each bubble such as enlarging on click, containing text, containing images, etc...
It is scalable so once you have the list positioned and set to your liking you can add new bubbles to the list by just adding a new bubble div to the layout hierachy. The positioning of the bubbles uses polar coordinates and evenly distrubutes each bubble around a central axis in a radius you specify.
You can use this plugin having only HTML and some CSS knowledge!
I hope you good folks get some use out of it!
HOW TO USE: At the top of the bubblelist.scss file their is a list of variables that can be customised to your liking. These include circle diameters, border styles, fonts, etc...
EXAMPLE LAYOUT:
<div class="bubbleList">
<div class="bubbleContainer">
<div class="bubble">
<img class="bubbleBackgroundImage" src="path/to/image"/>
<div class="bubbleBackgroundColor">#FFFFFF</div>
<div class="bubbleBackgroundText">Background Text</div>
<div class="bubbleBanner">BANNER</div>
<div class="bubbleHeader">HEADER</div>
<div class="bubbleDescription">Some Description</div>
<div class="bubbleFooter"></div>
</div>
</div>
<div class="bubbleContainer">
<div class="nonHoverableBubble bubble">
<div class="bubbleBackgroundColor">#FFFFFF</div>
<div class="bubbleBackgroundText">Background Text</div>
</div>
</div>
<div class="bubbleContainer">
<div class="nonSelectableBubble bubble">
<div class="bubbleBackgroundText">Background Text</div>
</div>
</div>
<div class="bubbleContainer">
<div class="nonHoverableBubble nonSelectableBubble bubble">
<div class="bubbleBackgroundText">Background Text</div>
</div>
</div>
</div>CLASS DEFINITION:
REQUIRED:
You MUST include each of the following classes to create the bubble list.
bubbleList: The top parent node of the list.
bubbleContainer: The container for each bubble item.
bubble: The bubble node itself.
OPTIONAL:
Each of the following are optional. You can use each in any combination you like, but only use a tag once inside each bubble.
bubbleBackgroundImage: Use the src attribute in the img tag to set the source of the background image you want to use for the bubble.
bubbleBackgroundColor: Set the text inside this div to the hexidecimal color code you would like the bubbles background to be set as. This color affects both the base bubble, hovered, and active. If you set a background image that will cover the color, but the active bubble will still have this background color.
bubbleBackgroundText: Puts text in the front of the base and hovered bubble. If you add a banner to the bubble it will cover this text when the bubble is hovered. This text will appear in front of both the background image and/or background color you set.
bubbleBanner: The text used for the banner when the bubble is hovered.
bubbleHeader: The text used for the header when the bubble is clicked and is active.
bubbleFooter: The text used for the footer when the bubble is clicked and is active.
bubbleDescription: The text used for the description when the bubble is clicked and is active. If you use a link(e.g. 'a' node) then clicking on the link will not close the active bubble.
nonSelectableBubble: Put this class in the bubble class list if you want to disable the ability to click it and make an active bubble appear.
nonHoverableBubble: Put this class in the bubble class list if you want to disable the ability to hover it.
Note: The nonSelectableBubble and nonHoverableBubble classes can be used together to make a bubble that can be neither hovered nor clicked.