Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Currently I am developing website themes with fixed width so please give me a suggestion which framework I should adopt is there any other way to do thing this way.
Thanks in advance.
I suggest you to use Bootstrap 3, it's used by a lot of developers and it's documentation is really helpful.
To learn responsive design better and fast you should:
Understand the use of media queries, this article will let you
know about the standards breakpoints for them.
You can use LESS or SASS for creating a custom Bootstrap grid
that suits your project.
As suggested above, frameworks such as Bootstrap really speed up the development time of a website and make adding responsive layouts easier due to the grid system they use. For extra information using bootstrap go to http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/. They provide some tips on responsive design.
For responsive website designing, you have to understand the css media queries. Though,it will get your job done, but designing through media queries seems like taking lots of efforts, specially when must faster and less time consuming alternatives are available.
I suggest you to go through twiiter bootstrap framework. Responsive website designing is much easier with it. You have to just include a couple of javascript files and apply some predefined classes(as per your need), and you are done.
There are two very good tutorials, i would like to mention. Just go through with them for a clear crisp understanding of bootstrap simplicity in responsive design. They have pretty good examples too. Just try altering your browser width to get a better understanding.
Bootstrap:
Link 1
Link 2
I would agree with using Boostrap 3 from personal experience.
Also instead of setting actual widths setting percentages instead makes it responsive as it goes to the size of whatever screen size you are using, as an example you can use this link.
Also, check out collapsing navbars for a responsive navigation to be collapsed on smaller devices, here is a link that will help you out: NAV.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am migrating my small business website to use bootstrap in order to be mobile friendly. I am still getting to know the bootstrap framework and I am not an expert in css either...
My question is a conceptual one. Today with my old website, using html and css, I define in my css both the size (yes, fixed sizes) and styles (colour, etc.) of the divs I use.
On the other hand, in all the examples I've seen of bootstrap, in the css one can only define the style of the divs, while the size is defined in the html when choosing the bootstrap column's size (e.g. col-sm-4). [Note: I am following the approach of having two css, bootstrap's and my custom one.]
The way I see it, I am losing the capacity to define the size of the divs centrally from the css and hence losing maintainability. Also, the site will be harder to develop since the col-sm-* classes are semantically poor. Is this correct? Am I missing something here?
Is there a way to define css classes that reference the bootstrap classes? e.g. To define a .menu css class that can behave as .col-sm-4.
Any suggestion or recommendation is welcome.
Thanks in advance
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Firstly, I don't have much experience with Bootstrap and I just started my second Bootstrap project. Sometimes I confused about overriding CSS. It may spend more time to find out the style need to be changed rather than write from scratch. So I am thinking... how about taking out the bootstrap style?
For example, keep the markup structure, set the color background, font value to inherit, remove all shadows, gradients, border, border-radius etc.. Furthermore, build a reference in order to check the default value easily. Then we can just use the layout of Bootstrap but write our own style.
I prefer to not directly modify the Bootstrap source code. Use an extra CSS file is better to organise. It is also good to update Bootstrap.
By the way, I really miss the blankwork grid system, is it possible to add this feature into Bootstrap?
So, do you think this is a good idea or bad?
What you are looking for is possibly the customised version of bootstrap. See the details at http://twitter.github.io/bootstrap/customize.html. This will allow you to pick which elements of bootstrap framework you would like to use without adding the other parts. It also allows you to customise fonts and some basic shades and colours.
This can also be done via the less system - see http://bootstrap.lesscss.ru/less.html for information on how to do this.
And finally, if you are having trouble identifying which css is being applied to which element, have you tried using a browser debug tool such as Firebug in firefox?
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Once apon a time IE6 lacked support for CSS features such as "display: table-cell" and inline-block, resulting in "float" being hijacked and used for layout - which is was never designed for (or particularly good at).
Using floats seems to result in overly fragile layouts that are difficult to maintain and often break completely with changing dynamic content.
This was a necessary evil in its day, however now that support for browsers pre-IE8 are less of a concern, we should in theory be able to move away from floats and use the parts of CSS that actually work well for layouts - such as the aforementioned display: table-cell and inline-block.
I'm currently considering of recommending my team move away from float based designs entirely - am I at risk of painting myself into a corner and having problems down the line , or is this a better option if older browser support is not important on our project?
Should you move away from floats entirely?
Sure, so long as you don't need the deeper browser support. When it comes down to it, what really matters is whether the page displays properly for the largest numbers of visitors to your site as possible, right?
Another issue that should be of concern to you is maintainability, but I can't say that it'd be accurate to say that either method is less maintainable than the other in every situation. So I'd just ask yourself what layout method your team is more familiar with and how far back you need to support.
display: table-cell is supported in IE8+. Float displays can go all the way back to IE6.
Other thoughts & the future...
Contrary to what you said about floats, I think when used right they can be very predictable. My primary qualm with them is the need to clear the parent which is a bit awkward. Further, popular scaffolding systems like Bootstrap and 960-Grid still choose to use floats, and for good reason: they're useful, have great cross-browser support, and can do what you need to do.
With that said, the future is looking good for Css and layouts. There are two upcoming models of layout in Css: the grid system and the flexbox model. Neither are recommendations yet, so browser support is a bit shaky on them.
The grid system is similar to display: table-cell but gives you much greater control. Flexbox tries to generalize and abstract the idea of displaying elements, which allows for really powerful, fluid (or 'flexible') layouts. Both of these will be pretty amazing once they're implemented in browsers.
If you want to read more on usage of flexbox, I recommend the excellent MDN article about it
Were I you, I'd just hold out and use floats – in particular, by using a scaffolding framework. I haven't worried about writing scaffolding Css in a long, long time; I use frameworks since the code is already written for me. And, for me, I'd only find it worthwhile to completely restructure a project once flexbox and the grid system are a recommendation and more widely implemented.
Like you said is about what is best for your team, but believe me... if you use float correct and in the right places you don't get a layout breaking because you change the div content.
But in the future the best way will be using flexbox, you can accomplish everything about blocks horizontal, vertical, with same sizes, diferrent sizes... Anyway when all browsers support it, will be aewsome.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have been working on this site for a few days now and am trying to get it to look great when the window/viewport is ANY size... Currently it looks pretty good on a widescreen or normal 1024 monitor for me... However I am having problems getting it dialed out for iPhone / iPad and smaller sizes...
I would like for everything to be responsive and fluid... Currently when viewed on an iPhone only the 1st block looks good... The other blocks have content that extends past the right side of the window so that the user has to scroll over with his/her finger to view the content.
I've played with the viewport (set min & max) and Iv'e now got a min-width of 980px on each of the blocks to make sure the background covers the screen... Not quite sure where I'm going wrong here...
Would appreciate some pointers or anything to make my site more responsive! Tips... WTFS... Etc ;)
Thanks again
(post these comments as an answer because it turned out to be the answer)
I'd suggest getting a hold of Zurb Foundation or Twitter Bootstrap (recommend Foundation) and using that as your base layout while you get more familiar with responsive design. Once you see how they're put together you will be able to tackle your layout again.
change the layout for mobile version with the help of Media queries i mean desktop kind of design will not look good in mobile version for example the main menu is looking good in desktop and for lower screen sizes you have to change the Menu like dropdown..
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Although, I know that a lot may depend on a particular web site, what is the mainstream? =) And also, what do you think of implementing CSS table-based layouts while IE6 and 7 are in use?
I use CSS floating at the general level, tables for tabular data, and absolute positioning if necessary.
i personally use a mixture of them all. For grid like data, I favor tables. For advanced layering, I use absolute positioning.
For website layouts I use a mix of CSS layout techniques. Depending on whether I am building a fixed-width site or elastic-width site the CSS techniques differ somewhat.
But, when I want to create any layouts for e-mail marketing then table layouts is the only thing I work with. And now with Outlook 2010 still supporting the Word HTML Renderer I don't think I will be using any CSS layouts for e-mails anytime soon.
As for CSS table layouts, you can use conditional comments to provide a seperate CSS style sheet for IE 6 and 7. Something like this:
<!--[if lt IE 8]
//different style sheet goes here.
-->
I would recommend reading the following two books:
Bulletproof Web Design, Dan Cederholm
Everything you know about CSS is Wrong, Rachel Andrew & Kevin Yank
The first book will show you CSS layout techniques for both fixed and fluid designs, whereas the second one will provide information about CSS table layout, including how to deal with browsers that don't support it.
Hope this information is helpful.
Floating combined with absolute positioning.
I never use tables, perhaps mostly because I got tired of them back when I had to use them because there was no alternatives.
Tables are not semantically appropriate for making a layout. The "correct" way to do things isn't anything you said in particular.
You should be using semantically-appropriate tags: header tags for titles, div tags for sections, lists for navigation/lists, etc.
Once you have this set up, style the elements in CSS, adding divs, spans, ids, and classes as appropriate. Floats, absolute positioning, etc. should be used as you see fit.
Things are dependent.
I want to put is that you should know what is needed.
One thing Div based layout renders fast than table base. There are some things that might affect your page render time in browse Like use external CSS only etc.