{"id":13500705,"url":"https://github.com/HellerCommaA/flask-materialize","last_synced_at":"2025-03-29T07:31:26.310Z","repository":{"id":32468007,"uuid":"36047898","full_name":"HellerCommaA/flask-materialize","owner":"HellerCommaA","description":"A Material Design framework for Flask, similar to flask-bootstrap. Utilizes Materialize CSS","archived":false,"fork":false,"pushed_at":"2018-07-07T06:53:54.000Z","size":5598,"stargazers_count":119,"open_issues_count":5,"forks_count":22,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-31T19:37:22.950Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/HellerCommaA.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-22T02:26:23.000Z","updated_at":"2024-05-11T02:56:54.000Z","dependencies_parsed_at":"2022-08-26T03:51:01.087Z","dependency_job_id":null,"html_url":"https://github.com/HellerCommaA/flask-materialize","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HellerCommaA%2Fflask-materialize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HellerCommaA%2Fflask-materialize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HellerCommaA%2Fflask-materialize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HellerCommaA%2Fflask-materialize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HellerCommaA","download_url":"https://codeload.github.com/HellerCommaA/flask-materialize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246155992,"owners_count":20732355,"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":[],"created_at":"2024-07-31T22:01:10.917Z","updated_at":"2025-03-29T07:31:24.483Z","avatar_url":"https://github.com/HellerCommaA.png","language":"JavaScript","readme":"===============\nFlask-Materialize\n===============\n\n# **With the recent addition of Google's Material Design Lite, this project will soon be ported over to that framework and change names. \u003chttp://www.getmdl.io/\u003e However, this project will be maintained in this repo and on PyPi. More updates will follow.**\n\n\n[![Join the chat at https://gitter.im/HellerCommaA/flask-materialize](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/HellerCommaA/flask-materialize?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/HellerCommaA/flask-materialize/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/HellerCommaA/flask-materialize/?branch=master)\n\n[![Build Status](https://scrutinizer-ci.com/g/HellerCommaA/flask-materialize/badges/build.png?b=master)](https://scrutinizer-ci.com/g/HellerCommaA/flask-materialize/build-status/master)\n\nFlask-Material packages `MaterializeCSS` \u003chttps://github.com/Dogfalo/materialize\u003e into an extension that mostly consists\nof a blueprint named 'material'. It can also create links to serve Materialize\nfrom a CDN and works with no boilerplate code in your application.\n\n\nDemo\n----\nA quick demo applicdation can be seen at http://flask-template-materia.elasticbeanstalk.com/  \nThis demo is a clone of https://github.com/HellerCommaA/flask-template-materialize  \n\nUsage\n-----\n\nFirst, easily install the package with `pip install flask-material`\n\nA sample helloworld app:  \n**hello_world.py**  \n*Yes, I know this is a long helloworld, but, you'll have a great base to start with if you follow along!*  \n\n```python\nfrom flask import Flask, render_template  \nfrom flask_material import Material  \nfrom flask_wtf import Form, RecaptchaField\nfrom flask_wtf.file import FileField\nfrom wtforms import TextField, HiddenField, ValidationError, RadioField,\\\n    BooleanField, SubmitField, IntegerField, FormField, validators\nfrom wtforms.validators import Required\n\napp = Flask(__name__)  \nMaterial(app)  \napp.config['SECRET_KEY'] = 'USE-YOUR-OWN-SECRET-KEY-DAMNIT'\napp.config['RECAPTCHA_PUBLIC_KEY'] = 'TEST'\n\n# straight from the wtforms docs:\nclass TelephoneForm(Form):\n    country_code = IntegerField('Country Code', [validators.required()])\n    area_code = IntegerField('Area Code/Exchange', [validators.required()])\n    number = TextField('Number')\n\nclass ExampleForm(Form):\n    field1 = TextField('First Field', description='This is field one.')\n    field2 = TextField('Second Field', description='This is field two.',\n                       validators=[Required()])\n    hidden_field = HiddenField('You cannot see this', description='Nope')\n    recaptcha = RecaptchaField('A sample recaptcha field')\n    radio_field = RadioField('This is a radio field', choices=[\n        ('head_radio', 'Head radio'),\n        ('radio_76fm', \"Radio '76 FM\"),\n        ('lips_106', 'Lips 106'),\n        ('wctr', 'WCTR'),\n    ])\n    checkbox_field = BooleanField('This is a checkbox',\n                                  description='Checkboxes can be tricky.')\n\n    # subforms\n    mobile_phone = FormField(TelephoneForm)\n\n    # you can change the label as well\n    office_phone = FormField(TelephoneForm, label='Your office phone')\n\n    ff = FileField('Sample upload')\n\n    submit_button = SubmitField('Submit Form')\n\n\n    def validate_hidden_field(form, field):\n        raise ValidationError('Always wrong')\n\n@app.route('/')  \ndef hello_world():\n      form = ExampleForm()   \n      return render_template('test.html', form = form)  \n\nif __name__ == '__main__':  \n    app.run(debug = True)  \n```\n\n**templates/test.html with silly macros**\n\n```python\n{% extends \"material/base.html\" %}\n{% import \"material/utils.html\" as util %}\n{% import \"material/wtf.html\" as wtf %}\n\n{% block title %}Hello, world!{% endblock %}\n\n{% block content %}\n{{ container() }}\n        {{ row() }}\n                {{ col(['s12', 'm6']) }}\n                \t{{ util.card('Hello world!', wtf.quick_form(form) )}}\n                {{ enddiv() }}\n                {{ col(['s12', 'm6'])}}\n                \t{{ util.card('Isn\\'t Flask great?', '\u003cp\u003eI really do enjoy it!\u003c/p\u003e', [['https://github.com/HellerCommaA', 'My Github']])}}\n            \t{{ enddiv() }}\n        {{ enddiv() }}\n{{ enddiv() }}\n{% endblock %}\n```\n\n**OR templates/test.html without silly macros**\n\n```python\n{% extends \"material/base.html\" %}\n{% import \"material/utils.html\" as util %}\n{% import \"material/wtf.html\" as wtf %}\n\n{% block title %}Hello, world!{% endblock %}\n\n{% block content %}\n\u003cdiv class=\"container\"\u003e\n        \u003cdiv class=\"row\"\u003e\n                \u003cdiv class=\"col s12 m6\"\u003e\n                \t{{ util.card('Hello world!', wtf.quick_form(form) )}}\n                \u003c/div\u003e\n                \u003cdiv class=\"col s12 m6\"\u003e\n                \t{{ util.card('Isn\\'t Flask great?', '\u003cp\u003eI really do enjoy it!\u003c/p\u003e', [['https://github.com/HellerCommaA', 'My Github']])}}\n            \t\u003c/div\u003e\n        \u003c/div\u003e\n\u003c/div\u003e\n{% endblock %}\n```\n\nThis makes some new templates available, containing blank pages that include all\nMaterial resources, and have predefined blocks where you can put your content.\n\nAvailable Blocks\n----------------\n\t{{block doc}}\nStarts: Above `\u003c!DOCTYPE html\u003e`  \nEnds: Below `\u003c/html\u003e`\n\n\t{{block html_attribs}}  \nStarts: Inside the `\u003chtml\u003e` tag  \nEnds: Inside the `\u003chtml\u003e` tag\n\n\t{{block head}}\nStarts: Just after the `\u003chead\u003e` tag  \nEnds: Just before the `\u003c/head\u003e` tag\n\n\t{{block title}}\nStarts: Just inside the `\u003ctitle\u003e` tag  \nEnds: Before `\u003c/title\u003e` tag\n\n\t{{block metas}}\nStarts: Inside the `\u003chead\u003e` block, after `\u003c/title\u003e`. Automatically includes  \n`\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e` Be sure to call super() if you want this meta tag  \nEnds: Within `\u003chead\u003e` block, just before `{{block styles}}`\n\n\t{{block styles}}\nStarts: Inside the head block, after the `metas` block closes. Includes a link to material.css be sure to call super()  \nEnds: Just before `\u003c/head\u003e`\n\n\t{{block body_attribs}}\nStarts: Just after `\u003cbody`  \nEnds: Just before `\u003e` in the top `\u003cbody\u003e` tag.  \n\t`\u003cbody{% block body_attribs %}{% endblock body_attribs %}\u003e`\n\t\n\t{{block body}}\nStarts: Immediately after `\u003cbody\u003e`  \nContains: \t`{{block navbar}}`  \nContains: \t`{{block content}}`  \nContains:\t`{{block scripts}}`  **which includes materialize.js and jquery.js, *be sure to call super***  \nContains: \t`{{block footer}}`  \nEnds: Just above `\u003c/body\u003e`\n\nAvailable Macros\n----------------\nBe sure you are using `{% import \"material/utils.html\" as util %}` in your HTML document.\n\n*Icon*  \nSimply do: `{{ util.icon('ICON-NAME-WITHOUT-MDI', ['SIZE', 'OPTIONAL-CSS-CLASSES']) }}`\n\n*Button*  \nMacro prototype: `{{ util.form_button(content, class = [], type='submit', name='action', icon = False, iconclass=[] }}`\n\n\t**Note**  \n\tClass already includes btn. Everything else must be added.  \n\t\u003cbutton class=\"btn {{ class|join(' ') }}\" type=\"{{type}}\" name=\"{{name}}\"\u003e{{content}}\n\t{% if icon %}\u003ci class=\"{{ iconclass|join(' ') }} right\"\u003e\u003c/i\u003e{% endif %}\u003c/button\u003e\n\n*Card*  \nCard prototype: `{{ util.card('CARD-TITLE', 'CARD-CONTENT-CAN-USE-HTML-HERE', [['http://google.com/LINK.html', 'Link Title'], ['http://www.google.co.uk/link2.html', 'Link Title2']]) }}`  \nCard does not include any row, or column sizes. You must wrap the card in your desired size.  \n\n----\n**These may or may not be useful, feedback requested. **  \n\n*Container*  \n`{{ container() }}` Generates `\u003cdiv class=\"container\"\u003e`\n\n*Row*  \n`{{ row() }}` Generates `\u003cdiv class=\"row\"\u003e`  \n\n*Col*  \n`{{ col( ['s12', 'm6'] ) }}` Generates `\u003cdiv class=\"col s12 m6\"\u003e`\n\n*Enddiv*  \n`{{ enddiv() }}` Generates `\u003c/div\u003e`\n\nTODO\n----\n* Fix WTF forms integration (quick form)  \n* Finish documentation\n\nNotes\n-----\nThis is largely a fork from the excellent work at \u003chttps://github.com/mbr/flask-bootstrap\u003e\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHellerCommaA%2Fflask-materialize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHellerCommaA%2Fflask-materialize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHellerCommaA%2Fflask-materialize/lists"}