This is a very newbie question but I did not manage to find an answer to it.
I have the html5boilerplate in my rails application using comet. But how do I continue? Seems all h1-h5 are the same font size and tables are not styled in any specific style.
I originally wanted to have a simple CSS that has default styles for most elements like Sinorcaish or Blueprint so that I can start coding the website itself without worrying much about styling. Did I take the wrong library for this? Is there a css that goes on top of html5boilerplate to give me a nice style? should I use Blueprint/Sinorcaish on top of html5boilerplate?
It's an overall reset type of HTML template. You would style the site without worry of too much differing between browsers that are HTML5-ready (actually, it's IE6-capable, too).
Use it, it's the bomb, believe me.
You could always just use a CSS reset stylesheet.
Related
How exactly is one to know what all needs to be overridden with the bootstrap styles when customizing the look and feel?
Is there a trick to find out where exactly I need to set the style in order for it to take precedence over the bootstrap style?
For example, I've been battling two days making form fields look the way the customer wants them. The default of bootstrap when wrapped up in the form-group row and form-control nested layers comes in with a tall field with rounded edges. I've created my own class setting everything to 0 for the padding and margin. I have also set the height to just 18px. NOTHING gets picked up.
I had the look and feel almost perfect earlier but I was not using any bootstrap stuff just html and css. The lead developer said we need to use bootstrap styles and just tweak what needs tweaked to fit the look and feel. Well, that sure as heck is easier said than done.
I miss the days when a designer specified what the look and feel was and we just coded the style and were done with it. This library usage of the 80% solution and 100% effort on top of the 80% does not seem to be a great approach unless it's for maximizing what the client is shelling out.
Override the styles using your own file.
Don't update the Bootstrap SCSS files to fit your needs. This can lead to many unforeseen issues. Say you want to share or update to a new bootstrap version. Combining the files and/or rewriting your work will be a hassle.
'If you make changes directly to the default bootstrap.css stylesheet, it would become very difficult to maintain and keep track of changes.'
How to Customize Bootstrap – UX Planet
Don't edit the actual bootstrap file, if you are manually importing it to your project.
Just make your own stylesheet, and make sure to import it after the bootstrap import.
There are 2 ways to do it.
1) Edit Bootstrap SCSS to fit your needs. This way you can customize it quickly and by generating custom CSS, not just overriding it. This is probably the easiest way to do it.
2) Override CSS with custom style. This is easy if you know Bootstrap and what style each element have. Just open Boostrap CSS find what you need and override it. It may be tricky because sometimes Bootstrap uses !important. One last thing - place your CSS after Bootstrap!
It appears to me that the underlying issues (or you can say something I did not know) are that the defaults for Bootstrap have padding, margins and other settings greater than 0. So, any tag that I use of bootstrap I'll need to override to set the values to 0 in order to get things to layout as the client wants.
By overriding, I do not mean altering the Bootstrap actual css file but rather in your own css file specify the bootstrap style that you are overriding.
Thanks all for your links and suggestions. Greatly appreciate it.
Helpful tips on using debugging tool: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS
This might seem a bit unorthodox, but I am trying to use Bootstrap with the website I'm working on now, but don't have access to the head section of the site itself.
Ideally what I'd like to do is to use the Bootstrap CDN, which is available from getbootstrap.
The other option would be to take the CSS I might need from the Bootstrap downloaded CSS files and do the code inline, but this, obviously, would be a bit more work.
So, my question would be -
1) Is it possible to link to the Bootstrap CDN outside of the head?
2) Are there any alternatives I'm not thinking of?
3) Is copying and pasting inline the only way to do it?
We'd need the head developer, with full access, to implement it in the head itself, who has a lot on their plate and this would likely feature quite low on the list of things to do, so if I could do something myself then it'd be great.
You can include external CSS like Bootstrap in the body section however it is considered as a bad practice. What actually happens when you include the external CSS in your body section is that your content gets posted before getting styled and then gets styled later. In short, what im trying to say is that it works but it has a few drawbacks.
I can not think of any other alternatives.
how are you I know too late to answer but I just wanted to tell my opinion.
I think no, there is no solution to add CSS link stylesheet outside the head section.
with my all love and respect, Ahmad Itani
I have used HTML in its basic form, and I mainly work on "server side" (of Enterprise application, mainly based in Java EE).
From what I understand, HTML is the "pages" which we see in an browser (that source code which a GUI developer writes and which a browser renders appropriately).
For example in an HTML tag, we write "h1" element, and the browser displays the text within as bold.
Now why there is any need of css? From what I am aware of, CSS is used to give "style" to a html page. The confusion that I have, doesn't HTML in itself able to give the style? what were the compelling reasons for creation of css?
Can anyone help me understand this in simple words.
The code that you put in your html to style it is actually CSS. HTML actually has some built in CSS. So really, you are using CSS when you do that. Also people like to connect a separate file for CSS in bigger projects. It looks more organized, and it easier to keep track of. It is also easier to code the CSS, because it is less messy and it seems like you have a bit more functionality. In conclusion, the code in the html that you are using to style with, is actually CSS, just built in. Also, I would highly recommend separating your stylesheet and HTML file(the stylesheet is CSS). If you need help, go to codecademy and create an account. Take the HTML and CSS lesson. I found this very useful and is where I learned most of my knowledge. I would highly recommend going to that site also. The site is also free.
html5boilerplate is excellent, and I plan to use it. It basically reset browser styling, and provides some tools for optimizing page performance. Is there a styling/themes for html elements to jump start the development. similar to the themes listed at http://html5boilerplate.com/docs/#Home★html5-boilerplate-themes , but framework agnostic. In short, I am looking for styling for html elements (as a base for customization) to include in style.css file, right after the comment line that begins with 'Primary Styles'.
Thanks,
Bsr
You are basically looking for a stylesheet that magically gives a good style to a page without having to do anything? I doubt that exists, since the CSS is built on top of the HTML, and that would require knowing your HTML. There are probably examples of different layouts around the interwebs, but I don't think you are going to find anything similar to a "theme".
Is it possible to make cross browser
rendering site without using CSS
reset?
Is CSS Reset for all website, small,
one page, big?
Should we use write all css without
reset then only solve needed
rendering problems nad only keep
needed things in CSS Reset, or we
should use CSS Reset from starting
point?
Should i suggest to use CSS reset to new CSS HTML learner or not? I was thinking if i would suggest to use CSS reset then how he will know why we use CSS Reset. am i right?
Is it possible to make cross browser rendering site without using CSS reset?
It's definitely possible to make sites that render similarly across browsers, but very difficult, whether with a CSS reset or not, to make them render pixel-for-pixel the same across all browsers (personally I don't try that hard unless a client demands I do so). But for most cases, it's doable.
Is CSS Reset for all websites (small, one page, big)?
I've used my own CSS reset for my entire web site as well as single-page side projects. I don't really think it's the size that matters, but again that's just my own opinion. If you want to, you can always make your custom resets simpler for smaller sites, if browser anomalies aren't a big issue.
Should we use write all CSS without reset then only solve needed rendering problems and only keep needed things in CSS Reset, or should we use CSS Reset from starting point?
The point of a CSS reset is not as much to solve rendering problems in individual browsers as it is to strip all default browser styles, whether they're problematic or not, and start from a clean slate. To that end, a CSS reset is mostly meant to be used as a starting point.
Should I suggest to use CSS reset to new CSS/HTML learners or not? I was thinking if I would suggest to use CSS reset then how he will know why we use CSS Reset.
Sure, why not? I think it's great if we share to CSS beginners about the differences in the ways browsers render things by default. As a starter I was also really confused by why Firefox 2 and older chose a default body font of sans-serif instead of serif, while other browsers chose serif. By using a CSS reset we can save beginners time that they'd otherwise spend trying to work their way around browser defaults.
Answering the questions, there is no way to reset all browser's default style by a simple command but CSS Reset.
Obviously the use of the CSS Reset are conditioned by your personal choice, I use to avoid CSS Resetting for simple tableless layouts. Complex layouts like DeviantArt for example could be a good idea to reset all styles.
But the most important point is: Whatever your choice (both are good), do not reset properties that you will not use, and consider to keep your CSS Reset in the same file to save HTTP requests.
It keeps your CSS maintainability for the future.