Copy link to clipboard
Copied
In a twig based bootstrap site I'm assisting with I keep having to add the link to the boostrap core css on each twig file temporarily while I'm making changes to it and then remember to delete the link else DW does not pick up the classes to assist me with completing them. Is there a way to make dreamweaver always load and assist with BootStrap css classes without having to include that <link> in the current page?
As Nancy has said, there is no way to have a document to refer to a style-sheet without physically attaching the style-sheet to the document.
To assist with the process that you are asking about, make a snippet that attaches a CDN-linked* style-sheet. You will have to remember to detach the style-sheet prior to uploading.
* <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vb
...Copy link to clipboard
Copied
Where do you normally reference your CSS? Is it in an include file?
Nancy
Copy link to clipboard
Copied
The CSS is included in the top level of the templates which are inherited by the site when it renders, however the source code for each twig file does not include it. So in order to have DW "know" that the css classes are available to me I need to keep remembering to copy/paste the links to the css while I'm editing and then deleting them once I'm done else multiple references to the css will appear in the rendered code.
For instance a page I have open right now has the below code which is the starting block for the user profile page where I need to put the form in. The app_public_template.twig file renders the css for the site as well as the main template information and in order for my dreamweaver to autocomplete the classes while working on this file I need to include a <link> temporarily to the css and then remember after I'm done to delete it. Later if I need to make an update, I once again need to remember to put and remove the <link> or alternatively I put in a "Never run this" if/end statement around the code so that it's always there but never renders to the client but then it's leaving confusing junk behind for other developers many of which aren't using dreamweaver and don't get why I would leave this code behind for them. I've exampled that method below and bolded it in red. Optimally I would like to have this not be required but instead tell DW "By default always use these classes as options for autocompletion even if the CSS is not linked."
{% extends 'layouts/app_public_template.twig' %}
{% block title %}User profile for {{user}}{% endblock %}
{% block content %}
<div class="row">
</div>
{% if 1==2 %}<link rel="stylesheet" href="/css/bootstrap.min.css">{% endif %}
{% endblock %}
Copy link to clipboard
Copied
I don't work with Twig templates. I can't think of a workaround at the moment.
Nancy
Copy link to clipboard
Copied
As Nancy has said, there is no way to have a document to refer to a style-sheet without physically attaching the style-sheet to the document.
To assist with the process that you are asking about, make a snippet that attaches a CDN-linked* style-sheet. You will have to remember to detach the style-sheet prior to uploading.
* <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Copy link to clipboard
Copied
Per my initial snippet - I suggest anyone resorting to that keep it wrapped in an IF statement so as to not accidentally have it re-included should the file be implemented with the style included.
With more and more systems out there where the template/css are so disconnected from the code snippets we are working on I hope that someone at Adobe reads this thread and realizes how useful the ability to force-load a set of common css into our editor could be.
Find more inspiration, events, and resources on the new Adobe Community
Explore Now