Another Web Development Blog
Hello all,
Making Material Design Lite (MDL) work with Vue.js is fairly easy.
After adding MDL javascript, the CSS framework parse the DOM in order to enable events listeners required to provide certain behaviors (example: input validations). Since our Vue components are added after MDL has scanned the DOM, we should re-run a scan on each element we are adding asynchronously.
Simply run in your terminal:
npm rebuild node-sassHello everybody,
Recently I had an issue while creating a rotating loader. I had to make the website logo rotate in the middle of the page, no big issue. I put a container in the center of the page and then created a rotating class with the following CSS code:
Hello all,
I would like to provide you a quick mixins to create diagonal (beveled) borders into CSS. In order to do so we use the linear-gradient value of the background property of two divs: a frame and a content.
Hello all,
Unfortunately this hacks only works on webkit based browsers. The CSS property text-overflow is originally meant to be used on single-line text only.
However you can use the following hack to obtain a pure CSS multiline text with ellipsis:
Hello,
Module not found: Error: Cannot resolve module 'style' in
...
...You probably have a require("!style!css!./css/style.css"); somewhere in your javascript files and webpack doesn’t find the style-loader plugin.
To solve this run
npm install --save-dev style-loaderHello,
When dealing with fonts during the application build you can encounter many issues. In particular if you encountered this kind of errors:
Failed to decode downloaded font: ***.woff2
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
Failed to decode downloaded font: ***.woff
OTS parsing error: incorrect file size in WOFF header
Failed to decode downloaded font: ***.ttf
OTS parsing error: GSUB: table overruns end of file
That means you are having an hard time with your fonts.
First let’s try to identify the source of the problem.
.gitattributes files contains these binary declarations:
*.ttf binary
*.eot binary
*.woff binary
*.woff2 binaryurl-loader to file-loader as explained in this article.import '../resources/iconfont/MaterialIcons-Regular.eot';
import '../resources/iconfont/MaterialIcons-Regular.svg';
import '../resources/iconfont/MaterialIcons-Regular.ttf';
import '../resources/iconfont/MaterialIcons-Regular.woff';
import '../resources/iconfont/material-icons.css';However it was necessary to install the as an npm package
npm install material-design-icons --save and then import them into my style.scss file using:
@import "~material-design-icons/iconfont/material-icons.css";Webpack was now able to process the fonts properly.
Hope these suggestions helped since this issue can be a real pain.
Have a good day!
Hi all,
If you tried Material Design Lite you should have noticed the complex class pattern it use. It comes pretty handy when dealing with background and text colors.
This is the complete list of classes you can give to your elements, enjoy!
Hello everybody,
During this year I’ve been working at Wakanda, an ambitious start-up trying to establish his identity in the messy Javascript world.
The product that we are working on is easy to explain from the marketing point of view:
Wakanda is an open-source platform that allows you to quickly and easily create applications that can be deployed on Web and mobile. – from Wakanda.io
Ok cool, the definition is sexy enough to catch your interest but developers don’t fall for these marketing lines easily: what does Wakanda intends with “quick” and “easily”? What are the technologies in game?
Read more
Hi all,
This article seems a bit old since SASS is nowadays well-known and it has a lot of great tutorials everywhere, but i really wanted to suggest you to never forget to give your website images a proper naming structure, expecially icons.
I had to deal with a lot of icons during a recent project:
.icon_s1{
background: url('../images/s1.png') no-repeat top left;
&.active{
background-image: url('../images/s1_on.png');
}
}
.icon_s2{
background: url('../images/s2.png') no-repeat top left;
&.active{
background-image: url('../images/s2_on.png');
}
}
.icon_s3{
background: url('../images/s3.png') no-repeat top left;
&.active{
background-image: url('../images/s3_on.png');
}
}
.icon_s4{
background: url('../images/s4.png') no-repeat top left;
&.active{
background-image: url('../images/s4_on.png');
}
}
// others… and after 30 icons the whole _icons.sass would become a whole mess as you can see.
The first thing i thought is to use a common sass for cycle..
