Post details

Tutorial – Creating Responsive Web Sites with Flum

Tutorial Part 1

In this tutorial we will create a responsive HTML5 website using the CSS-Framework FLUM. In four steps to your own responsive website. Difficulty: Beginner.

What is needed is an unzip utility for ZIP files, a text or HTML editor and a web browser.

Step 1 – download

Download the CSS frameworks https://www.flum-css.com/download/

Choose from the following packages:

  • Flum Basic (contains all the CSS files included themes, Reusable, prototypes, etc. For details, refer to the manual www.flum-css.com/manual)
  • Flum Prototyen (contains the HTML files and only the need CSS files)
  • Flum Slim (contains only the core files without design, suitable for users who own a CSS style have for your design or want to use.

Here we’ll choose the Flum prototypes: https://www.flum-css.com/download#ancProto.

Step 2 – installation

If this hurdle is taken, unpack the Framework at a desired location on the hard disk. This should look something like that.

tutorial image - FLUM file struktur

FLUM File Struktur

It is recommended that the root folder “Flum-Prototyes” rename. For example, in MyHomepageName or myProjectName.

Step 3 – change & adaptation

We assume that you already have a sketch or a Photoshop design for your new design. For example, a 2 -, 3 -, 4 – column layout or nested.

Based on this select a prototype. Directory .. / Flum directory / prototypes / prototype_1.html or prototype_2.html.

tutorial image - prototype 1

Screenshot Prototype 1

tutorial image - prototype 2

Screenshot Prototype 2

tutorial image - layout sketch

Layout sketch

 In our example, we take the Protoype1 file to our sketched layout replicate.

Other examples, based on Prototype 1 and 2, can be found here Download: https://www.flum-css.com/download#ancExample
 
The prototype already contains a 3-column layout. This we can modify or delete.

We open the file with an editor and prototyp2_1.html us go to the line 81

Prototype source code

Prototype source code

There, change or we will delete the code from Line 76 to 97 and add the following code:

For testing, we can insert some text. (e.g. Loreum ipsum)
Save as index.html, finished
Open the index.html with a browser. The result might look like this.

tutorial image - tutorial final layout

Final layout

Detailed information about the Flum CSS framework can be found in the manual.

Step 4 – color adjustments

The colors and fonts are managed in the theme file. This is in the directory .. /styes /themes /themeBrownGray.css

Open the theme file in your editor.

The settings of the color values they see points 1.1 to 1.9. Control in the browser finished.

tutorial image - flum theme CSS

FLUM Theme CSS – Table of Contents.

In our example, we have adjusted the backgrounds of body, header, footer, navigation and Main. The result can be seen here.
The example should not win a Design Award but only explain the simple principle.

tutorial image - responsive final design

Tutorial Final Design

So that the first part of the tutorial is completed.

Source of sample images: http://www.freeimages.com/


Leave a Reply

Your email address will not be published. Required fields are marked *

1 + fifteen =