{"id":15133048,"url":"https://github.com/dunest/materialdesignlite","last_synced_at":"2025-09-25T04:32:22.516Z","repository":{"id":43677883,"uuid":"66675379","full_name":"DuneSt/MaterialDesignLite","owner":"DuneSt","description":"This project prime goal is to bind the google's Material Design Lite project to Seaside and as second goal to build widgets on top of Material Design to help Seaside developers to create web applications with material design faster. ","archived":false,"fork":false,"pushed_at":"2024-07-15T14:20:32.000Z","size":6369,"stargazers_count":41,"open_issues_count":48,"forks_count":20,"subscribers_count":8,"default_branch":"development","last_synced_at":"2025-01-16T05:07:22.577Z","etag":null,"topics":["gemstone","google-material","gui","material-ui","pharo","seaside","smalltalk"],"latest_commit_sha":null,"homepage":"https://mdl.ferlicot.fr/","language":"Smalltalk","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DuneSt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2016-08-26T19:52:42.000Z","updated_at":"2024-10-15T15:13:30.000Z","dependencies_parsed_at":"2024-08-03T17:17:24.226Z","dependency_job_id":null,"html_url":"https://github.com/DuneSt/MaterialDesignLite","commit_stats":null,"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuneSt%2FMaterialDesignLite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuneSt%2FMaterialDesignLite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuneSt%2FMaterialDesignLite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuneSt%2FMaterialDesignLite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DuneSt","download_url":"https://codeload.github.com/DuneSt/MaterialDesignLite/tar.gz/refs/heads/development","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234152721,"owners_count":18787675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["gemstone","google-material","gui","material-ui","pharo","seaside","smalltalk"],"created_at":"2024-09-26T04:43:38.613Z","updated_at":"2025-09-25T04:32:16.698Z","avatar_url":"https://github.com/DuneSt.png","language":"Smalltalk","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MaterialDesignLite for Seaside \u003cimg src=\"https://raw.githubusercontent.com/DuneSt/MaterialDesignLite/development/resources/logos/logoFull.png\" width=\"50\"\u003e\n\nCoverage:\n\n[![Coverage Status](https://coveralls.io/repos/github/DuneSt/MaterialDesignLite/badge.svg)](https://coveralls.io/github/DuneSt/MaterialDesignLite)\n\nThis project has as first goal to bind the Google's Material Design Lite project to Seaside and as second goal to build widgets on top of Material Design to help [Seaside](https://github.com/SeasideSt/Seaside) developers in creating fast web application with flat design. For a tutorial on Seaside check [http://book.seaside.st](http://book.seaside.st).\n\nA migration guide from v1 to v2 can be found [here](resources/migration/v1_to_v2_migration_guide.md).\n\n- [Documentation](#documentation)\n  * [Version management](#version-management)\n  * [Install MDL Seaside](#install-mdl-seaside)\n  * [Getting started](#getting-started)\n    + [Add the right libraries and file](#add-the-right-libraries-and-file)\n      - [Add the css file in the updateRoot of your application:](#add-the-css-file-in-the-updateroot-of-your-application-)\n    + [Subclassing MDLApplication](#subclassing-mdlapplication)\n  * [Examples](#examples)\n  * [ZnWorkspace](#znworkspace)\n  * [Latest supported Dependencies](#latest-supported-dependencies)\n  * [Smalltalk versions compatibility](#smalltalk-versions-compatibility)\n  * [Ports](#ports)\n  * [Under the hood](#under-the-hood)\n  * [Contact](#contact)\n\n# Documentation\n\n## Version management \n\nThis project use semantic versioning to define the releases. This means that each stable release of the project will be assigned a version number of the form `vX.Y.Z`. \n\n- **X** defines the major version number\n- **Y** defines the minor version number \n- **Z** defines the patch version number\n\nWhen a release contains only bug fixes, the patch number increases. When the release contains new features that are backward compatible, the minor version increases. When the release contains breaking changes, the major version increases. \n\nThus, it should be safe to depend on a fixed major version and moving minor version of this project.\n\n## Install MDL Seaside\n### In Pharo\nTo install MaterialDesignLite on your Pharo image, execute the following script:  [Spotter Cloud Workspace Url](http://ws.stfx.eu/1JIZRQS7OI00). See ``ZnWorkspace`` section for installing a ZnWorkspace if you so want.\n\n```Smalltalk\n    Metacello new\n    \tgithubUser: 'DuneSt' project: 'MaterialDesignLite' commitish: 'v2.x.x' path: 'src';\n    \tbaseline: 'MaterialDesignLite';\n    \tonWarningLog;\n    \tload\n```\n\nTo add MaterialDesignLite Seaside to your baseline:\n\n```Smalltalk\n    spec\n    \tbaseline: 'MaterialDesignLite'\n    \twith: [ spec repository: 'github://DuneSt/MaterialDesignLite:v2.x.x/src' ]\n\nNote that you can replace the #master by another branch such as #development or a tag such as #v2.0.0, #v2.? or #v2.1.? .\n```\n### In GemStone\n\nGemstone is only supported on v1 of the project. This does not mean no fix or feature can be added to it. We can still release new patch and feature version if asked.\n\n```Smalltalk\n    Metacello new\n    \tgithubUser: 'DuneSt' project: 'MaterialDesignLite' commitish: 'v1.x.x' path: 'src';\n    \tbaseline: 'MaterialDesignLite';\n    \tonWarningLog;\n    \tload\n```\n\nTo add MaterialDesignLite Seaside to your baseline just add this:\n\n```Smalltalk\n    spec\n    \tbaseline: 'MaterialDesignLite'\n    \twith: [ spec repository: 'github://DuneSt/MaterialDesignLite:v1.x.x/src' ]\n```\n\nNote that you can replace the #master by another branch such as #development or a tag such as #v1.0.0, #v1.? or #v1.2.? .\n\n## Getting started\n\nWe use as a base the files product by Google's Material Design Lite. To have a working Material Design Seaside application we need to add those files.\nMost of them can be easily added via a file library but one file need to be explicitely added because this file change depending on the colors you wish for your application.\n\nFor now MDL Seaside is based on version 1.3.0 of Google's Material Design Lite.\n\n### Add the right libraries and file\n\nTo use MaterialDesign you will need to add JQuery and Material Design library to your application:\n\n```Smalltalk\n\t(WAAdmin register: self asApplicationAt: 'myApplication')\n\t\taddLibrary: JQDeploymentLibrary;\n\t\taddLibrary: MDLLibrary\n```\n\nThen you will need to add the css file with the colors. To do so, you will have two options:\n * Add it to your file library\n * Add it in your #updateRoot:\n\nYou can find the files on [https://getmdl.io/customize/index.html](https://getmdl.io/customize/index.html)\n\nThey are in the form of: https://storage.googleapis.com/code.getmdl.io/1.3.0/material.XXX-YYY.min.css\n\nWhere \t    \n * XXX = primary color\n * YYY = accent color\n\n#### Add the css file in the updateRoot of your application:\n\n```Smalltalk\n    MyApplication\u003e\u003eupdateRoot: anHtmlRoot\n\t    super updateRoot: anHtmlRoot.\n\t    anHtmlRoot beHtml5.\n\t    anHtmlRoot stylesheet url: (WAUrl absolute: 'https://storage.googleapis.com/code.getmdl.io/1.3.0/material.XXX-YYY.min.css').\n```\n\n### Add specific style for extensions\n\nIn order to make the extentions work properly, you should define some colors specific rules for your application in your css. To do so, just define:\n\n```CSS\n    .mdl-pagination__current{\n        box-shadow: inset 0px -4px 0px 0px #XXXXXX !important;\n    }\n```\n\nWhere `XXXXXX` is the hex code of the accent color of your MDL application. \nTo find your code you can select the #A200 color in the following page: [https://www.materialui.co/colors](https://www.materialui.co/colors) \n\n### Subclassing MDLApplication\n\nAnother simple way to start with MDL is to subclass MDLApplication to create your root component.\nMDLApplication is a class to help you to start an application easily. It will keep in a FileLibrary most of MDL's files.\n\nSince MaterialDesignLite works with a primary color and an accent color you will need to set them. To do so you will need to add this to your #initialize method:\n\n```Smalltalk\n    self primaryColor: MDLColor indigo secondaryColor: MDLColor pink\n```\n\nYou can find the possible colors into the class MDLColor class.\n\n## Examples\n\nYou can find multiple examples when the application will be installed at the url: [http://localhost:8080/MDLDemo](http://localhost:8080/MDLDemo)\n\nWhen you install in a plain Pharo image you need to start the seaside server first by opening `World menu \u003e Tools \u003e Seaside Control Panel` and adding and starting an appropropriate `ZnZincServerAdaptor`. If you do not use port 8080, change the port in the URL.\n\nSince v2 you can also open the demo from the menu bar under `MaterialDesignLite`.\n\nYou can find a demo at: [https://mdl.ferlicot.fr/](https://mdl.ferlicot.fr/)\n\n## ZnWorkspace\n\nIf you look at a cloud workspace page, you'll see it mentions a `ZnWorkspace`. This is how you can load it up.\n\n```Smalltalk\nGofer it\n  squeaksource: 'ZincHTTPComponents';\n  package: 'Zinc-WWS-Client';\n  load.\n```\n\nTo open one, just do a\n```Smalltalk\nZnWorkspace openUrl: 'http://ws.stfx.eu/1JIZRQS7OI00'\n```\n\n## Latest supported Dependencies\n\n- [Material Icons v4.0.0](https://github.com/google/material-design-icons/releases/tag/4.0.0)\n- [Material Design Lite v1.3.0](https://github.com/google/material-design-lite/releases/tag/v1.3.0)\n\n## Smalltalk versions compatibility\n\n| MDL version \t| Compatible Pharo versions \t| Compatible Gemstone versions \t|\n|-------------\t|---------------------------\t|---------------------------\t|\n| 1.1.x       \t| Pharo 50, 60, 61\t\t\t\t| None\t\t\t\t\t\t\t|\n| 1.2.x       \t| Pharo 50, 60, 61\t\t\t\t| None\t\t\t\t\t\t\t|\n| 1.3.x       \t| Pharo 50, 60, 61\t\t\t\t| Gemstone 3.4.1 (*) (**)\t\t|\n| 2.x.x       \t| Pharo 61, 70, 80, 90, 10\t\t\t| None\t\t\t\t\t\t\t|\n| Dev       \t| Pharo 61, 70, 80, 90, 10\t\t\t| None\t\t\t\t\t\t\t|\n\n(*) *This version of Gemstone is tested. Older versions might work but we did not tested it.*\n(**) *The compatibility is not total. MaterialDesignLite uses Pharo's Traits to provide the users composables components. Thus, if the Gemstone users wants to use those components they will have to flatten themself the Traits in their Seaside application*\n\n## Ports\n\nA port of MDL for Seaside to [Dolphin Smalltalk](https://www.object-arts.com/) has been made and can be found at:\n* [https://github.com/rko281/MaterialDesignLite](https://github.com/rko281/MaterialDesignLite)\n\n## Under the hood\n\nUnderstanding what is going on under the hood is always useful. Have a look at (http://www.tutorialspark.com/Google_MaterialDesignLite_Tutorials/index.php) for a tutorial.\n\n## Contact\n\nIf you have any questions or problems do not hesitate to open an issue or contact cyril (a) ferlicot.me \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdunest%2Fmaterialdesignlite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdunest%2Fmaterialdesignlite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdunest%2Fmaterialdesignlite/lists"}