{"id":15184672,"url":"https://github.com/yagolopez/material-light","last_synced_at":"2025-08-09T01:37:48.803Z","repository":{"id":82896580,"uuid":"78382538","full_name":"YagoLopez/material-light","owner":"YagoLopez","description":"💡 Material Design UI components for Angular (versions 4+)","archived":false,"fork":false,"pushed_at":"2017-12-27T11:26:00.000Z","size":12888,"stargazers_count":40,"open_issues_count":0,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-01T01:24:36.915Z","etag":null,"topics":["angular","angular-2","angular-applications","angular-apps","angular-cli","angular-components","angular-directives","angular-material","angular2","design","material","material-design","material-light"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/YagoLopez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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}},"created_at":"2017-01-09T01:24:21.000Z","updated_at":"2019-11-26T10:29:08.000Z","dependencies_parsed_at":"2023-06-08T23:45:27.070Z","dependency_job_id":null,"html_url":"https://github.com/YagoLopez/material-light","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YagoLopez%2Fmaterial-light","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YagoLopez%2Fmaterial-light/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YagoLopez%2Fmaterial-light/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YagoLopez%2Fmaterial-light/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YagoLopez","download_url":"https://codeload.github.com/YagoLopez/material-light/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238418213,"owners_count":19468865,"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":["angular","angular-2","angular-applications","angular-apps","angular-cli","angular-components","angular-directives","angular-material","angular2","design","material","material-design","material-light"],"created_at":"2024-09-27T17:21:41.473Z","updated_at":"2025-02-12T05:31:17.770Z","avatar_url":"https://github.com/YagoLopez.png","language":"CSS","readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"src/assets/img/logo.png\" style=\"margin: auto; width: 81px;\"\u003e\u003c/p\u003e\n\n\u003ch1\u003e\u003cp align=\"center\"\u003eMaterial Light\u003c/p\u003e\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e**Material Designt UI components for Angular (versions 4 +)**\u003c/p\u003e\n\nFeatures:\n\n- 100% Free forever.\n- Fast\n- Light\n- Easy and fun to use\n- Library of true componentes encapsulating Typescipt code, CSS and HTML as atomic units\n- Easy and quick form validation\n- Great performance on mobile apps.\n- Responsive content adaptable to desktop and mobile\n- Components available also as Angular Modules allowing Code-Splitting/Lazy-loading. This implies loading only the components needed at runtime\n- Ready for Ahead of Time Compilation (AOT)\n- Tested in main desktop/mobile browsers: Chrome (Android, IOS, desktop), FF, Edge, IE, Opera. \u003ca href=\"https://angular.io/docs/ts/latest/guide/browser-support.html\" target=\"_blank\"\u003e(Browsers supported)\u003c/a\u003e\n- No dependencies from other libraries like JQuery or Bootstrap.\n- Note: Server Side Rendering not supported\n\n## Objective\n\nThe main goal was to achieve minimalism and performance, not to encompass all posible kind of options or UI components (this is the philosophy of Material Design Light too). You can always add other components from other sources.\n\nIf you find this project useful and are going to use it, please **give a star in the repo** and credits to the author and to \u003ca href=\"http://getmdl.io\" target=\"_blank\"\u003eMaterial Design Lite from Google\u003c/a\u003e\n\nTerms of use under \u003ca href=\"LICENSE.txt\"\u003eMIT\u003c/a\u003e license.\n\n## Author\n\nYago López:\n\n- Website: \u003ca href=\"https://yagolopez.github.io\" target=\"_blank\"\u003ehttps://yagolopez.github.io\u003c/a\u003e\n- Email: yago.lopez ([at]) gmail.com\n\n## Demo\n\n- \u003ca href=\"http://mobiletest.me/htc_one_m7/5189093\" target=\"_blank\"\u003eMobile Simulator (For Desktop)\u003c/a\u003e. \u003cb\u003eWarning:\u003c/b\u003e Content in \n  external iframes may have javascript restrictions for security reasons (i. e. alert dialogs). Run the full screen \n  version for unrestricted features.\n- \u003ca href=\"https://yagolopez.github.io/material-light/dist\" target=\"_blank\"\u003eFull Screen (For Mobile)\u003c/a\u003e\n\n\n## Insallation and Use\n\n- Using Node/Npm/Yarn, in a project generated with Angular-CLI, run: `npm install YagoLopez/material-light --save`\n- Whitout Node/Npm: Clone or fork the repository\n- Install dependencies with `npm install`\n- \u003cb\u003eIMPORTANT\u003c/b\u003e: Adjust the `basePath` in \u003ca href=\"https://github.com/YagoLopez/material-light/blob/master/src/app/mlDemoAppMod.ts#L50\" target=\"_blank\"\u003e\n  mlDemoAppMod.ts\u003c/a\u003e to your environment\n- Run: `ng serve` from project directory\n\n## Notes\n\n- This project can be used with the **angular-cli** although not mandatory.\n- Material Icons must be included from `{project-folder}/src/assets/fonts/mlIcons.css` in your `index.html`\n- To have AOT working you must execute the following steps:\n  - Copy `{project-folder}/node_modules/material-light/src/app/ml/` folder to your `/src/app` folder\n  - Copy `{project-folder}/node_modules/material-light/src/assets/` folder to your `/src/` folder\n- Import the component modules from `{project-folder}/src/app/ml/components` in your own module. Component modules have `*Mod.ts` file name. For example, if you want to use `MlButton`, import `MlButtonMod.ts` in your module and place `\u003cml-button\u003emy button\u003c/ml-button\u003e` in your template\n- Use the components following the examples in the `{project-folder}/node_modules/material-light/src/app/pages` directory.\n- Use `\u003cml-layout\u003e` as base component to place inside it all other components\n- This project does not work in full strict Typescript mode. (`strict` flag must be `false` in `tsconfig.json`)\n\n## Theming\n\nBasisc theming can be achieved using Angular special selectors in the root component:\n\n```CSS\n\u003cstyle\u003e\n  /* Header theme */\n  :host /deep/ ml-header {\n    background: cornflowerblue;\n    color: yellow;\n   }\n   \n  /* Content theme */\n  :host /deep/ ml-content {\n    background: lightblue;\n  }\n\u003c/style\u003e\n```\n\nFor advanced theming, CSS selectors must be used. Inspect the DOM using developer tools. For example:\n\n```CSS\n\u003cstyle\u003e\n  /* Button colored theme */\n  :host /deep/ ml-button.mdl-button--raised.mdl-button--colored {\n    background: brown;\n  }\n  \n  /* Button accent theme */\n  :host /deep/ ml-button.mdl-button--raised.mdl-button--accent {\n    background: green;\n  }\n\u003c/style\u003e  \n```\n\n## Running the demo\n\nYou can run the compiled demo pointing a web server to `{project-folder}/node_modules/material-light/dist/index.html`\nIf you want to compile the project:\n- Clone or download the repo\n- Inside the project folder run `npm install`\n- Adjust the `basePath` in `mlDemoAppMod.ts` to your environment and run it with `ng serve`\n\n## Testing\n\n\u003cdiv\u003eTests with the colaboration of:\u003c/div\u003e\n\u003ca href=\"https://www.browserstack.com/\" target=\"_blank\"\u003e\u003cimg src=\"browserstack-logo.png\" height=\"90px\"\u003e\u003c/a\u003e\n\n## Disclaimers:\n\n- This project is based on \u003ca href=\"http://getmdl.io\" target=\"_blank\"\u003eMaterial Design Lite from Google\u003c/a\u003e. It is an adaptation of MDL JavaScript components to Angular components with the permission of the MDL team.\n- Material Design is a Google's registered trade mark probably.\n- This is an open-source project without commercial or profit intention.\n\n\u003cp\u003e\u003ca href=\"#\"\u003eBack to top\u003c/a\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyagolopez%2Fmaterial-light","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyagolopez%2Fmaterial-light","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyagolopez%2Fmaterial-light/lists"}