These styles give a simple basic layout for your Ðapps.
Note: This is a very early stage of the package, not all elements are explained, or ready to use. Use it just to try.
The Ethereum Dapp design style is meant to ease the task of designing clear and good looking App interfaces. It uses as few images as possible for the UI and instead uses colors and icons for differentiating hierarchies. In order to make each Dapp unique and help the user quickly realize where he is even when navigating different instances of the same app, we use GeoPatterns in backgrounds when they refer to a unique instance of something. The fonts used are all open source, Source Sans, from Adobe which has a rich family and multiple styles and Montserrat for bold and strong titles. We also use a font for vector icons to ensure scalability and easy customization.
Most apps are different variations of some simple elements:
-
Use the header on the top with tabs, when your Dapp uses a few constant sections (ie. send and receive)
-
Use the left sidebar when your Dapp has a large number of sources for content (ie. a list of chats)
-
Use the right action bar for actions to be done with the current content
-
Use Dapp-overflow if you want the sections to scroll independently and to remain fixed on the screen
To use it as CSS file just link the css file from the dist/ folder. (No done yet.. sorry, compile yourself please)
To use it as less file, which would allow you to overwrite all constants
from the constant.import.less and use the mixins from mixins.import.less.
Just link the dapp-styles.less in your apps main LESS file.
To use it in a Meteor app add the less package:
$ meteor add less
$ meteor add ethereum:dapp-styles
Adn add the following to your main less file:
@import '{ethereum:dapp-styles}/dapp-styles.less';
These are early screenshots and many things are bound to change during development
A full layout consists of the following HTML elements:
<header class="dapp-header">
</header>
<div class="dapp-flex-content">
<!-- aside -->
<aside class="dapp-aside">
</aside>
<!-- content-->
<main class="dapp-content">
</main>
<!-- actionbar -->
<aside class="dapp-actionbar">
</aside>
</div>
<!-- footer -->
<footer class="dapp-footer">
</footer>This gives you a basic flex box layout with a fixed header height and footer height, and a growable content area.
Note: You can remove any part (header, footer, asides) of it and still have nice fitting containers.
If you want the apps area to be maximal the window size and the content of your containers to be overflow: auto,
just add the dapp-overflow class to the dapp-header, dapp-content, dapp-footer, dapp-actionbar and/or dapp-aside containers and add the following to your main CSS file:
html, body {
height: 100%;
}
To show a HEX grid for element alignment just add the <div class="dapp-grid"></div> element to your <body> tag.
When you use the less version of the framework you will be able to use all its LESS mixins including the LESSHAT mixins (https://github.com/madebysource/lesshat, which are used by the dapp-styles) in your own LESS files.
To limit the width of you content use the .dapp-container class,
which will center your content and limit it to a max width tof 960px (You can overwrite that with the @widthContainer variable).
<div class="dapp-container">
...
</div>All paddings and margins are based on a 32px by 18.4px grid. You can overwrite this grid by chaging the:
@gridWidth@gridHeight
variables.
Additionally dapp-styles uses a grid system from Matthew Hartman. For fluid column layouts. For a full documentation see http://matthewhartman.github.io/base/docs/grid.html The grid system is based on 12 columns and can be placed anywhere in you HTML.
Note This grid system is not based on the @gridWidth and @gridHeight, as this are fluid columns.
To create a simple grid use the row, col and col-x classes.
<div class="row clear">
<div class="col col-1 tablet-col-11 mobile-col-1-2">
<span class="no-tablet no-mobile">1</span>
<span class="no-desktop show-tablet no-mobile">11</span>
<span class="no-desktop no-tablet show-mobile">1-2</span>
</div>
<div class="col col-11 tablet-col-1 mobile-full">
<span class="no-tablet no-mobile">11</span>
<span class="no-desktop show-tablet no-mobile">1</span>
<span class="no-desktop no-tablet show-mobile">1-2</span>
</div>
</div>To change the column size for mobile and tablets you can use the following classes:
.mobile-fullsets column width to 100% and removes floats for mobile devices.tablet-fullsets column width to 100% and removes floats for tablet devices.col-1-2sets column width to 50% for all devices.col-1-3sets column width to 33% for all devices.col-1-4sets column width to 25% for all devices.col-3-4sets column width to 75% for all devices.tablet-col-1-2sets column width to 50% for tablet devices.tablet-col-1-3sets column width to 33% for tablet devices.tablet-col-1-4sets column width to 25% for tablet devices.tablet-col-3-4sets column width to 75% for tablet devices.mobile-col-1-2sets column width to 50% for mobile devices.mobile-col-1-3sets column width to 33% for mobile devices.mobile-col-1-4sets column width to 25% for mobile devices.mobile-col-3-4sets column width to 75% for mobile devices
To change change the break points overwrite the following variables:
@widthContainerdefault: @gridWidth * 30; // 32px * 30 = 960px@widthTabletdefault: @gridWidth * 20; // 32px * 20 = 640px@widthMobiledefault: 100%; // mobile is everything below the@widthTabletbreakpoint
TODO
A list of accounts with name and address. Either clickable, with the <button> tag, or as simple list.
The a.dapp-identicon can be an image icon. (If you use the ethereum:elements Meteor package, you can use {{> dapp_identicon identity=address class="dapp-small"}})
The <span> is optional.
Selected items need the <figure class="icon-check"></figure> to show a checkmark.
<ul class="dapp-account-list">
<!-- Clickable accounts use <button> -->
<li>
<button>
<a class="dapp-identicon dapp-small" style="background-image: url(identiconimage.png)"></a>
<h3>My clickable account</h3>
<span>0x343c98e2b6e49bc0fed722c2a269f3814ddd1533</span>
</button>
</li>
<li>
<button class="selected">
<a class="dapp-identicon dapp-small" style="background-image: url(identiconimage.png)"></a>
<h3>My clickable selected account</h3>
<span>0x343c98e2b6e49bc0fed722c2a269f3814ddd1533</span>
<figure class="icon-check"></figure>
</button>
</li>
<!-- Unclickable accounts -->
<li>
<a class="dapp-identicon dapp-small" style="background-image: url(identiconimage.png)"></a>
<h3>My unclickable account</h3>
<span>0x343c98e2b6e49bc0fed722c2a269f3814ddd1533</span>
</li>
<li class="selected">
<a class="dapp-identicon dapp-small" style="background-image: url(identiconimage.png)"></a>
<h3>My unclickable selected account</h3>
<span>0x343c98e2b6e49bc0fed722c2a269f3814ddd1533</span>
<figure class="icon-check"></figure>
</li>
</ul>To add a header or aside menu just add the follwowing structure to your .dapp-header or dapp-aside container:
<nav>
<ul>
<li>
<a href="#" class="active">
<i class="icon-arrow-down3"></i>
<span>Receive</span>
</a>
<a href="#">
<i class="icon-arrow-up2"></i>
<span>Send</span>
</a>
</li>
</ul>
</nav>- Simple Line Icon fonts by Graphic Burguers