Creatix CSS

Creatix-CSS provides you with an easy to use CSS framework for responsive websites and web apps.

Creatix-CSS is basically a responsive layout concept. This means that a website based on Creatix-CSS will fit into any screen size. The way the website's elements are displayed will depend on the device choosen by the user.

Creatix-CSS consists of different layers:

  • basic.css provides you with responsive behavior.
  • layout.css gives you some basic layout and styling (headers, paragraphs, forms, colors...).
  • theme00.css to theme03.css (more to come?) work like skins for your web project.
  • navigation.css adds a responsive navigation pattern.
  • etc.

Recently added:

  • a WordPress Theme based on Creatix-CSS.

Whatever your choice is: it is always you who decides how much of the framework you want to use in your project.

Creatix-CSS was inspired by Bootstrap and GroundworkCSS. We love and admire both of them. However, in our daily work as web and app developers we found them too bulky and hard to combine with other frameworks like p. ex JQery UI. This is why we decided to break the features into different style sheets and simplify the entire concept.

Enjoy!

Download from GitHub: GitHub Project Page

Project Documentation: Wiki Pages on GitHub


Demo Set 1: pages using different style layers

Page Example 01 (all styles)
CSS used: basic.css, layout.css, theme00.css

Page Example 02 (responsive navigation)
CSS used: basic.css, layout.css, theme00.css, navigation.css

Form Example 01 and
Form Example 02 JQery
CSS used: basic.css, layout.css, forms.css, theme03.css (with Google Webfonts), jquery-ui.min.css (from JQery UI)

Imixs.org Workflow
CSS used: basic.css, layout.css, imixs.css and gfeed.css (both imixs.org)

Demo Set 2: pages using different themes

The following pages are identical except for the use of a different theme.css file.

Page Styling: Theme 01
CSS used: basic.css, layout.css, forms.css, theme01.css

Page Styling: Theme 02
CSS used: basic.css, layout.css, forms.css, theme02.css

Page Styling: Theme 03
CSS used: basic.css, layout.css, forms.css, theme03.css (with Google Webfonts)

Page Styling: Theme 04
CSS used: basic.css, layout.css, forms.css, theme04.css (with Google Webfonts)

Page Styling: Theme 05
CSS used: basic.css, layout.css, forms.css, theme05.css (with Google Webfonts)