twitter bootstrap modal popup, customized size and centralized location.

When I try to make bootstrap modal wider than the default. It is not centralized anymore, here we need to modify the css to adjust the left margin to the right px. Here is a block of handy code to adjust the modal width by a certain percentage of document width and adjust the left margin to centralize the modal as well.

$('#mymodal').modal({
        backdrop: true,
        keyboard: true
    }).css({
       'width': function () { 
           return ($(document).width() * .9) + 'px';  
       },
       'margin-left': function () { 
           return -($(this).width() / 2); 
       }
});

CSS media queries not working with IE7, IE8

I have worked with media queries on a project for a while and notice that it is not actually working well in IE 7 or IE 8.

Here is a simple sample of the media query I have.

@import url("desktop.css") screen;
@import url("ipad.css") only screen and (device-width:768px);

To make sure things working alright in those browsers, you will need a separate css file for those two. And a detection of “if it is less than IE9”, use the “style-ie.css”



<link rel="stylsheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

CSS trick to place div in centre

For fix and relative positioned divs, if you already know the width or height. You can place them easily in centre horizontally or vertically.

For example, you have a div with width 400px.

<div style="width:400px;">

</div>

To place it in the centre of it parent div, you can set the left:50% and margin-left:-200px;

<div style="width:400px;position:relative;left:50%;margin-left:-200px;">

</div>

Set it left 50% of the parent div’s size, and then set its left margin to half size of its width. Make sure your position is relative or fixed. It will sit in the centre of your page.

It also works for vertical divs, set top 50% and top margin to its half size of the height. E.g.

<div style="height:400px;position:relative;top:50%;margin-top:-200px;">

</div>

LESS css & media queries for a responsive design with Bootstrap

Using media queries in a single file, we can support multiple devices with different screen sizes.

Bootstrap doesn’t automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

  1. Use the compiled responsive version, bootstrap-responsive.css
  2. Add @import "responsive.less" and recompile Bootstrap
  3. Modify and recompile responsive.less as a separate file
    Set up different styles in groups to show or hide contents by devices
        // Landscape phones and down
        @media (max-width: 480px) { ... }
         
        // Landscape phone to portrait tablet
        @media (max-width: 767px) { ... }
         
        // Portrait tablet to landscape and desktop
        @media (min-width: 768px) and (max-width: 979px) { ... }
         
        // Large desktop
        @media (min-width: 1200px) { ... }
    
    

Bootstrap from Twitter, timer saver for the UI designs

Bootstrap is just CSS, but it’s built with Less (Dynamic stylesheet) http://lesscss.org/ .

It is very easy to implement, just drop the code and go. Less can be accomploshed via javascript. Once it is compiled, bootstrap only contains CSS.

What it contains:

CSS,

  • reset.less A CSS reset for our use to remove unnecessary elements
  • preboot.less Color variables for things like gradients, transparencies, and transitions to simplify vendox-prefixed CSS blocks to one line of code each
  • scaffolding.less Basic and global styles for generating a grid system, structural layout, and page templates
  • type.less Headings, body text, lists, code, and more for a versatile and durable typography system
  • patterns.less Repeatable interface elements like navigation, modals, popovers, and tooltips to take you beyond the default scaffolding styles
  • forms.less Durable styles for various input types, form layouts, and control states.
  • tables.less Styles for tabular data in a number of varied displays

And Javascript (JQuery) Plugins,

  • Modals, A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.
  • Tooltips,A new take on the jQuery Tipsy plugin, Tooltips don’t rely on images—they use CSS3 for animations and data-attributes for local title storage.
  • Collapse,Get base styles and flexible support for collapsible components like accordions and navigation.
  • Dropdowns, Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.
  • Popovers, Add small overlays of content, like those on the iPad, to any element for housing secondary information.
  • Carousel, Create a merry-go-round of any content you wish to provide an interactive slideshow of content.
  • Scrollspy, Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.
  • Aelrt Messages, The alert plugin is a tiny class for adding close functionality to alerts.
  • Typeahead, A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.
  • Togglable tabs, Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.
  • Buttons, Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
  • Transitions, For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.

Bootstrap at Nuget: http://nuget.org/packages/Twitter.Bootstrap

Less CSS: http://lesscss.org/

Media Queries: http://www.w3.org/TR/css3-mediaqueries/  (a smart example how to implement media queries http://mediaqueri.es/)

 

Icon for package Twitter.Bootstrap