Available BFL components
The following is the complete list of 27 available BFL components together with the short description of each component as well as the list of configurable properties.
Accordion
This component allows grouping several Panel components.
Configuration
There are two buttons for panel addition and deletion. Click on the panel definition in a table selects it and it becomes possible to edit it’s parameters. The only difference is that parameter Collapsible is always set by default for each panel.
Affix
This component allows making an element contained inside to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons to make them "stick" at a specific area while scrolling up and down the page.
Configuration
General
Top
Top-most position of the element.
Bottom
Bottom-most position of the element.
All parameters are optional
Alert
This component allows providing contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Configuration
General
Alert Type
Sets the color of alert message.
- Info Color - blue
- Success Color - green
- Warning Color - orange
- Danger Color - red
Required parameter
Dismissible Alert
If set, the alert is dismissible by user.
Fade Out Animation
If set, adds a fading effect when closing the alert message.
Bootstrap Row
Bootstrap framework provides a grid system that presents a page as 12 columns with equal width. It is possible to group the columns together to create wider columns. This mechanism allows to make sites responsive to the screen size. This component allows to create horizontal groups of columns. Content should be placed within columns, i.e the row contains cells and cells contain other components.
Configuration
Component configuration consists of two parts: input fields for cell parameters and table with all cells contained in a row. There are two buttons for cells addition and deletion. Click on the cell selects it and it becomes possible to edit it’s width and offset or to delete it using button. Cells can be sorted by offset or by width in ascending or descending order. It’s possible to choose which columns in the table are displayed: width, offset or both.
By default the row contains two cells with the width 6 and offset 0. It is equivalent to the two columns of the same width.
General
Cell Width
Determines width of the cell in parts of twelve (i. e. 1 means 1/12 of width of row).
Cell Offset
Determines offset to the right of the cell in parts of twelve (i. e. 1 means 1/12 of width of row).
All parameters are required
Video
Creating «Bootstrap Row» component
Btn Group
This component allows grouping a series of buttons together on a single line.
Configuration
General
Name
The name of button group.
Size
- Large
- Normal
- Small
- Extra Small
By default - Normal
Layout
- Justified - a set of buttons stretches at equal sizes to span the entire width of its parent
- Vertical - a set of buttons appears vertically stacked
- Default - a set of buttons appears horizontally stacked
Items
On this tab it is possible to add, delete and configure items of the button group which can be button, dropdown or regular link.
Button
Provides button functionality. Allows to easily change the design.
Configuration
General
State
- Default
- Active - button will appear pressed (with a darker background, darker border and inset shadow)
- Disabled - button will fade in color by 50% and lose the gradient
Required parameter
Type
- Default - a gray button with rounded corners
- Primary - provides extra visual weight and identifies the primary action in a set of buttons, has a blue color
- Success - indicates a successful or positive action, has a green color
- Info - contextual button for informational alert messages, has a light blue color
- Warning - indicates caution should be taken with this action, has an orange color
- Danger - indicates a dangerous or potentially negative action, has a red color
- Link - looks like a link but maintains button behavior
Required parameter
Size
- Default
- Extra Small
- Small
- Large
Required parameter
Block Level
If set, button spans the full width of its parent
Button Text
Text shown on the button.
Required parameter
Carousel
Component for cycling through elements, like a slideshow.
Configuration
General
Pause carousel on
- Hover
- None
By default - Hover
Maximum number of slides
Maximum allowed number of slides.
Slide interval
The interval between slides switching in milliseconds.
By default - 5000
Wrap
If set, the slides are shown without interruption.
By default - False
Show indicators
If set, the indicators of slides are shown.
By default - True
Show control arrows
If set, the control arrows are shown.
By default - False
Keyboard
If set, the keyboard control is allowed.
By default - False
All parameters are optional
Dropdown
This component allows creating drop-down lists.
Configuration
General
Link Text
Text that will be represented as link.
Required parameter
Alignment
- Left
- Right
Direction
- Left
- Right
Menu Items
Item Style
- Default
- Header
- Divider
- Disabled
Required parameter
Link Text
Text that will be represented as link.
Link URL
The destination address of the link.
Link Tooltip
Text that will be represented on mouse hover.
Link Target
- Same Window
- New Window
Multi Component Grid
Here it’s possible to fill drop down list with the help of aforementioned properties.
Dynamic Effects Link
Link with the additional graphic design.
Configuration
General
Link Text
Text that will be represented as link.
Required parameter
Link URL
The destination address of the link.
Required parameter
Link Target
Sets the behaviour of the link: should it open in a new tab or in the same.
- Same window
- New window
By default - same window
Link Type
- Regular Link - link is stylized as text
- Button - link is stylized as button
By default - regular link
Tip Type
Type of graphical effect used for link stylization that appears when the user clicks on a link or hovers it with a mouse.
- Tooltip
- Popover - a pop-up box
Required parameter
The other parameters depend on the chosen tip type
Image
This component allows to use different stylized images.
Configuration
General
Image
The resource that should be dragged and dropped from DAM. It is possible to clear image associated with this component by pressing "Clear" button. By pressing "!" button opens the image info window where is shown the path to image resource. If is not set in Edit mode the image is shown as placeholder thumbnail, in Preview mode image is not shown at all.
Tooltip
Text that is shown as a tooltip when the cursor is placed on image.
Non-Adaptive
If set, the image isn't adaptive to screen resolution and is shown as it is on all screens. In other case (default) the size of the image will be changed according to the screen resolution.
Style
- Default - image isn't stylized
- Rounded - image has rounded corners
- Circle - image has form of the circle
- Thumbnail - image is stylized with the frame
All parameters are optional
Jumbotron
This component indicates a large callout for calling extra attention to some special content or information. It is possible to customize it by inserting other components, for example text, buttons etc.
Configuration
Jumbotron Background Color
Background Type
- Color - the background area will be filled with color
- Image - the background area will be filled with image
- Image with Fallback Color - the background area will be filled with image and a background color in case of image is not available
Required parameter
Background Color
It is possible to choose the color from the palette or set it's code manually using HEX color code.
Jumbotron Background Image
Image
The image resource that should be dragged and dropped from DAM. It is possible to clear image associated with this component by pressing "Clear" button. By pressing "!" button opens the image info window where is shown the path to image resource.
Link
Hyperlink that can be stylized as button, may lead to a subtitle on the same page or to the other page.
Configuration
Link Text
Text that will be represented as link.
Required parameter
Link URL
The destination address of the link. Can be a path to the other page or an anchor on the same page.
Required parameter
Link Tooltip
Text that will be represented on mouse hover.
Link Target
Sets the behavior of the opened link: should it open in a new tab or in the same.
- Same Window
- New Window
By default - same window
Link Type
- Regular Link - link is stylized as text
- Button - link is stylized as button
By default - regular link
Media Object
This component allows to use images and SoundCloud / YouTube / Vimeo objects combined with text.
Configuration
General
Width
Media object width proportion in percents.
Required parameter
Horizontal Alignment
Sets position of media object in relation to the text:
- Left
- Right
Required parameter
Vertical Alignment
Sets position of media object in relation to the borders:
- Top
- Middle
- Bottom
Required parameter
Content Heading
Title of content section displayed.
Content Text
Text that will be displayed beside the media object.
Media Configuration
Type
Type of the media object:
- Image
- SoundCloud
- Youtube
- Vimeo
Required parameter
The other parameters depend on the choosen media type.
Video
Creating «Media Object» component
Modal Dialog
This component allows creating flexible dialog boxes which are supposed to appear if some event happens.
Configuration
Title
Determines a modal dialog title.
By default - Disabled
Dialog size
Sets the size of pagination panel.
- Small
- Normal
- Large
By default - Normal
Required parameter
Animated
Enables animated appearance and disappearance.
By default - Enabled
Add backdrop
Closes dialog on backdrop click.
By default - Enabled
Keyboard
Closes dialog when pressing Escape button.
By default - Enabled
Navs
This component is connected with Navbar and Link components. It is possible to combine them and create convenient navigation bar.
Navs Configuration
General
Type
- Default
- Tabs
- Pills
- Vertical Pills
Alignment
- Left
- Right
- Justified - the component stretches at equal sizes to span the entire width of its parent
By default - Left
Navbar Configuration
General
Type
- Default
- Inverse
Required parameter
Alignment
- Default
- Static Top
- Fixed Top
- Fixed Bottom
Required parameter
Non-Collapsible
It set, the collapse icon for mobile devices is disabled.
By default - Disabled
Brand
Enable Brand
The brand consists of Image and Panel components. It means that the brand configuration contains configurations of aforementioned components.
By default - Enabled
Panel
It is a component with configurable structure for text content.
Configuration
General
Type
- Plain Text
- Success Color
- Info Color
- Warning Color
- Danger Color
By default - Plain Text
Collapsible
If set, the panel’s body by default is hidden until user clicks on a header of the panel.
By default - Disabled
Heading
Determines a header of the panel.
Heading Size
- Plain Text
- Header 1
- Header 2
- Header 3
- Header 4
- Header 5
- Header 6
By default - Plain Text
Body
Determines a body of the panel. It represents a configuration of foundation text component.
Footer
Determines a footer of the panel.
Section
Section is an area where the author puts the components. It is one of the general structural elements which are used for page building. It is supposed that the template has only one “Section container” component which consists of “Section” components.
Configuration
General
Type
- Normal
- Slider
By default - Normal
Required parameter
Name
Indicates a title attribute for this section tag.
Required parameter
Height
Determines section height in pixels (0/empty - auto-expanded). Value is required for section with type slider.
Background Type
- Opaque Color
- Background Image
By default - Opaque Color
Background
Allows choosing a background color or entering a HEX code of the color.
By default - #FFFFFF
Scroll speed
- None
- Slowest
- Slow
- Normal
- Fast
- Fastest
By default - None
Soundcould
Embeddable SoundCloud audio player.
Configuration
Player layout
- Two column with small poster
- Simple with large poster
By default - Two column with small poster
Required parameter
Player color
Allows choosing a player color or entering a HEX code of the color.
By default - #FF5500
Hide playlist
By default - Disabled
User Id / Track Id
Determines content by user or track id. It depends on «Hide playlist» attribute.
Required parameter
Auto play
It activates audio automatically.
By default - Disabled
Hide related
Hides related tracks.
By default - Disabled
Show comments
By default - Disabled
Show user
By default - Disabled
Show reposts
By default - Disabled
Table
A table with Bootstrap design, which has the ability to switch between pages. It is an extension of the standard component «table».
Configuration
Content
Default configuration of the standard table component.
Pagination
Enable Pagination
If set, activates additional functionality for showing only some items at a time and for switching between pages.
By default - Disabled
Pager Size
Sets the size of pagination panel.
- Large
- Normal
- Small
By default - Normal
Items Per Page
It determines the max amount of rows on a page.
By default - 20
Required parameter
Max Pager Buttons Visible
Configures a max number of page buttons. If there are more pages, some buttons will be hidden.
By default - 10
Required parameter
Vimeo
Embeddable video player.
Configuration
Video ID
Determines content by Vimeo video id.
Required parameter
Ratio
- 16 x 9
- 4 x 3
By default - 16 x 9
Required parameter
Player color
Allows to choose a player color or to enter a HEX code of the color.
By default - 00adef
Fullscreen allowed
Allows to use fullscreen mode.
By default - Disabled
Auto play
Auto playing of video.
By default - Disabled
Infinite play
Infinite playing of video.
By default - Disabled
Hide byline
By default - Disabled
Hide badge
By default - Disabled
Youtube
Embeddable video player.
Configuration
Video ID
Determines content by Youtube video id.
Required parameter
Ratio
- 16 x 9
- 4 x 3
By default - 16 x 9
Required parameter
Hide control panel
Hides the control panel of the player.
By default - Disabled
Hide relative video
Hides the video after it finishes.
By default - Disabled
Hide video info
Hides the information about video such as the title and author.
By default - Disabled