Using DX8 on an existing website
You can use DX8 on an existing website to take advantage of it's page editing and page layout capabilities. When using DX8 on an existing website there are a number of important aspects you should understand.
Responsive media queries (breakpoints) and layout grid
DX8 allows you to configure your websites responsive media queries (breakpoints) and website grid at DX8 > Website settings > Responsive grid settings. DX8 uses a 12 column grid system and allows you to configure the width of up to 6 breakpoints and the gutters (padding) between each column.
When using DX8 on an existing website it's recommended that you match the settings within the Responsive grid settings to those set within your existing website theme. You can find more information about responsive grid settings here.
CSS styles for base elements
Your existing websites theme will include styles for base elements like <p>, <h1>, <blockquote> etc. For this reason, you should not use DX8's style builder found at DX8 > Styles > Base styles to create base styles. If you do, these will override and base styles you have set in your theme and will effect the appearance of of other pages on your website. You can find more information about base styles here.
Note, you will still need to enable the "DX8 base styles module" even if you do not use the base styles functionality.
Custom CSS classes
You can use DX8 to create custom CSS classes at DX8 > Styles > Custom styles. All styles created are prefixed with .coh-style to help prevent any clashes with classes in your theme's style sheet.
If you want to apply classes you've already defined within your existing website theme to DX8 elements, you can apply them directly within the markup tab of the element. You can find more information about adding markup to an element here.
Adding the layout canvas to your content entities
You can use DX8's layout canvas on your existing content entities by adding the Layout canvas field to your content entity. This is added in the same way as any other field within Structure > (Entity type) > (Bundle) > Manage fields. The layout canvas will render within the content region of the website. You can find more information about adding the layout canvas here.
DX8 uses render placeholders of inline CSS and as these cannot be naturally injected into the HTML template, the site's theme needs to contain <cohesion-placeholder></cohesion-placeholder> within the <head> tag.
Creating and using page components
DX8's powerful page creation and editing experience rely on DX8 components. These provide a flexible layout system for editors and site builders. You can think of them as mini templates that can be added and combined on the Layout canvas to create new layouts. You can create components at DX8 > Elements > Components. You can find more information about creating and using components here.
Content templates for view modes
DX8 includes a system for building content templates for View modes. When using DX8 on an existing website you do not have to use DX8 templates as your website theme will include these. However, you can create templates using DX8 if you require at DX8 > Templates > Content templates. Any template suggestions created here will override any less specific templates within your website theme. Full view mode templates will render within the Content region of your website and other View mode templates will render where specified For example, within a Drupal view.
You can find more information about the types of template you can create with DX8 here.
Styles, Templates, Components and other "non content" assets created by DX8 are stored as configuration. This means that they can be deployed to a production environment as configuration and not effect content. However, DX8 allows you to create configuration with file dependencies. For example, you could create a Component which includes a default image.
For this reason, DX8 includes a deployment module that handles the deployment of configuration file dependencies from one environment to another. You can find more information about DX8 configuration deployment here.
Once you've understood the above, you can follow the steps below to install and use DX8 on an existing website.