{"id":20392406,"url":"https://github.com/wiseplat/dapp-styles","last_synced_at":"2026-02-21T10:31:15.183Z","repository":{"id":122791607,"uuid":"120946795","full_name":"WISEPLAT/dapp-styles","owner":"WISEPLAT","description":null,"archived":false,"fork":false,"pushed_at":"2018-02-09T19:32:31.000Z","size":1217,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-20T06:35:17.767Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WISEPLAT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-09T19:30:16.000Z","updated_at":"2018-02-09T19:32:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"0394e282-cd20-47c1-8269-3bdd4ff29e18","html_url":"https://github.com/WISEPLAT/dapp-styles","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WISEPLAT/dapp-styles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WISEPLAT%2Fdapp-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WISEPLAT%2Fdapp-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WISEPLAT%2Fdapp-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WISEPLAT%2Fdapp-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WISEPLAT","download_url":"https://codeload.github.com/WISEPLAT/dapp-styles/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WISEPLAT%2Fdapp-styles/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29679049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T09:33:50.764Z","status":"ssl_error","status_checked_at":"2026-02-21T09:33:19.949Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T03:43:39.482Z","updated_at":"2026-02-21T10:31:15.164Z","avatar_url":"https://github.com/WISEPLAT.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ðapp styles\n\nThese styles give a simple basic layout for your Ðapps.\n\n**Note: This is a very early stage of the package, not all elements are explained, or ready to use. Use it just to try.**\n\n## The Design\n\nThe 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.\n\nMost apps are different variations of some simple elements: \n\n* Use the header on the top with tabs, when your Dapp uses a few constant sections (ie. send and receive)\n\n* Use the left sidebar when your Dapp has a large number of sources for content (ie. a list of chats)\n\n* Use the right action bar for actions to be done with the current content \n\n* Use Dapp-overflow if you want the sections to scroll independently and to remain fixed on the screen\n\n\n## Setup\n\n\n### CSS\nTo use it as CSS file just link the css file from the `dist/` folder. **(No done yet.. sorry, compile yourself please)**\n\n\n### LESS\nTo use it as less file, which would allow you to overwrite all constants \nfrom the `constant.import.less` and use the mixins from `mixins.import.less`.\nJust link the `dapp-styles.less` in your apps main LESS file.\n\n### Meteor\nTo use it in a Meteor app add the `less` package:\n\n    $ meteor add less\n    $ meteor add wiseplat:dapp-styles\n\nAdn add the following to your main less file:\n\n    @import '{wiseplat:dapp-styles}/dapp-styles.less';\n\n\n\n### Screenshots \n**These are early screenshots and many things are bound to change during development**\n\n![Generic contract showing styles](https://cloud.githubusercontent.com/assets/112898/6045448/4eb71c24-ac81-11e4-8498-7a4153530841.png)\n\n![Democracy DAO](https://cloud.githubusercontent.com/assets/112898/6045449/535c483a-ac81-11e4-8957-e2c1cb9af27d.png)\n\n![Democracy DAO - Pink](https://cloud.githubusercontent.com/assets/112898/6045452/5a188a6c-ac81-11e4-9a8c-40eda1dc6faa.png)\n\n![A custom currency contract](https://cloud.githubusercontent.com/assets/112898/6045454/5e2283f6-ac81-11e4-8bc3-727f6ac33b27.png)\n\n\n![An Escrow contract](https://cloud.githubusercontent.com/assets/112898/6045463/6952295c-ac81-11e4-8e2b-76b7f7e38b3c.png)\n\n![Chat Application](https://cloud.githubusercontent.com/assets/112898/6045468/6e9d2ee8-ac81-11e4-8d17-79762336ed4d.png)\n\n\n![Chat application, profile view](https://cloud.githubusercontent.com/assets/112898/6045469/7316d3ca-ac81-11e4-8855-5a88fc0ac92e.png)\n\n\n\n\n## Usage\n\nA full layout consists of the following HTML elements:\n\n```html\n\n\u003cheader class=\"dapp-header\"\u003e\n    \n\u003c/header\u003e\n\n\u003cdiv class=\"dapp-flex-content\"\u003e\n    \n    \u003c!-- aside --\u003e\n    \u003caside class=\"dapp-aside\"\u003e\n\n    \u003c/aside\u003e\n\n    \u003c!-- content--\u003e\n    \u003cmain class=\"dapp-content\"\u003e\n        \n    \u003c/main\u003e\n\n    \u003c!-- actionbar --\u003e\n    \u003caside class=\"dapp-actionbar\"\u003e\n\n    \u003c/aside\u003e\n\n\u003c/div\u003e\n\n\u003c!-- footer --\u003e\n\u003cfooter class=\"dapp-footer\"\u003e\n    \n\u003c/footer\u003e\n\n```\n\nThis gives you a basic flex box layout with a fixed header height and footer height, and a growable content area.\n\n**Note: You can remove any part (header, footer, asides) of it and still have nice fitting containers.**\n\n### Using overflow auto in containers\n\nIf you want the apps area to be maximal the window size and the content of your containers to be `overflow: auto`,\njust 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:\n\n```css\nhtml, body {\n    height: 100%;\n}\n```\n\n### Development grid\n\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/232662/6078219/28265c56-adf7-11e4-9568-69675647e894.png\" alt=\"HEX Grid\" width=\"300\"\u003e\n\n\nTo show a HEX grid for element alignment just add the `\u003cdiv class=\"dapp-grid\"\u003e\u003c/div\u003e` element to your `\u003cbody\u003e` tag.\n\n### Mixins\n\nWhen you use the less version of the framework you will be able\nto 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.\n\n\n### Containers\n\nTo limit the width of you content use the `.dapp-container` class,\nwhich will center your content and limit it to a max width tof 960px (You can overwrite that with the `@widthContainer` variable).\n\n```html\n\u003cdiv class=\"dapp-container\"\u003e\n    ...\n\u003c/div\u003e\n```\n\n### Grids\n\nAll paddings and margins are based on a 32px by 18.4px grid. You can overwrite this grid by chaging the:\n\n- `@gridWidth`\n- `@gridHeight`\n\nvariables.\n\nAdditionally 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\nThe grid system is based on 12 columns and can be placed anywhere in you HTML.\n\n**Note** This grid system is not based on the `@gridWidth` and `@gridHeight`, as this are fluid columns.\n\n\nTo create a simple grid use the `row`, `col` and `col-x` classes.\n\n```html\n\u003cdiv class=\"row clear\"\u003e\n    \u003cdiv class=\"col col-1 tablet-col-11 mobile-col-1-2\"\u003e\n        \u003cspan class=\"no-tablet no-mobile\"\u003e1\u003c/span\u003e\n        \u003cspan class=\"no-desktop show-tablet no-mobile\"\u003e11\u003c/span\u003e\n        \u003cspan class=\"no-desktop no-tablet show-mobile\"\u003e1-2\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"col col-11 tablet-col-1 mobile-full\"\u003e\n        \u003cspan class=\"no-tablet no-mobile\"\u003e11\u003c/span\u003e\n        \u003cspan class=\"no-desktop show-tablet no-mobile\"\u003e1\u003c/span\u003e\n        \u003cspan class=\"no-desktop no-tablet show-mobile\"\u003e1-2\u003c/span\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nTo change the column size for mobile and tablets you can use the following classes:\n\n- `.mobile-full` sets column width to 100% and removes floats for mobile devices\n- `.tablet-full` sets column width to 100% and removes floats for tablet devices\n- `.col-1-2` sets column width to 50% for all devices\n- `.col-1-3` sets column width to 33% for all devices\n- `.col-1-4` sets column width to 25% for all devices\n- `.col-3-4` sets column width to 75% for all devices\n- `.tablet-col-1-2` sets column width to 50% for tablet devices\n- `.tablet-col-1-3` sets column width to 33% for tablet devices\n- `.tablet-col-1-4` sets column width to 25% for tablet devices\n- `.tablet-col-3-4` sets column width to 75% for tablet devices\n- `.mobile-col-1-2` sets column width to 50% for mobile devices\n- `.mobile-col-1-3` sets column width to 33% for mobile devices\n- `.mobile-col-1-4` sets column width to 25% for mobile devices\n- `.mobile-col-3-4` sets column width to 75% for mobile devices\n\n#### Breakpoints\n\nTo change change the break points overwrite the following variables:\n\n- `@widthContainer` default: @gridWidth * 30; // 32px * 30 = 960px\n- `@widthTablet` default: @gridWidth * 20; // 32px * 20 = 640px\n- `@widthMobile` default: 100%; // mobile is everything below the `@widthTablet` breakpoint \n\n\n### Elements\n\nTODO\n\n#### dapp-account-list\n\n![dapp-account-list](/screenshots/dapp-account-list-small.png?raw=true)\n\nA list of accounts with name and address. Either clickable, with the `\u003cbutton\u003e` tag, or as simple list.\n\nThe `a.dapp-identicon` can be an image icon. (If you use the `wiseplat:elements` Meteor package, you can use `{{\u003e dapp_identicon identity=address class=\"dapp-small\"}}`)\n\nThe `\u003cspan\u003e` is optional.\n\nSelected items need the `\u003cfigure class=\"icon-check\"\u003e\u003c/figure\u003e` to show a checkmark.\n\n```html\n\u003cul class=\"dapp-account-list\"\u003e\n    \u003c!-- Clickable accounts use \u003cbutton\u003e --\u003e\n    \u003cli\u003e\n        \u003cbutton\u003e\n            \u003ca class=\"dapp-identicon dapp-small\" style=\"background-image: url(identiconimage.png)\"\u003e\u003c/a\u003e\n            \u003ch3\u003eMy clickable account\u003c/h3\u003e\n            \u003cspan\u003e0x343c98e2b6e49bc0fed722c2a269f3814ddd1533\u003c/span\u003e\n        \u003c/button\u003e         \n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003cbutton class=\"selected\"\u003e\n            \u003ca class=\"dapp-identicon dapp-small\" style=\"background-image: url(identiconimage.png)\"\u003e\u003c/a\u003e\n            \u003ch3\u003eMy clickable selected account\u003c/h3\u003e\n            \u003cspan\u003e0x343c98e2b6e49bc0fed722c2a269f3814ddd1533\u003c/span\u003e\n            \u003cfigure class=\"icon-check\"\u003e\u003c/figure\u003e\n        \u003c/button\u003e         \n    \u003c/li\u003e\n    \u003c!-- Unclickable accounts --\u003e\n    \u003cli\u003e\n        \u003ca class=\"dapp-identicon dapp-small\" style=\"background-image: url(identiconimage.png)\"\u003e\u003c/a\u003e\n        \u003ch3\u003eMy unclickable account\u003c/h3\u003e\n        \u003cspan\u003e0x343c98e2b6e49bc0fed722c2a269f3814ddd1533\u003c/span\u003e\n    \u003c/li\u003e\n    \u003cli class=\"selected\"\u003e\n        \u003ca class=\"dapp-identicon dapp-small\" style=\"background-image: url(identiconimage.png)\"\u003e\u003c/a\u003e\n        \u003ch3\u003eMy unclickable selected account\u003c/h3\u003e\n        \u003cspan\u003e0x343c98e2b6e49bc0fed722c2a269f3814ddd1533\u003c/span\u003e\n        \u003cfigure class=\"icon-check\"\u003e\u003c/figure\u003e\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n#### Menus\n\nTo add a header or aside menu just add the follwowing structure to your `.dapp-header` or `dapp-aside` container:\n\n```html\n\u003cnav\u003e\n    \u003cul\u003e\n        \u003cli\u003e\n            \u003ca href=\"#\" class=\"active\"\u003e\n                \u003ci class=\"icon-arrow-down3\"\u003e\u003c/i\u003e\n                \u003cspan\u003eReceive\u003c/span\u003e\n            \u003c/a\u003e\n            \u003ca href=\"#\"\u003e\n                \u003ci class=\"icon-arrow-up2\"\u003e\u003c/i\u003e\n                \u003cspan\u003eSend\u003c/span\u003e\n            \u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n\n\n## Credits and ackowledgements \n\n\n* Simple Line Icon fonts by [Graphic Burguers](http://graphicburger.com/simple-line-icons-webfont/)\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiseplat%2Fdapp-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwiseplat%2Fdapp-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwiseplat%2Fdapp-styles/lists"}