In my application,
I have implemented theming using an angular material theme but it is so heavy for my project...
that's why I don't want to depend on it.
After that I have implemented using the CSS Variables it is working fine
but it doesn't have full support you can check it over here.
QUESTION: anyone can suggest another way?
Related
I am currently using Stencil to create a library of web-components. Since it is standard nowadays to support a dark theme I want my web-components to have this build in.
After doing some research I found that :host-context would be a great way to make all components change theme by simply adding a class to the body, but it looks like this feature will never be fully supported.
All of the other ways I found to achieve this, using features such as ::part(), require a significant amount of work from the library's user which I want to avoid.
If anyone has an idea of how to achieve simple theme toggling for web-components please let me know!
I'm building a web application using ReactJS.
I would like to know if it's a good idea to combine React and Bootstrap or if it's completely useless? Are there things I can do with one and I can't do with the others?
I know that Bootstrap is a Framework and React is a library but I'd like to know what's the difference between the two, since I read some articles explaining the difference between a library and a framework and couldn't really understand!
I would recommend going through this tutorial:
https://ourcodeworld.com/articles/read/561/how-to-use-components-of-bootstrap-4-in-reactjs
Basically, they aren't meant for the same purpose: you can write the business logic (~how your app will work) in ReactJS and then you can show it to the end user with some custom CSS class magic written in Bootstrap 4.
Hope that helps!
The difference between a library and a framework is explained really well in the following Stackoverflow post: What is the difference between a framework and a library?
If you want to use Bootstrap 4 in ReactJS you can use the following super easy and nice to use library: Reactstrap.
I hope this helps you.
Bootstrap is a CSS framework, It is used to make responsive and beautiful websites.
React js is a view library and makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
You can use them together if you want to build interactive and beautiful
websites.
To include bootstrap in React,
First refer this, Bootstrap webpack
This is one way of using bootstrap in reactjs projects.
The advantage of this is that you get access to latest bootstrap css.
The disadvantage of using this is its complicated to use jquery plugins in reactjs. However if you are only interested in css, then it's perfect.
Using this you can directly use bootstrap classes from documentation and get more control.
Just use className instead of class
If you want simple setup, then you can use reactstrap link
Other frameworks include react-bootstrap link
This does not mean, that you have to use bootstrap only. You can use any other css framework like Bulma, Foundation etc.
Is it worth it using jQuery with React ?
My opinion is not to use jQuery with React, as jQuery or jQuery plugins changes DOM structure, This in turn causes problems with reactjs virtual DOM.
This does not mean you cannot use jQuery, you can, but its little different than normal use.
Reactjs has provided a way to use jQuery and other plugin here Integrating with Other Libraries
I'm confused with some css templates in bootstrap.
I've been a developer for years already but I never worked in a company that let me create an entire website as front-end developer say for example an e-commerce site.
So if someone would say "do an e-commerce site", do I have to ask them for a ready made css template? If so, then is it possible there are already other sites that bought it, other than me, e.g. we may have the same web face?
I am not really an expert in css nor an artist. I have created a website for personal use but it was pure bootstrap. I can see other templates in bootstrap; they have other components manipulated, like a different menu which is not present in their list of components.
How did they do that? Is it another individual css, js, html component? Do I have to create my own component sometimes?
For you to understand me, I can create relatively easily any site written in either React or Angular but I cannot create my own css design.
The examples and templates that you see in Bootstrap uses the Bootstrap framework, but the CSS and JS design components are changed to better define what the user wants it to be like.
For example
form-group-lg select.form-control{height:46px;line-height:46px}
This is the pre-defined CSS value from Bootstrap CDN, changing this CSS value to something else, changes your design, but you still are based on Boostrap. Basically, Bootstrap is not only about design, it's following a library, a framework, a skeleton to make your web development (specially frontend) easier.
Hi i have already created my asp.net app and its running perfectly except we recruited a new member and he started on this new app and he is using bootstrap animations and templates and all... while i didnt i used css myself cause i tried to personolise it just like they want any way now my boss was amazed with what bootstrap can do an all and now i want to add transitions and cool css,ajax stuff to my app any links or methods to help please im BURNING INSIDE.
please help
In case you need to update your project to use boostrap, then you need to move all the styles you added to a stylesheet file, and call them as needed (that is separate from bootstrap, just to make it more easy when you need to change styles). Besides that, if you want to use Bootstrap, it's simple, just add the boostrap files (styles, JS) and then use them as explained in the Boostrap website. Also, you can customize them as you want, but those components and classes will make the magic to make your website compatible with cross browsing and devices.
http://getbootstrap.com/getting-started/
Hope that helps!
I am new to Drupal and I am figuring out a set of steps for developing a Web Application. I planned:
1) Develop the application without any template or graphic effect. Just create your nodes, your views, integrate some plugins and so on. Goal: to have a website up and running from a functional point of view
2) Customize plugins: if some functionality is missing, customize plugins or develop on your own
3) Choose Theme and Customize it
4) Insert graphic effects (ex. JQuery)
5) Fine tuning
I am learning Drupal so I haven't any experience. Am I figuring out correctly ?
There are different approaches. This is how I work:
Define the goal of the site
Define functions
Define menu / pages
Deleveop theme / templates. Either from scratch or themes you downlowd.
Replace dummy text with Drupal code to show content. Here you functions comes in to place.
Remebmer that a node i Druapl, is basicalle your content / your text when you write articles.
When I tried to learn Drupal, I summarized some content here : http://stiengfoto.wordpress.com/category/development/drupal/
If you never have used CMS before, find some tutorials and start with the very most basic things.
Drupal i a great piece of machinery, but it might not be the best choice as a web app framework. It depends what you want to do really, but usually web apps is a lot of custom code / logic. Here Drupal's complexity might become a hindrance for you.
If I was going to build a site or application I would probably do something like this.
Find all the modules that I need. This can involve
Finding the contrib modules that I absolutely need.
Figuring out if I should use a contrib module + alterations or build my own module.
Searching for modules that can solve a problem, looking for solutions to problems that seem common etc.
Do the actual development, and create the features needed.
This include functional jQuery like AJAX.
Theming - this can in some extend be done while developing.
First step is usually to find a good base theme for your design, like Zen.
Then you need to implement the design.
Add jQuery where needed for flashy effects
Test and bugfix.
This should be done while developing, but when all looks good, be sure to give it all some good testing to make sure that it doesn't fail anywhere.