-
Fynn Becker authoredFynn Becker authored
This django-app provides everything you ever wanted! (probably not, but i hope you feel happy anyways). It brings fonts, styles, javascript and layouts as templates.
Please read the wiki for further information about the available templates.
Packed with awesome stuff
The current version of this package ships the following own stuff and awesome third-party libraries
Own stuff
- CD Content like Images under
static/hshassets/img/hsh_brand
- Form renderer (like CrispyForms)
Third party libraries
CSS
- animate.css (3.7.0) - cross-browser library of CSS animations
- bulma (0.6.2) - modern CSS framework based on Flexbox
- font-awesome (4.7.0) - iconic font and CSS toolkit
JavaScript
- jquery (3.2.1) - New Wave JavaScript
Installation
Simply put this app into your projects requirements.txt
file and run pip install -r requirements.txt
. Once you
installed it, you should put the name hshcdn
into your projects INSTALLED_APPS
setting. Tadaa!
Also if you want to use breadcrubs (you likely do), you need to add the settings context processor to your TEMPLATES
setting:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
# [...]
'OPTIONS': {
'context_processors': [
# [...]
'hshassets.context_processors.settings' # <-- add this line
],
},
},
]
More information about using breadcrumbs can be found in the WIKI
Usage
Simply create an assets
folder in your app(s) directory. It can contain the folders fonts
for custom fonts, img
for own images, js
for custom javascript and sass
for custom (s)css.
-
Everything that exists in the folders
appname/assets/fonts
andimg
will be copied toappname/static/appname/<folder_name>
. - Files that exist at
appname/assets/js
and ends with.js
will be merged and minified toappname/static/appname/script(.min).css
- For (s)css, hshassets will search for the file
appname/assets/sass/_init.scss
and tries to compile it. So you have to import additional (s)css files there. The compiled and minified result will be copied toappname/static/appname/styles(.min).css
This example structure ...
[project name]
│
├── [app name]
│ │ ┐
│ ├── assets │
│ │ ├── fonts ├─ This is new
│ │ │ └── funny_font.woff │
│ │ ├── img │
│ │ │ ├── dog.png │
│ │ │ ├── cat.png │
│ │ │ └── mouse.png │
│ │ ├── js │
│ │ │ ├── foo.js │
│ │ │ └── bar.js │
│ │ └── sass │
│ │ ├── _init.scss │
│ │ └── stuff.scss │
│ │ ┘
│ ├── urls.py
│ ├── wsgi.py
│ └── ...
│
├── manage.py
├── README.md
└── ...
... will produce the following result tree:
[project name]
│
├── [app name]
│ │
│ ├── assets - this will still exist
│ │ └── ...
│ │ ┐
│ ├── static │
│ │ └── [appname] ├─ The produced result
│ │ ├── fonts │
│ │ │ └── funny_font.woff │ But be careful, never edit files here directly!
│ │ │ | `hshassets` manages this directory entirely. This
│ │ ├── img │ means that everything here will be overwritten or
│ │ │ ├── dog.png │ deleted if it shouldn't be here. Use the `assets`
│ │ │ ├── cat.png │ folder for your custom stuff.
│ │ │ └── mouse.png │
│ │ │ │
│ │ ├── js ├─ Javascript won't be concatinated but minified
│ │ │ ├── foo.js │
│ │ │ └── bar.js |
│ │ │ |
│ │ ├── styles.css ├─ Sass / Scss files will be compiled, concatinated
│ │ └── styles.min.css │ and minified.
│ │ ┘
│ ├── urls.py
│ ├── wsgi.py
│ └── ...
│
├── manage.py
├── README.md
└── ...
To help you with the development, there are two command available:
-
python manage.py buildassets
Will gather, copy, compile and minify everything once. After it finished, you can execute other commands. -
python manage.py watchassets
does the exact same as the command before, but doesn't stop at the end. It will continuously watch for changes on*.js
,*.sass
,*.scss
,*.css
files and everything atimg/
andfonts/
to re-compile -minify and -copy the changed files
Forms
Example:
class UnlockForm(forms.Form):
username = forms.CharField(
max_length=400,
widget=forms.TextInput(attrs={"placeholder": _("username"), "icon": "fa-user"}),
label="", # empty, not None
)
{% load bulma %}
{% trans "Send" as submit_text %}
{% bulma_form form submit_text=submit_text %}
To change styles and icons of the submit button: bulma_form
with something like
{% bulma_form form submit_icon="fa-hand-spock-o" submit_class="button is-danger" %}
Or you can use these template tags for a DIY form:
{% load bulma %}
{% bulma_form_errors form %}
{% bulma_form_fields form %}
{% bulma_submit_button %}