This question already has answers here:
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 6 months ago.
Is it similar in using media query in CSS to using container utility in CSS bootstrap? I find the media query somewhat ridiculous in its implementation?
Media query: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Introduction: Bootstrap is based on normal css (which include the media queries you posted) combined with js and html. But you have some classes and components (html tags) already customized in order to help you. Now it depends on what you mean by similar. You can use pure html, css and vanilla js to accomplish everything bootstrap offers (since this is what bootstrap is based on). But a lot of bootstrap features have a lot of code behind, so it would be quite complicated for some of them.
The response: Since the containers from bootstrap are based on css + js + html (some of them containing media queries as well) your html container won't behave the same by default (you can accomplish similar results only with some extra code).
The mdn link you posted is showing the normal behavior of css media queries. You can use them to extend bootstrap features or to create a custom html element that fits your needs (depending on the case, it can be easier to create the component from scratch rather than modify one with a lots of unneeded features behind).
Getting back to the question: some of the customized bootstrap elements have some media queries integrated (or some other custom options, including js) that might not work with pure css or they would be pretty hard to achieve. This is why the answer is kind of generic (as the question)
Conclusion: even though bootstrap might seem way easier in some cases I strongly advise you to try to understand the basics of css (media queries included). On the long term, this would help you a lot when you need to customize a component or create a new customizable component yourself. Also an advice: if you ever need to customize a component try to avoid !important rulles in css. To accomplish this try to also understand css specificity.
Related
I'm making a react app with styled-components and I want to create a component that will be just like using col col-x and another for row classes from bootstrap.
But my problem is that I can't find the styles for that, I searched for every .col word in the repo and couldn't find anything.
How can I make a component using styled-components that recreates bootstrap col col-x and row without importing the entire bootstrap?
You should be able to get it from the Bootstrap CDN https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.css.
I usually approach this kind of issue by creating a page where I load the library I try to partially emulate and apply it to the structure that I will intend to have. I will extract CSS rules from the dev tools (after loading it in several browsers to find differences of use-cases) and create the same CSS rules into another page, having the same structure, but not using the other library, which is Bootstrap in this case. If there are non-CSS differences, that is, the way that structure is rendered is partially managed by Javascript, then I will make a list of things to achieve and try and find the code for that. In general this will reduce the list of things I have to implement to have only a few items, which tends to be doable.
I'm just learning html and css and have just completed a landing page project. When I reviewed my css at the end, I realised that I had multiple media queries all for the same conditions (max-width) but applied to different elements.
I know that you can put multiple elements within a media query but what is best practice?
Currently I have each separate media query located just after the setup css for that element
i.e. #header is followed by #media (max-width:640px) #header{stuff;}}
Media queries were introduced in CSS3 are used for responsive CSS over different media types. Since usually the CSS code itself is applied for describing the presentation of the document or page, responsiveness is a separate feature altogether, so usually they are kept separate at the end of the CSS formatting codes. However, let me answer this question by stating the usage of both of the formats mentioned in the question.
At the end of code
Most templates of CSS available online usually keep their media queries at the bottom of the entire code making it easier to access and work with the responsiveness feature. Whenever the focus is more on "chasing device-widths" then this type of coding practice helps.
As observed, this allows to group together many basic CSS attributes that are applied over many elements.
Also, considering the cascading nature of CSS, the styling below usually (not always, refer this to know more) overwrites the styling present above. With #media queries present at the bottom of the stylesheet, it allows easy overwriting of relevant styles present above.
Finally ,as mentioned by #rguttersohn, media queries along with #keyframes are kept at the end with #keyframes usually above #media. This makes coding cleaner and easier to comprehend by others as well.
Below relevant styling counterparts
If styling is more layout-centric, it's highly useful to place #media queries next to their styling counterparts. This allows ease in editing the style and its corresponding #media query both in a single go.
This does mean that there is slightly more code, but these too can be cut down by grouping at breakpoints and section ends.
This type of styling is rarely seen in templates available online, however it's an ongoing trend.
To Summarize: I personally am of the opinion to keep all of the #media queries together at the bottom, but if I had to divide the labor of styling, I would opt for keeping the styles and #media queries together.
Also, given the broad and opinionated scope of this question, I think no answer can determined as right or wrong. I hope this answer brings enough light and information to the question.
I have a marketing tool (Pardot) that I'm using to build forms. It creates its own markup which makes it impossible for me to apply bootstrap classes to form element, although I can create them for surrounding containers (spans/divs).
Is there a way to quickly "alias" default Boostrap classes without writing a ton of duplicate CSS for the 50 or so different form-related classes?
I've already put in some CSS, just duplicating the Boostrap CSS, but that's labor intensive and obviously won't work for Bootstrap's JavaScripts.
I'd like to import an external CSS (eg. Bootstrap) into my site-- the problem is I'd like to apply the Bootstrap styles only to a specific region of the page. When I include Bootstrap, it applies its styles to the entire page, restyling all tables, divs, etc.
Is it possible to only apply Bootstrap to a region (say a parent div or something?)
Thanks
The only way to do this is to have a separate iframe for the content you want to style with Bootstrap (unless you want to edit the Bootstrap CSS, and add your outer div's selector to the beginning of EVERY rule).
HTML5 introduced the new scoped attribute, which is made specifically for your use case, but has not yet been implemented by any one of the major browsers.
If you are using jQuery (which you probably are, since all of Bootstrap's Javascript functionality is dependent upon jQuery), you might wanna try Simon Madine's jQuery Scoped CSS plugin.
Import Bootstrap before your own styles. That way your own styles will overwrite the changes made by Bootstrap where applicable.
I've only tried this locally and not given it any thorough testing but it seems to work fine. I created a div around the content and assigned it an id. Then prefixed all of the bootstrap selectors with the id I assigned the surrounding div. The prefixing was done with a couple of search and replace operations. Perhaps it can be done easier with less
Forgot to mention that the body selector of the bootstrap.css has to be replaced with the id and not prefixed like the other selectors.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there any way to find unused css in a website?
I'm looking for best practices on how to clean up existing style sheets and also inline styles. I have some style sheets in existance, and I'd like to clean up the bloat so they are more maintainable in the future.
Can we make this a community wiki?
There is so much that can be said about best-practice methods for CSS. I'll try to stick to the main points.
Use a CSS reset.
Try to remove really general CSS statements like h1 {} and #container em {}. You're much better off using h1.section-title and #container em.important {}, because that way if you choose to use h1 or em a different way somewhere in your document, you don't have to worry about overriding any existing code.
Don't be too specific in your CSS selectors if you don't have to. You really only need to have high degrees of specificity if being in a specific section changes how the element is going to be displayed. Otherwise, to make your code for your block class reusable, #container .content .block ... could be reduced to .block ... in many cases.
Look for commonalities in your CSS and see if you can create reusable classes. If you have similar blocks class="favorites" and class="popular", turn it into class="block block-favorites" and class="block block-popular", and put the commonalities into .block.
Get in the habit of making areas in your CSS have an auto-width (can be done implicitly) so that they grow to the width of your containers. This makes it incredibly easier to move sections from a narrow portion of your website to a wide portion of your website without having to change any code.
Commenting your code and breaking it down into sections usually helps make code more readable.
You'd be surprised how much cleaner your code looks when you implement more powerful CSS selectors. Most of them are cross-browser compatible (IE7+).
Some valuable resources: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors