Version : 0.0.2-dev

Github / BlogoText-aui
Github / BlogoText
BlogoText.org
aui.BlogoText.org

Intro

About this

Compatibility

Modern browser with HTML5, CSS3 and ES6 support.

Support

You can use the content (CSS/JS/PHP) as you wish (according to the MIT license), the icons come from google material design (other license). You can report bugs, suggest improvements via the BlogoText github. We are not opposed to adding features, only on the condition that they are useful in the BlogoText administration space. If you fork this template to improve it, let us know :)

Some Basics

Always useful...

h1

h2

h3

h4

h5
h6

Paragraph with underline, strike & bold, supsup, subsub.

Text with class="text-center" on his parent.

Link exemple

  1. List
  2. List
  3. List

Forms

Some kind of form.

A small tips, can be useful for user
A small tips, can be useful for user
Type text on several lines
the * is added by CSS
just adding required on type="email" ...
The same as above, but "form-inline" ...
The same as above, but "form-inline" ...
The same as above, but "form-inline" ...
The same as above, but "form-inline" ...

Tabs

Tab 1 content ...

Show tab 2

By default, .tabs-content haven't padding or background.

Tab 3 content ...

Icons (from font)

Icons are in SVG, from material design (google), to add an icon :

  1. Donwload the icons
  2. put it in admin/theme/icons/
  3. [BT]admin/theme/icons/icons.svg.php will get all icons join in an single svg file
  4. use JS/PHP function tpl_ico_tag_svg()

close

account_circle

autorenew

backup

bookmark

bookmark_border

cached

check_circle

cloud

code

colorize

comment

create

dashboard

delete

description

done

error_outline

event

exit_to_app

extension

face

fingerprint

format_align_center

format_align_justify

format_align_left

format_align_right

format_bold

format_color_fill

format_color_text

format_italic

format_list_bulleted

format_list_numbered

format_quote

format_size

format_strikethrough

format_underlined

fullscreen

functions

get_app

help

history

home

info

info_outline

insert_link

insert_photo

label

label_outline

launch

list

lock

lock_open

lock_outline

menu

more_vert

newspaper

open_in_new

power_settings_new

question_answer

rss_feed

schedule

search

settings

settings_backup_restore

speaker_notes

title

today

visibility

visibility_off

If you want some color, the easy way, use CSS color on the icon parent.

Buttons

Some buttons, always useful...

buttons / colors & type

Working fine with links <a class="btn btn-info" href="#" title="some link">Link</a> Link

buttons / Size

buttons / Icons

buttons / container

For a form submission (...), wrappe your button in a <div class="btn-container">.

Block

different kinds of block size, with a .block-white for more visibility.

.block-tiny

.block-small

.block-medium

.block-large

.block-huge

.block-full

Notification

Notification is a JavaScript class, used to show some notification ...

Notification / BigToast

In this exemple, the big toast will be closed after 4 sec.

In this exemple, the big toast will be closed after 12 sec or threw a button.

In this exemple, the big toast is set to use a CSS class "error" will be closed after 12 sec or threw a button.

In this exemple, the big toast is set to use a CSS class "error" will be closed with the button.

BigToast with a callback, in this case, just a alert();

Notification / Loading bar

Display a loading bar for this block.

Display a loading bar behind the top bar

Auth / login
Cancel
Blog / Write a new article
Cancel