Integrate BSS into existing BS sites

I have a site that I built with BS. I used Brackets to write the HTML. I'd like to revise some aspects of it and start using BSS moving forward.

Any suggestions on a workflow to leverage the existing work?

Thanks!

Hiya jj,

If you're wanting to start using BSS, I would highly suggest you recreate your site within BSS as it doesn't have a proper import that would allow you to use all the features of the app on a normal basis. You "can" import your site, but you would be editing it manually same as you are now, and the drag and drop would not work within those pages you imported (HTML pages). You would be able to create a new page in the site and drag the components you want to use into it, set them up and then export the site and copy the items from the HTML page and put them into your current site pages that way within BSS, but it would be a more tedious task than remaking the site (provided the site isn't like 50 pages or something lol).

Redo it, you wouldn't regret it in the end I'm sure.

Hi Jo:

Redo it, you wouldn’t regret it in the end I’m sure.

OK. A few more questions, if you have the time:

  1. To bring in all the fonts used on each page, can I use the Design pane > Page> Properties > Head Content tab? Or do I have to Import them one at a time for each page using the Font > Import Google Webfont command in the Design pane?

  2. Difference between Custom Code and Components. Do I have this right?

A Custom Code item is a chunk of HTML (either imported or generated by Convert to HTML command) that can be edited inside BSS by:

a. right-clicking the "Custom Code" item in the Overview pane and selecting Edit Code, or

b: double-clicking the item in the Page Preview pane?

A Component is one or more BSS items that can saved to the "Library" and added to the User section of the Studio tab in the Components pane? And a Component can contain items of "Custom Code?

So, if I develop a Navbar and Footer that I want to use on several pages in the site (which are all the pages contained in a specific .bsdesign file), is there any advantage to using the Copy to > page command versus making them Components and then dragging them onto the Page preview?

  1. How does a Div item become a Block item in the Overview pane?

I just tried out using Copying a BSS item, then Paste Link onto another page and was able to make changes to the item that updated the other instances on the other pages. That's cool!

Thanks again for the assistance!

Yes the link feature is an awesome thing. I use it for all my sites for the headers, sidebars and footers so that I don't have to update every page. Makes it very easy to keep a lot of things up to date all at once.

For your questions I'll do my best, but I don't have every answer I don't think, we'll see lol.

  1. Fonts are only usable as imported fonts, usually from Google Fonts, but there may be other repositories that I'm not aware of besides google that can be imported in. You cannot add your own fonts to BSS at this time, we're hoping that changes in the future, but we'll see. For now, all fonts are imports. a. For the fonts, I would highly suggest importing them one at a time as right now the app has a quirk and likes to repeat them at times in the HEAD of the page. b. Anything you import or add to Fonts, JS, and CSS will be included on all pages. This is something we hope will also change in the future, but for now all references will be automatically added to all pages on export.

  2. You have the main points of the differences between custom code and components correct. Components can also be created by you for you to use on multiple projects, pages, etc., similar to using the Link feature, just that you can do it from project to project using the Components save features. We can also now copy things directly from one page/project to another, but you'll need to paste it to the parent container of the location you want it to be inserted and then move it to the right place/position.

The other thing different about Custom Code is that it is not editable in the Options pane, nor do the parts of it show separately in the Overview pane. You will however see the full code in the HTML pane which does help a lot with locating parts of a custom code block. Adding Custom Code is a great way to add external components that you get from outside of BSS such as Sliders, Menus, Galleries, Calendars, Feeds, etc. Pretty much anything you get outside of BSS will end up with some Custom Code added (unless it is a fully Bootstrap compatible thing that you can work in). Just means you cannot use the Options to edit anything, it has to be done manually in the code itself. Normal components that are not Custom Code will have at least "some" if not all settings available in the Options area that make it easier to edit them.

I personally use quite a bit of custom code blocks throughout my projects, some small, some huge. Just depends on what you need it for. I suggest not doing it for a full site as you really do lose the ability to edit the Options for an entire site, and you may as well stay within your Editor of choice then as you have full size windows to work with which are much easier to work with than the smaller ones with BSS. Just my suggestion and preference as it would really not be beneficial much, in my opinion.

Components are made by both BSS and users. If you look at the Components pane, you will see a Studio and Online tab at the top. The Studio tab will contain all components that are default in BSS upon install as well as any new ones they add in the future. You will find those all in the UI section. The User section is all of your own created Components. Here I use things for doing page breaks (br) and non breaking spaces ($nbsp) which can then be used throughout your project. I also am using this to keep blocks of code that I want to reuse and know I will reuse often from project to project so I don't have to do it all from scratch each time. The Downloaded section is the Components you downloaded from the Online tab.

You can also organize any of the components by creating folders for them in the list. Helpful when you want to keep different types together.

  1. For the copy vs. component, the feature that allows us to do a Copy to page or just copy it and then "paste inside" is a new feature recently added to allow us to reuse things easier, so I guess the answer is that the saving of the component to reuse it (unless it's something you use a lot in a lot of projects), is the old way to do it and now it's replaced with the ability to copy it directly to other locations and projects.

As for the div becoming a Block? I have actually wondered that myself. I see that a lot when I check out components made by others, but I don't know if that's something that BSS does automatically or if that is something that needs to be done within the saving of the components. Hopefully someone else will have that answer for us.

I hope that answers most of what you are asking, if not please ask some more lol. Good luck!

Jo:

You gave me lots of good info!

Here I use things for doing page breaks (br) and non breaking spaces ($nbsp) which can then be used throughout your project.

How can you insert these into a BSS component?

Thanks for the help!

To make your own BR code, create a Custom Code, and in the box delete everything there and type in:

<br>

To make your own Non Breaking Space code, create a Custom Code, and in the box delete everything and type in:

<span>&nbsp;&nbsp;</span>

Now in the Overview Tree find that Custom Code you just created and right click it and choose Label and give it a name. I just called mine My BR and My nbsp. Now right click over it again after you have named it and choose Add to Library, don't check any boxes to add anything to it. Save it with the same or different name than the label you gave it and now you have them to use whenever you like.

To use them just drag them from your User area in the Studio pane at the top left where Components are and put them wherever you want them. You can use either of them within paragraphs, headers, etc. You just drag them right to the preview pane and into the area you want it. If you want it to be before or after an element, it is sometimes easier to drag it to the location you want it on the Overview tree.

Tip: Labels are a great tool to help you identify the parts of your page. They show up in a grey color next to the sections of your Overview tree same as the ID's do, but without the # symbol so you will always know if it's an ID or a Label by whether or not it has the # symbol in front of it or not.

Hope that helps!

Jo:

Your tips for the <br> and <nbsp> Components worked great!

One tweak to the step-by-step instructions: after you type the code in the Custom Code pane, you have to press the Apply button to get it to update and then you can Add to Library.

I have a question about the video component. The HTML5 option allows to display "Controls", but it includes a "download" icon in the lower right corner. I've never seen this before and haven't been able to find a way to turn it off. Do you know anything about it-like how to get rid of it but keep all the other controls?

I have more questions that are probably generic Bootstrap, How-to-do-this?, Is-this-possible?, kinds of questions. Is there a site you can suggest to ask these questions and discuss solutions? Almost everything I've learned about Bootstrap has come from YouTube vids, StackOverflow and w3schools. But they aren't conducive to "discussions", just the facts.<G>

Thank you.

Hiya jj,

Glad that worked for you, and sorry about missing the Apply step. Sometimes we get so comfy in our applications we take it for granted people will know what to do lol.

Hopefully someone else will have an answer for the HTML5 video option as I have the same issue with using HTML5 for audio as well (using it with custom code not internal component, but same issues). Would love to slim it down, but I've scoured the net quite a bit and haven't found any answer for it yet.

For bootstrap, did you go to the https://getbootstrap.com/ site and check it out? The 3.7 version is the current version that we're on so anything you find there would be from the developers of Bootstrap, and would be the most concise location for information. Outside that there are a lot of tutorial sites, but my favorite right now is Udemy which has a lot of videos on Bootstrap and even some with peeks of Bootstrap 4.

Guess we should get Martin to open us a Bootstrap Discussion forum so we can just talk about things that are to do with Bootstrap itself as well as the BSS app's applications of them.

Hope that helps!

For bootstrap, did you go to the https://getbootstrap.com/ site and check it out? The 3.7 version is the current version that we’re on so anything you find there would be from the developers of Bootstrap, and would be the most concise location for information. Outside that there are a lot of tutorial sites, but my favorite right now is Udemy which has a lot of videos on Bootstrap and even some with peeks of Bootstrap 4.

this is a great, free course on EDX: "Introduction to Bootstrap" https://courses.edx.org/courses/course-v1:Microsoft+DEV203x+2015_T4/info

Guess we should get Martin to open us a Bootstrap Discussion forum so we can just talk about things that are to do with Bootstrap itself as well as the BSS app’s applications of them.

+1