While creating a prototype for a project (using Bootstrap), I added the Jumbotron component which is described as: “a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site” and found that my background image wasn’t responsive at all.
-
+
+
+
+
+
+
+
+
+
+
+
+
+ background image, Bootstrap, cover, CSS3, How to, Learning, responsive images, responsive web design+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
While working on a project, I used the Yeoman webapp generator and selected; Bootstrap Sass, jQuery and Modernizr. Everything has worked well, the ‘grunt serve’ and ‘grunt test’ commands, however when I want to run the ‘grunt build’ command to upload the contents of my ‘dist’ folder to a web server, I get prompted with the following error:
Looking for Modernizr references in dist/styles/main.css >> svg Downloading source files A server error occurred attempting to download a file: Fatal error: connect ETIMEDOUT
I’m not sure if it’s something to do with my bower components or the proxy that I’m sitting behind?
At the moment, the workaround I’m using is to manually add the scripts (jQuery, Modernizr and Bootstrap) to the scripts folder then to link it to my html files. But surely there is a better way to do this?!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
I stumbled upon a quick video on YouTube on how to use the CSS3 grayscale filter when hovering on an image.
The results can be seen via this Codepen CSS3 Grayscale Filter
Click on the CSS tab in the Codepen example above to see how this filter effect can be implemented in your CSS.
“Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.” – Can I Use
“It’s worth noting that right now, CSS Filter Effects are an unoffical specification – however, the editors of the spec include representatives from Adobe, Apple and Opera, and we have already got implementations in Chrome, Safari and iOS 6.” – CSS3 Filters
References:
-
+
+
+
+
+
+
Preprocessing is for Everybody by Chris Coyier
“You’ve heard about CSS preprocessors. If you have yet to take the dive or have only dipped your toes in, let Chris Coyier (CSS-Tricks, Codepen) convince you that you won’t regret it. Have you met resistance? Let’s try and convince your boss and colleagues. There may be some misconceptions going around that we need to nip in the bud. Then we’ll look at how preprocessors fit into the modern web development workflow, the evolving best practices for using them, and how to squeeze out all the benefit we can get from them.” – An Event Apart Video
You must be logged in to post a comment.