Link to external stylesheet/JS

Web Export Feature Request
1

Can you add a way to include external Stylesheets and JS files through the UI dialogs?

Would like to basic stuff like hovers as well as some more advanced CSS3. Don’t want to keep adding the tags back in every time I export the file out.

2

Can you add your page or an example of everything you are adding and where? Something like this:

Before (the exported page):

<html>
  <head>
  </head>
 <body>
 ...
 </body>
</html>

After:

<html>
  <head>
    <styles>
        // existing styles
    </styles>
     <styles src="mystyle"/>
     <script src="myscript.js"/>
  </head>
 <body>
 <script>
      function method() {
         // 
      }
</script>
 </body>
</html>
4

I have to export the page first, then manually add in the paths to the linked files like so:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
        <title>PDP</title>
        <link rel="stylesheet" href="css/unsemantic-grid-responsive-tablet.css" />
    <head>
    <body>
       <div class="grid-container"></div>
    <script src="js/jquery.js"></script>
    <script>
      $(document).ready(function () {
        //code here
      });
    </script>
    </body>
</html>
5

Are you adding a few paths to linked stylesheets / scripts or much more? Would having a template work better?

6

I think a template would be great, as long as there is a way to add the necessary <link> or <script> tag values through the plugin. They should also get added to the correct places in the DOM.

This would also give me a way to include google fonts and such for styling.

One other thing:
When I select an artboard and assign it a class name value and an ID value, the class gets assigned to the <body> but the ID gets assigned to the first <div>. I need it on the <div> so it plays nice with a grid system like Bootstrap/Foundation/Unsemantic(which is what we use here at work)

Should I put this last part in a feature request?

This plugin has SOOOOO much potential! Great work guys!

1 Like
7

I just fixed the class name assigned to the body tag bug this morning. :slight_smile:

If I was to design the external links feature I would add the option to add them right before the closing head tag and right before the body tag. Is there any other location I’d be missing?

BTW There are new work flows I’m hearing about. I’m not that familiar with Foundation/Unsemantic. If you would like to share a workflow or video feel free. Also, I can make a workflow category if that would be useful.

8

Yep, those are the locations I was referring to. I figured you knew that but just wanted it down for your records. Thanks for fixing that bug!

Foundation and Unsemantic are just other grid systems like what Bootstrap offers. Unsemantic Grid is just a grid system that doesn’t come with all the bloat like Bootstrap or Foundation, and is a 10 column grid unlike the 12 column grids of Bootstrap and Foundation.

1 Like
9

For the next version I’ll be adding in template support and adding links to scripts and styles.

In the meantime see if markup after on the artboard works:

1 Like
10

Also version 1.2.0 is out and that should have fixed the bug where class values were assigned to the body and not the div.

11

When adding markup(a link to a JS file) after the Artboard, it is adding the code after the <body> tag.

Can the Artboard be the <body> of the document?

I need a way to add my linked stylesheets in the <head> tag after the <title> tag. Right now, if I add it before the “Artboard” when I export it, the code gets put before the <body> tag not in the <head> tag.

12

There was a feature “Add root container” that was set to false by default (the opposite of the way it is now). The default option was to use the body tag. That option was taken out right after version 1.0 and turned on (so an artboard root tag became the first div in the body.

If you want I can reenable it but there are a few issues that need to be checked. Please create another feature request and provide a use case or a reason (so I can design it properly) and we discuss any issues around it.

13

I guess I’m fine with what is there now if the first <div> is the artboard. But I cannot add a class to it. I try adding it through the Element Options, but it doesn’t show up in the code.

14

That’s a bug. BTW You can vote for your own issues.