{"id":18973939,"url":"https://github.com/ps0305/materialize_css","last_synced_at":"2026-01-27T11:01:48.000Z","repository":{"id":122005377,"uuid":"136497926","full_name":"ps0305/materialize_css","owner":"ps0305","description":"Materialize is a modern responsive CSS framework based on Material Design by Google.","archived":false,"fork":false,"pushed_at":"2018-07-23T16:08:20.000Z","size":3821,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-02T12:48:38.337Z","etag":null,"topics":["css-framework","material","materialize-css","mdbootstrap"],"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/ps0305.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-06-07T15:36:17.000Z","updated_at":"2018-07-23T16:08:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"981634b1-9fcf-401b-babe-9d585d0a9af8","html_url":"https://github.com/ps0305/materialize_css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ps0305/materialize_css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ps0305%2Fmaterialize_css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ps0305%2Fmaterialize_css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ps0305%2Fmaterialize_css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ps0305%2Fmaterialize_css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ps0305","download_url":"https://codeload.github.com/ps0305/materialize_css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ps0305%2Fmaterialize_css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28812367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T07:41:26.337Z","status":"ssl_error","status_checked_at":"2026-01-27T07:41:08.776Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["css-framework","material","materialize-css","mdbootstrap"],"created_at":"2024-11-08T15:13:37.934Z","updated_at":"2026-01-27T11:01:47.985Z","avatar_url":"https://github.com/ps0305.png","language":"HTML","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://materializecss.com/\"\u003e\n    \u003cimg src=\"http://materializecss.com/res/materialize.svg\" width=\"150\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eMaterializeCSS\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  Materialize, a CSS Framework based on material design.\n  \u003cbr\u003e\n  \n## Getting Started\n### Learn how to easily start using Materialize in your website.\n\n### Download\nMaterialize comes in two different forms. You can select which version you want depending on your preference and expertise. To start using Materialize, all you have to do is download one of the options below.\n\nMaterialize\nThis is the standard version that comes with both the minified and unminified CSS and JavaScript files. This option requires little to no setup. Use this if you are unfamiliar with Sass. [Materialize](https://github.com/Dogfalo/materialize/releases/download/1.0.0-rc.2/materialize-v1.0.0-rc.2.zip)\n\nSass\nThis version contains the source SCSS files. By choosing this version you have more control over which components to include. You will need a Sass compiler if you choose this option. [Sass](https://github.com/Dogfalo/materialize/releases/download/1.0.0-rc.2/materialize-src-v1.0.0-rc.2.zip)\n\n\n### CDN\nYou can find all the versions of the CDN at cdnjs.\n\n```js\n    \u003c!-- Compiled and minified CSS --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css\"\u003e\n\n    \u003c!-- Compiled and minified JavaScript --\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js\"\u003e\u003c/script\u003e\n```            \n\n### NPM\nYou can also get the latest release using NPM. This release contains source files as well as the compiled CSS and JavaScript files.\n\n```js\n    npm install materialize-css@next\n```            \n\n### Bower\nYou can also get the latest release using bower. This release contains source files as well as the compiled CSS and JavaScript files. (bower is deprecated.)\n\n```js\n    bower install materialize\n```            \n### Setup\nProject Structure\nAfter downloading, extract the files into the directory where your website is located. Your directory will look something like this.\n\nYou'll notice that there are two sets of the files. The min means that the file is \"compressed\" to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development.\n\n```js\n  MyWebsite/\n  |--css/\n  |  |--materialize.css\n  |\n  |--fonts/\n  |  |--roboto/\n  |\n  |--js/\n  |  |--materialize.js\n  |\n  |--index.html\n```          \n### HTML Setup\nNext you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import Materialize into your webpage.\n\n```js\n  \u003c!DOCTYPE html\u003e\n  \u003chtml\u003e\n    \u003chead\u003e\n      \u003c!--Import Google Icon Font--\u003e\n      \u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n      \u003c!--Import materialize.css--\u003e\n      \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"css/materialize.min.css\"  media=\"screen,projection\"/\u003e\n\n      \u003c!--Let browser know website is optimized for mobile--\u003e\n      \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n\n      \u003c!--JavaScript at end of body for optimized loading--\u003e\n      \u003cscript type=\"text/javascript\" src=\"js/materialize.min.js\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n  \u003c/html\u003e\n```        \n \n### Third-party Options\nThere are a few community-made options for you to easily include Materialize in your project. Keep in mind these are untested and may be out-of-date.\n\n### Ruby Gem\nSee [here](https://github.com/mkhairi/materialize-sass) for documentation on this gem.\n\n\n \u003e gem 'materialize-sass'\n          \n### Meteor Package\n\n  meteor add materialize:materialize\n          \n### Ember Package\n```js\n  # install via npm\n  $ npm install ember-cli-materialize --save-dev\n  # make ember-cli fetch internal dependencies\n  $ ember g ember-cli-materialize\n```          \n### Sass Setup\nThis section is only relevant if you chose to download the Sass version of Materialize.\n\n### Compiling Sass\nInstead of having a css folder, you will find that the download instead contains many .scss files which contain the styles of individual components. Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/materialize.scss into a regular CSS file. At this point you can link this newly outputted file in your HTML page.\n\n```js\n  MyWebsite/\n  |--css/\n  |  |--materialize.css \u003c-- compiled from scss/materialize.scss\n  |\n  |--js/\n  |  |--materialize.js\n  |\n  |--scss/\n  |  |--materialize.scss\n  |  |--components/\n  |\n  |--index.html\n```        \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fps0305%2Fmaterialize_css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fps0305%2Fmaterialize_css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fps0305%2Fmaterialize_css/lists"}