https://github.com/wiseplat/dapp-styles
https://github.com/wiseplat/dapp-styles
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/wiseplat/dapp-styles
- Owner: WISEPLAT
- Created: 2018-02-09T19:30:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-09T19:32:31.000Z (over 8 years ago)
- Last Synced: 2025-10-20T06:35:17.767Z (8 months ago)
- Language: HTML
- Size: 1.16 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ðapp styles
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 Design
The Wiseplat 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
## Setup
### CSS
To use it as CSS file just link the css file from the `dist/` folder. **(No done yet.. sorry, compile yourself please)**
### LESS
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.
### Meteor
To use it in a Meteor app add the `less` package:
$ meteor add less
$ meteor add wiseplat:dapp-styles
Adn add the following to your main less file:
@import '{wiseplat:dapp-styles}/dapp-styles.less';
### Screenshots
**These are early screenshots and many things are bound to change during development**
## Usage
A full layout consists of the following HTML elements:
```html
```
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.**
### Using overflow auto in 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:
```css
html, body {
height: 100%;
}
```
### Development grid
To show a HEX grid for element alignment just add the `
` element to your `` tag.
### Mixins
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.
### Containers
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).
```html
...
```
### Grids
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.
```html
1
11
1-2
11
1
1-2
```
To change the column size for mobile and tablets you can use the following classes:
- `.mobile-full` sets column width to 100% and removes floats for mobile devices
- `.tablet-full` sets column width to 100% and removes floats for tablet devices
- `.col-1-2` sets column width to 50% for all devices
- `.col-1-3` sets column width to 33% for all devices
- `.col-1-4` sets column width to 25% for all devices
- `.col-3-4` sets column width to 75% for all devices
- `.tablet-col-1-2` sets column width to 50% for tablet devices
- `.tablet-col-1-3` sets column width to 33% for tablet devices
- `.tablet-col-1-4` sets column width to 25% for tablet devices
- `.tablet-col-3-4` sets column width to 75% for tablet devices
- `.mobile-col-1-2` sets column width to 50% for mobile devices
- `.mobile-col-1-3` sets column width to 33% for mobile devices
- `.mobile-col-1-4` sets column width to 25% for mobile devices
- `.mobile-col-3-4` sets column width to 75% for mobile devices
#### Breakpoints
To change change the break points overwrite the following variables:
- `@widthContainer` default: @gridWidth * 30; // 32px * 30 = 960px
- `@widthTablet` default: @gridWidth * 20; // 32px * 20 = 640px
- `@widthMobile` default: 100%; // mobile is everything below the `@widthTablet` breakpoint
### Elements
TODO
#### dapp-account-list
A list of accounts with name and address. Either clickable, with the `` tag, or as simple list.
The `a.dapp-identicon` can be an image icon. (If you use the `wiseplat:elements` Meteor package, you can use `{{> dapp_identicon identity=address class="dapp-small"}}`)
The `` is optional.
Selected items need the `` to show a checkmark.
```html
-
My clickable account
0x343c98e2b6e49bc0fed722c2a269f3814ddd1533
-
My clickable selected account
0x343c98e2b6e49bc0fed722c2a269f3814ddd1533
-
My unclickable account
0x343c98e2b6e49bc0fed722c2a269f3814ddd1533
-
My unclickable selected account
0x343c98e2b6e49bc0fed722c2a269f3814ddd1533
```
#### Menus
To add a header or aside menu just add the follwowing structure to your `.dapp-header` or `dapp-aside` container:
```html
```
## Credits and ackowledgements
* Simple Line Icon fonts by [Graphic Burguers](http://graphicburger.com/simple-line-icons-webfont/)