Get Started

Start developing your first websites with Creative Framework. Start thinking about which of the provided methods you want to integrate our framework into your website. In this section you will find everything you need to include the framework.



Download

Creative Framework comes in two different file formats. Which of the user's preferences is left to him/her. Below is a short text describing the formats. To start with Creative Framework, you only need to download one of the two versions.

Creative Framework

Creative Sass


CDN

You can also find Creative Framework on a CDN. Through the tag below, you integrate our framework over the web. The stylesheet is already compiled and minified.

<head>
    <link href="http://www.creative-puzzle.com/css" rel="stylesheet" type="text/css">
</head>

Source Code

The Creative Framework source code contains a zip file which includes the folder structure listed below. It includes the compiled files as well as the sass files and javascript files.

creative_framework/
&#9500;&#9472;&#9472; dist/
&#9474; &#9500;&#9472;&#9472; css/
&#9474; &#9492;&#9472;&#9472; js/
&#9500;&#9472;&#9472; html/
&#9474; &#9492;&#9472;&#9472; templates/
&#9500;&#9472;&#9472; js/
&#9492;&#9472;&#9472; scss/

Include CSS

With the tag below you can easily integrate the downloaded CSS version into your website. Caution, depending on the directory in which the Creative Framework CSS file is located, the path must be changed. In the example below, the CSS file is located in the same directory as the HTML file that is linked to it. With ' / ' you can change deeper into directories and with ' ../ ' you can change from a directory.

<link href="creative_framework.min.css" rel="stylesheet" type="text/css">

Sass compiling

This area is only relevant if you have chosen the Sass version of the framework. Instead of a large CSS file, a folder with many .sass files is downloaded that has the folder structure listed below. Each Sass file contains styles for different components.

sass/
&#9500;&#9472;&#9472; colors
&#9500;&#9472;&#9472; gridSystem
&#9500;&#9472;&#9472; helper
&#9500;&#9472;&#9472; header
&#9500;&#9472;&#9472; footer
&#9500;&#9472;&#9472; buttons
&#9500;&#9472;&#9472; forms
&#9500;&#9472;&#9472; typografie
&#9500;&#9472;&#9472; master

DOM

A web page is initially presented to the browser as a simple text formatted with the markup language HTML. While the browser receives the code via the network, it processes it from top to bottom. This task is performed by the so-called parser. The parser converts the HTML code into an object structure, which is then stored in the working memory. This object structure consists of nested nodes, such as element nodes, attribute nodes, and text nodes arranged in a tree structure. The browser uses this object structure for all further operations, not the HTML source code that is usually used.

Document Object Model Abbildung