Nemoorphism UI - 2つのパイソン味でコード化されます:フラスコとジャンゴ

こんにちは、コーダ.
この記事は、2つのオープンソースのWebアプリNeumorphism UI Kit フラスコとdjango、2つの人気と広く使用されるWebフレームワークで.

Thanks for reading! - Content provided by App Generator.

両方のアプリはGithubのMITライセンスの下でリリースされます.急いでいる人のために、関連リンクの下にドロップします.

✨ Flask Neumorphism UI Kit - 製品ページ

✨ Django Neumorphism UI Kit - 製品ページ

Neumorphism UI - Hero Section

Neumorphism UI - Call to action component

Neumorphism UI - Contact with Map Control

✨ 常染色体設計

Neumorphic効果は、現在の有名なフラットUIと古いSkeuomorphic(別名古いアップルスタイル)の組み合わせの組み合わせです!コンポーネントの下部に暗いボックスの影とライトボックスの影の上にあります両方の組み合わせは、あなたのディスプレイを通して自分自身を押す要素の効果を定義します.Design trends: Neumorphic design

Some links:

Neumorphism the right way - 媒体発行

Neumorphism in User interface design - Tutorial

✨ フラスコ変種

アプリケーションは、BluePrintsとAppの工場のパターンを使用して超簡単なコードベースを使用してコーディングされています.MITライセンスは無制限のコピーを許して、趣味またはコマーシャル・プロジェクトとしてリリースしました.フッター信用を削除する必要がありますか?心配しないで、あなたのリンクを追加することができます.

App Links

Flask Neumorphism UI - 製品ページ

Flask Neumorphism UI - ライブデモ

Flask Neumorphism UI - ソースコード

あなたのワークステーションがpython 3とgitコマンドツールがインストールされている場合は、アプリケーションを簡単に構築することができます.このフラスコスターターがあなたのブラウザーで動いているのを見るために、ちょうどREADME ファイル.

✨ タンゴ変則UIキット

Djangoのバージョンは、同じスーパーシンプルなコードベースを使用して認証、DBツールを展開し、DockerとNGinx/gunicornスタックのスクリプトを展開します.

App Links

Django Neumorphism UI Kit - ソースコード

Django Neumorphism UI Kit - ライブデモ

コードベース構造

プロジェクトは、シンプルで直感的な構造を使用して符号化されたbellow:

< PROJECT ROOT >
   |
   |-- core/                               # Implements app logic and serve the static assets
   |    |-- settings.py                    # Django app bootstrapper
   |    |-- wsgi.py                        # Start the app in production
   |    |-- urls.py                        # Define URLs served by all apps/nodes
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/                     # Templates used to render pages
   |         |
   |         |-- includes/                 # HTML chunks and components
   |         |    |-- navigation.html      # Top menu component
   |         |    |-- sidebar.html         # Sidebar component
   |         |    |-- footer.html          # App Footer
   |         |    |-- scripts.html         # Scripts common to all pages
   |         |
   |         |-- layouts/                  # Master pages
   |         |    |-- base-fullscreen.html # Used by Authentication pages
   |         |    |-- base.html            # Used by common pages
   |         |
   |         |-- accounts/                 # Authentication pages
   |         |    |-- login.html           # Login page
   |         |    |-- register.html        # Register page
   |         |
   |      index.html                       # The default page
   |     page-404.html                     # Error 404 page
   |     page-500.html                     # Error 404 page
   |       *.html                          # All other HTML pages
   |
   |-- authentication/                     # Handles auth routes (login and register)
   |    |
   |    |-- urls.py                        # Define authentication routes  
   |    |-- views.py                       # Handles login and registration  
   |    |-- forms.py                       # Define auth forms  
   |
   |-- app/                                # A simple app that serve HTML files
   |    |
   |    |-- views.py                       # Serve HTML pages for authenticated users
   |    |-- urls.py                        # Define some super simple routes  
   |
   |-- requirements.txt                    # Development modules - SQLite storage
   |
   |-- .env                                # Inject Configuration via Environment
   |-- manage.py                           # Start the app - Django default start script
   |
   |-- ************************************************************************

The bootstrap flow

ジャンゴブーツmanage.py 用途core/settings.py メイン設定ファイルとして

core/settings.py アプリマジックをロードする.env ファイル

ゲストユーザーのリダイレクトログインページ

認証されたユーザーのアプリケーションノードが提供するページのロックを解除する

Thanks for reading! I'll drop bellow some related resources

Neumorphism/Neumorphism design - 無料のUIキットは、themesbergによって提供される

Flask Neumorphism UI - コーディングAppSeed

Django Neumorphism UI Kit - コーディングAppSeed