checkout solution for this app err_spdy_protocol_error chrome and you can get rid of this error every easily so dont worry
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
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.
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