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.
Related
Our team is just starting to figure out how to create a design system on top of MUI and we are trying to figure out what's the best approach to working with styles.
Up to now, we understand that using CSS inline or CSS module the final styles will be on a separated chunk when we build the project.
Otherwise, when we use CSS in JS approach (Styled components or emotion) you don't have any CSS chunk when you build the project, because styles are on the JS chunks (making them a bit bigger) and then the final CSS is made in the browser side (theoretically hurting the performance).
I tried to check on MUI repository how you are handling styles in your project in order to follow the same approach and that way not mix different approaches, but I didn't understand your strategy. I saw some emotion dependencies, but I couldn't recognize some emotion regular sintaxis on the components. Can you explain to us a little bit how you are doing that?
And finally what way to handle styles do you think has less impact on performance when you create a design system on top of MUI? (following your same approach, using inline styles, styled components, emotion, or another one)
PD: this question is not regarding design tokens, just finding a way to handle the styles that don't affect the performance of the consumers of our design system.
After some research and reads, I found out that the community is quickly moving to a more component-scoped CSS in order to avoid global variables definition using classic CSS stylesheets (https://speakerdeck.com/vjeux/react-css-in-js).
I'm currently working on a data-table based project where I need to render many tabular elements using div as cells. This leads me to a huge duplication on inline style and a not-so-sexy DOM:
I don't want to use any library (Radium, Aphrodite, styledcomponents, CSS Modules) to keep the project "vanilla" and reduce my dependencies (more a request than a wish...).
Is there a best-practice to avoid this huge mess in the DOM?
Maybe, is there a way to generate a class name "on demand" and apply it to the rendered component?
I am using Primefaces 5.0.I want to use or bootstrap css to Primefaces custom components like List, table, selectOneListbox.
I am to apply css to normal component like button, link etc.
It's possible, but due to reason that a internal structure of Primefaces's components are different from a plain HTML components with which Bootstrap supposed to work you will need to make hard job to accomplish that. You will need to debug every Primefaces component to see its internal structure and change Bootstrap's css file that it will correspond to internal classes of Primefaces's component.
Actually you have three alternatives (maybe more):
Like BalusC mentioned, Primefaces has its own implementation of Bootstrap theme: you can see it here: http://www.primefaces.org/themes IMHO, best option
Use Bootfaces JSF library: http://www.bootsfaces.net/ Pay attention that it's pretty new library and possible buggy. There isn't big community support like for Primefaces library.
Make you own Composite (or Custom) Components with desired structure and styling.
In our project we are using WIREFRAME( Base 16 columns) css framework, we want to change the framework to Bootstrap, IS there any easy way to change, or do we need to re write entire css again.
You shouldn't have to convert to Bootstrap unless there are particular styles that Bootstrap offers that Wirefy doesn't. Wirefy is meant to work as a foundation that you can build your entire app on. This means that you can include additional frameworks or stylized classes on top of it without having to convert.
If you still feel you need to convert then it really depends on the types of classes you've included into your wireframe and how they align with that of Bootstrap.
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.