Documentation

General

FLUM in version 2.x has been developed after the mobile-first principle. The great advantage of websites are on the mobile devices performant because the source code for the desktop output is not loaded.

The FLUM 2 Basic package contains prototypes and some examples. Additional and optional some CSS files [Theme, buttons, etc.]. These files can of course be extended, changed, replaced or omitted.
For a pure responsive layout aftern the 'mobile-first-principle', only two files needed, the base.css and mediaQueries.css file. These files you found in the FLUM Slim Version.

Structur

Current Version | Mobile-First

FLUM V.2 Basic CSS Structur / Files
  • styles | standard stylesheet folder
    flumStyles.css | CSS loader for the fluid colum layout
  • base
    base.css | CSS basic settings
    mediaQueriesFlum.css | media queries
  • layout
    layoutFlum.css | CSS settings for fluid layout
  • nav | some example Navigations
    navMain.css | CSS settings for navigation
  • themes
    themeGray.css | CSS settings for screen
  • reusable
    boxes.css | CSS settings for special boxes
    buttons.css | some buttons examples
    fexibleContentElements.css | CSS settings for FCE's
    fexibleContentElements_mini.css | compress
    gradientColors_mini.css | compress
    multicol.css | some buttons examples
    table.css | CSS for responsive tables
  • fonts
    Font files | folder for own fonts
    [FLUM use the open icon font Awesome]
  • print
    print.css | CSS settings for print
    [FLUM use the open icon font Awesome]
  • external
    .css | CSS for external extensions
  • special
    .css | CSS for additional / future ...
FLUM Slim Version 2 | Files
  • base_mini.css
  • base_mini.css.gz
  • mediaQueriesFlum.css
  • Examples for Apple Touch Icon.
  • jquery-1.9.1.min.js
  • modernizr-2.6.2-respond-1.1.0.min.js

Old Version | Graceful-Degration

FLUM V.1 Basic CSS Structur
  • styles | standard stylesheet folder
    fluidcol.css | CSS loader for the fluid colum layout
    gridcol.css | CSS loader for the grid 12/16/24 colum layout
  • basic
    reset.css | Browser setting reset
    basic.css | CSS basic settings
    baseFluid.css | CSS settings for fluid coloums
    baseGrid.css | CSS settings for grid coloums
    mediaQueries.css | CSS settings for media queries
  • layout
    layoutFluidcol.css | CSS settings for individual
    layoutGridcol.css | CSS settings for grid layout
    layoutFullpage.css | CSS settings for fullpage layout
  • navigation
    nav.css | CSS settings for navigation
  • themes
    themeGray.css | CSS settings for screen
    [only gray theme is included in the basic version]
  • reusable
    reusable.css | CSS for re-usable styles e.g. buttons, colors, FCE
  • fonts
    Font files | folder for own fonts
    [FLUM use the open icon font Awesome]
  • special
    .css | CSS for individual extensions or ...
  • external
    .css | CSS for external extensions
FLUM Slim Version V.1
  • fluidcolslim.css | fluid colum CSS
    [incl. reset, baseFluid, needed from basic, layoutFluidcol, nav and mediaQueries.]
  • gridcolslim.css | grid colum CSS (12/16/24)
    [incl. reset, baseGrid, needed from basic, layoutGridcol, nav and mediaQueries.]

The slim versions contain only the necessary for a responsive web design. They are extremely small, and can be complemented with existing CSS classes. Ideal for developers who need only a framework for a responsive layout.

Layout

FLUM in version 2, the fluid layout is only supported. Grid Layout we take out. There a many good Responsive-Grid-Framework on the market.

Example: 2 Column

›› Upper Class = "splite2" ‹‹
››Inner Class‹‹
inner class = case

››Inner Class‹‹
inner class = case

  • View Code - 2 Column
    Example Code 2 Column [2 x 50%]
    <div
    <!-- Hold all the page-->
    <div class="inner-wrap>
    <!-- upper class -->
    <div class="split2 clearfix">
    <!-- innerer class -->
    <div class="case"> Content </div>
    <div class="case"> Content </div>
    </div>
    </div>
Example: 3 Column
upper class = split3
inner class = case

upper class = split3
inner class = case span2

upper class = split3
inner class = case

  • View Code - 3 Column
    Example Code 3 Column [3 x 33%]
    <div class= "split3 clearfix">
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    </div>
Example: 4 Column
upper class = split4
inner class = case

upper class = split4
inner class = case

upper class = split4
inner class = case

upper class = split4
inner class = case

  • View Code - 4 Column
    Example Code 4 Column [4 x 25%]
    <div class= "split4 clearfix">
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    </div>
Example: 5 Column
upper class = split5
inner class = case

upper class = split5
inner class = case

upper class = split5
inner class = case

upper class = split5
inner class = case

upper class = split5
inner class = case

  • View Code - 5 Column
    Example Code 5 Column [5 x 20%]
    <div class= "split5 clearfix">
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    </div>
Example: 6 Column
upper class = split6
inner class = case

upper class = split6
inner class = case

upper class = split6
inner class = case

upper class = split6
inner class = case

upper class = split6
inner class = case

upper class = split6
inner class = case

  • View Code - 6 Column
    Code 6 Column
    <div class= "split6 clearfix">
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    </div>
Example: 7 Column
upper class = split7
inner class = case

upper class = split7
inner class = case

upper class = split7
inner class = case

upper class = split7
inner class = case

upper class = split7
inner class = case

upper class = split7
inner class = case

upper class = split7
inner class = case

  • View Code - 7 Column
    Example Code 7 Column [7 x 14.28571%]
    <div class= "split7 clearfix">
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    <div class= "case">> Content </div>
    <div class= "case"> Content </div>
    <div class= "case"> Content </div>
    </div>

Special Combination Columns

Example: 2 column [66:33] with 3 column special case
upper class = split3
inner class = case span2

upper class = split3
inner class = case

  • View Code - 2 column with 3 column special case
    Code 2 Column 66-33
    <div class= "split3 clearfix">
    <div class= "case span2"> Content </div>
    <div class= "case"> Content </div>
    </div>
Example: 3 column [25:50:25] with 4 column special case
upper class = split4-3
inner class = case

upper class = split4-3
inner class = case span2

upper class = split4-3
inner class = case

  • View Code - 3 column with 4 column special case
    Code 2 Column 25-50-25
    <div class= "split4-3 clearfix">
    <div class= "case"> Content </div>
    <div class= "case span2"> Content </div>
    <div class= "case"> Content </div>
    </div>
Example: 2 column [75:25] with 4 column special case
upper class = split4
inner class = case span3

upper class = split4
inner class = case4

  • View Code - 2 column with 4 column special case
    Code 2 Column 75-25
    <div class= "split4-4 clearfix">
    <div class= "case span3"> Content </div>
    <div class= "case "> Content </div>
    </div>

We are not now list all possible combinations as examples. We think the principle is simple and creativity knows no bounds. For the 5 -, 6 -, and 7 - column layout we show you is an overview of its columns. Nesting is of course possible.

Special Case 5 Columns
Upper ClassInner ClassWidth
.split5.span240%
.split5.span360%
.split5.span480%
Special Case 6 Columns
Upper ClassInner ClassWidth
.split6.span233.33333%
.split6.span350%
.split6.span466.66666%
.split6.span583.33333%
Special Case 7 Columns
Upper ClassInner ClassWidth
.split7.span228.57142%
.split7.span342.85714%
.split7.span457.14285%
.split7.span571.42857%
.split7.span685.71428%

SEO Specials

Example: SEO 2 column special case
upper class = seoCol1
inner class = col1_68

upper class = seoCol1
inner class = col2_32

  • View Code - SEO 2 column special case
    Code 2 Column 68-32
    <div class= "seoCol1 clearfix">
    <div class= "col1_68"> Content </div>
    <div class= "col2_32 "> Content </div>
    </div>

Typography

Standard Headings
<h1>Heading <h1> tag</h1>
<h2>Heading <h2> tag</h2>
<h3>Heading <h3> tag</h3>
<h4>Heading <h4> tag</h4>
<h5>Heading <h5> tag</h5>
<h6>Heading <h6> tag</h6>
example with p tag <p>

IBS CSS Framework FLUM. Easy to understand. Easy to use. IBS CSS Framework FLUM. Easy to understand. Easy to use. IBS CSS Framework FLUM. Easy to understand.

example with blockquote tag <blockquote>
IBS CSS Framework FLUM. Easy to understand. Easy to use. IBS CSS Framework FLUM.
example with pre tag <pre>
IBS CSS Framework FLUM. Easy to understand. Easy to use. IBS CSS Framework FLUM. Easy to understand. Easy to use. 
Special Paragraphs
example with p tag and class="stop" <p class= "stop">

IBS CSS Framework FLUM. Easy to understand. Easy to use. IBS CSS Framework FLUM. Easy to understand. Easy to use.

example with p tag and class="flum" <p class= "flum">

IBS CSS Framework FLUM. Easy to understand. Easy to use. IBS CSS Framework FLUM. Easy to understand. Easy to use.

example with p tag and class="caution" <p class= "caution">

IBS CSS Framework FLUM. Easy to understand. Easy to use. IBS CSS Framework FLUM. Easy to understand. Easy to use.

example with p tag and class="note" <p class= "note">

IBS CSS Framework FLUM. Easy to understand. Easy to use. IBS CSS Framework FLUM. Easy to understand. Easy to use.

Special Paragraphs
example with p tag and class="info" <p class= "info">

IBS CSS Framework FLUM. Easy to understand. Easy to use. IBS CSS Framework FLUM. Easy to understand. Easy to use.

example with p tag and class="groovy" <p class= "groovy">

IBS CSS Framework FLUM. Easy to understand. Easy to use. IBS CSS Framework FLUM. Easy to understand. Easy to use.

Inline Semantic Text Formulations
example with emphasize and italics tag <em>, <i>
example with strong and small tag <strong>, <small>
example with abbreviation and acronym tag <abbr>, <acronym>
example with the HTML5 tag mark <mark>
example with subscript and superscript tag <sub>, <sup>
example with ancor tag <a>
example with code tag and class="tag"
example with code tag and class="value level1"
example with code tag and class="dev level2"
example with code tag and class="form level2"
example with code tag and class="com level3"

Forms

Form Example
Regular Radio button

Regular Checkbox

This form is just one possible example. There are many types of formatting and presentation.

Soucrecode for Example
<form class="tags" >
<label>Regular Input: </label>
<input type="text" placeholder=>"placeholder example" >
<label>Regular Password: </label>
<input type="password" placeholder= "placeholder example" >
<label>Regular Select Box </label>
<select>
<option value="1">Option 1 </option>
<option value="2">Option 2 </option>
<option value="3">Option 3 </option>
</select>
<label>Regular Textarea: </label>
<textarea rows= "2" cols="20" placeholder= "placeholder example" ></textarea>
<fieldset>
<legend>Regular Radio button </legend>
<label for="radio" >Radio Button A </label>
<input type="radio" name="RadioGroup" id="radiobutton_0" value= "radio" />
<label for="radio" >Radio Button B </label>
<input type="radio" name="RadioGroup" id="radiobutton_1" value= "radio" />
<label for="radio" >Radio Button C </label>
<input type="radio" name="RadioGroup" id="radiobutton_2" value= "radio" />
</fieldset>
<fieldset>
<legend>Regular Checkbox </legend>
<label for= "checkbox">Checkbox A </label>
<input type= "checkbox" name= "CheckboxGroup" value= "checkbox" id= "CheckboxGroup1_0" />
<label for= "checkbox">Checkbox B </label>
<input type= "checkbox" name= "CheckboxGroup" value= "checkbox" id= "CheckboxGroup1_1" />
<label for= "checkbox">Checkbox C </label>
<input type= "checkbox" name= "CheckboxGroup" value= "checkbox" id= "CheckboxGroup1_2" />
</fieldset>
<input type= "submit" value= "submit button" >
<button type= "submit" class= "btn" >reset button
</form>

Re Usable

Reusable code elements simplify maintenance and reduce the source code.

Boxes

class box [Standard]

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdSmall

IBS CSS Framework FLUM

Easy to understand

Easy to use

Box + boxRdNormal

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdBig

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxBlue

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdSmallSh

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdNormalSh

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdBigSh

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxOrange

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdSmallSh + boxGreen

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdNormalSh + boxRed

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdBigSh + boxGray

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdSmallSh + boxGrey

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdSmallSh + boxBlack

IBS CSS Framework FLUM

Easy to understand

Easy to use

class box + boxRdNormalSh + boxWhite

IBS CSS Framework FLUM

Easy to understand

Easy to use

Special Box

class boxContent
CSS Framework FLUM
Easy to understand
Easy to use

Buttons

Buttons
The button tag has a dark drop shadow.
<button>click me</button>

Buttons Size
<button class="btnSmall">
click me
</button>


Buttons Sharps
<button class="btnSmallrounded">
click me
</button>


Buttons Combinations
<button class="btnSmallrounded btnBig">click me</button>


The button class has a dark drop shadow. Without color.
<a class="button"> click me</a>
click me
<button class="btnMedium">
click me</button>


<button class="btnRounded">click me</button>

<button class="btnBigrounded btnSmall btnBlue">click me</button>


The btn class has a white inner shadow and standard without background color.
<a class="btn">click me</a>

click me
<button class="btnBig">
click me</button>


<button class="btnBigrounded">
click me</button>


<a class="btnBig btnGreen">
click me</a>


click me



Buttons Colors
<button class="btnBlack">
click me</button>


<button class="btnRosy">
click me</button>


<button class="btnRed">
click me</button>


<button class="btnPink">
click me</button>



<button class="btnGray">
click me</button>


<button class="btnOrange">
click me</button>


<button class="btnBlue">
click me</button>


<button class="btnGreen">
click me</button>



<a class="btn btnWhite">click me</a>

click me
<a class="btn btnOrange">click me</a>

click me
<a class="btn btnBlue">click me</a>

click me
<a class="btn btnGrey">click me</a>

click me

Gradient Colors

WHITE

<class="boxWhite">

BLACK

<class="boxBlack">

GRAY

<class="boxGray">

GREY

<class="boxGrey">

RED

<class="boxRed">

ORANGE

<class="boxOrange">

BLUE

<class="boxBlue">

GREEN

<class="boxGreen">

Flexible Content Elements [FCE]

TYPO3 users who know or use TemplaVoila, FCE's will know. It containers or boxes whose width in percent are to be specified. In principle, behave FCE as the multi-fluid Columnus at Flum.

The class "fce" ist the general frame for all flex elements [fe].
FCE's
NameWidth
fe2020%
fe4040%
fe6060%
fe8080%
fe2525%
fe3333.333%
fe5050%
fe6666.666%
fe7575%
fe3838.2%
fe6261.8%
Code Example FCE 62-38 [golden cut]
<section class="fce">
<article class="fe62 boxfl">
<div class="boxInner">
<!-- Left Block 62%-->
</div>
</article>
<article class="fe38 boxfr">
<div class="boxInner">
<!-- Right Block 38% -->
</div>
</article>
</section>
Example FCE 62-38 [golden cut]

left 62%

setting for boxInner: margin:0.5em; width:96%; padding:0.5em;

right 38%

class "boxInner" is optional.

Themes

Available Themes:
  • themeGray [FLUM Design]
  • themeBrownGray [FLUM Prototyps]
  • themeBlackGray [FLUM Examples]
  • themeOrangeBlue [FLUM free Template Web-Design]

Media Queries

Flum uses a lot of media requests that contribute to responsive design, and also make it easier design of your website on different screen sizes. Flum media queries are usually defined as a maximum and minimum widths for the device sizes or orientations. This has the advantage that future devices and browsers with dimensions below the table does not exactly match, but will be considered.

Media Screen Size
DeviceWidth pxHeight px
Desktop PC> 1280> 1024
Notebook> 1024> 768
Tablet landscape1024768
Tablet portrait7681024
Small tablet landscape800600
Small tablet portrait600800
Smartphone landscape480320
Smartphone portrait320480
Mobile landscape320220
Mobile portrait220320
Code Example
/******* MEDIA QUERIES *******/
/* Notebook and bigger Screen */
@media only screen and (min-width: 1024px) {}
/* Notebook and bigger Screen */
@media only screen and (min-width: 1024px) {}
/* Notebook and Tablet landscape */
@media only screen and (min-width: 960px) and (max-width: 1024px) {}
/* Tablet Portrait */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* Smartphone Landscape Size to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Smartphone Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 479px) {}
/* Mobile Portrait Size (older Phones) */
@media only screen and (max-width: 320px) {}

License

The CSS Framework FLUM is a free version. All parts of the Flum CSS framework are free to use. Flum is under the Creative Commons License Attribution 3.0 Unported (CC BY 3.0). The full license agreement can be found here: http://creativecommons.org/licenses/by/3.0/

Creative Commons License This work is licensed under a Creative Commons Attribution 3.0 Unported License.

Copyright (c) 2013 IBS Internet Business Solutions

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

History

FLUM V2.1

Version 2.1 is a pure maintenance and bugfix relase.The source code has been purified and optimized. A few typos have been corrected. The class "content" is no longer needed.

FLUM V2.0

Change to the version v1.x:
  • The development was switched to the mobile-first principle.
  • The grid version has been withdrawn and is no longer supported.

FLUM V1.x

  • Fully Responsive.
  • Developed after the Graceful Degradation-principle.
  • Available as a fluid-column version and also as a grid-column version.