I want to use a UI framework for the admin backend in a Wordpress plugin. Unfortunately, most frameworks apply many styles globally rather than explicitly. These global resets and overrides work well for sites built from the ground up, but they can wreak havoc when implemented into an existing architecture such as the Wordpress backend.
I am looking for a UI framework that is (1) designed to be or (2) can be overridden to be applied only to a given region of the page such as by a class name on a parent div. This would allow me to apply the framework to my specific options regions, while leaving the rest of the backend untouched.
I recently started working with YUI's Pure.css, which has an almost non-existant global reset paired with explicit classes all starting with the 'pure-' prefix. However, this framework is a little more lightweight than I'd like. I am looking for something a little more feature-rich along the lines of Bootstrap or Semantic UI.
You can prefix Bootstrap for example, either way you can handle it with less or prefix them yourself with this tool http://www.css-prefix.com/ since this should work for any framwork
for less you'll need something like this
.yourpluginname-bs {
#import (less) url("bootstrap.css");
}
Related
I'm starting a new angular project and it has been decided not to use a framework like bootstrap/bulma/materialize/... but write our own sassy component library.
I have done some research but to be honnest I don't realy know where to start (besides a css reset). I'm still a junior, have already worked on some features in a previous existing project. Now I have to start of the front end for new project and would like to build everything as structured and reusable as possible but I'm a little lost where to start.
What's your plan of action when you start writing your?
How do you structure your angular components library?
Have you ever seen a good tutorial about this that I should definitely check out as well?
From my point of view, it is not a simple task. But you can start from using SCSS which will give you a wide access to term reusability. And also you may need to work on flexbox/grid-layout (Not the case if you need to support old browsers like IE 11 and below) to implement a handful of styled components. By the combination of scss and 'flexbox`, I think most of the components can be created simply and reused in the way you want it to be.
I strongly recommend avoiding the usage of libraries and write our own code instead. Because the power we will have at the time is infinite. You will be amazed to have it.
But at the same time, if the project is a long-running project and your requirements are on the way, then I would suggest you to rethink about eliminating libraries like 'bootstrap, materialize. Otherwise, if the requirements change in time and you may need to use a number of libraries to achieve the functionalities you may need. (Experience is the best teacher)
On most of my projects to date I have not used a framework and written my own CSS library and would recommended it. I don't have any experience with Angular, only React. All I can share with you is my current setup.
I use gulp to compile SASS files into a main.css file and BEM methodology (You could also look at SMACSS). Each 'block' (defined by BEM) has a separate file in either Layout or Modules.
I separate my SASS files into the following folder:
Base - Used for - resets /Grids / helpers/ typography/ base (general base styles eg wrap)
Layout - Used for containers - header/footer/sidebar ect
Lib - used for mixins
Modules - used for components - form / button / alert / icon / accordion ect
Settings - color / font / responsive - used to set sass varibles to be used in all other files.
I hope that helps.
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.
As I become more familiar with Angular, and the vast number of modules out there for making an application really shine, I am also becoming overwhelmed at understanding the basic logic of CSS overloading, and how to manage the imports to get the desired behavior.
For instance, I have pulled the following libraries into my Angular application; Boostrap, Bootcards, boostrap-select, font-awesome, and some custom bootstrap-wizard libraries for a modal tab-based wizard.
All of these libraries require being defined in the index.html page of my Angular app (both the CSS files the JS files). How do you manage the desired behaviors so that one components styles don't override another components styles? What are the best practices around bringing in multiple components and using them in an Angular app, without negatively affecting the applications previous behaviors?
You have 3 choices:
Place more important CSS files AFTER less important ones so the more important override when both have same attribute names.
Manually go in stylesheet and change attribute names.
Instead of including the stylesheet in index, include it in your html file
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.