Can a Silverlight application use containing HTML styles? - silverlight

I'm developing a Silverlight 4 app that has to live within an existing ASP/HTML based site, which has its own css stylesheet. I want the Silverlight app to share the look and feel of its container application, so I'm wondering about the best way to accomplish this. About the only way I can think of would be to translate the css styles into Silverlight styles (perhaps with an automated tool), but that seems like a lot of work for something that is a pretty common use case.
Is there a better way? Are there existing tools to make this easier? Thanks!

Creating Silverlight styles based on the styles of your site is a good idea. I don't know if there is an automated tool to do this, but your CSS would have to be very long and complex for that to be necessary.
You might consider modifying an existing Silverlight Theme to match your site.

Related

INline React.JS styling vs. CSS styling

I'm creating a podcast website for someone. It will be the first project I've developed for someone other than myself. I want to deliver the best quality web application with the best coding ethics..
Is it good or bad practice to style inline React.JS??
CSS styling. You have all the styles in order there so that when a problem comes up you know exactly where to look.

React UI framework VS pure CSS with styled-components lib

I'm a new developer with about six months of experience in the backend side, some months ago I started a company with a business partner, we are developing a business intelligence solution, since then we was working at the back-end part, I have started at the front-end world about 1 month ago, I did a React course where I learned router, redux saga, hooks and other things as styled-components. Our intention is to recreate the front-end part of the system which current is a MVP did by one freelancer.
As I do not have any experience at the frontend, we are planning to use some React theme, this way we decrease the chance of doing wrong decisions during the development of the pages, as in the architecture side.
I'm searching for a dashboard theme based in React which I can edit to our needs, after talk with some friends with more experience, we decided build the pages using pure CSS together with styled-components because I'm a little familiar with it (at the React course I did some exercises with React and styled-components), also because it is easy to use, easy to future developers maintain, also for faster development, as will not need to create a design pattern from scratch and also some front-end developers told me they develop faster in pure CSS in comparison to use some UI framework. Also a reason to do not use UI frameworks is because our costumers use the solution more from mobile than desktop, then soon we will need to create the an app with React Native and styled-components are compatible with it, and Material UI and Bootstrap frameworks that are the most famous framework are not by compatible with React Native by default according the research I did.
The problem is I'm not finding a dashboard theme without UI framework, all the dashboard themes that I have found are UI frameworks as Material UI and Bootstrap, so I'm asking my self why I can't find dashboard themes using only styled-components, without UI frameworks, maybe because is not common and also is not a good practice create a system not using some UI framework? or it is normal and also is a good practice?
If yes, some suggestion where I can find it? Preferable open source. Other thing which I'm asking my self, why does not have or why is not popular open source themes at GitHub?
Design is ALOT of work
In my opinion it's probably a mistake to not use a design framework especially when you don't have extended knowledge and resources in design & UX. A design framework makes it alot easier to create a consistent, responsive and polished look especially if you are not a design professional / don't have someone exclusively working on design & UX. Design is alot of work especially when designing for mobile, users expect a certain amount of fluidity and animation that is time intensive and hard to get right when you are unexperienced. Talking about user expectations; this is is another reason why using a framework can be handy. If you use a framework that is well known you'll allready know how other apps using this framework are structured and it will be easier to find a structure for you own app. On the other hand users can transfer their knowledge about workflows from other apps that use a similiar style. Your app will be easier to use.
Development Time & Speed
Also I don't understand how not using a framework would save you time rather than cost you time. The only time thats ever going to be true is if you have design ideas so specific that you don't end up using any of the styles provided by the framework or you spend so much time customizing the styles of the framework that you could have done it from scratch aswell. In either of these cases you need a developer that is heavily / purely dedicated to design & UX and it doesn't sound like you would wanna do that.
Theme vs. Framework
Lastly you should ask yourself where you draw the line between framework and "theme", and why you are so eager to distinguish them. What would be the point of finding a "theme" and then manually applying the style to all your components rather than using a framework that allready provides you with components that are styled appropiately?
P.S.: afaik Material-Ui is definetly a thing for React Native and has a pretty big following too.

How to make style library configurable

I'm working with jsps in my workplace. Pages were built using bootstrap2. Though new versions of bootstrap and other frameworks came out, I'm stuck with bootstrap2 as we have hundreds of pages using it.
How do I make the style configurable, in the sense, the configuration should give me the freedom to choose the framework, etc. So going forward I can choose what to be used for new pages
I can relate to your problem as this is the case with many "old" products in the market. They could be built with jQuery, plain js or other tools that considered "old" in today's market.
I assume you could not refactor your whole app as you are saying there hundreds of pages. Some options to consider and to set pros and cons for each with management and product teams.
First, you need to decide your technology you want to use and how.
You can use small bits of react/vue.js/other to inject into your existing pages
you can create full pages from newer technologies and slowly replace older pages in the app one by one
start a full rewrite of the app (hard to sell to management)
I did all three options in my projects but you need to decide with your own team.
Now I'll elaborate on what you can do for each of the options:
I use react so can't recommend other libraries, but this is what I used:
https://github.com/rstacruz/remount
You build react components and then you can use them as HTML snippets in your existing code.
You create another app in whatever new language you want and start building out exiting pages one by one. With each new page, you build you link the old app to them.
This is the easiest one to start but the longest one to achieve. But straightforward of what you need to do.
To make the styles configurable, you can add another stlye.css file underneath the bootstrap2 css file. In that style.css file(name it anything you want, can be bootstrap2_override.css) you can add any styles as well as override bootstrap2's framework styles.
The downside to this is that you are now adding another css file with more CSS just to override bootstrap2 styles.

Mixing React Components

I'm pretty new to development. Right now working on an webapp in my freetime.
Backend will be written in Python (here I have the best experience).
How good is the Idea to mixing React components:
like: https://github.com/brillout/awesome-react-components
My Idea was to use these components or let others create components for me (for example a slide show or whatever)
The question is, is this a good Idea? I'm worry that this might create a lot of overhead. For example one component is based on bootstrap and the other on foundation (As I said I'm not experienced web developer and can't judge if this can actualy really happen).
Thanks!
The idea of React components is to have the smallest piece of code you can define.
However, mixing different CSS frameworks, like Bootstrap or Foundation doesn't sound like the best idea. You can, of course mix ready-made components (like React-Bootstrap) with your own custom components, but ideally you would choose one framework and stick with it.
The good thing about React is that you can possibly switch between Frameworks without the need of refactoring everything.
Let's say, for instance, you have a custom component called Slider. If you later decide to use MaterialUI, depending on your configurations, you could just change the import from import Slider from "./Slider" to import Slider from "material-ui/Slider" and the rest of your code would be untouched.
Pick a CSS / UI framework and stick with it. These days I have been working with Semantic UI and they have good integration with React via http://react.semantic-ui.com/
It is awesome! :)
And in addition to that, you can also build your own custom components.
If you think adding a whole framework to your project is a lot of burden, then you can make everything your own from scratch. (Either (1) using the CSS framework classes for the components or (2) defining your own CSS classes)
And to conclude I also agree to not mix CSS frameworks as there might be conflicts! It's not fun! In my project, Bootstrap was conflicting with Semantic UI, so I just stuck with the latter.

How to create a living style guide with your own UI

I have created an website/application using Angular2. The infrastructure is all set, I have routing completed, sass being processed etc.
I have sections (components) on this website that will display current web standards for our designs (buttons, forms, copy). The purpose of this site is to give our developers a copy/paste solution for markup and sass.
We will most likely create our own css library but they will still need a good visual reference of what each class does and a copy/paste solution.
I know how to develop all the standards, what I don't know how to do is have the DOM display options for the user to copy/paste the code. I could manually enter the code into or tags but this will be hard to maintain and not very clean approach. I'd like to find some solution that will utilize my code and create these tags at run time.
Googling this question leads down the road of using living style guide generators, which i don't want to use... why? I like having the functionality of controlling my own layout and scaling my standards as I see fit with our own technology.
Any ideas?
After exploring this even further I ended circling yet again on documentation tools (KSS) where I would need to rebuild my entire style guide for this functionality using markdown and or JDOCs.
Solution!
Use CodePen, its free to signup however there are some nice to have features for a monthly fee. I easily created my code here using SASS, HTML and CSS libraries. CodePen has a great EMBED feature whereas I could copy/paste html or iframe right to my styleguide.
Problem is now solved, and we have have a dynamic Web & UI Styleguide.
Hope this method helps others in my situation.

Resources