Writing CSS and JavaScript in Bootstrap Studio

Forums Tutorials Writing CSS and JavaScript in Bootstrap Studio

This topic contains 8 replies, has 7 voices, and was last updated by  ag 3 days, 12 hours ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #3286
    Danny Markov
    Bootstrap Studio Developer

    Bootstrap is a powerful frontend framework. With it you can quickly produce a functional web application. But if you wish to create a unique look and feel, you need to get your hands dirty and write JavaScript and CSS. This is why Bootstrap Studio has powerful editors that make writing JS and CSS productive and fun.


    1. WRITING JAVASCRIPT

    With our JavaScript editor you can turn your pretty design into a fully functional website. You get access to powerful Sublime Text-like editing with multiple cursors and keyboard shortcuts.

    To start, you need to create a JavaScript file in the Design panel. You can do this by right clicking on the “JavaScript” group.

    Design Panel

    Note: If you are using OS X and right clicking the “JavaScript” label doesn’t do anything, try Ctrl+Click.

    In the picture above, you can see that there are two locked JavaScript files. They are always available, so you can use jQuery and Bootstrap’s JS in any design.

    To edit your JavaScript file, just double click it. This will open our powerful code editor.

    JavaScript Editor

    When you click the “Apply” button (or hit Ctrl/Cmd + S) the Preview is automatically reloaded so you can try out your changes immediately (see our tutorial about Preview and Export for more).


    2. WRITING CSS

    There are two ways to edit CSS in Bootstrap Studio. The first is to use the Styles tab and edit the styles of the selected component. The other is to create separate CSS files in Design pane and edit them.

    2.1 THE STYLES TAB

    The bottom part of the window holds two areas – HTML and Styles. HTML gives you a real-time preview of the generated HTML for the page with the ability to select elements, define attributes, IDs and css classes.

    The Styles area shows you the applied CSS styles for the HTML elements that you select. This is a quick way to check what styles are active at any given moment, and to easily override default Bootstrap styling.

    Active Styles

    The Styles tab pulls CSS definitions from Bootstrap’s CSS file, as well as all other CSS files that you create. Note that Bootstrap’s styles are locked – you can’t edit them directly. To change them, you need to Copy them to your own stylesheets.

    2.2 CREATING CSS FILES

    To do any real CSS editing, you need to create a stylesheet in the Design panel. By default, every new design comes with a styles.css file, but you can create as many files as you wish. Just right click the “Styles” label and choose the create option.

    Stylesheets

    2.3 EDITING CSS

    Now that you have a stylesheet file, we can start editing CSS! Double click the file and our CSS editor will pop up.

    Click on a selector, css property or a value to edit them. Hit Enter or Tab to move to the next rule, and Shift+Tab to the previous. You can click in between rules to create new ones and in between css blocks to create new blocks with css code (this is not available in the Styles tab).

    CSS Editing

    Images and fonts that you’ve added to the Assets panel will be automatically picked up and shown as suggestions when appropriate.

    There is a full undo/redo history, so feel free to experiment!

    CSS Actions

    When you click the three dots on the top right of each CSS block, you will see the menu that is shown above. You can duplicate, toggle media queries and delete entire blocks of CSS from the menu.

    Tip: There is a quick way to delete CSS styles. When you focus a css selector, hit the Delete/Backspace key to empty it, and Enter to confirm changes. This will delete the entire block and move on to the next.


    3 ADDING CLASSES, IDS AND ATTRIBUTES

    Adding your own classes and ids is very important when writing and reusing CSS styles. To do it, click the Attributes panel on the bottom of the HTML tab.

    In this panel you can change id and class names, or add additional attributes to elements by clicking the + button at the bottom right.

    Attributes Form

    Note: You can add any CSS class that you wish, but some, like text-left in this picture, are locked. To change locked classes in Bootstrap Studio, you need to modify the component’s settings in the Options panel.

    Congrats! You can now create any kind of design imaginable with Bootstrap Studio. Our application makes writing CSS both easy and fun and you will soon dread having to go back to a text editor again.

    #3877
    nan wint yee
    Member

    Helloenter image description here

    #3964
    Bashiir12
    Member
    #4062
    kaybeeIce
    Member

    Hi i have multiple html files created in the bootstrap studio and i also have multiple css file created as well. I would like each html files to have its own unique css file. I don’t want all the html files linking to all the css file. for example, I have two html files(first.html & second.html), i also have two css files(first.css & second.css) i would like to be able to link only the first.css file to the first.html files. I don’t want to open the first.html file to see it having both the first.css and the second.css filelinked to it. How do i get this done?

    #5059
    ag
    Member

    You are right. In some projects there is a need to have a css and/or a js especially in only one html file, unfortunately there is no direct way inside BSS. But there are some options how you can achieve this, somehow.

    1. Modify head content in the page property (right click on the particular page)
    2. Using the export script and modify the html files.

    In both ways you have to leave BSS and start another webserver and work with the exported files. In my opinion there is a need for managing dedicated css/js inside BSS. Maybe there is a way that i did not no, so any help would be appreciated.

    Regards, AG

    #5062
    marrco
    Member
    Valued

    Usually it’s not that huge problem, because scripts are just a few KB, and stay cached, so don’t get (down)loaded multiple times. If you have 2 different type of pages that need different libraries you can set a .class and test for it in your user.js.

    different solutions can be found googling for “conditionally load CSS JS and on page name” so that’s not a great problem.
    What I sometimes do is just modify index.html before uploading, commenting out a few unused libraries and instead use preconnect (or prefetch, preload o prerender, dns-prefetch or whatever you like). But it’s rarely worth the effort apart from the fact that marketing can tell your customer about advanced optimization techniques.

    #5071
    ag
    Member

    Hi Marrco,
    i do similar workarounds, like switch statements or patch the html files with my export script. But having the possibility to load explizit a css/js file is, in my opinion, a more elegant way. BSS gives you the possibility to create a lot css/js files, for structure reason, but all are loaded in every html file inside the project, but why (structure is gone) ?
    Inside BSS there is already an JS “Include Order Option” maybe there will be a chance to have in this dialog “Include Only In Option”? What do you think?
    Regards, AG

    #5084
    Jo
    Member

    It’s been discussed periodically in the forums and it looks promising that we may get this feature to be able to assign specific files/scripts/etc. to our pages. Guess we’ll wait and see.

    @bashiir12: Get a job and quit whining at the almost non existent price of this app. This is so ridiculously cheap that if you can’t afford it, then you need to be spending your money on more of life’s necessities than worrying about getting software.

    #5103
    ag
    Member

    I’ll keep my fingers crossed and be patient 😉 THX for reply …

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.