class lead and display-1

Bootstrap Studio Help
1

Maybe it's too hot here today, but I can't find an option in the interface to create the following style:

<h1 class="display-1">Display-1</h1>
<p>Lead Paragraph</p>

When I add a <p> in the "Paragraph Options Pane" i can set the 'lead' switch, but when I add a <h1> tag in the Heading Options pane there only a selctor for H1 ... H6 and not one for display-1 ... display-6 so I have to add that class name using the attributes pane in the lower left.

Is that an incongruency, or I'm missing something obvious? It looks to me that https://getbootstrap.com/docs/4.1/content/typography/ are still not fully implemented in the interface.

Seme when after adding a header you want to add a small, muted text with a pl-2 : you add the <small> tag, then from the options pane you set the class muted but then you have to manually add from the attribute pane the pl-2 Sometimes standard bootstrap classes must be added via the attributes pane, and sometimes are present in the options pane. What's the reasoning behind that?

2

I would concur on this also. Seems that some parts are given to us to make it easier and others we have to go to the Bootstrap site to find the correct settings for them. Would be nice if all the available options/classes/id/etc. were available within the app rather than us needing to find them externally.

3

my previous answer was locked by this bulletin system, so I re-type it here, sorry--

Thanks @Jo , I was used to manually add all classes. And that was fine to me. Then I tried to get used to add them with the panel, but some of them are missing and it's slower for me. But now I don't know what's the best way to operate. I can't do all from the panels, and I find quite wrong to add some classes manually and other classes from the panel. That's an inconsistency.

But I still think the most troublesome issue is not supporting an external editor or import-export feature. So I just use BSS to prototype and then start working with Atom, and all bootstrap4 packages. Adding a class= "small muted pl-2" to a header is much faster with a serious editor that to click in a few different panels, toggle a few switches and type only part of that. Especially on a multi-monitor setup.

(my previous sample was pasted wring: i meant:

<h1 class="display-1">Display-1</h1>
<p>Lead Paragraph</p>

but I'm sure you got the point. some bootstrap4 options are available from the options pane, where you have to flip switches, other need to be manually typed. And there is no easy, simple, quick way to add a class= "small muted pl-2" to a header. )

My suggestion is to completely drop support to bootstrap3 and implement a more streamlined workflow with boostrap4. Right now BSS is fine for first-time users that build just a single website a don't know bootstrap (and its classes), but it's not always useful to maintain real websites after development. Add PHP to a few forms, do whatever work you need outside BSS and you're SOL. Yes, you could re-export, re-rename, re-do anything, but after months, or year you've deployed a website it's an unnecessary burden. Much easier after prototyping or first development to stay away from BSS and just use Atom or your serious editor of choice, with bootstrap4 support.

Right now Martin seems more interested into adding features for one time users that don't know bootstrap and are not interested into learning how it works. But IMHO that is turning this professional app in the perfect tool to 'pirate' just to do a single website without studying. I'm not worried about investing my time to study, there's always a learning curve, I guess most of us bought some bootstrap4 course and read the complete docs, even if already used to bootstrap3. Not for a single site, but as an investment for future years of website developing. And it feels frustrating sometimes to see that most BSS new features are aimed at the occasional users, that maybe even didn't even buy this app.

4

now I don't re-re-re-edit, but I do a new post, obviously there's an issue with this part:

<h1 class="display-1">Display-1</h1>
<p>Lead Paragraph WITH CLASS = " LEAD "</p>

where the 'class=lead' part in the second line get's stripped out when that part of the code gets posted

enter image description here

5

I can give many more examples, I'm now adding a figure with a figcaption text what i want right aligned. The only option offered in the options pane is a float right, when I want to use the text-right class, as specified in bootstrap4 manual: https://getbootstrap.com/docs/4.1/content/figures/ : Aligning the figure’s caption is easy with our text utilities.

<figure class="figure">
  <img src=".../400x300" alt="A generic square placeholder image with rounded corners in a figure." />
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>

But text-right is not provided among the options for figure-caption element, so it's again a mix between BSS provided switch and toggle to select part of the classes in the options pane and some other classes that need to be manually set.

I really don't understand the logic why some parts of my websites must be created and maintained in one way and the other in a different way. For me, it is perfectly fine just to click on an element an type (or have a list) of all predefined bootstrap classes without cluttering the desktop with an incomplete options pane. Even better, edit (on a detached window, please, I have a multi-monitor setup) with Atom or one of the many editors that provide emmet and other autocomplete options for bootstrap. It's well BSS finalities to provide a fully featured editor, but also other similar software allows external editors to be defined.

So what's the best workflow? A mix of manual class adding and options to set in the setup panel? Just manually adding classes in the low-capabilities editor?

6

This is an important discussion, and I want to thank you for starting it.

Bootstrap Studio is used by people of all skill levels. This is why we aim to give visual settings for most common use cases (practically all the examples that are demonstrated in the Bootstrap docs). But things that are more advanced or difficult to represent visually (like the hundreds possible combinations of margin/padding classes) are left out of the settings, and instead should be available in the attributes panel with autocomplete.

We still have a lot of work to do. As you pointed out we are missing quite a few typography options. This isn't by design - we simply were busy working on other features that we needed to prioritize.

For the next release, we will go through the documentation and implement all options that we're missing so that the examples can be done in the app with minimal work.

@marrco you've suggested Atom integration before. We can do something like this in Bootstrap Studio, so that when you double click on SASS, JS or Custom Code, it opens the resource in Atom/other IDE instead of our built-in editor. But I am not sure this is what you're suggesting?

7

@martin thanks for taking your time to read and respond to my thread

@marrco you’ve suggested Atom integration before. We can do something like this in Bootstrap Studio, so that when you double click on SASS, JS or Custom Code, it opens the resource in Atom/other IDE instead of our built- in editor. But I am not sure this is what you’re suggesting?

in fact not exactly that, I'm asking for more. I'd love to be able to open the actual HTML file. Like exporting and reimporting. It often would be easier and faster for me to use a full featured editor to manually add classes, text paragraphs, modify a carousel etc. Especially when it could be run full screen on a multi-monitor setup.

For me, an Advanced option to re-import modified HTML is what I'd love most, but without converting it to custom code. With that, I would not care about the options pane. I could use BSS to prototype my website and getting all advantages from its visual capabilities and nice components, but I could copy, cut, paste, duplicate, modify parts of it much quicker with my Atom (or another text editor with emmet and bootstrap support).

I really like the nice, clean HTML that BSS outputs, and I could easily follow its styling conventions. Why not letting the advanced users write HTML and add classes with our favorite IDE? At our risk.

8

I agree with Marrco on that as well, would be really really ... have I said really?! lol, love to be able to edit the HTML without it having to resort to Custom Code to do it. This is definitely a hinderance for us coders that want that full control of our files and folders, and the ease of opening the HTML and just editing a section and saving it would be a whoooollllleeeee lot easier than the myriads of clicks we sometimes need to do to get some simple edits done.

P.S. I wouldn't are what editor it was as long as it's plain text and Mac/PC/etc. compatible which may mean multiple text apps would be needed to be integrated.

9

P.S. I wouldn’t care what editor it was as long as it’s plain text and Mac/PC/etc. compatible which may mean multiple text apps would be needed to be integrated.

For me no integration is necessary. Export the HTML site, edit your project, and just add a "Reimport at your risk" option somewhere.

I mentioned Atom because it's free, based on Electron (same as BSS) multiplatform win/mac/linux, supports bootstrap snippets, html and css, emmet, has tons of packages and it's integrated into other software ( https://pineXXow.com/pineXXow-atom.html). So it could be an easier path to follow. And it's one of the best and most used professional editors.

But as long I can re-import my edited HTML I don't even need specific editor support.

10

As much as we'd like to enable unrestricted editing like this, reimporting HTML is simply not possible if we want to preserve the visual drag and drop nature of the app.

We should instead think of ways to make the app more powerful, so that you don't need to go to a code editor at all. Here are some ideas that I think might help:

  • Search and replace in pages. You would be able to search for and replace src of images, href of links, user class names, text and more.
  • Converting between components. For example p to heading, span to div etc.
  • Emmet style component insertion. We could have some sort of UI where you write selectors like h1.someclass, and an appropriate component would be created and inserted.
  • Some sort of command palette which exposes all features of the program, so they are accessible with the keyboard. We could add commands like "generate lorem ipsum" here.
  • Minor features like extracting an element's style and moving it to a CSS block, copying and pasting animations, more settings for the Look and Feel tab and more.

Looking forward to your thoughts on these ideas.

11

I like where you're going with those ideas Martin. If we can at least edit the HTML indirectly as you propose in the first suggested idea that would help a lot. Half the battle for those of us that are used to coding is speed, and although the app does a great job making things "easier" in many ways, editing speed is not one of them. Here's my feedback on your ideas.

  1. Would love to see that Search and Replace function added with "Mass" update capabilities. Would like to see it function like a typical Search and Replace function does with the ability to search and replace in "all" pages whether open or closed as well as per page and within selected area.

  2. You've already nailed that as to what is needed. I would suggest further to expand the choices such as the P, H, Span, Blockquote and Div as one group that would be all interchangeable and set up groups that way so that the tags are only interchangeable with "like" types. For instance another example would be Img and Icon to be grouped together, all Nav tags would be in a group and so on.

  3. Not sure I follow that sorry. Haven't gotten up on Emmet a whole lot yet. Overwhelming lol.

  4. That would be great as well!

  5. Also sounds very helpful and I'm all for putting as many of the settings in the Look & Feel tab as there are available. Yes it can make it a long list, but it beats having to go look it up! If they are text sensitive to do code completion that would be even more helpful as it's getting nice with that in here now.

Hope to see many of those things added to give us more control over our projects.

12

I was directed to this thread from a post I made about not being able to drop a form into a dropdown menu, which I think is new in Bootstrap 4.

I've been using BSS for some time now and the initial benefit to me was that I didn't have to remember the large number of Bootstrap classes in order to get a web page looking like I wanted it to. After using it for a while, I became quite familiar with the classes and where to apply them but then Bootstrap 4 came along with a whole new set of classes and changes to the names of some existing ones so BSS once again got me off the ground and running with Bootstrap 4.

I personally don't have a problem with typing in class names which are not available in the options pane. Sometimes the developer had a good reason for leaving them out of the options pane, sometimes it was an oversight, and sometimes the developer chose to implement what he considered to be more important features. I would dearly love to see settings for data-toggle and data-target in the options panel but it's a few seconds to type them in as attributes and so does not stop me from implementing anything that needs them.

Every now and then, I come across something that does stop me dead in my tracks though and the latest one is the ability to define a dropdown menu with a form inside it. You can't drop a form into a dropdown menu element and opening a dropdown only lets you manipulate menu items. Unless I go to the trouble of creating a custom code element, I'm stuck. If I'm going to write custom code, I'd prefer to do it in my html editor of choice and store it as a snippet. I'm hoping this falls into the category of something the developer intends to implement in the future.

When I first started using BSS, my html files contained PHP code and as we all know, it's not possible to embed PHP code into the html generated by BSS. My modus operandi became to layout my web pages using BSS, export them, and edit the PHP code into them which then meant I could no longer use BSS due to the lack of an html import feature mentioned in this thread.

Since then, I've moved to an MVC approach and my html files no longer include any PHP code. I got to that point by using the Mustache template system . The files I create in BSS are the templates and I have a separate set of .php files that are the public links to my web sites that assemble the data needed to populate the template files and call the Mustache handlers to format and display the templates. Mustache requires placeholders in the html for where it needs to insert the data provided to it. For example a database field named FirstName would be inserted into the html by something like{{FirstName}} or perhaps <input type="text" value="{{FirstName}}">. This is quite feasible in BSS.

Mustache also provides directives, wrapped in the same {{...}} pairs that control how many instances of repeating elements of html code should be displayed, such as rows in a table fed from an array of database data, and those directives must be inserted into the html as plain text, not enclosed in html tags, for example immediately before after a <tbody> tag.

I believe I could handle this by including the directives in tags but using the example of table rows, BSS will not allow me to insert a tag right after a <tbody> tog even though it is perfectly valid html and displays as expected. This is an illustration of an area where I think BSS needs to be more accepting of "unusual" html code, as long as it is valid.

At the end of the day, I still believe BSS has increased my productivity as a web programmer and I look forward to future features and enhancements.

Pete