We recommend using markdown for basic content editing, because it is fast to write, easy to read and prevents html-coding errors. Read more about markdown or check this tutorial. Although markdown is preferred for basic content editing, you will often need to use html for more complicated stuff.
2-Column Grid
Hi!
My name is Bob Dobalina, and this website is my blog as well as a playground
for the X3 Photo Gallery website CMS. View Demo
About me
I am interested in design, functionality, minimalism and performance. My hobbies are sleep-walking, planking and fishing.
Article
More than a decade ago, when SWF was an emerging technology, this website
became a very popular showcase of Flash. See Post
Block Grid
Block Grid Block grids give you a way to evenly separate contents of a list within a grid. If you want to create a row with a specific amount of elements that need to stay evenly spaced, the block grid is your friend.
Carousel Plugin
Camel
Fish
Squirrel
Goat
Elephant
Ox
Whale
Blowfish
Turtle
Embed Sources
Vimeo
Youtube
Google Maps
Self-hosted Video
Font Icons
Easily add icons into your page designs with the included Font Awesome. Font icons are vector-based, so they look good at any size, and can be styled with CSS.
Custom Forms
Add any elements to your contact form. All data will be forwarded by email.
Modal Plugin
The modal plugin allows you to open popup dialog windows, useful for displaying relevant information. Modals are usually triggered by buttons, but can also be triggered on page-load.
Modal Plugin
The modal plugin allows you to open popup dialog windows
Modal Element
Simply add a modal to your page. The modal will be hidden until triggered:
Modal Plugin
Add your modal content here. Any HTML is supported.
Modal Trigger Link
Add a button or anchor to trigger a modal with a specific ID on click:
The tabs plugin allows you to easily add an interactive tabs section anywhere in your content. Tabs can be useful to separate related content into clickable sections. Choose from horizontal or vertical orientation, three styles and several helper classes. Tabs respond appropriately on small (mobile) screens, and page will scroll to fit tabs when there is extensive content.
Sample Code
To create a tabs-layout, you need to use the following code:
This is the first panel of the basic tab example. You can place all sorts of content here including a grid.
This is the second panel of the basic tab example. This is the second panel of the basic tab example.
This is the third panel of the basic tab example. This is the third panel of the basic tab example.
This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.
Styles
vertical
Include the vertical class in both your UL tabs element and your tabs-content element set vertical tabs orientation, instead of the default horizontal orientation.
tabs-style-1tabs-style-2
Include any style class in your tabs-container element, to add a style different from the default style.
tabs-anim
Include the tabs-anim class in your tabs-container element to make your tabs fade in on change.
tabs-radius
Include the tabs-radius in your tabs-container element class to give your tabs rounded corners.
tabs-color-active
Include the tabs-color-active class in your tabs-container element to colorize the active tab.
tabs-wide
Include the tabs-wide class in your tabs-container element to make your tabs wider. * Only applies for horizontal tabs orientation.
tabs-smalltabs-large
Include the tabs-small or tabs-large class in your tabs-container element to make your tabs smaller or bigger. Does not apply for small (mobile) screens.
tabs-centertabs-right
Include the tabs-center or tabs-right class in your tabs-container element to make your tabs align center or right, instead of the default left. * Only applies for horizontal tabs orientation.
tabs-width-30tabs-width-50tabs-width-auto
Include the tabs-width-30, tabs-width-50 or tabs-width-auto class in your tabs-container element to set the % width of your vertical orientation tabs, instead of the default 20%.* Only applies for vertical tabs orientation.
small-block-grid-*
Include the small-block-grid-* class in your UL tabs element to make your tabs justify to full width. Replace the * with the amount of tabs you have. * Only applies for horizontal tabs orientation.
Sample Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac rutrum est. Aliquam sit amet risus aliquet, sagittis risus eu, facilisis ex. Fusce eu neque et purus accumsan maximus maximus nec lacus. Nulla auctor augue ut fermentum venenatis. Donec volutpat ullamcorper felis, in tincidunt tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eleifend finibus tellus, et consectetur nulla pellentesque eu. In et justo risus. Donec sed dolor sit amet dolor cursus aliquam ut vel justo. Praesent sed quam diam. Duis scelerisque lectus non venenatis elementum.
Ok! Etiam id commodo lorem. Nulla maximus fermentum nibh eget consectetur. Suspendisse luctus nunc orci, eget varius arcu tempor non. Duis ac efficitur augue, eu sollicitudin nisi. Praesent ligula tellus, consequat non tellus sit amet, fringilla gravida justo. Duis in justo at magna ornare tristique quis non risus. Fusce feugiat finibus urna quis rhoncus. Praesent feugiat eget tortor quis imperdiet. Praesent nulla lacus, ornare vel velit non, efficitur fringilla nibh. Cras nisi sapien, dapibus pretium nunc a, rhoncus tincidunt urna. Donec tristique nunc turpis, sed aliquam leo tincidunt sit amet. Integer vitae vehicula elit. Pellentesque aliquet nisi sit amet ullamcorper facilisis. Morbi quis turpis urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Alert Box
Alert boxes allow you to emphasize content by adding it inside a box. [code]
Alert box example
This is a simple alert-box with text and images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere, risus quis malesuada fringilla, metus nulla consectetur mi, a ullamcorper mi eros et mi. Pellentesque facilisis libero at orci finibus porta quis eget urna.
Dismissible Alert Box
This alert box can be dismissed by clicking the close button.
This is a minimal alert box. Close it!
Alert Boxes
To add an alert-box, simply add your content inside the following html:
Your html/content here
You can choose from the following color tags bg2bg3primaryalertwarningsuccessinfodefault
Labels
label
Use labels to add emphasis to any content.
Text
You can choose from the following color tags:
primaryalertwarningsuccessinfodefaultbg2bg3
Code Highlighter
Use the code highlighter to colorize code for easy viewing and copying. Useful for technical articles.
var googoo = 'gaga';
function get_googoo(){
return googoo;
}
get_googoo(); // returns 'gaga'
Toggle Content
Sometimes you want to hide long sections of content until the visitor chooses to view more. Simply add a toggle button link, and an element that contains the hidden content. You can toggle any kinds of content and the toggle link can be before or after the hidden content. Toggle can also be effective to create FAQs or to simply hide long image descriptions like in this example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique quis justo luctus pulvinar. Nulla venenatis lacus eget sapien pretium dignissim. Duis feugiat magna vitae fermentum euismod. more