/beap/css/

• - serverStyles.css
• - fonts_icons.html (this file)

border-radius

The assymetrical rounded corners is the unique visual design element
throughout all server components.

• The general rule of thumbs is : 4 : 2 : <1
  (on big elements up to [ 9 : 3: <1 ])
• sometimes split => [ <header> <content> <footer> ]
  (see the overall page frame layout)
• The first (top-left) corner should be chosen big enough,
  to be clearly recognizable - and shouldn't be too small.
  ( depending on font/line-height and padding of the (top) row... )
• The second (top-right) corner may be slightly smaller
  than the ratio - especially on "one-liners"...
  (see below: 0.5em 0.2em... 0.66em 0.3em...)
• Both bottom corners are always identical,
  are sharp or near 0 in most cases
  they are rounded only :
  - on a surrounding or overlay element (action boxes, menues)
  - or on page-defining blocks (really big elements)
  

border-radius:0.5em 0.25em 0.1em 0.1em; border-radius:0.5em 0.25em 0 0; border-radius:0.5em 0.2em 0 0;
border-radius:0.66em 0.33em 0.1em 0.1em; border-radius:0.66em 0.33em 0 0; border-radius:0.66em 0.3em 0 0;
border-radius:1em 0.5em 0.2em 0.2em; border-radius:1em 0.5em 0 0;

fonts

/beap/css/fonts/fontStyles.css

• - fonts/fontStyles.css

font-family: OpenSans

sans-serif - weights: 200, 400, 700, 800, 900

font-family: Fantasque

monospace - weights: 400, 700

font-family: Garamond

serif - weights: 400 - size-adjust: 110%

font-family: GaramondSC

serif - weights: 400 - size-adjust: 110%

font-family: BeapIconic

icon-font - weight: 400

Notes :

W Glyphs have no padding ! - multiple Glyphs may "stick" together ( mp )
i The space Glyph is thin by purpose - about 0.1em wide ... ( m p )
E bold and italic works for most Glyphs...
f serverStyles.css - use <span class="BeapIconic">...</span>

Examples :

Specials & Ligatures :

Open Sans from:
ascenderfonts.com, licensed under
Apache License v2.00

Fantasque Sans Mono from:
belluzj (Jany Belluz), licensed under
SIL Open Font License v1.10

EB Garamond from:
Georg Duffner, licensed under
SIL Open Font License v1.10

BeapIconic from:
Siggi Gross, freely available under
Creative Commons Attribution-ShareAlike 4.0 License
BeapIconic.otf Download

icons

format: svg - size: 128x128

/beap/css/imgs/

• - beap
• - rwmax

/beap/css/imgs/actions/

• - confirm
• - cancel
• - link
• - exclamation
• - slash (forbidden)

/beap/css/imgs/fileOp/

• - blank (clear, new)
• - add
• - delete
• - edit (chmod, chown, chgrp)
• - rename
• - copy
• - paste
• file actions
• - load (open)
• - send (save)
• - down (download)
• - down_anim (download)
• - up (upload)
• - up_anim (upload)
• - reload
• - reload_anim
• - save
• - save_anim
• folders actions
• - folder_up
• - zip

/beap/css/imgs/files/

• - file_default
• - file_unknown
• - file_hidden
• text-based
• - file_txt
• - file_html (xml, css)
• - file_script
• - file_code
• documents
• - file_pdf
• media
• - file_audio
• - file_video
• - file_img
• - file_vector
• - file_3D
• specials
• - file_zip
• - file_font
• - file_exe
• - file_nodejs
• - file_beap
• windows-specific
• - file_win_exe
• - file_win_xls
• - file_win_doc
• - file_win_ppt
• server-specific
• - file_server
• - file_conf
• - file_cert
• - file_stream
• - file_process
• - file_session
• database
• - db_class
• - db_id
• - db_field
• - db_fieldArr
• - db_obj
• - db_objArr
• - db_category
• - db_category_open
• - db_value
• - db_entry
• - db_attr
• folders
• - folder
• - folder_open
• - folder_special (baseFolders)
• - folder_special_open

/beap/css/imgs/notifications/

• - empty
• - info
• - question
• - success
• - warning
• - forbidden
• - error
• - progress
• - login
• - pwd

/beap/css/imgs/buttons/

• - empty
• - checked
• - cross
• - exclamation
• - info
• - question
• - plus
• - minus
• - navUp
• - navRight
• - navDown
• - navLeft

/beap/css/imgs/options/

• - empty
• - checked
• - cross
• - unselected
• - selected
• - exclamation
• - info
• - question
• - plus
• - minus
• - settings

/beap/css/imgs/sessions/

• - login_true
• - login_false
• - profilePublic
• - profileDefault
• - profileRoot

/beap/css/imgs/views/

• - appIcon
• - logIcon
• - consoleIcon
• - editorIcon
• - mailIcon
• - filesIcon
• - confIcon
• - windowIcon

The basic Idea for some Icons was adapted from:
p.yusukekamiyamane.com, licensed under
Creative Commons Attribution 3.0 License

The JS Logo for the "file_nodejs" icon is a
trademark of : Node.js®, OpenJS Foundation

The Windows & Office Logos for the windows-specific icons
"file_win_exe", "file_win_xls", "file_win_doc" & "file_win_ppt" are a
trademark of : Microsoft Windows®, Microsoft 365®

modalView - icons

/beap/css/imgs/modalView/

size: 48px
format: png

• /beap/css/imgs/modalView/iconStyles.css

- insert as: <div class="icon [name]"> </div>
- image & background-color will be set

info, quest

warn, error, success

login, pwd

progress

blank

copyright

© Siggi Gross - June 2024 - mail@siggi-gross.de

Unless stated otherwise, all Icons and Graphics
included in this particular page - as well as the
BeapIconic font - are available under :
Creative Commons Attribution-ShareAlike 4.0 License

You are free to use, share and adapt them,
inside and outside of this server software,
as whole icon set or individual images,
by agreeing to the CC BY-SA 4.0 license.

There is no need to credit each individual Image or Icon.

Attribution: appropiate crediting of the entire icon set once
- by naming of the license (in short or long notation)
- and linking to : this particular page, to https://beap-code.de or to
https://siggi-gross.de - are considered as equivalent and sufficient.

BeapIcons.zip Download
BeapIconic.otf Download

[ Legal Notice | Impressum & Datenschutz ]