When you create MVC project with Visual Studio, by default Bootstrap is ready to use. Bootstrap is mobile friendly CSS, ready to use out of the box. If you are not ultra picky about design, I recommend to use it. And even if you are, you can still use Bootstrap as a base and make great views.
Here is my memo for design Views.
Bootstrap is mobile first design, so do design in mobile mode first, then create desktop / tablet design using media specific customizes CSS properties.
Example below, if the screen width is more than 768px, then apply this CSS properties, which give 150px padding at top.
|
1 2 3 4 5 6 |
/*For tablet, desktop*/ @media (min-width:768px) { .pad-lg{ padding-top:150px; } } |
for less (and more screen sizes)
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } |
Reference: