Dreambits Framework

Features:

  • Vanilla HTML/CSS/Javascript
  • Minimum amount of code
  • Easy change of styles and layout
  • Responsive out of the box
  • Javascript for dynamic loading of navigation, footer, pages or any element
  • Mobile menu
  • Modules (tabs, buttons, ect)

Download version 0.6 okt 2022

Een grote sprong vooruit!

Vanilla HTML/CSS/Javascript

The goal is to use as little as possible external code as possible. PLain HTML, plain CSS, plain Javascript. In the end I decided to use Modernizer, because it is very reliable, and will enable the use of the most modern techniques, while keeping cross-browser, cross-platform and backword and forward compatibility. In short: best chance the shit just works.

Minimum amount of code

Besides using as little as external code as possible, we also try to use as little as code ourselves. So there's a simple page structure, and within the page there's a simple structure to put the content in, with as much as semantic code as possible. So no endless nesting of those DIV tags. Just NAV - MAIN - FOOTER for the page, and SECTION and ARTICLE tags inside main, for the content of pages.
All semantic modern HTML5 tags that have a meaning, so you will not see only code but context as well in the code.

Easy change of style and layout

CSS Custom Properties

HTML: Visual layout will sometimes require more -or less- HTML code. If youou want a page with a sidebar, there will be needed some extra HTML code. There are different HTML templates avalable now.

One CSS file is added to the page. It will have the basic layout, as well as default colors and measures.
A lot of default colors, measures and images can be changed easy.
On top of the page there's a numer of CSS properties defined, also known as CSS variables. Set all the variables for fonts, colors, widths ect in the top of the CSS file.
You can set for colors and measures for all main elements of the page (navigation, header, main content area, sidebars, footer.)

These custom properties will effect the whole site, so, all pages. (For individual pages you can set the custom properties to an other value if you want a special page)

Create and apply your own color schemes, background images, block layout, font settings.

Besides that, there are a number of set styles in the CSS file you can use to apply on individual HTML elements in the page. For margins, padding, width, height or special cases like creating columns or to style modules.

Attribuut selectors

Lots of the CSS custom properties are connected to attribute selectors, using the data-gs- prefix. Most of the time they are more compact then classes and we find them more intuitive then the normally used classes.
Attribute selectors can be easy manupilated with Javascript, so we hope to get the most simple and compact connection between HTML, CSS and Javascript this way.

Responsive out of the box

Layout

As long as you use the templates and the CSS from the framework, you shouldn't have to correct anything for bigger or smaller screens. It should all adapt.

We use as simple as possible Flexbox and CSS Grid properties for layout, that will support all modern browsers and devices.

Fluid text

Headers and normal text will adjust to screen size. They are basically set once for the whole site on any device.

Responsive modern images

Images will scale where needed (mostly set to 100% width of their container). Also it's easy to use WebP images for greatly smaller files sizes compared to regular (jpg, png or gif) images or backgrounds.

Javascript for dynamic loading of pages and parts of any content

Load pages or part of pages to any part of the page you are on, without needing to reload the page. So, change content flawless.

To begin with, header with menu, and a footer are dynamically loaded in every page, so you will need just one (but can easily use more if needed).

Mobile menu

A responsive menu is included that will change in amobile (hamburger style) menu on small devices

Simple "modules"

Any kind of stuff that makes life easier. From two-column gadget to video player.

Look at the block at the top of the page: Text on the left side, image on the right. It can be achieved bij adding an attribute selector to an article within a section: data-gs-twocol. On smaller screens, the columns will dissapear and the content will be stacked.