BZEROB.COM

 Code Details

Putting It All Together

The basics and a small set of tools and resources gets the job done. Each project has a handfull of design elements that have been contributed from a variety of sources.
SITE DESIGN
How the projects evolve

Building on the basics

Assembling the Pieces

Writing the code is one thing. Getting the code right and validated to the ever evolving standards is another. Then you throw in the twists and turns of the constantly expanding list of browser engines and online devices you have your work cut out for you. With that accomplished it plays nicely in most browsers and allows the sites to scale nicely on all devices especially the smaller devices such as tablets and phones which now make up a large share of the viewing devices.


Code Authoring

Writing The Code

Code Editors

MS Visual Studio Code / code.visualstudio.com - Code editing, redefined - Edit and debug apps on any OS - Built-in Git support - 4000+ extensions - Free and open-source


Notepad ++ / notepad-plus-plus.org - an open-source code editor and Notepad replacement that supports several languages. Based on the powerful editing component Scintilla, Notepad++ is written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size.

Code Frameworks

Giving It Some Structure

CSS Frameworks

Bass CSS 8.0.2 / basscss.com - Lightning fast modular CSS with no side effects.


Ace CSS / github.com/basscss/ace - Full-featured Bass CSS package for web apps. Ace CSS contains the core Bass modules and several addons for use in larger web apps.

Scripting Frameworks

jQuery / jquery.com - is an open-source cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It is the most popular JavaScript library in use today.

DESIGN ADD-ONS

Giving It Personality

The web is full of resources to help you with your designs. And these are a few features I have used in my designs. I have tried to keep them simple and at a minimum. But that doesn't mean you have to side-step them altogether.

Fonts

Bebas Neue - dafont.com/bebas-neue.font - BEBAS NEUE is a sans serif font family based on the original Bebas Neue free font by Ryoichi Tsunekawa. It has grown in popularity and become something like the "Helvetica of the free fonts".


Roboto - dafont.com/roboto.font - ROBOTO has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.


Roadway Regular - dafont.com/roadway.font - ROADWAY is based on U.S. highway lettering seen on New York street signs in February 2005. Two weights of highway lettering would often be used in the same street sign, a standard condensed version used for the main name and a half-size regular for less important information like ‘road’ or ‘street’.


Fontello - Icon font generator - This tool lets you combine icon webfonts for your own project.

CSS3 /JS Features

Snow Script - codepen.io/massiebn/pen/vmkwJ- Snowstorm is a JavaScript-driven snow effect that can be easily added to web pages. A single JS file provides the functionality required. No images are used for the snow effect.


CSS3 Corner Ribbons - codepen.io/renduh/pen/EZVxza- A selection of ribbon corners for cards. They're ideal for adding REDUCED or ON SALE type messages to products for instance. There is repeated code in the various different ribbon css classes but that makes it easier to copy a certain style.


CSS3 Image Gallery Filter - codepen.io/dennisgarrn/pen/EuCBv- A simple CSS3 fade filter for an image gallery. Fades out the unselected image groups.

jQuery Features

Some of the picture galleries take advantage of the jQuery features.