$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 -->
Just reference the main partial in your sass and you're ready to go!
/* import into a sass file */;
The markup portion is relatively straight forward, just include the following somewhere in the body.
<!-- insert the following markup into the body --><!-- Add Tabs -->Tab 1Tab 2Tab 3<!-- Edit the URL --><!-- Insert your content! -->YOUR AWESOME CONTENTAnd some more awesome content explaining other awesome content :D
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 -->
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:
Bundled themes include:
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 */;
If you would like to be more explicit in your theming, you can change any of the variables found within the _variables.scss file .
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.
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.