I'm trying to use the foundation library in a ReactJs basic project. I installed the react-foundation and foundation-sites following this github project: https://github.com/digiaonline/react-foundation
Now the problem is i can't use the row class. Everywhere i go on the internet, in the foundation demos and documentation, i see the row class, but i have absolutely nothing for this clasd in my CSS. Instead of that, i have the grid-x, grid-y and other stuff. Is my foundation CSS incomplete?
Here's what i did exactly:
In my project i executed the commands npm install react-foundation --save and npm install foundation-sites --save. And in my index.js file i added this line import 'foundation-sites/dist/css/foundation.min.css';
In my app.js file, i have this code :
class App extends React.Component {
render() {
return (
<div class="row">
</div>
);
}
}
But when i inspect the div in Google Chrome, there's absolutely no CSS for the row class. When i use grid-x instead, i have some style.
What am i missing?
Thanks a lot
As stated react-foundation documentation, the CSS class .row no longer exists in new versions of the foundation-sites CSS. Therefore adding className="row", will not have any effect whatsoever:
Note: Newer versions of foundation-sites do not offer out of the box
support for and components. If working with a newer
version, and components should be used instead.
This can be confirmed by review the content of dist/foundation.css. Instead use components like Grid and/or Cell as specified in the documentation for react-foundation. Or you can obviously use classes grid-x that do exist in the foundation-sites CSS.
Also keep in mind, use className instead of class in React.
Related
is there any lib that can take a dom element and return a string with vanilla css, to use inside a webproject?
const styles = TailwindToStyles('<div class="bg-teal-100 m-10">Lorem ipsum</div> ')
result of styles is
.bg-teall-100 {
background-color: #e6fffa;
}
.m-10{
margin: 40px
}
gregor
I was looking for a similar tool that can convert the tailwind class to CSS. I ran into one Reddit Thread. There are various tools listed out there.
The one that is simpler and closer to what I was looking for is this app to convert the tailwind class to CSS.
Here is the GitHub link: https://github.com/Devzstudio/tailwind_to_css
Live demo: https://tailwind-to-css.vercel.app/
FOR REACT NATIVE
Thanks to this packet it is possible to copy the entire tailwind code from react project and paste it as a param of the function tailwind() which returns a react-native stylesheet object.
Here's the doc :
https://github.com/vadimdemedes/tailwind-rn
I had a similar problem and solved it by
firstly create an Iframe
mount the tailwind CDN and then insert the html string to the body
extract the generated styles from the head and use.
I released a npm package that does this, check it out here https://www.npmjs.com/package/tailwind-to-css
I'm going to set up a new project and would like to have these two packages together, but not sure, so the question is that using Tailwindcss with antdesign Is a good practice?
Does anyone have any experiences?
Each package has its own theme manager for instance for colors, typography, dark mode and so on. How do you manage theme, with tailwinds or antd or both? And why?
Both packages have Grid support, which one would you prefer?
Let's have your insights?
After some research, I found these results
Some examples that uses both libs:
https://github.com/plamworapot/next-antd-tailwindcss
https://github.com/dospolov/react-redux-saga-antd-tailwind-boilerplate
https://github.com/cunhamuril/pocs
It recommended trying to commit to only one framework
Tailwind is pretty much a design system using utility classes to make writing css easier therefore it can be pretty much used with any other ui library just make sure to disable the default styling that Tailwind inject into your default styling by disabling the preflight option in config :
module.exports = {
corePlugins: {
preflight: false,
}
}
One slight issue with using both ant-design and tailwind-css is tailwind's some of default styles will break ant-design components...
I recently came a cross an issue where ant-design image preview was not functioning correctly and the image was not centered.
expected result
image one
vs what I got when using tailwind with ant-design
image two
turns out tailwind will change default image display property from "inline-block" to "block" and breaks tailwind image preview component
I resolved my issue by reseting display property on images
img {
display: unset !important;
}
apart from this little tweaks you will be good to go using both of them
There's no problem to use Tailwind CSS and Ant Design together.
Tailwind CSS could be used to custom styling on Ant Design components.
Check this link to see an example with Next, Ant Design and Tailwind CSS:
https://github.com/plamworapot/next-antd-tailwindcss
You can use Bootstrap with ant design right? Think Tailwind same as Bootstrap. Tailwind is a CSS library you can use it with any setup and framework there no extra configurations needed. Just pass the Tailwind class names.
When it comes to theming. It's a context. Ant design will grab it's context and tailwind grab it's. We don't need to think or worry about it
Well for me I needed to use tailwind to override the default ant design css styling so what I ended up doing was adding important:true to the tailwind config object (as per tailwind docs tailwind config docs for important config)
module.exports = {
....,
important:true,
};
I know some people frown at using important (as do I) but I think this is one of the uses it was created for.
I am working on a web project. I use react-redux for this. I did nearly everything in back-end. But I would like to improve my project's visual side(I mean front-end side). I am currently using bootstrap/reactstrap. Is there a way to manipulate bootstrap? Or should I use css? Any suggestion would be helpfull.
If you are still starting the UI then I would suggest going for flexbox. You can use Bulma framework which is very good. I f you want to go ahead with bootstrap then you have only to edit the css. You can also make you of scss which makes your life more easier.
These are the best front-end libraries for react applications
https://materializecss.com/
https://ant.design/docs/react/introduce
use the styled-components npm package. it will improve your CSS code. and also you can pass the props to the styled-components and etc.
read a document enter link description here
if you want to animate your page, my suggestion is react-transition-group.
Yes , you can use css as external file and import in your file . Also inline css support in react components ,the code like
class MyHeader extends React.Component {
render() {
return (
<div>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}
There are css styling libraries available
materializecss
material-ui
semantic-ui
For the front end, you can use material-ui. Really complete but not easy to use for a new.
https://material-ui.com/components/buttons/#contained-buttons
YOu can also use styled components. It's really easy.
https://www.styled-components.com/
I downloaded the source of bootstrap into my application using yarn
yarn install boostrap
I tried just importing the bootstrap-grid.css in my application, and when I copied the starter example the look had no grid layout style applied to it.
https://getbootstrap.com/docs/4.0/examples/pricing/
When I added the entire boostrap.css it worked fine.
So what else other than bootstrap-grid should I be importing to get the layout/grid components?
The pricing example uses card-deck and cards, not the grid.
If you want cards, you need to use bootstrap.css. bootstrap-grid.css works specifically for the grid system.
The below files worked for me. I am not sure if this is documented anywhere.
functions.scss
variables.scss
mixins.scss
reboot.scss
_grid.scss
I am building a chrome extension that attaches a widget sort of thing to gmail message. It appears below every email (something like a gmail contextual gadget) when the user is on gmail.com site.
I looked at few css frameworks like twitter bootstrap to use in my app. When I used it in mywidget, it messed with the existing gmail styles because of css class name clash. Is there any other framework that I can use where there would be no name clash? I came across jquery-ui framework. All the classnames here start with .ui-* thereby causing no name clash. Are there any other css frameworks like this with unique class names?
Update 2: Here is a gist of v3.1.1 provided by #GFoley83
Update: The pastebin joined below is the Twitter Bootstrap version 2.0.4
You should definitively use the up-to-date version and compile it yourself.
Here is what I did with the bootstrap less files :
.tw-bs {
#import "less/bootstrap.less";
}
And this is the result : http://pastebin.com/vXgRNDSZ
Demo (jsfiddle)
If you don't like tw-bs you can easily do a find/replace, there shouldn't be any conflict.
I used #Sherbrow solution but had to add the responsive file too.
.my-bootstrap-container {
#import "less/bootstrap.less";
#import "less/responsive.less";
}
and then run
node_modules/less/bin/lessc demo.less -x > demo.css
If somebody needs the complete step by step tutorial how to compile bootstrap for your own namespaced container I made a blog post about it http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to-your-joomla-2-5-extension
The last part is for Joomla but the beginning can be used globally. It has also a link to the latest compiled bootstrap version 2.3.2. Just make a search and replace for .dp-container.
2016 Update: A future way to mitigate this issue (rather than having to recompile bootstrap) is to take advantage of web components, specifically shadow DOM. This allows your app to be self contained (almost like an iFrame) without the web browser having to open a separate page / losing the ability to communicate between pages.
say your component is contained in <div id='plugin'>...</div>
You can move what's inside that div to a tag in your head, eg.
<template id="template"><!--Your Code Here--></template>
Your template can include all the bootstrap link tags and js you want. Then in your javascript/bookmarklet, you can write
var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);
You can read a lot more about Web Components (along with Shadow DOM) here: http://webcomponents.org/articles/introduction-to-shadow-dom/
I started off using jquery ui - http://jqueryui.com/ because it has its own css classes which don't clash with gmail. YUI is another such framework that I found. But Sherbrow showed how I can use bootstrap css with our own unique css style names.
The currently accepted answer did not render forms correctly (using SASS and bootstrap 4 beta). The following works for me:
.bootstrap {
#import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';
box-sizing: border-box;
}
The box-sizing is important, because, when compiling your SASS stylesheet, the following will be generated.
.bootstrap html {
box-sizing: border-box;
...
}
I.e. the box-sizing property will be placed on an html element inside an element with class="bootstrap" - which of course will not exist. There may be other styles on html and body that you may want to manually add to your styles.
And now you can place content styled using bootstrap inside a bootstrap class:
<div class="bootstrap">
<div class="container">
...
</div>
</div>