I'm trying to understand how to best work with Angular-material theming:
Google's giving out a wide range of color palettes,
And also provides guides on how to easily switch between palettes.
I've seen this question, And found a bunch of tools to generate a palette around a main color (tool1, tool2)
Although when getting a custom design from a designer, where different colors were picked, I find it difficult to implement design colors as a complete theme, as there are too many variables to take into account (such as hover shades, ink-ripple shades etc.).
My question is:
Can I as a developer create a well enough eye pleasing theme from
every design that is delivered to me (either by JS theming, or CSS
overrides), or are there any restrictions to take into account?
Should the designer take some guidelines into account when
creating the design?
Should we give away flexibility in design by going with one of
Google's pre-defined palettes?
**
Edit - 05/2017:
I've decided to completely turn off theming since I couldn't fully understand how to customize it to our needs.
Im now injecting variables through webpack into SASS files and the outcode is much more sane.
**
No, not currently. "Well-pleasing" is a broad, opinion-based term that is not decided by logical algorithm. I actually have tried to do exactly this for months before I finally learned enough about UI design to know it wouldn't work.
Google's material design guideline is all that's needed for a designer to create a Material Theme. It's not that long and a typical designer can skim through it in about an hour.
No. Google's pre-defined palettes are meant to be used by programmers to quickly create sites with acceptable interface. Unless you work specifically for Google, there's no reason to limit the designer's palette. They are totally fine as guidelines, though. See Dark Material UI, a design concept based on Material Design but doesn't adhere to many part of the guidelines (for example it uses colors not included in Google's color palettes)
The approach that we use is simply changing the href of css file in your html head section. In this case you have standalone css file for every theme, and when you need to switch, you simply modify href.
No need to use additional markup as google recommends, because it will be to complicated to switch between themes, especially if there lots of themes.
You can look at an example here:
http://docs.telerik.com/kendo-ui/styles-and-layout/how-to/change-themes-on-the-client
There is a live example available. And material theme as well.
Related
I'm creating a very big project and have a huge amount of styles there. I created a mix-in and implemented dark properties for all styles. Approximately so.
footer{
background: $white;
#include darkScheme{
background: $dark;
}
}
It was a lot of work for more than one day. long story short: I wanted to make a switch because I know that people like different interface colors and it would be convenient for users. I saw how easy dark mode switcher work in the mozilla developer tools and decided to make my own switcher in a couple of minutes. I slowed down a bit until realized that I can't just toggle system theme settings with js, I had a question that answered by Federico Moretti. I don't understand why make such restriction just for color modes.
what is my philosophical paradigm? It turns out that the only way to solve my problem is to write an additionally code to switch on another color theme, which, in fact, is neither dark nor light, but completely repeats them. Which seems like a terrible practice to me because it creates a lot of redundant code everywhere.
I write in laravel and use mix, it generates automatic code in the header and everything works fine there, I don't want to change anything. I already have styles that system sees and I just want to switch it for user natively, but I can't.
<link rel="stylesheet" href="/css/app.css">
despite the fact, that i use <picture> tag with media="(prefers-color-scheme: dark)" inside html.
I have a few questions:
Am I complicating development for myself or is there a rational grain in the way I described it above?
What is the best way to organize a very large number of styles and maybe not use Code like this for simple switching?
How does theme switchig in Firefox dev. panel work and can it be emulated like a function in chrome for exmple with js or css?
Thank you for your replies.
Is it possible to have multi-line in select option value
In the multi line option I would like show first line in bold and rest of lines in regular font.
Is there any possible approach using HTML/CSS and Java script or
Do we have any library in React which can achieve the above
It is not possible with current support of the select tag in current HTML version. The only possible solution here is to use a custom made solution, both vanilla CSS or javascript options are available, and you have plenty of techniques to choose from.
Whenever I found myself in a need of creating a custom solution I like to look for inspiration in this article:
https://tympanus.net/Development/SelectInspiration/index.html
Once you decide to go with custom made solution it is always a good practise to implement at least basic Screen Reader support.
A good place to start: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Best_practices
From my experience in business projects I usually prefer to go with JS powered solution, especially in such where frontend is changing a lot. My favourite here: https://select2.org/ which is both easy to customize and powerful enough to meet even the most challenging requirements, and you can't forget about really good docs.
As I can see you included a reactjs tag in your question, so if you are planning to create a react solution I would go with:
http://jedwatson.github.io/react-select/
which is pretty similar in functionality to Select2
This is probably a trivial question, but I feel like it would be useful toward web design. I really like the style of some of the Rainmeter widgets and I wanted to know if there was any way to maybe incorporate them into a website. To be honest, I don't really care for its practical purposes, otherwise I would have gone with the usual widgets you can find on the web which were developed for websites. I am more worried about its aesthetics, and frankly... The widgets I've seen for the web are not the easiest on the eyes (Maybe you know a place where there are some beautiful widgets). Perhaps this is no longer even a widget in a sense, but just an image. An animated image. Surely there is a way though to incorporate the resources you find for Rainmeter onto a website. I tried to answer it myself, and so far only came up with this: create the image on a photo editing program, and then animate it on the website (could be tricky). Perhaps there is a way to edit a widget's style? So my question is really, how would you create/incorporate the widgets you find in the Rainmeter libraries? For example, to recreate what you see on the link below. (With animation).
http://customize.org/rainmeter/skins/67189
Thanks!
You are probably searching for the wrong keywords. You should be looking for charts and/ or gauges and maybe graphs. The most examples/ libraries will be found including the keyword "javascript" or "css" and now "html5"
This will probably never have a concrete answer, as it seems new browsers introduce new inconsistencies in the way the process or integrate html standards. I've noticed this especially with JavaScript animation. The browsers that support them tend to be more consistent in the way they display CSS transformations. I, personally, haven't delved too much into HTML5 canvas, but that will most likely be the way to go in the near future.
Alternatively, search for dashboard themes.
I am working on creating a jQuery plugin and I have some questions regarding how to structure things:
1.How much HTML should the plugin have written and how much should it create through jQuery ?
Is it good to have written all of the HTML so that the entirety of the markup structure is visible when looking over the code ?
Or is it better to have written only the minimum amount of HTML so that it is very easy for the user to add/modify content and create all of the rest, bulky HTML through jQuery ?
Is there a recommended practice ? How are things done in professional plugins ?
Why should things be done in a certain way and what are the reasons behind it ?
2.How to balance the plugin options with the CSS ?
Should the plugin offer options that would affect the presentation of the plugin (options that would modify the stylesheet) or is it a better practice to have the user directly modify the stylesheet for presentational modifications and in the plugin only have options relating to the functionality ?
What are some guides regarding what options to offer in the plugin as to not step over CSS ?
Regarding my experiences, I have seen all of these in different places and plugins and that is why I am asking for opinions from experienced users and what are good practices and why.
1. How much HTML should the plugin have written and how much should it create through jQuery ?
According to the paradigms of progressive enhancement, there should be no markup which would be useless in case of no JS enabled. In other words - if your plugins needs some special markup and additional tags it should create them by itself.
The reasons for that is semantics. Additional plugin markup is useless for users (and bots) when there's no JS enabled and thus it should not be present at all.
Also keep in mind that developing a good JS plugin means that content will still be available when the plugin fails or JS is disabled. Moreover, you have to take additional care about making sure that your plugin is accessible. More on the topic of progressive enhancement covering also more advanced issues can be found for example in a book by The Filament Group.
2. How to balance the plugin options with the CSS ?
Do it as follows:
Content: HTML
Logic: JS
Presentation: CSS
Despite the fact it's changing now a bit (think CSS3 animations), options of the plugin may influence the way it works rather than the way it looks. That means your users should be able to config timings, delays, speed, number of element or whatever your plugin is doing through JS. But leave the presentational aspects in the CSS stylesheet. Use JS to change classes of elements rather than inline styles and let your users write whatever CSS they want. Obviously, don't forget to provide some default styling :)
I always recommend reading more on the topic in A List Apart. It's quite a theoretical article but absolutely a must-read for any front-end dev.
Tutsplus has a jQuery course with usefull videos.
http://tutsplus.com/lesson/head-first-into-plugin-development/
This is one of the videos that explaines how te make a plugin.
There are a lot of ways to create a plugin, but this is a good one.
I'm looking for a simple Flex or JavaScript based image editing component which can be embedded in a web application. It shouldn't be a web service but rather a component that I can download and customize (i18n etc.).
I only need some basic features: most important is cropping, optional features would be rotating and adjusting brightness/contrast.
Basically something like splashup.com, but as an open source application rather than a web-service.
Thanks a lot in advance for any hints!
-- Andreas
There is pixastic.
Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
Be sure to read the documentation to make sure the operations you are looking to perform are supported by all browsers. There are some issues with IE.
They have a editor you can try. It shows off some of the features.
Your question suggests you want an out of the box solution, or at least a base to stand on.
Quick Google search reveals editImage. This doesn't look polished or bug free, however building on this or rolling your own should not be difficult.
Here is a good article on Image Manipulation in Flex. Towards the end of it read "Cropping, Panning and Zooming", your basically looking at 5 lines of code. I think you might even be happier building this yourself.
Thanks for your answers!
I ended up customizing and extending this component:
http://blog.mediablur.com/2008/02/20/flex-image-cropping-component/