Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


1.0.4 • Public • Published

Official Site: http://thefreshvince.github.io/candy-browser

$npm install candybrowser


An HTML5, CSS3, and JS (optional) content frame used to display portfolio pieces. (examples)

Screenshots of browsers suuuuuuuck! They detract from the feel of the site and the content held. Here are some reasons why a non graphic version of a web browser is a great solution:

  • Gives the ability to animate specific parts
  • Doesn't lose resolution when blown up or sized down
  • Theme it to fit whichever project's style, thus not detracting


To get candybrowser working on your website, simply:

  • Download the files (npm install candybrowser)
  • Include the css or import the sass
  • Include the html
  • Include the js (optional for tab switching)


Include the css in the head.

  <!-- Include the stylesheet in the head -->
  <link rel="stylesheet" href="path/to/candybrowser.css">


Just reference the main partial in your sass and you're ready to go!

/* import into a sass file */
@import '.../dist/sass/candybrowser/main';


The markup portion is relatively straight forward, just include the following somewhere in the body.

<!-- insert the following markup into the body -->
<article class="cb__window">
  <header class="cb__header">
    <div class="cb__decorative-buttons">
      <span class="cb__close"></span>
      <span class="cb__minify"></span>
      <span class="cb__fullscreen"></span>
    <nav class="cb__tabs">
      <!-- Add Tabs -->
      <a href="#tab1" class="cb__tab">Tab 1</a>
      <a href="#tab2" class="cb__tab">Tab 2</a>
      <a href="#tab3" class="cb__tab">Tab 3</a>
    <div class="cb__nav">
      <div class="cb__buttons">
        <a href="#back" class="cb__back"></a>
        <a href="#forward" class="cb__forward"></a>
        <a href="#refresh" class="cb__refresh"></a>
      <!-- Edit the URL -->
      <input type="text"
             value="&#128196; http://yoursite.com"
             readonly />
  <div class="cb__body">
    <div class="cb__content">
      <!-- Insert your content! -->
      <p>And some more awesome content explaining other awesome content :D</p>
  <footer class="cb__footer">


The correlation between a tab and its content is made through the id/class of the content area and the tabs href. So href="#tab1" will show the element with id="tab1" or class="tab1".

  <!-- Right before the closing body tag -->
  <script src="path/to/candybrowser.css" charset="utf-8"></script> 


Changing the theme of a window is just a matter of adding the class "cb__window--THEMENAME" where THEMENAME is the name of a/your theme:

If you've included the js, you can switch between themes along with the tabs by specifying the "data-theme" attribute like this:

<a href="#theme" data-theme="THEME" class="cb__tab">THEME</a>

Bundled themes include:

  • default
  • purple
  • blue
  • green
  • orange

Sass Theming

To create a quickly coated browser, you can add your theme name and base color to the $cb-themes map. Then you can simply use it by implementing the .cb__window--THEME on your .cb__window .

/* Found in the /dist/scss/candybrowser/_variables.scss */
$cb-themes: (

If you would like to be more explicit in your theming, you can change any of the variables found within the _variables.scss file .

CSS Theming

if you would rather use css, you can extract the class definitions from within /dist/scss/candybrowser/_themes.scss and change the values on a per property basis.

  background-color: #f00;
  border-color: #f00;
  color: #fff;
  background: #0f0;
  border: 1px solid #f00;
.cb__window.cb__window--THEME .cb__tab,
.cb__window.cb__window--THEME .cb__back,
.cb__window.cb__window--THEME .cb__forward,
.cb__window.cb__window--THEME .cb__refresh{
  color: #0f0;
  border: none;
.cb__window.cb__window--THEME .cb__tabs:before{
  box-shadow: inset 0 1px 0px 0px #0f0;
.cb__window.cb__window--THEME .cb__tab{
  background: #eee;
.cb__window.cb__window--THEME .cb__tab--current,
.cb__window.cb__window--THEME .cb__tab:hover{
  background: #fff;
.cb__window.cb__window--THEME .cb__nav{
  background: #fff;
  border-color: #f00;
.cb__window.cb__window--THEME .cb__close:before.cb__minify:before,
.cb__window.cb__window--THEME .cb__fullscreen:before{
  border-color: #0f0;
  background: #f00;
.cb__window.cb__window--THEME .cb__body{
  color: #0f0;
.cb__window.cb__window--THEME *::selection {
  background: #0f0;
  color: #fff;
.cb__window.cb__window--THEME *::-moz-selection {
  background: #0f0;
  color: #fff;
.cb__window.cb__window--THEME *::-webkit-selection {
  background: #0f0;
  color: #fff;


There aren't many options out of the box however there are a few class modifiers:

.cb__body--no-height on the .cb__body

This will allow your content to grow and expand the candybrowser. Otherwise it will be constrained to a set aspect ratio of 1.5 .

.cb__body--scrollable on the .cb__body

If your content is larger than the frame but you would like to keep its aspect ratio, add this class which will add scrollbars to the content area.




npm i candybrowser

DownloadsWeekly Downloads






Last publish


  • avatar