{"id":2105,"date":"2019-04-19T12:12:04","date_gmt":"2019-04-19T12:12:04","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=2105"},"modified":"2019-07-13T00:03:57","modified_gmt":"2019-07-13T00:03:57","slug":"matter-css-a-pure-css-material-components-library","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/matter-css-a-pure-css-material-components-library\/","title":{"rendered":"Matter.css: A Pure CSS Material Components Library"},"content":{"rendered":"\n<h2>Description:<\/h2>\n\n\n\n<p>Matter.css is a collection of Material Design inspired, CSS only components for modern web &amp; mobile design.<\/p>\n\n\n\n<h3>Components included:<\/h3>\n\n\n\n<ul><li>Button<\/li><li>Checkbox<\/li><li>Radio button<\/li><li>Toggle switch<\/li><li>Range slider<\/li><li>Progress bar<\/li><li>Text field<\/li><li>Tooltip<\/li><li>And more\u2026<\/li><\/ul>\n\n\n\n<h3>How to use it:<\/h3>\n\n\n\n<p>Download and include the&nbsp;Matter.css on the web page.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td><code>&lt;<\/code><code>link<\/code>&nbsp;<code>rel<\/code><code>=<\/code><code>\"stylesheet\"<\/code>&nbsp;<code>href<\/code><code>=<\/code><code>\"matter.css\"<\/code><code>&gt;<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<figure class=\"wp-block-image\"><img data-attachment-id=\"2107\" data-permalink=\"https:\/\/azoora.com\/blog\/code\/matter-css-a-pure-css-material-components-library\/attachment\/matter-css-preview-1\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1.png\" data-orig-size=\"881,775\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Matter.css-Preview-1\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1-300x264.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1.png\" loading=\"lazy\" width=\"881\" height=\"775\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1.png\" alt=\"\" class=\"wp-image-2107\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1.png 881w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1-300x264.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1-768x676.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1-720x633.png 720w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1-580x510.png 580w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1-320x281.png 320w\" sizes=\"(max-width: 881px) 100vw, 881px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img data-attachment-id=\"2108\" data-permalink=\"https:\/\/azoora.com\/blog\/code\/matter-css-a-pure-css-material-components-library\/attachment\/matter-css-preview-2\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-2.png\" data-orig-size=\"768,529\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Matter.css-Preview-2\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-2-300x207.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-2.png\" loading=\"lazy\" width=\"768\" height=\"529\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-2.png\" alt=\"\" class=\"wp-image-2108\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-2.png 768w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-2-300x207.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-2-720x496.png 720w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-2-580x400.png 580w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-2-320x220.png 320w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Official Page<\/strong>: <a href=\"https:\/\/github.com\/finnhvman\/matter\">Github<\/a><\/p><p><strong>Download<\/strong>: <a href=\"https:\/\/github.com\/finnhvman\/matter\/archive\/master.zip\">Github<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Description: Matter.css is a collection of Material Design inspired, CSS only components for modern web &amp; mobile design. Components included: Button Checkbox Radio button Toggle switch Range slider Progress bar Text field Tooltip And more\u2026 How to use it: Download and include the&nbsp;Matter.css on the web page. &lt;link&nbsp;rel=&#8221;stylesheet&#8221;&nbsp;href=&#8221;matter.css&#8221;&gt; Official Page: Github Download: Github<\/p>\n","protected":false},"author":2,"featured_media":2107,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4],"tags":[25,94,116],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Matter.css-Preview-1.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-xX","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2105"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=2105"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2105\/revisions"}],"predecessor-version":[{"id":2249,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2105\/revisions\/2249"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/2107"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=2105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=2105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=2105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}