Welcome to djangocms-frontend’s documentation!

djangocms-frontend

django CMS Frontend is a powerful plugin suite designed to streamline the integration of frontend frameworks into django CMS. Out of the box, it provides comprehensive support for Bootstrap 5, while also enabling the use of other CSS frameworks, such as Tailwind CSS, through custom components. Whether you’re building responsive layouts or highly customized designs, django CMS Frontend is designed to simplify your development workflow.

Key features

• Easy to implement re-usable frontend custom components, which in the simplest case consist of a template and declarative sort of form class.

• Support of Bootstrap 5, django CMS 3.8+ and django CMS 4 out of the box.

• Support of other frameworks such as Tailwind CSS through custom components.

• Separation of plugins from css framework, i.e. no need to rebuild you site’s plugin tree if css framework is changed in the future, e.g. from Bootstrap 5 to a future version.

• Plugins are re-usable as UI components anywhere in your project (e.g. in a custom app) giving your whole project a more consistent user experience.

• Extensible within the project and with separate project (e.g. a theme app). Create your own components with a few lines of code only.

Description

django CMS Frontend is framework agnostic but comes with support of selected components of Bootstrap 5. Components can have different templates for different frameworks and the preferred framework can be set in the project settings.

It is up to you which (if any at all) components you want to include in your project. Each set of components is a separate package you can include in your project’s INSTALLED_APPS.

The components are designed to be re-usable as UI components in your project, e.g. in a custom app, giving your whole project a more consistent user experience.

django CMS Frontend uses django-entangled by Jacob Rief to avoid bloating your project’s database with css framework-dependent tables. Instead all design parameters are stored in a common JSON field and future releases of improved frontend features will not require to rebuild your full plugin tree.

Contents

• Getting started
  • Installation
    • Install package
    • Make apps available to your django project
    • Create necessary database table
    • Adding styles and javascript manually
    • Using example templates of djangocms-frontend
    • Granting rights
  • Migrating from djangocms-bootstrap4
  • Using djangocms-frontend
    • Background tab
    • Spacing tab
    • Visibility tab
    • Advanced settings tab
    • Error indicators
    • Using frontend plugins as components in templates
• Grid plugins
  • Container
    • Component example
  • Row
  • Column
  • Re-usable component example
• Standard component plugins
  • Accordion component
    • Re-usable component example
  • Alert component
    • Re-usable component example
  • Badge component
    • Re-usable component example
  • Card component
    • Card
    • Card inner
    • Re-usable component example
  • Carousel component
    • Re-usable component example
  • Collapse component
  • Jumbotron component
  • Link / Button component
    • Re-usable component example
  • List group component
    • List group
    • List group item
  • Media component
  • Picture / image component
  • Spacing component
  • Blockquote component
  • Code component
  • Figure component
  • Tabs component
    • Re-usable component example
  • Icon component
    • Icon fonts
    • Adding custom icon fonts
    • Using svg sprites
    • Icon plugins inside text plugins
  • Navigation
• Custom Components
• Headings and table of contents
  • Heading
    • Configuration
  • Table of Contents
• How-to guides
  • How to add internal link targets outside the CMS
  • How to add your own frontend plugin
    • Creating the plugin
    • Extending the plugin
    • Re-using links and images
  • How to extend existing plugins
    • RenderMixins
    • FormMixins
    • Working example
  • How to add the tab editing style to your custom plugins
  • How to create a theme app
  • How to migrate other plugin packages
• Reference
  • Settings
    • settings.CMS_COMPONENT_PLUGINS
    • settings.DJANGOCMS_FRONTEND_TAG_CHOICES
    • settings.DJANGOCMS_FRONTEND_GRID_SIZE
    • settings.DJANGOCMS_FRONTEND_GRID_CONTAINERS
    • settings.DJANGOCMS_FRONTEND_USE_ICONS
    • settings.DJANGOCMS_FRONTEND_CAROUSEL_TEMPLATES
    • settings.DJANGOCMS_FRONTEND_TAB_TEMPLATES
    • settings.DJANGOCMS_FRONTEND_LINK_TEMPLATES
    • settings.DJANGOCMS_FRONTEND_JUMBOTRON_TEMPLATES
    • settings.DJANGOCMS_FRONTEND_SPACER_SIZES
    • settings.DJANGOCMS_FRONTEND_CAROUSEL_ASPECT_RATIOS
    • settings.DJANGOCMS_FRONTEND_COLOR_STYLE_CHOICES
    • settings.DJANGOCMS_FRONTEND_ADMIN_CSS
    • settings.DJANGOCMS_FRONTEND_MINIMUM_INPUT_LENGTH
    • settings.DJANGOCMS_PICTURE_ALIGN
    • settings.DJANGOCMS_PICTURE_RATIO
    • settings.DJANGOCMS_PICTURE_RESPONSIVE_IMAGES
    • settings.DJANGOCMS_PICTURE_RESPONSIVE_IMAGES_VIEWPORT_BREAKPOINTS
    • settings.DJANGOCMS_PICTURE_TEMPLATES
    • settings.TEXT_SAVE_IMAGE_FUNCTION
    • settings.DJANGOCMS_FRONTEND_ICON_LIBRARIES
    • settings.DJANGOCMS_FRONTEND_ICON_LIBRARIES_SHOWN
    • settings.DJANGOCMS_FRONTEND_ICON_SIZE_CHOICES
    • settings.DJANGOCMS_FRONTEND_SHOW_EMPTY_CHILDREN
  • Models
    • FrontendUIItem
    • FrontendUIItem.ui_item
    • FrontendUIItem.tag_type
    • FrontendUIItem.config
    • FrontendUIItem.add_classes()
    • FrontendUIItem.get_attributes()
    • FrontendUIItem.initialize_from_form()
    • FrontendUIItem.get_short_description()
  • Form widgets
    • ButtonGroup
    • ColoredButtonGroup
    • IconGroup
    • IconMultiselect
    • OptionalDeviceChoiceField
    • DeviceChoiceField
  • Management commands
  • Running Tests

Indices and tables

• Index

• Search Page