Using Acquia Site Studio on an existing website
You can use Acquia Site Studio on an existing website to take advantage of it's page editing and page layout capabilities. When using Acquia Site Studio on an existing website there are a number of important aspects you should understand.
Responsive media queries (breakpoints) and responsive grid
Acquia Cohesion allows you to configure your websites responsive media queries (breakpoints) and website grid at Site Studio > Website settings > Responsive grid settings.
When using Acquia Site Studio 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 may include styles for base elements like <p>, <h1>, <blockquote> etc. For this reason, you should not use Acquia Site Studio's style builder found at Site Studio > Styles > Base styles to create base styles. If you do, these will override the base styles you have set in your theme and will affect the appearance of other pages on your website. You can find more information about base styles here.
You will still need to enable the Acquia Site Studio base styles module even if you do not use the base styles functionality.
Custom CSS classes
You can use Acquia Site Studio to create custom CSS classes at Site Studio > 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 Acquia Site Studio 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 Acquia Site Studio's layout canvas on your existing content entities by adding the Layout canvas field. 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.
Acquia Site Studio 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
Acquia Site Studio's powerful page creation and editing experience rely on Acquia Site Studio 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 Site Studio > Elements > Components. You can find more information about creating and using components here.
Content templates for view modes
Acquia Site Studio includes a system for building content templates for View modes. When using Acquia Site Studio on an existing website you do not have to use Acquia Site Studio templates as your website theme will include these. However, you can create templates using Acquia Site Studio if you require at Site Studio > 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 Acquia Site Studio here.
Styles, Templates, Components and other "non content" assets created by Acquia Site Studio are stored as configuration. This means that they can be deployed to a production environment as configuration and not effect content. However, Acquia Site Studio allows you to create configuration with file dependencies. For example, you could create a Component which includes a default image.
For this reason, Acquia Site Studio includes the Site Studio sync sub-module that handles the deployment of configuration including file dependencies from one environment to another. You can find more information about Acquia Site Studio configuration management & deployment here.
Once you've understood the above, you can follow the steps below to install and use Acquia Site Studio on an existing website