Making peace with Twitter Bootstrap - HTML5 DevCon 2013

Making peace with Twitter Bootstrap
slides on slideshare: slidesha.re/Wuboo4

using a css framework like bootstrap does not absolve you form having to learn css

Bootstrap issues
1. too bloated, too many lines css
fix: customize download; use customize link.
  You can always come back later and get more if you need it.
  Just get what you need

fix: customize @import when using in less/saas; delete imports. See bootstrap.less
  make your own copy of bootstrap.less and you can take imports out and it will still work
  (but keep a copy of the original)

Saas - twitter bootstrap not available in saas and need to go through a 3rd party.

Yoeman - can include for you.

2. bootstrap Class-itis
bootstrap requies alot of classes, some not named as you'd like
there's alot of row, span...it's not semantic, very tableized
plus if you take out bootstrap you've alot of markup changes to remove those classes

fix: define your own style classnames and rules which you use instead of bootstrap classnames
  you abstract twitter bootstrap out
  she had some cool examples of these rules in the presentation


3. its too inflexible e.g. locking into grid system
bootstrap is highly opinionated, it has alot of rules
people use !important to override bootstrap...avoid that, use real selectors

if there is no style guide then you'll probably end up with too many disparate css rules and exceptions

fix: fix your process, you need designers who work consistently with bootstrap
  get consistency going
  design with bootstrap in mind, not against it....can't design a PSD in a vaccum


Reference: bower

Options to Photoshop: search "design with twitter bootstrap"

Bootstrap galleries: builtwithbootstrap.com


Comments

Post a Comment

Popular posts from this blog

My Reading Lists

I had some time over Christmas and decided to organize my reading lists. Interesting how some time away from daily work allows one to raise up your head   Uncle Bob on Principles of OOd See also book: Agile Principles, Patterns, and Practices in C# Available on Safari Books online. Algorithms in a Nutshell Nine   Algorithms   That Changed   the Future Programming Pearls book: http://www.cs.bell-labs.com/cm/cs/pearls/toc.html 97 Things Every Programmer Should Know Seven L a nguages http://pragprog.com/book/btlang/seven-languages-in-seven-weeks Codys book : http://www.domenlightenment.com/ Principles of OO programming: http://www.nczonline.net/blog/2012/12/18/now-available-principles-of-object-oriented-programming-in-javascript-beta/ Object Oriented programming with Stefan Stoy... Chrome V8 : http://code.google.com/p/v8/ https://developers.google.com/v8/ https://developers.google.com/v8/design - read this Mozilla Javascript page ...
Read more

angular js protractor e2e cheatsheet

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l...
Read more

react-select stacking order bug, z-index, layers and stacking

Image
Had to fix a tricky bug related to react-select recently (our Dropdown component wraps react-select). Here's the how the bug manifested. Dropdown does not overlay dynamically added content below it Variations of this have been reported since 2017. But I tried all the suggestions in the comments and none worked for me. I also tried wrapping the Dropdown in a div and changing z-index to be higher as well as making absolute position but no success. Changing the elements order in the html source and then reordering using flexbox order does work but it breaks the tabbing flow and is not recommended from an accessibility standpoint. One issue is the Dropdown is in a container and is constrained by the containers z-index. No matter how I change the Dropdowns z-index, its container is stacked below the next in stacking order. Google Chrome debugger layers tool provides a cool way to visualize layers. Could be better but helps, check it out below. You have to look closely but you can see h...
Read more