Flask Pixel UI-Kit - 접근성 최초의 오픈 소스 Flask 스타터

안녕하세요 코더 여러분,

이 문서에서는 최신 UI 디자인 접근성 표준을 준수하는 무료 및 오픈 소스 디자인 시스템인 Pixel UI Kit 위에 구축된 간단한 Flask 스타터를 제시합니다. UI Kit는 WAVE checker 및 Achecker와 같은 일부 잘 알려진 평가 도구를 승인했습니다. 보고서를 보려면 링크를 클릭하십시오.

Thanks for reading! - Content provided by App Generator.

✨Flask Pixel UI Kit - 상품 페이지

✨ Flask Pixel UI Kit - 라이브 데모

✨ BOX 내용물

웹 앱은 인증, SQLite 데이터베이스, SQLAlchemy ORM으로 향상된 매우 간단한 코드 기반으로 코딩되어 데이터베이스를 쉽게 조작할 수 있으며 매우 깨끗하고 멋진 UI를 제공합니다.

앱을 빌드하려면 기본 도구 체인이 설치되어 있어야 합니다.

Python3 - 앱 코딩에 사용되는 프로그래밍 언어

Git - Github 리포지토리에서 소스 코드를 복제하는 데 사용됩니다. GIT 사용은 선택 사항이며 public repository에서 ZIP 아카이브로 소스를 다운로드할 수 있습니다.

✨ 소스에서 빌드

디자인이 마음에 들어 앱을 빌드하기로 결정한 경우 터미널에 몇 가지 명령을 입력하면 브라우저에서 이 아름다운 앱이 실행되는 것을 볼 수 있습니다.

Clone the source code from Github

$ git clone https://github.com/app-generator/flask-pixel-bootstrap-uikit.git
$ cd flask-pixel-bootstrap-uikit

Install dependencies using a Virtual Environment

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ # Install requirements
$ pip3 install -r requirements.txt

Set up the env and start the app

$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env:FLASK_APP = ".\run.py"
$ flask run --host=0.0.0.0 --port=5000
$
$ # Access the app in browser: http://127.0.0.1:5000/

Note: To use the app, please access the registration page and create a new user. After authentication, the app will unlock the private pages.

Pixel UI Kit - Some beautiful Cards

Pixel UI Kit - Pricing Cards

✨ 코드 베이스 구조

Flask 코드 기반은 초보자를 위해 의도적으로 이와 같이 코딩된 매우 간단합니다(청사진 없음). 다른 유용한 기능으로 앱을 쉽게 확장할 수 있습니다.

< PROJECT ROOT >
    |
    |--- app/__init__.py
    |--- app/
    |     | --- <static/assets>
    |     |       |
    |     |       |--- <css>
    |     |       |--- <Js>
    |     |       |--- <img>
    |     |
    |     | --- <templates>
    |     |       |
    |     |       |---<includes>                   # Page chunks, components
    |     |       |     |
    |     |       |     | --- navigation.html      # Top bar
    |     |       |     | --- sidebar.html         # Left sidebar
    |     |       |     | --- scripts.html         # JS scripts common to all pages
    |     |       |     | --- footer.html          # The common footer
    |     |       |
    |     |       |---<layouts>                    # App Layouts (the master pages)
    |     |       |     |
    |     |       |     | --- base.html            # Used by common pages like index, UI
    |     |       |     | --- base-fullscreen.html # Used by auth pages (login, register)
    |     |       |
    |     |       |---<accounts>                   # Auth Pages (login, register)
    |     |       |     |
    |     |       |     | --- login.html           # Use layout `base-fullscreen.html`
    |     |       |     | --- register.html        # Use layout `base-fullscreen.html`  
    |     |       |
    |     |    index.html                          # The default page
    |     |    page-404.html                       # Error 404 page (page not found)
    |     |    page-500.html                       # Error 500 page (server error)
    |     |    *.html                              # All other pages provided by the UI Kit
    |
    |--- requirements.txt
    |
    |--- run.py
    |
    |-----------------------------

✨ 픽셀 UI - 그것에 대한 몇 마디

Pixel은 가격 카드, 프로필 카드, 타임라인 및 기타 기본 구성 요소를 특징으로 하는 유명한 Bootstrap CSS 프레임워크의 완전 반응형 무료 확장 프로그램입니다. 모든 구성 요소는 가능한 한 WCAG 2.1 표준을 준수하도록 생성되었습니다. 구성 요소가 포함된 전체 목록에 액세스할 수 있습니다here.

링크 및 리소스

Flask - 매직 프레임워크

Flask Apps - Flask에서 코딩된 웹 앱이 있는 인덱스

Thank you! Let me know your thoughts in the comments.