Tips & Tricks

Forums Help and How To Tips & Tricks

This topic contains 23 replies, has 10 voices, and was last updated by  Saj 9 months, 1 week ago.

Viewing 9 posts - 16 through 24 (of 24 total)
  • Author
    Posts
  • #6823
    Jo
    Member

    In the main Help and How To forum, get out of Tips and Tricks and post in the main Help & How To forum.

    #7063

    This is a workaround to use any external editor with BSS.

    1. Install node and http-server
    2. Run http-server in the same folder where you have your js files, or one folder up if your js files are in ./public
    3. In BSS refer to you js file using a normal http:/…..js reference
    4. You can now edit your js file using an external editor
    5. When you want to refresh your external referenced js files inthe brower press ctrl – F5 in chrome.

    I am using this technique to edit typescript in VSCode, compile it to js files and import it into my web page.

    #7285
    toprakbey
    Member

    I do not now any code lagauge ,still I could use bootstrap studio. Could I make any webstide just drop and drag.
    pls inform

    #7286
    toprakbey
    Member

    I do not now any code langauge,still I could use bootstrap studio. Could I make any webstide just drop and drag.
    pls inform

    #7428
    anitapaul001
    Member

    Music Paradise Pro is an application which lets its users download music for free. We can listen all my new track here. And I never tried it gonna try it Thank you Anita Paul

    #8265
    ranimondel01
    Member

    checkout solution for this app err_spdy_protocol_error chrome and you can get rid of this error every easily so dont worry

    #9577
    Saj
    Member
    Valued

    Flashless CSS Background Image Swap

    I’m sure some of you all know how to do some thing like this already, so this is for those that don’t. There is more than one way to do this but I thought I’d share the way I’m currently handling it.

    You know when you have a background image for a link and when you hover over it for the first time the links background flashes and that’s because the onhover image hasn’t loaded yet. Here is a way to handle that.

    First you set your CSS to load both the off and on versions of the images on page load by using Multiple Backgrounds.

    .gallery a {
        background-image: url(image_off.png), url(image_on.png)
    }
    

    Next you position the off image so it’s in view but you position the on image out of view.

    .gallery a {
        background-image: url(image_off.png), url(image_on.png);
        background-position: 0 0, -100em 0
    }
    

    So the above example positions the off image 0 from the left and 0 from the top, then the second image is positioned -100em from the left and 0 from the top.

    Now for the hover all you need to do is swap the positions of the off and on images.

    .gallery a:hover {
        background-position: -100em 0, 0 0
    }
    

    The off images is now -100em from the left and 0 from the top and the on image is now 0 from the left and 0 from the top.

    It is very similar to how you handle background swapping when you are using a sprite image (a sprite image is a single image that contains many images in a grid and you use position to access the different images on the sprite).

    So your final CSS would look something like

    .gallery a {
        display: block;
        background-image: url(image_off.png), url(image_on.png);
        background-repeat: no-repeat;
        background-position: 0 0, -100em 0
    }
    .gallery a:hover {
        background-position: -100em 0, 0 0
    }
    

    And some HTML to kind of go along with it.

    <ul class="nav nav-tabs gallery">
        <li class="nav-item">
            <a href="home.html">Home</a>
        </li>
        <li class="nav-item">
            <a href="yard.html">Yard</a>
        </li>
        <li class="nav-item">
            <a href="street.html">Street</a>
        </li>
    </ul>
    

    This should work for Firefox/Chrome/IE9+/Edge

    Saj

    #11258
    Hints404
    Member

    With the introduction of themes into the bootstrap studio software, the best way to learn bootstrap studio and become very good at it is to try and rebuild one of the inbuilt theme websites.

    Create a new project, select the pages you want i.e faq, pricing, contact etc. Then create a new project with blank.

    On the first tab where you have the website using the inbuilt theme. Study how the HTML is applied in the overview panel. Also pull up the styles and see what is affecting each HTML. Try and replicate that in the next tab that has a blank template.

    If you succeed in building a website from doing this. You will know how to use BSS and improve.

    #11319
    Saj
    Member
    Valued

    MS CSS Grid Mixin

    I just wanted to share a MS CSS Grid mixin I created in case anyone wants it.

    // Mixin for MS CSS Grid (-ms)
    // First value sets whether or not the element is a grid container
    // null omits the values or don't define it
    // /* example @include ms-grid(true, 1fr 15px 1fr);
    // set container as MS CSS Grid with a 15px column (gutter)
    // between 2 columns that fill up the rest of the space */
    // /* example
    // .grid {
    //  @include ms-grid(true, "1fr 15px 1fr", "(auto 15px)[15]");
    // }
    // resulting example generates
    // .grid {
    //  display: -ms-grid;
    //  -ms-grid-columns: 1fr 15px 1fr;
    //  -ms-grid-rows: (auto 15px)[5];
    // }
    // 3 columns with middle column as a 15px gutter
    // 10 rows alternating between an auto size and 15px gutter */
    @mixin ms-grid($grid: null, $columns: null, $rows: null, $column: null, $column-span: null, $row: null, $row-span: null) {
        @if ($grid) {
            display: -ms-grid;
        }
        -ms-grid-columns: #{$columns};
        -ms-grid-rows: #{$rows};
        -ms-grid-column: #{$column};
        -ms-grid-column-span: #{$column-span};
        -ms-grid-row: #{$row};
        -ms-grid-row-span: #{$row-span};
    }
    

    SASS/SCSS

    .grid {
        @include ms-grid(true, "1fr 15px 1fr", "(auto 15px)[3]");
        display: grid;
        grid-template-areas:
            "header header"
            "leftside rightside"
            "footer footer";
        grid-gap: 15px;
    }
    .header {
        @include ms-grid(null, null, null, 1, 3, 1); // or @include ms-grid($column: 1, $column-span: 3, $row: 1);
        grid-area: header;
    }
    .leftside {
        @include ms-grid(null, null, null, 1, null, 3); // or @include ms-grid($column: 1, $row: 3);
        grid-area: leftside;
    }
    .rightside {
        @include ms-grid(null, null, null, 3, null, 3); // or @include ms-grid($column: 3, $row: 3);
        grid-area: rightside;
    }
    .footer {
        @include ms-grid(true, "1fr 1fr 1fr", null, 1, 3, 5); // is a grid item and a grid container as well
        grid-area: footer;
    }
    .footer-left {
        @include ms-grid($column: 1);
        grid-area: footer-left;
    }
    .footer-center {
        @include ms-grid($column: 2);
        grid-area: footer-center;
    }
    .footer-right {
        @include ms-grid($column: 3);
        grid-area: footer-right;
    }
    

    Result

    .grid {
        display: -ms-grid;
        -ms-grid-columns: 1fr 15px 1fr;
        -ms-grid-rows: (auto 15px)[3];
        display: grid;
        grid-template-areas:
            "header header"
            "leftside rightside"
            "footer footer";
        grid-gap: 15px;
    }
    .header {
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        -ms-grid-row: 1;
        grid-area: header;
    }
    .leftside {
        -ms-grid-column: 1;
        -ms-grid-row: 3;
        grid-area: leftside;
    }
    .rightside {
        -ms-grid-column: 3;
        -ms-grid-row: 3;
        grid-area: rightside;
    }
    .footer {
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr 1fr;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
        -ms-grid-row: 5;
        grid-area: footer;
        display: grid;
        grid-template-areas:
            "footer-left footer-center footer-right";
    }
    .footer-left {
        -ms-grid-column: 1;
        grid-area: footer-left;
    }
    .footer-center {
        -ms-grid-column: 2;
        grid-area: footer-center;
    }
    .footer-right {
        -ms-grid-column: 3;
        grid-area: footer-right;
    }
    

    I have not made a CSS Grid mixin just a MS CSS Grid mixin as IE10/11 uses the old CSS Grid format. There are other mixins out there I believe for this, just most I’ve seen are for LESS so I did this to make it easier for me.

    Saj

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.