Breadcrumbs
Breadcrumb AddThis
Installation & Getting Started
Overview
The four FlexCSS™ types are introduced in this series of short articles, along with their associated HTML structures (snippets). Although a comprehensive look into FlexCSS™ is provided in these articles, the FlexCSS™ Knowledgebase and User Guide are great resources for more information. Each section has a Try-it-out topic to jump-start the FlexCSS™ experience.
Installation
This section covers installation (linking) the FlexCSS™ files to your HTML document. First, unzip your FlexCSS™ bundle. Inside, locate your flexcss folder and upload it to your web-server. Although assistance with uploading files to a web-server is beyond the scope of this article, you can try our Knowledgebase for answers. If you need further assistance with these steps or other topics described here, consider our Designer™ or Support™ packages for short-term coding and design assistance.
<link rel="stylesheet" type="text/css" href="/flexcss/flexblox.css" />
<link rel="stylesheet" type="text/css" href="/flexcss/flexheads.css" />
<link rel="stylesheet" type="text/css" href="/flexcss/flexbtn.css" />
<link rel="stylesheet" type="text/css" href="/flexcss/flextab.css" />
For HTML documents, use the link statements to the right, inserting them between your <head> </head> tags. For Joomla!, you will need to edit your template index.php file, adding the statements in the head section. Other platforms and CMS's, please refer to the associated documentation for linking CSS files.
After inserting the above links, all that is necessary to use FlexCSS™ objects is to copy-and-paste the markup snippets into your Website (HTML Document). Add any optional classes/styles into the header div to adjust the appearance, and you're done. Snippets are discussed in the upcoming articles.
NOTE: FlexCSS™ will not function properly when installed into a blank HTML file that omits or has an old DOCTYPE. A valid DOCTYPE should begin each HTML file such as the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
</html>
How header div Works
This information is not required for using FLexCSS™ but provides a brief overview of the "header div" and how it is used with the snippets. Skipping forward to the four FlexCSS™ objects beginning with FlexBlox™ will not hinder the reader. The following information is, however, applicable to all four types.
Header Div refers to the HTML DIV tag. As discussed briefly, The FlexCSS™ system consists of three parts:
- CSS Files
- HTML Markup Snippets
- Images
The FlexCSS™ files make extensive use of "class overloading" and take advantage of the specificity built into CSS. Equipped with our HTML snippets, and a few keywords (classes), you can change the appearance of objects instantly.
Class-Modifiers
Example: changing the class in the below header div to 'bluepastel' will result in the following:
<div class="flexblox gray glow">
<div class="flexblox bluepastel">
With one word you can instantly change the appearance of FlexCSS™ objects. This versatile system of using a header div to style elements extends across all of our FlexCSS™ objects. Once you have the snippet in place, its a simple process of adding keywords (classes) to your header div. That's it.
Defaults
Defaults are setup in every FlexCSS™ object so that a simple copy-and-paste of the HTML Snippet into your document will provide instant styling. Classes and styles can be inserted to change appearances, which are discussed in the following sections.
Styles, Classes, and Class-Modifiers
For FlexCSS™ each of these terms are synonymous. When we discuss a class that changes the behavior of a FlexBlox™ we would use the term: class-modifier. But, a style is also a class. Whenever these terms are used, they refer to a CSS class and are interchangeable.
Next, Snippets and Styles
Now that you have linked to the FlexCSS™ files, you're ready to begin adding Flex objects. The next section introduces the FlexBlox™.
FlexCSS™
Portfolio
Portfolio & Gallery
A part of our Portfolio is available: Drop by & check it out!
FlexCSS Promo
FlexCSS™ Bundles
35% off any FlexCSS™ Bundle
