Beginn mit Creative Framework deine ersten eigenen Websites zu entwickeln. Starte damit dir zu überlegen auf welche der bereitgestellten Methoden du unser Framework in deine Website integrieren willst. In diesm Abschnitt findest du alles zur Einbindung des Frameworks.
Creative Framework gibt es als zwei unterschiedliche Dateiformate. Welche der Benutzer bevorzugt bleibt Ihm überlassen. Unten finden Sie einen kurzen Text der die Formate bechreibt. Um mit Creative Framework zu starten, muss nur eine der beiden Versionen heruntergeladen werden
Du kannst Creative Framework auch unter einer CDN finden. Durch den unten angeführten Tag bindest du unser das Framework über das Web ein. Das Sylesheet ist bereits compiled und minified.
<head>
<link href="http://www.creative-puzzle.com/css" rel="stylesheet" type="text/css">
</head>
Der Creative Frame Source Code enthält ein Zip File welches die unten angeführte Ordnerstruktur enthält. Er umfasst die compilierten Files als auch die Sass Files sowie Javascript Files.
creative_framework/
├──source_code/
├── css/
├── animations
├── buttons
├── colorSystem
├── dropdown
├── fonts
├── footer
├── form
├── gridSystem
├── header
├── helper
├── links
├── master
├── tabs
├── typografie
├── sass/
├── animations
├── buttons
├── colorSystem
├── dropdown
├── fonts
├── footer
├── form
├── gridSystem
├── header
├── helper
├── links
├── master
├── tabs
├── typografie
Mit dem unten angeführten Tag können sie die heruntergeladene CSS Version ganz einfach in ihre Website einbinden. Vorsicht, je nachdem in welchem Verzeichnis sich die Creative Framework CSS Datei befindet muss der Pfad geändert werden. In Beispiel unterhalb liegt die CSS Datei im selben Verzeichnis wie die HTML Datei in der verlinkt wird. Mit / können sie tiefer in Verzeichnisse wechseln und mit ../ aus einem Verzeichnis hinaus wechseln.
<link href="creative_framework.min.css" rel="stylesheet" type="text/css">
Dieser Bereich ist nur dann relevant wenn du dich für die Sass Version des Frsmworks entschieden hast. Anstatt eines großen CSS Datei wird ein Ordner mit vielen .sass Dateien heruntergeladen der die unten angeführte Ordnerstruktur besitzt. Jede Sass Datei beinhaltet Styles für verschiedene Komponenten.
sass/
├── animations
├── buttons
├── colorSystem
├── dropdown
├── fonts
├── footer
├── form
├── gridSystem
├── header
├── helper
├── links
├── master
├── tabs
├── typografie
Eine Webseite liegt dem Browser zunächst als einfacher Text, der mit der Auszeichnungssprache HTML formatiert ist, vor. Während der Browser den Code über das Netz empfängt, verarbeitet er ihn von oben nach unten. Diese Aufgabe übernimmt der sogenannte Parser. Der Parser überführt den HTML-Code in eine Objektstruktur, die dann im Arbeitsspeicher vorgehalten wird. Diese Objektstruktur besteht aus verschachtelten Knoten, wie Elementknoten, Attributknoten und Textknoten, die in einer Baumstruktur angeordnet sind. Der Browser nutzt für alle weiteren Operationen diese Objektstruktur, nicht den HTML-Quellcode, an dem üblicherweise gearbeitet wird.