Working in Bootstrap-Knockout environment, I have to create some elements to enhance the application. I found it's not easy to work in this environment because Knockout dominates all the time. Therefore, I found a very good piece of software which work for me.
The code is in http://billpull.github.io/knockout-bootstrap/js/knockout-bootstrap.min.js
It's much easier to work with this library than raw bootstrap and knockout.
Thursday, December 12, 2013
Wednesday, December 4, 2013
Changing appearance of Bootstrap ToolTip
Today I worked on Bootstrap tooltips. I needed to set up several different tooltips on one page. The problem was with width of the Tooltips. I can not have the same width for all of them and had to set up different width for different tooltips. Thanks article, I found the way to set up the different width.
Each division has an unique class name (business_name and business_description) and I changed tooltip set up only this class (css)
/*specially for this template I changed Bootstrap tooltip width to handle a Product name*/
.business_name + .tooltip > .tooltip-inner {
width: 350px;
}
/*specially for this template I changed Bootstrap tooltip width to handle a Product description*/
.business_description + .tooltip > .tooltip-inner {
width: 350px;
}
These definitions overwrite Bootstrap tooltip and create a new setup.
Each division has an unique class name (business_name and business_description) and I changed tooltip set up only this class (css)
/*specially for this template I changed Bootstrap tooltip width to handle a Product name*/
.business_name + .tooltip > .tooltip-inner {
width: 350px;
}
/*specially for this template I changed Bootstrap tooltip width to handle a Product description*/
.business_description + .tooltip > .tooltip-inner {
width: 350px;
}
These definitions overwrite Bootstrap tooltip and create a new setup.
Tuesday, November 19, 2013
A list of Font Awesome icons and their CSS content values
Today, I'm proud of myself. Instead doing a lot of tweaks and coding and found the way to satisfy my customer. I think, all of us, who work with Font Awesome, bootstrap and jQuery must know about article. It's absolutely clear, that the article will save many hours of coding and finding a right solution. I hope, to you the article as much as I can.
Friday, November 15, 2013
Text-overflow
Today I learned something new and quite interesting. Usually text-truncation is done with some javascript. Nowadays we can do using text-overflow. It very elegant and simple solution and it work just fine in all browsers. We just have to add text to a div or paragraph and create a class. For example:
HTML:
<div class="oneline" title="text">text</div>
CSS: .oneline { text-overflow : ellipsis; white-space : nowrap; width : 100%; overflow : hidden; padding: 0px; margin: 0px; }
This combination will truncate the long lines in div and gives a very good tooltip. I think, it's the most elegant solution I saw in a last time I work with HTML.
HTML:
<div class="oneline" title="text">text</div>
CSS: .oneline { text-overflow : ellipsis; white-space : nowrap; width : 100%; overflow : hidden; padding: 0px; margin: 0px; }
This combination will truncate the long lines in div and gives a very good tooltip. I think, it's the most elegant solution I saw in a last time I work with HTML.
Tuesday, November 5, 2013
LESS
I'm starting to work with LESS. For those who has no clue what is this, I can recommend some sites
1. http://getbootstrap.com/customize/
2. http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/
3. http://blog.teamtreehouse.com/customize-an-html5-webpage-using-the-bootstrap-framework
4. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-the-programmable-stylesheet-language/
My job as a developer to learn how to use this wonderful environment for my application. Actually, it's going to be my first interaction with built-in CSS environment. I hope, it's going to give me less coding work as it used to be.
1. http://getbootstrap.com/customize/
2. http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/
3. http://blog.teamtreehouse.com/customize-an-html5-webpage-using-the-bootstrap-framework
4. http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/get-into-less-the-programmable-stylesheet-language/
My job as a developer to learn how to use this wonderful environment for my application. Actually, it's going to be my first interaction with built-in CSS environment. I hope, it's going to give me less coding work as it used to be.
Wednesday, October 23, 2013
9 Useful Chrome Extensions
Today I'm beginning to work with Bootstrap and need to install some Chrome Extensions for template testing. I found a nice referral source to install. I hope, it will make my work easier and comfy. I have never worked with Chrome extensions before and would like to explore this avenue. I will let you know how it works for me. Bye for now.
Labels:
css,
HTML,
Public information,
Software Development
Tuesday, October 1, 2013
BEM
Working in a different companies, I always spend extra time getting to know code and especially code conventions. Usually there is not problem in small company or on a small project, but big teams and big projects need some time to adjust. I just started a new project and found some time to learn about code background and standards, I was offered to read a very interesting article on a site http://bem.info/ . I think, each company must adopt such good standard for development and testing. I hope, many developers can read such interesting article. I think, Russian developers did pretty good job.
Labels:
css,
HTML,
Public information,
Software Development
Subscribe to:
Posts (Atom)