DEV Community

Juan David Ferreira
Juan David Ferreira

Posted on • Edited on

Flask-FomanticUI - Flask extension to allow easy embedding of Fomantic UI CSS Framework.

#flask #python #css #semanticui

Flask-FomanticUI is a collection of Jinja macros for Fomantic UI and
Flask for the global style. Very similar
to Bootstrap-Flask.

Features

  • [x] Table generation: Render data objects (dict or class objects) to Fomantic UI Table.
  • [x] Paginate generation: Render Flask-SQLAlchemy Pagination object to Fomantic UI Pagination.
  • [x] Form generation: Render Flask-WTF/WTForms form object to Fomantic UI Form, etc.

Requirements

Python 3.8+

Dependecies for this project.

intallation

You can install via pip:

 $> pip install Flask-FomanticUI
Enter fullscreen mode Exit fullscreen mode

Example

Register the extension:

from flask import Flask # To follow the naming rule of Flask extension, although # this project's name is Flask-FomanticUI, the actual package # installed is named `flask_fomanticui`. from flask_fomanticui import FomanticUI app = Flask(__name__) fomantic = FomanticUI(app)
Enter fullscreen mode Exit fullscreen mode

Assuming you have a Flask-WTF form like this:

class LoginForm(FlaskForm): username = StringField('Username', validators=[DataRequired(), Length(1, 20)]) password = PasswordField('Password', validators=[DataRequired(), Length(8, 150)]) submit = SubmitField() remember = BooleanField('Remember me')
Enter fullscreen mode Exit fullscreen mode

Now with the render_ui_form macro:

{% from 'fomanticui/form_ui.html' import render_ui_form %} <html> <head> <!-- Fomantic UI - CSS --> </head> <body> <h2>Login</h2> {{ render_ui_form(form) }} <!-- Fomantic UI - JS --> </body> </html>
Enter fullscreen mode Exit fullscreen mode

You will get a form like this with only one line code (i.e. {{ render_ui_form(form) }}):

form rendering

When the validation fails, the error messages will be rendered with proper style:

error form rendering

Read the Basic Usage
docs for more details.

Links

Authors

  • Ferreira, Juan David

Please submit bug reports, suggestions for improvements and patches via
the (E-mail: juandavid9a0@gmail.com).

Contributors

Credits goes to these peoples:



Official repository and Issues

License

Flask-FomanticUI is free software you can redistribute it and/or modify it
under the terms of the MIT License. For more information, you can see the
LICENSE file
for details.

Top comments (0)