Skip to content
Snippets Groups Projects
Select Git revision
  • a03568e39d5cd296e4d2fc9ff3f53f1de0d5715b
  • master default protected
  • version2
  • update_bulma_fontawesome
  • privacy_notification
  • specify_target_asset_app
  • v2.2.24
  • v2.3.0
  • v2.2.23
  • v2.2.22
  • v2.2.21
  • v2.2.20
  • v2.2.19
  • v2.2.18
  • v2.2.17
  • v2.2.16
  • v2.2.15
  • v2.2.14
  • v2.2.13
  • v2.2.12
  • v2.2.11
  • v2.2.10
  • v2.2.9
  • v2.2.8
  • v2.2.7
  • v2.2.6
26 results

hshassets

user avatar
Tim Fechner authored
a03568e3
History

hshassets python version

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
  • Bulma styled forms, feels like CrispyForms

Third party libraries

CSS

  • animate.css (3.5.2) - cross-browser library of CSS animations
  • bulma (0.5.0) - 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!

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 and img will be copied to appname/static/appname/<folder_name>.
  • Files that exist at appname/assets/js and ends with .js will be merged and minified to appname/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 to appname/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                    │
│   │   │   └── somescript.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!
│   │       ├── img                  │  `hshassets` manages this directory entirely. This
│   │       │   ├── dog.png          │  means that everything here will be overwritten or
│   │       │   ├── cat.png          │  deleted if it shouldn't be here. Use the `assets`
│   │       │   └── mouse.png        │  folder for your custom stuff.
│   │       │                        │
│   │       ├── script.js            │
│   │       ├── script.min.js        │
│   │       ├── styles.css           │
│   │       └── styles.min.css       │
│   │                                ┘
│   ├── 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 at img/ and fonts/ to re-compile -minify and -copy the changed files