”Freestyle FX” Documentation

Theme version 1.0

This theme is not supposed to be a 1-click theme that takes care of everything for you. Rather, the ”Freestyle FX” theme for Contao has been created to give you a good place to start your projects. It doesn't attempt to be a full-blown theme with lots of bells and whistles, but rather keeps things very clean and basic, and easy to extend to your needs. That way you don't have to ”un-style” the theme before using it for your project. On the other hand it could be that not everything you need is 100% perfectly styled out of the box.

”Freestyle FX” doesn't depend on any external extensions but makes use of Contao's own built-in functionality, in order to keep it as compatible as possible. Layout and styling is achieved by adding CSS classes to articles and content items, and sometimes by choosing the appropriate module- or content-item templates. To that effect very few templates had to be adjusted.

Installation

OPTION A – Install as Theme

1. Unzip the freestylefx-35_#.zip folder locally.

2. In Contao navigate to Themes -> import theme, select freestylefx-35_#.cto as source file and follow the installation steps. After installing the theme you are ready to roll!

Option B – Install as Website template (with demo content)

For new projects and to make yourself familiar with some of the possibilities of this theme I recommend installing the optional demo data.

IMPORTANT: please follow the following steps in exactly this order:

1. Unzip the freestylefx-35_#.zip folder locally.

2. In Contao navigate to Themes -> import theme, select freestylefx-35_#.cto as source file and follow the installation steps.

3. Upload the freestylefx-demo35_#.sql file into the /Templates folder of your Contao installation.

4. Navigate to yourdomain.com/contao/install.php and enter your installation password.

5. Go down to ”Import a template” and choose freestylefx-demo35_#.sql as template file.

6. Click ”Import template” – WARNING! All existing data in the database will be replaced with the demo entries! Don't take this step if you don't want to lose existing data!

7. Log in with the standard Contao demo admin user:

user: k.jones
password: kevinjones

8. Make sure to change the demo admin user and the demo admin user password immediately after login if you are on a public facing server!

How to change default layout values

Contao is equipped with something called ”Global variables”. Global variables are defined in the Style Sheet settings and applied when the page is rendered. They work like a very simple form of LESS or SCSS. ”Freestyle” makes extensive use of Global variables which makes changing the theme very convenient and quick.

If you want to change colors, fonts etc. the first place to go to is the Basic_settings style sheet and then the Settings_Desktop, Settings_Tablet and Settings_small settings (the wrench and screw driver icon). You are free to extend the Global variables to your needs. If you change the break-points in either of those style sheet settings, make sure to adjust the Pocketdrid.css, Typo.css and the Layout.css files accordingly.

Global variables

In the settings of each internal style sheet you will find a number of pre-defined Globale Variables that are used in the CSS. These variables are applied only to the style sheet in which they are declared! Of course you are free to add more if you want. If you want to use variables that are used across all style sheets, you have to declare them in the theme settings.

Page layout: CSS settings

The included internal and external CSS style sheets can be modified to your needs. For the theme to work it is important that the external style sheets are loaded first, then the internal! Keep the order of the style sheets.

Here is a short explanation of what they do:

  • Basic_settings: contains settings that apply to all screen sizes. They overwrite CSS properties that are declared in external style sheets
  • Settings_small: contains the values for small screen sizes
  • Settings_Tablet: contains the values for tablet screen sizes
  • Settings_Desktop: contains the values for desktop screen sizes

 

  • grid.css: contains a number of pre-defined grid widths. You are totally free to modify the styles and write your own ones. You can also add more breakpoints if you need. You can make up your own system of classes that make sense to you and the project you are working on.
  • layout.css: contains the most important declarations for the theme to function properly. Be careful if you change things here.
  • normalize.css: "normalize" browsers
  • pocketgrid.css: contains the Pocketgrid framework. Don't change things here.
  • typo.css: contains typography related styling.
  • dropdown.css: contains the styles that are needed to create the dropdown menu. You can disable this style sheet if you are not using the built-in navigation system.
  • mobile_menu.css: contains the styles that are needed to create the mobile menu. You can disable this style sheet if you are not using the built-in mobile navigation system.

Page layout: additional Javascript

In the predefined page layouts you will find a few lines of <script> at the bottom. You are not forced to keep them, if you don't require their function.

Here is what they do:

  • DoubleTapToGo.js: enables the dropdown menu to function properly on touch devices where no hover is available. If your navigation is called something else then #nav, then change the value here accordingly.
  • Headroom.js: is responsible for the sliding effect of the header-bar. You can adjust the values to achieve a different behaviour. If the area that you want to hide on scroll is called something else then #header-bar, then you have to change the value here accordingly.
  • Rellax.js: is responsible for the parallax-effect in the header. Only works for elements that have a .rellax class. This can be changed to something else if you want

Your page layout

You have two basic options to choose from:

  • a full-width layout, stretching across all of the viewport. This option allows you to achieve designs that are currently very popular.
  • a boxed layout with a defined content area that doesn't stretch across the viewport and a viewport background.

Full-width layout

In your page layout add ”full-width" as a body class and in the theme CSS settings you need to define the values for the maximum content width for desktop and tablet sizes.

If you want to add a left and/or right side column, choose the respective layout option in the page layout setting. Don't add any value in the ”width” field, you will do that in the CSS settings.

Boxed layout

In your page layout add ”boxed" as a body class. If you want to add a subtle shadow to your page, add ”boxed shadow” as a body class. In the theme CSS settings you need to define the values for the maximum content width for desktop and tablet sizes. 

If you want to add a left and/or right side column, choose the respective layout option in the page layout setting. Don't add any value in the ”width” field, you will do that in the CSS settings.

Using articles for layout

Instead of using the Contao layout builder to add side columns you might want to try using articles side-by-side by adding respective grid classes.

Using Pocketgrid

The grid of this starter kit is based on Pocketgrid and can be configured any way you like to create a fluid, fully responsive layout. You can even use any classes you like. The classes provided in this theme are just some examples that you can adjust or completely exchange for new ones. Simply add the respective block classes to the content elements that you want to give a certain width. As soon as 100% are reached, the row will break into the next. You don't have to worry about small screen, because on small screens the blocks will default to 100%, i.e. they will have full width automatically (unless you tell them otherwise). You can set any break points that you need to achieve the desired behaviour for various screen sizes. For the grid layout of this sample website, we use only very few classes to define the respective widths of the blocks. As mentioned, you can call those blocks anything you like. You can call them "b1", "b2", "b3"... as in this example or "grid1", "grid2", "grid3" or "tomato", "potato", "salad" - or mix it all together. It doesn't matter, as long as it works for you.

Strictly speaking, Pocketgrid is not even a grid. It is a minimalist framework that allows you to create responsive, elastic, mobile-first layouts. It is truly semantic in the sense that it keeps your HTML clean of any design-related classes like "large-50 medium-50 small-100 xsmall-100". In Pocketgrid all the grid-layout is happening in the CSS, not in the HTML. You just give each block that you want to bring into a column-layout a class and define in the CSS the widths it should have for the various breakpoints (which you can freely define). That way you are completely free to fine-tune your layout according to what the content requires in the various screen sizes.

You can do that to any element that has a "block" class, p.e. articles, modules and content elements. No rows needed. That makes layout extremely flexible, since Contao is so nice and adds "block" to almost anything already!

The grid classes are defined in the grid.css file.

A comprehensive documentation on pocketgrid can be found here.

Article styles and overlays

By default ”Freestyle” comes with a set of predefined CSS styles that you can apply to articles. The styles are called style-1, style-2, style-3... and can be adjusted in the Basic_settings style sheet settings. You can use these styles to add color backgrounds, background-images etc. to articles. While you can use them in any layout, it makes most sense when you use a full-width layout.

In combination with an ”overlay” class you can achieve nice background effects, p.e. you could add a fixed background image and a gradient or color background behind an article. This can be especially useful if the background image is too detailed or too bright or dark.

Main navigation

The theme comes with one pre-built three-level horizontal dropdown menu that also works on touch devices (thanks to doubleTapToGo.js) and one mobile menu. You are not required to use any of those and you can also change them to fit your needs.

By default the main menu is part of a header bar that hides on scroll. If you don't like this behaviour, you can disable it by removing the Headroom.js. You can also change the behaviour of the Headroom script by adjusting the values in the Custom JavaScript Code section of your page layout.

If you don't want to use the default overlay header bar you can replace it by its ”static” version in the page layout.

Header image and slider

Edge-to-edge header images that scale with the page are very popular. With Freestyle you can achieve this with static images and the built-in content slider that Contao offers.

Step 1: create a new article in the Header layout section. Add ”header-image” as CSS class to the article.

Step 2: Add a content element of the type ”Text” (or ”Image” if you don't want to add text). Change the custom element type to ce_text_headerimage or ce_text_headerimage_parallax. This is important! You are free to use the rich text editor to style the overlay Text.

If you want to use a slider instead of a static image you can do so (even multiple sliders next to each other like here). Repeat step 2 with every image you want to add and wrap the series of images between the opening and closing Slider elements.

Image effects

Pop out

Add the class ”pop-out” to add a popping out effect to linked images. Works with any image that opens in a lightbox or is otherwise linked. Works with galleries as well.

Push in

Add the class ”push-in” to add a push-in effect to linked images. Works with any image that opens in a lightbox or is otherwise linked. Works with galleries as well.

Round

Add the class ”round” to give an image a round container

Helper classes

.hide-controls

Add class "hide-controls" to the Slider start element to hide the slider controls.

.no-margin

Use ”no-margin” class to remove padding and margin of an article. This can be useful to create tiles etc. By default not applied to text.

.new-row

Add ”new-row” class to force a new row.

.center

Add ”center” class to center an element horizontally.

.right

Add ”right” class to float an element right. If you apply .right to block elements you need to define a width as well to make it work (because blocks have by default a width of 100% and therefore no space to float.)

.offsetxx

Add ”offset10”... "offset90" class to offset an element (offset10 offsets the element by 10%, offset20 by 20%...).

.radius3, .radius5, .radius10

Add ”radius3”, "radius5" or "radius10" class to give an element a border radius of 3px, 5px or 10px. Class will be inherited by elements lower in hierarchy, p.e. if you add "radius10" to an article, all elements in this article will have a radius of 10px.

.light

Add ”light” to an element to change text color to white and add a subtle drop shadow. Meant to improve contrast against dark or noisy background images.

Overlay effects

To add an overlay effect simply add "overlay-1", "overlay-2..." to the element that you want to give the overlay effect to. The theme comes with a few pre-defined overlays (overlay-1 to overlay-5) that you can customise in the Basic_settings style sheets, but you can create as many overlay effects as you want. The only requirement is that the name of your style starts with "overlay" and you define the overlay style as "overlay-xyz:before".

You can even use gradients (see example)! The Contao style editor gives you basic tools to build gradients, but if you want to built complex gradients you might want to use tools like http://angrytools.com/gradient and drop the code into the custom code field.

Buttons

Box styles

Add a ”box” class to the content element to define a box. You can adjust the styling to fit your needs.

Infobox

Add a ”infobox” class to the content element to create a box with info-icon.

Confirmation

Add the classes ”infobox success” to create a confirmation box.

Warning

Add the classes ”infobox warning” to create a warning box.

Predefined spacer classes:

Sometimes you need extra space at the top or bottom of an element. In that case you can add one of the following classes.

  • space-top10
  • space-top20
  • space-top30
  • space-top40
  • space-top50
  • space-bottom10
  • space-bottom20
  • space-bottom30
  • space-bottom40
  • space-bottom50

Divider

.divider-top

Creates an inset shadow divider at the top of an element. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

.divider-top-bottom

Creates an inset shadow divider at the top and the bottom of an element. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

.divider-bottom

Creates an inset shadow divider at the bottom of an element. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

.feature-item

Add a ”feature-item” plus an ”icon-” class to a text element to create feature items or highlight boxes as such:

Nemo enim ipsam voluptatem

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

Sed ut perspiciatis

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

Neque porro quisquam

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

Sed ut perspiciatis

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

Icons

To use the icon fonts in your design you have to add the respective icon class in the CSS field of content elements or pages. If you p.e. add the class "icon-home" in the CSS field of the home page, a house icon will be displayed in front of the navigation link.

You can find a demo HTML file in the /fonts folder that will help you find the corresponding codes to each icon (but you will only need the code in case you want to use icons in CSS declarations).

Reference
icon-glass0xe800
icon-note0xe801
icon-note-beamed0xe802
icon-music-10xe803
icon-music0xe804
icon-search0xe805
icon-mail0xe806
icon-heart0xe807
icon-heart-empty0xe808
icon-star0xe809
icon-star-empty0xe80a
icon-star-half0xe80b
icon-user0xe80c
icon-users0xe80d
icon-video0xe80e
icon-videocam0xe80f
icon-picture0xe810
icon-camera0xe811
icon-camera-alt0xe812
icon-search-10xe813
icon-th-large0xe814
icon-th0xe815
icon-th-list0xe816
icon-ok0xe817
icon-ok-circled0xe818
icon-ok-circled20xe819
icon-cancel0xe81a
icon-cancel-circled0xe81b
icon-cancel-circled20xe81c
icon-plus0xe81d
icon-plus-circled0xe81e
icon-minus0xe81f
icon-minus-circled0xe820
icon-help-circled0xe821
icon-info-circled0xe822
icon-home0xe823
icon-link0xe824
icon-attach0xe825
icon-lock0xe826
icon-lock-open0xe827
icon-pin0xe828
icon-eye0xe829
icon-eye-off0xe82a
icon-tag0xe82b
icon-tags0xe82c
icon-bookmark0xe82d
icon-flag0xe82e
icon-thumbs-up0xe82f
icon-thumbs-down0xe830
icon-flashlight0xe831
icon-mail-10xe832
icon-download0xe833
icon-heart-10xe834
icon-upload0xe835
icon-forward0xe836
icon-export0xe837
icon-heart-empty-10xe838
icon-pencil0xe839
icon-edit0xe83a
icon-print0xe83b
icon-retweet0xe83c
icon-comment0xe83d
icon-chat0xe83e
icon-bell0xe83f
icon-attention0xe840
icon-attention-circled0xe841
icon-location0xe842
icon-trash-empty0xe843
icon-doc0xe844
icon-folder0xe845
icon-folder-open0xe846
icon-phone0xe847
icon-cog0xe848
icon-cog-alt0xe849
icon-wrench0xe84a
icon-basket0xe84b
icon-calendar0xe84c
icon-login0xe84d
icon-logout0xe84e
icon-volume-off0xe84f
icon-volume-down0xe850
icon-volume-up0xe851
icon-headphones0xe852
icon-clock0xe853
icon-block-group0xe854
icon-resize-full0xe855
icon-resize-small0xe856
icon-resize-vertical0xe857
icon-resize-horizontal0xe858
icon-zoom-in0xe859
icon-zoom-out0xe85a
icon-down-circled20xe85b
icon-up-circled20xe85c
icon-down-dir0xe85d
icon-up-dir0xe85e
icon-left-dir0xe85f
icon-right-dir0xe860
icon-down-open0xe861
icon-left-open0xe862
icon-right-open0xe863
icon-up-open0xe864
icon-down-big0xe865
icon-left-big0xe866
icon-right-big0xe867
icon-up-big0xe868
icon-right-hand0xe869
icon-left-hand0xe86a
icon-up-hand0xe86b
icon-down-hand0xe86c
icon-cw0xe86d
icon-ccw0xe86e
icon-arblock-groups-cw0xe86f
icon-shuffle0xe870
icon-play0xe871
icon-play-circled20xe872
icon-stop0xe873
icon-pause0xe874
icon-to-end0xe875
icon-to-end-alt0xe876
icon-to-start0xe877
icon-to-start-alt0xe878
icon-fast-fw0xe879
icon-fast-bw0xe87a
icon-eject0xe87b
icon-target0xe87c
icon-signal0xe87d
icon-award0xe87e
icon-inbox0xe87f
icon-globe0xe880
icon-cloud0xe881
icon-flash0xe882
icon-umbrella0xe883
icon-flight0xe884
icon-leaf0xe885
icon-scissors0xe892
icon-briefcase0xe893
icon-off0xe894
icon-road0xe895
icon-list-alt0xe896
icon-barcode0xe898
icon-book0xe899
icon-adjust0xe89a
icon-tint0xe89b
icon-check0xe89c
icon-asterisk0xe89d
icon-gift0xe89e
icon-fire0xe89f
icon-magnet0xe8a0
icon-chart-bar0xe8a1
icon-credit-card0xe8a2
icon-floppy0xe8a3
icon-megaphone0xe8a4
icon-key0xe8a5
icon-truck0xe8a6
icon-hammer0xe8a7
icon-lemon0xe8a8
icon-star-10xe8a9
icon-star-empty-10xe8aa
icon-user-10xe8ab
icon-users-10xe8ac
icon-user-add0xe8ad
icon-video-10xe8ae
icon-picture-10xe8af
icon-camera-10xe8b0
icon-layout0xe8b1
icon-menu-10xe8b2
icon-check-10xe8b3
icon-cancel-circled-10xe8b4
icon-cancel-squared0xe8b5
icon-plus-10xe8b6
icon-plus-circled-10xe8b7
icon-plus-squared-10xe8b8
icon-minus-10xe8b9
icon-minus-circled-10xe8ba
icon-minus-squared-10xe8bb
icon-help-10xe8bc
icon-help-circled-10xe8bd
icon-info-10xe8be
icon-info-circled-10xe8bf
icon-back0xe8c0
icon-home-10xe8c1
icon-link-10xe8c2
icon-attach-10xe8c3
icon-lock-10xe8c4
icon-lock-open-10xe8c5
icon-eye-10xe8c6
icon-bookmark-10xe8c7
icon-bookmarks0xe8c8
icon-flag-10xe8c9
icon-thumbs-up-10xe8ca
icon-thumbs-down-10xe8cb
icon-download-10xe8cc
icon-upload-10xe8cd
icon-upload-cloud-10xe8ce
icon-reply-10xe8cf
icon-reply-all-10xe8d0
icon-forward-10xe8d1
icon-quote0xe8d2
icon-code-10xe8d3
icon-export-10xe8d4
icon-pencil-10xe8d5
icon-feather0xe8d6
icon-print-10xe8d7
icon-retweet-10xe8d8
icon-keyboard-10xe8d9
icon-chat-10xe8da
icon-bell-10xe8db
icon-attention-10xe8dc
icon-alert0xe8dd
icon-vcard0xe8de
icon-address0xe8df
icon-location-10xe8e0
icon-map-10xe8e1
icon-direction-10xe8e2
icon-compass-10xe8e3
icon-cup0xe8e4
icon-trash-10xe8e5
icon-doc-10xe8e6
icon-docs-10xe8e7
icon-doc-landscape0xe8e8
icon-doc-text-10xe8e9
icon-doc-text-inv-10xe8ea
icon-newspaper-10xe8eb
icon-book-open0xe8ec
icon-folder-10xe8ed
icon-archive0xe8ee
icon-box-10xe8ef
icon-rss-10xe8f0
icon-phone-10xe8f1
icon-cog-10xe8f2
icon-tools0xe8f3
icon-share-10xe8f4
icon-shareable0xe8f5
icon-basket-10xe8f6
icon-bag0xe8f7
icon-calendar-10xe8f8
icon-login-10xe8f9
icon-logout-10xe8fa
icon-mic-10xe8fb
icon-mute-10xe8fc
icon-sound0xe8fd
icon-volume0xe8fe
icon-clock-10xe8ff
icon-lamp0xe900
icon-light-down0xe901
icon-light-up0xe902
icon-adjust-10xe903
icon-block-group-10xe904
icon-resize-full-10xe905
icon-resize-small-10xe906
icon-popup0xe907
icon-publish0xe908
icon-window0xe909
icon-arblock-group-combo0xe90a
icon-down-circled-10xe90b
icon-left-circled-10xe90c
icon-right-circled-10xe90d
icon-up-circled-10xe90e
icon-down-open-10xe90f
icon-left-open-10xe910
icon-right-open-10xe911
icon-up-open-10xe912
icon-left-open-mini0xe913
icon-right-open-mini0xe914
icon-up-open-mini0xe915
icon-down-open-big0xe916
icon-left-open-big0xe917
icon-right-open-big0xe918
icon-up-open-big0xe919
icon-down-10xe91a
icon-left-10xe91b
icon-right-10xe91c
icon-up-10xe91d
icon-down-dir-10xe91e
icon-left-dir-10xe91f
icon-right-dir-10xe920
icon-up-dir-10xe921
icon-down-bold0xe922
icon-left-bold0xe923
icon-right-bold0xe924
icon-up-bold0xe925
icon-left-thin0xe926
icon-right-thin0xe927
icon-up-thin0xe928
icon-ccw-10xe929
icon-cw-10xe92a
icon-arblock-groups-ccw0xe92b
icon-level-down-10xe92c
icon-level-up-10xe92d
icon-shuffle-10xe92e
icon-loop0xe92f
icon-switch0xe930
icon-play-10xe931
icon-stop-10xe932
icon-pause-10xe933
icon-record0xe934
icon-to-end-10xe935
icon-to-start-10xe936
icon-fast-forward0xe937
icon-fast-backward0xe938
icon-progress-10xe939
icon-progress-20xe93a
icon-progress-30xe93b
icon-target-10xe93c
icon-palette0xe93d
icon-list-10xe93e
 icon-list-add0xe93f
icon-signal-10xe940
icon-trophy0xe941
icon-battery0xe942
icon-back-in-time0xe943
icon-monitor0xe944
icon-mobile-10xe945
icon-network0xe946
icon-cd0xe947
icon-inbox-10xe948
icon-install0xe949
icon-globe-10xe94a
icon-cloud-10xe94b
icon-flash-10xe94c
icon-moon-10xe94d
icon-flight-10xe94e
icon-paper-plane-10xe94f
icon-leaf-10xe950
icon-lifebuoy-10xe951
icon-mouse0xe952
icon-briefcase-10xe953
icon-suitcase-10xe954
icon-dot0xe955
icon-dot-20xe956
icon-dot-30xe957
icon-brush-10xe958
icon-magnet-10xe959
icon-infinity0xe95a
icon-erase0xe95b
icon-chart-pie-10xe95c
icon-chart-line-10xe95d
icon-chart-bar-10xe95e
icon-tape0xe95f
icon-graduation-cap-10xe960
icon-language-10xe961
icon-ticket-10xe962
icon-water0xe963
icon-droplet0xe964
icon-air0xe965
icon-credit-card-10xe966
icon-floppy-10xe967
icon-clipboard0xe968
icon-megaphone-10xe969
icon-database-10xe96a
icon-drive0xe96b
icon-bucket0xe96c
icon-thermometer0xe96d
icon-key-10xe96e
icon-flow-cascade0xe96f
icon-flow-branch0xe970
icon-flow-tree0xe971
icon-flow-parallel0xe972
icon-rocket-10xe973
icon-gauge-10xe974
icon-traffic-cone0xe975
icon-cc-10xe976
icon-cc-by0xe977
icon-cc-nc0xe978
icon-cc-nc-eu0xe979
icon-cc-nc-jp0xe97a
icon-cc-sa0xe97b
icon-cc-nd0xe97c
icon-cc-pd0xe97d
icon-cc-zero0xe97e
icon-cc-share0xe97f
icon-cc-remix0xe980
icon-cancel-10xe984
icon-tag-10xe985
icon-comment-10xe986
icon-book-10xe987
icon-hourglass-40xe988
icon-down-open-mini0xe989
icon-down-thin0xe98a
icon-progress-00xe98b
icon-cloud-thunder0xe98c
icon-chart-area-10xe98d
icon-flow-line0xe98e
icon-acrobat0xeb20
icon-move0xf047
icon-link-ext0xf08e
icon-check-empty0xf096
icon-bookmark-empty0xf097
icon-phone-squared0xf098
icon-twitter0xf099
icon-facebook0xf09a
icon-github-circled0xf09b
icon-rss0xf09e
icon-hdd0xf0a0
icon-certificate0xf0a3
icon-left-circled0xf0a8
icon-right-circled0xf0a9
icon-up-circled0xf0aa
icon-down-circled0xf0ab
icon-tasks0xf0ae
icon-filter0xf0b0
icon-resize-full-alt0xf0b2
icon-beaker0xf0c3
icon-docs0xf0c5
icon-blank0xf0c8
icon-menu0xf0c9
icon-table0xf0ce
icon-magic0xf0d0
icon-pinterest-circled0xf0d2
icon-pinterest-squared0xf0d3
icon-gplus-squared0xf0d4
icon-gplus0xf0d5
icon-money0xf0d6
icon-columns0xf0db
icon-sort0xf0dc
icon-sort-down0xf0dd
icon-sort-up0xf0de
icon-mail-alt0xf0e0
icon-linkedin0xf0e1
icon-gauge0xf0e4
icon-comment-empty0xf0e5
icon-chat-empty0xf0e6
icon-sitemap0xf0e8
icon-paste0xf0ea
icon-lightbulb0xf0eb
icon-exchange0xf0ec
icon-download-cloud0xf0ed
icon-upload-cloud0xf0ee
icon-user-md0xf0f0
icon-stethoscope0xf0f1
icon-suitcase0xf0f2
icon-bell-alt0xf0f3
icon-coffee0xf0f4
icon-food0xf0f5
icon-doc-text0xf0f6
icon-ambulance0xf0f9
icon-medkit0xf0fa
icon-fighter-jet0xf0fb
icon-beer0xf0fc
icon-h-sigh0xf0fd
icon-plus-squared0xf0fe
icon-angle-double-left0xf100
icon-angle-double-right0xf101
icon-angle-double-up0xf102
icon-angle-double-down0xf103
icon-angle-left0xf104
icon-angle-right0xf105
icon-angle-up0xf106
icon-angle-down0xf107
icon-desktop0xf108
icon-laptop0xf109
icon-tablet0xf10a
icon-mobile0xf10b
icon-circle-empty0xf10c
icon-quote-left0xf10d
icon-quote-right0xf10e
icon-circle0xf111
icon-reply0xf112
icon-github0xf113
icon-folder-empty0xf114
icon-folder-open-empty0xf115
icon-smile0xf118
icon-fblock-groupn0xf119
icon-meh0xf11a
icon-flag-empty0xf11d
icon-code0xf121
icon-reply-all0xf122
icon-star-half-alt0xf123
icon-direction0xf124
icon-crop0xf125
icon-fork0xf126
icon-unlink0xf127
icon-help0xf128
icon-info0xf129
icon-attention-alt0xf12a
icon-eraser0xf12d
icon-puzzle0xf12e
icon-mic0xf130
icon-mute0xf131
icon-shield0xf132
icon-calendar-empty0xf133
icon-extinguisher0xf134
icon-rocket0xf135
icon-angle-circled-left0xf137
icon-angle-circled-right0xf138
icon-angle-circled-up0xf139
icon-angle-circled-down0xf13a
icon-html50xf13b
icon-anchor0xf13d
icon-lock-open-alt0xf13e
icon-bullseye0xf140
icon-rss-squared0xf143
icon-play-circled0xf144
icon-ticket0xf145
icon-minus-squared0xf146
icon-minus-squared-alt0xf147
icon-level-up0xf148
icon-level-down0xf149
icon-ok-squared0xf14a
icon-pencil-squared0xf14b
icon-link-ext-alt0xf14c
icon-export-alt0xf14d
icon-compass0xf14e
icon-expand0xf150
icon-collapse0xf151
icon-expand-right0xf152
icon-euro0xf153
icon-pound0xf154
icon-dollar0xf155
icon-doc-inv0xf15b
icon-doc-text-inv0xf15c
icon-thumbs-up-alt0xf164
icon-thumbs-down-alt0xf165
icon-youtube-squared0xf166
icon-youtube0xf167
icon-youtube-play0xf16a
icon-dropbox0xf16b
icon-stackoverflow0xf16c
icon-instagram0xf16d
icon-flickr0xf16e
icon-bitbucket0xf171
icon-bitbucket-squared0xf172
icon-tumblr0xf173
icon-tumblr-squared0xf174
icon-down0xf175
icon-up0xf176
icon-left0xf177
icon-right0xf178
icon-apple0xf179
icon-windows0xf17a
icon-android0xf17b
icon-linux0xf17c
icon-dribbble0xf17d
icon-skype0xf17e
icon-trello0xf181
icon-female0xf182
icon-male0xf183
icon-sun0xf185
icon-moon0xf186
icon-box0xf187
icon-bug0xf188
icon-pagelines0xf18c
icon-stackexchange0xf18d
icon-right-circled20xf18e
icon-left-circled20xf190
icon-collapse-left0xf191
icon-dot-circled0xf192
icon-wheelchair0xf193
icon-vimeo-squared0xf194
icon-plus-squared-alt0xf196
icon-space-shuttle0xf197
icon-mail-squared0xf199
icon-graduation-cap0xf19d
icon-yahoo0xf19e
icon-google0xf1a0
icon-stumbleupon-circled0xf1a3
icon-stumbleupon0xf1a4
icon-delicious0xf1a5
icon-digg0xf1a6
icon-child0xf1ae
icon-paw0xf1b0
icon-spoon0xf1b1
icon-cube0xf1b2
icon-cubes0xf1b3
icon-behance0xf1b4
icon-behance-squared0xf1b5
icon-recycle0xf1b8
icon-cab0xf1b9
icon-taxi0xf1ba
icon-tree0xf1bb
icon-spotify0xf1bc
icon-soundcloud0xf1be
icon-database0xf1c0
icon-file-pdf0xf1c1
icon-file-word0xf1c2
icon-file-excel0xf1c3
icon-file-powerpoint0xf1c4
icon-file-image0xf1c5
icon-file-archive0xf1c6
icon-file-audio0xf1c7
icon-file-video0xf1c8
icon-file-code0xf1c9
icon-codeopen0xf1cb
icon-lifebuoy0xf1cd
icon-circle-notch0xf1ce
icon-git-squared0xf1d2
icon-git0xf1d3
icon-hacker-news0xf1d4
icon-qq0xf1d6
icon-paper-plane0xf1d8
icon-paper-plane-empty0xf1d9
icon-history0xf1da
icon-circle-thin0xf1db
icon-sliders0xf1de
icon-share0xf1e0
icon-share-squared0xf1e1
icon-soccer-ball0xf1e3
icon-tty0xf1e4
icon-binoculars0xf1e5
icon-plug0xf1e6
icon-slideshare0xf1e7
icon-newspaper0xf1ea
icon-wifi0xf1eb
icon-calc0xf1ec
icon-paypal0xf1ed
icon-bell-off0xf1f6
icon-bell-off-empty0xf1f7
icon-trash0xf1f8
icon-copyright0xf1f9
icon-at0xf1fa
icon-eyedropper0xf1fb
icon-brush0xf1fc
icon-birthday0xf1fd
icon-chart-area0xf1fe
icon-chart-pie0xf200
icon-chart-line0xf201
icon-toggle-off0xf204
icon-toggle-on0xf205
icon-bicycle0xf206
icon-bus0xf207
icon-angellist0xf209
icon-cc0xf20a
icon-meanpath0xf20c
icon-leanpub0xf212
icon-cart-plus0xf217
icon-cart-arblock-group-down0xf218
icon-diamond0xf219
icon-ship0xf21a
icon-motorcycle0xf21c
icon-street-view0xf21d
icon-heartbeat0xf21e
icon-genderless0xf22d
icon-facebook-official0xf230
icon-pinterest0xf231
icon-whatsapp0xf232
icon-server0xf233
icon-user-plus0xf234
icon-user-times0xf235
icon-bed0xf236
icon-train0xf238
icon-subway0xf239
icon-expeditedssl0xf23e
icon-mouse-pointer0xf245
icon-i-cursor0xf246
icon-sticky-note0xf249
icon-sticky-note-o0xf24a
icon-clone0xf24d
icon-balance-scale0xf24e
icon-hourglass-o0xf250
icon-hourglass-10xf251
icon-hourglass-20xf252
icon-hourglass-30xf253
icon-hourglass0xf254
icon-hand-grab-o0xf255
icon-hand-paper-o0xf256
icon-hand-scissors-o0xf257
icon-hand-lizard-o0xf258
icon-hand-spock-o0xf259
icon-hand-pointer-o0xf25a
icon-hand-peace-o0xf25b
icon-trademark0xf25c
icon-registered0xf25d
icon-creative-commons0xf25e
icon-get-pocket0xf265
icon-safari0xf267
icon-chrome0xf268
icon-firefox0xf269
icon-opera0xf26a
icon-internet-explorer0xf26b
icon-television0xf26c
icon-contao0xf26d
icon-amazon0xf270
icon-calendar-plus-o0xf271
icon-calendar-minus-o0xf272
icon-calendar-times-o0xf273
icon-calendar-check-o0xf274
icon-industry0xf275
icon-map-pin0xf276
icon-map-signs0xf277
icon-map-o0xf278
icon-map0xf279
icon-commenting0xf27a
icon-commenting-o0xf27b
icon-vimeo0xf27d
icon-reddit-alien0xf281
icon-edge0xf282
icon-credit-card-alt0xf283
icon-usb0xf287
icon-pause-circle0xf28b
icon-pause-circle-o0xf28c
icon-stop-circle0xf28d
icon-stop-circle-o0xf28e
icon-shopping-bag0xf290
icon-shopping-basket0xf291
icon-hashtag0xf292
icon-percent0xf295
icon-wpforms0xf298
icon-envira0xf299
icon-universal-access0xf29a
icon-wheelchair-alt0xf29b
icon-question-circle-o0xf29c
icon-blind0xf29d
icon-volume-control-phone0xf2a0
icon-braille0xf2a1
icon-assistive-listening-systems0xf2a2
icon-asl-interpreting0xf2a4
icon-sign-language0xf2a7
icon-low-vision0xf2a8
icon-snapchat0xf2ab
icon-snapchat-ghost0xf2ac
icon-snapchat-square0xf2ad
icon-google-plus-circle0xf2b3
icon-font-awesome0xf2b4
icon-github-squared0xf300
icon-twitter-squared0xf304
icon-facebook-squared0xf308
icon-linkedin-squared0xf30c
icon-gplus-10xf30f
icon-evernote0xf333

Animations

Included in this starter kit is a way to simply and easily add a variety of on-scroll animations, powered by animate.css. To use animation you simply add "animation" and the animation class name (p.e. fadeIn) to the CSS field of any element, even slider elements (note that with the default Contao slider only the first slide will play animations).

Additionally you can apply delay classes to force elements to appear in a certain order.

Find out more about available animations here. Keep in mind that animations add much processing power to the browser, so use them carefully.

Available animations

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig

fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut

rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
slideInUp
slideInDown
slideInLeft
slideInRight
slideOutUp
slideOutDown
slideOutLeft
slideOutRight
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
hinge
rollIn
rollOut

Delay and Speed classes

  • delay-250 (i.e. .25s)
  • delay-500 (i.e. .5s)
  • delay-750 (i.e. .75s)
  • delay-1000 (i.e. 1s)
  • delay-1250 (i.e. 1.25s)
  • delay-1500 (i.e. 1.5s)
  • delay-1750 (i.e. 1.75s)
  • delay-2000 (i.e. 2s)
  • delay-2500 (i.e. 2.5s)
  • delay-3000 (i.e. 3s)
  • delay-3500 (i.e. 3.5s)

Animation speed modifiers:

  • slow: animation speed of 1.5s
  • slower: animation speed of 2s
  • slowest: animation speed of 3s

Fade-Out Header

By adding a "fade-out" class to an article or an element you can achieve a fade-out effect on scroll. That means the part of the page that is scrolled out of view will gradually fade into the background.

Known issues

The boxed layout is not displayed correctly in iOS <=5 and older browsers

The CSS method calc() is not supported in older browsers (p.e. iOS 5 Safari, Firefox <4, Chrome <20, IE <8).This problem can easily be solved by replacing the layout widths (#left, #main, #right...) with %-values instead of using the calc() method used in the Settings_Desktop style sheet. This will not affect the functionality of your layout at all. Alternatively you can enable the layout_fix.css for your page layout and edit the values according to your needs. Newer browsers will still use the calc() instructions.

The header bar doesn't hide when scrolling in older iOS browsers

This is just a cosmetic issue, the menu is still fully functional. Not aware of a solution for this issue at this point.

Animations not showing in Internet Explorer 9

That's correct. IE 9 does not support CSS3-Animations and therefore cannot display the animations included in this theme. The elements will still be displayed, although not animated.

Navigation jumping in Chrome

Since a recent release of Chrome the top navigation shows odd behavior when hovering over a menu item with sub menu. There is an easy fix:

Go to files->freestyle-fx->css->dropdown.css

Change #nav to

#nav {
        width: 100%;
        position: absolute;
        top:0;
        margin: 0;
        }

That should take care of the problem.