You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

History

Aleksander Machniak bba6b2f273 Reset content frame title on frame unload		7 years ago
..
bootstrap	Update bootstrap to the most recent build	7 years ago
fonts	…
images	Add image upload widget for contact photos (#29 )	8 years ago
styles	Fix some typos	7 years ago
templates	Support moving sidebar entries to toolbar menu on mobile	7 years ago
README.md	Fix some typos	7 years ago
meta.json	…
ui.js	Reset content frame title on frame unload	7 years ago
watermark.html	…

README.md

Roundcube Webmail Skin "Elastic"

This skin package contains a theme for the Roundcube Webmail software. It can be used, modified and redistributed according to the terms described in the LICENSE section.

For information about building or modifying Roundcube skins please visit https://github.com/roundcube/roundcubemail/wiki/Skins

Roboto font from https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=cyrillic,latin-ext,cyrillic-ext,latin,greek,greek-ext

LICENSE

The contents of this folder are subject to the Creative Commons Attribution-ShareAlike License. It is allowed to copy, distribute, transmit and to adapt the work by keeping credits to the original authors in the README file. See http://creativecommons.org/licenses/by-sa/3.0/ for details.

PROJECT GOALS

Create a user interface that is clean and usable with any screen size. Use new technologies like e.g. flexbox, @media, font-icons or less. Cleanup css/html and unify as much as possible.

INSTALLATION (development):

git clone https://github.com/roundcube/roundcubemail.git --branch dev-elastic
cd roundcubemail/skins
git clone https://github.com/roundcube/elastic.git
Disable all plugins (we're not there yet) and set devel_mode=true.

INSTALLATION (production):

All styles are written using LESS syntax. Thus it needs to be compiled using the lessc command line tool. This comes with the nodejs-less RPM package which depends on nodejs.

    $ lessc -x styles/styles.less > styles/styles.css
    $ lessc -x styles/print.less > styles/print.css
    $ lessc -x styles/embed.less > styles/embed.css

(the -x option minifies the CSS code)

References to image files from the included CSS files can be appended with cache-buster marks to avoid browser caching issues after updating.

Run bin/updatecss.sh --dir <path-to-kolab-skin> from the Roundcube package before packaging the skin or after installing it on the destination system.

RULES:

Supported browsers: IE11+, Edge, Last 2 versions for Chrome/Firefox/Safari, Android Browser 5+, iOS Safari 7+.
Minimum supported screen width is 240px (note that even if the device screen resolution is e.g.320x372 changing the text size in device settings will reduce the resolution)
Every page (which is not a frame) has following required structure:

    <body>
        <div id="layout">
            <div id="menu"></div>
            <div id="sidebar"></div>
            <div id="list"></div>
            <div id="content"></div>
        </div>
    </body>

where sidebar and list are optional. Which element of the layout will be displayed as a main view on mobile devices can be defined by adding selected class to it.

Every button, that is not nor should have inner element for the button label.
Special attributes:
- data-hidden-small: Makes a menu entry/button hidden on small devices. Can be used for example for functionality not implemented or that has no sense on phones or touch devices.