I'm working on a web application which is using Materialize as a front-end framework along with Kendo UI for the grid component.
I'm hitting problems in cases where both Kendo UI and Materialize have styles for the same element - for example they both override the styling on check boxes - this results in a broken layout due to the clash.
One option I realize is to pick either Materialize or Kendo UI and drop the other... however I would like to avoid this if possible as they in the most part have complemented each others weaknesses well.
If it was simply one element here or there putting specific overrides in would be an option however with the scale of the two frameworks this would be a maintenance nightmare as when one changed the overrides would possibly have to be refactored.
Are there any ways to solve this issue that I am missing?
One way to workaround such a clash is to build your MaterializeCSS to include only the parts you so need for your project.
For instance, if you do not need the buttons styling of MaterializeCSS, you could simply, via sass, compile the materialize.scss and cherry pick buttons out of the file.
If going down the path of building your custom .css of Materialize is a long short for you, you can try using materialize.khophi.co (Disclaimer: I built it).
Find more about how to customize your MaterializeCSS: http://materializecss.com/getting-started.html
I know it's usually suggested not to duplicate code, and you want to try steering away from overrides, but would it be possible to find the section of css you like (i.e. select box from materialize) and copy that in to a new custom css file, renaming the selector so you can use it seperately from Materialize/Kendo UI?
You can manually edit the stylesheet of eighter party. Take the non-minified CSS, and prepend every base path with a short prefix:
.card {
....
}
becomes
.mat.card {
....
}
That way, for every materialize style, you use .mat before anything. Or, if you mainly use materialize, do the same thing for Kendo UI.
This is a lot of pain, but would solve your issue.
Related
I have a jsp page which I want to style using Materialize framework, but as soon as I add the href to materialize.min.css in my page (or in the entire project from the beginning), it overrides my existing styles from all the application and I want to be able to call Materialize only when I need it, not to change the whole style because it becomes a mess.
It's also the first time I'm using Materialize, so maybe I'm missing something.
That's how CSS frameworks work, generally. Most of them will normalize and apply a base style to your website, even if you are not using framework specific class names.
I usually work the other way around: I let my framework of choice control all of my UI, and when I want to override something, I use custom CSS styles. To do that, make sure you add a link to your own styles on the tag after the Materialize CSS link.
I really liked modular architecture by smacss.com/book/categorizing. But in real project I stumbled on simple case (as I thought).
ok, what I got:
1) I created a folder structure for my css-files by smacss:
Base
Layout
Module
State
Theme
2) In folder Module I've made a file with base modal windows styles, like this:
Base
Layout
Module/modal/modal.css
State
Theme
3) But I have a few types of modal windows with common styles (which I separated in modal.css - colors, borders, positions etc), but they have their own parameters. First window is very simple with two buttons, second has a lot of different content.
Question is: where should I put styles for these two windows?
a) Create folders for them as modules:
Module/modal/modal.css
Module/confirm/confirm.css
Module/product/product.css
b) or create for each css-file and put them in Base folder?
Base/confirm.css
Base/product.css
Module/modal/modal.css
I would be glad to get any advice. thank you
the main reason to use SMACCS is to organize your CSS files, therefore, there are a lot of approaches which totally depends on your project.
According to the author, as long as you keep the concept of SMACSS in your mind, you then are able to modify your project as you wish. So, what I recommend you is to have a look at your project and check your folders and files and just do whatever it makes sense more not only for you but also for other developers in the team or in the future while reading your code.
There are only two main goals that you should bear in mind:
A Base rule is applied to an element using an element selector, a
descendent selector, or a child selector, along with any
pseudo-classes. It doesn’t include any class or ID selectors. It is
defining the default styling for how that element should look in all
occurrences on the page.
and
a Module is a more discrete component of the page. This is the
meat of the page. Modules sit inside Layout components. Modules can
sometimes sit within other Modules, too. Each Module should be
designed to exist as a standalone component.
so, with this clear definition, you know now that if your rules should be standalone put them under the Module, however, if they are going to work as default to the elements so put them under the Base. In contrast, to me Product or Modal all can be Module and they are not Base as base are clearly stated as default element rules like I said on top.
I am just concern that you have written CONFIRM which looks like a State rules and I assume it can be placed under State folder.
A state is something that augments and overrides all other styles. For
example, an accordion section may be in a collapsed or expanded state.
A message may be in a success or error state.
I strongly recommend you, read SMACCS book or website one more time and have a look at one of the Jonathan Snook workshop that can be found on Youtube. It will help you to understand more and make a better decision.
I jut recently tried to upgrade jQuery UI, and after I did I was shocked to find that it completely changed the look of my site. I'd like to use the jQuery UI logic, and I'd like to have whatever minimal CSS is needed to (say) make a dialog have the right dimensions, but I don't want any of jQuery UI's fonts/colors/backgrounds/etc.
Is there any way to get a CSS file like that? I tried playing around with the theme roller, but it seems to assume I want styles for some color and some font, when I don't want any at all.
The root directory of a jQuery UI download zip should include jquery-ui.structure.css which contains just the structural CSS without any of the themeing. You may have to add some of your own styles on top of that to get a usable UI.
I'm writing a Chrome extension that injects HTML into a displayed page. I want the injected HTML to have it's own style, protected from the CSS that may be present in the host page.
I've tried using conventional CSS, and still suffer from style corruption from the host page.
After watching the Polymer presentation from I/O 15, I was wondering if there are any new, Chrome-specific techniques that I can use to achieve this?
What you will want to look into is shadow-dom. This will enable you to create a widget/component (which would be your injected html). This would mean that the DOM tree for the widget/component is encapsulated and no external styles from the page will affect it. There is a good article on html5rocks covering this. You may also want to look into WebComponents. Bear in mind that this functionality is only available in the latest browser versions.
Two things that I currently use at my place of work are:
css-modules
react-css-modules
I use react at work, hence react-css-modules, but css-modules should work in your case. It's not Chrome specific, but we use them within the context of each component we build. Basically, like the docs state, a class of row would become something like table__row___2w27N. The breakdown of the built name is the filename of the CSS than the class name followed by a base64 hash of 5 char. I hope this helps.
One potential downside is Webpack would be required.
Here is an example of our component folder structure:
- component
- Component.jsx/js
- component.css/scss/sass
- component.test.js
I've started a Rails project and implemented bootstrap-sass into it. A short time later I found a theme/template using a different version of twitter bootstrap. I've added the template to the app but the view doesn't align perfectly as was intended. I then added the specific assets that came with the theme/template to my project (such as jquery version, ANOTHER older bootstrap version) and the result is almost perfect. However, there are still some alignment issues. When I inspect the CSS I can see it's happening because of conflicts between the two versions of bootstrap.
I'm thinking I should make it so that this template only uses the version of twitter bootstrap that came with it. If so, how do I do this? How do I make it so that a rails view will only use a certain css stylesheet and not read from others?
(If this is not the best solution, what are some alternatives I should consider?)
Thanks
Try this out:
1) use 2 layouts (application.html.erb and new_application.html.erb)
2) have two master javascript/css file (application.js and new_application.js, application.css and new_application.css)
3) inside your application.html.erb include the first application.js and application.css, on your second layout, import the new application js and css
4) for the specific parts of your page, on the controlle inherit from the right parent controller for whichever layout you want.
class NewBootstrapController < ActionController::Base
layout 'new_application'
end
class OldBootstrapController < ActionController::Base
layout 'application'
end
Best practice is to try to view your project as consisting of "components" rather than pages. So focus on keeping the styling for your components up-to-date and consistent.
So rather than coding for individual pages, which doesn't scale and is difficult to maintain even with small(ish) projects, look for ways to turn elements into reusable components. Bootstrap is this way by default, so if there are certain components you use more than others, make those the priority for refactoring, and then look for repeating patterns across your pages and try to think about how you can create semantic, component-based classes to describe them.
Instead of this:
.sidebar-home {}
Try this:
.sidebar-narrow {} // or whatever describes your element
The operative point here is that if you will ever work on more than this project, get into the good habit of thinking about your CSS/HTML as consisting of components, and you will be able to reuse code and become much faster at identifying patterns in your UI.