I am creating front end of Dashboard App using WebStorm IDE and React framework.
As I already created UI design, I want to continue with creating of layout. I want firstly create empty rectangles and then insert functions in them (not sure if it is the best workflow)
But there is a problem, that layout is a bit complicated, see picture:
How should I proceed?
Should I use nested div tags and insert them into render function? Or there is other solution?
Should I use nested div tags and insert them into render function?
Yes, that's exactly how you should proceed.
Use css to display them like you want. You can use front-end libraries to help you, like:
Material UI
React Bootstrap
If you want to use bootstrap, you can have a look at how to display the grid system.
You can also follow this tutorial from w3schools to learn more about flexbox and how it works only with css (without material or bootstrap)
Related
good day guys, i am new to web development, so apperntly, i got a work to design an ecommerce site for a client. the client wants something similar to www.gallerydept.com . But when i used inspect, i noticed the cdn is shopify's and not bootstrap and i'm only familiar with bootstrap.
how can i convert or intergrate bootstrap?
or what is the best suggestion or advice you can give me?
(please remember i'm new to web dev)
A suggestion would be - Don't use bootstrap within shopify.
Reason - Bootstrap has their own set of customizations and shopify's depends upon the theme you are using. Let's consider two scenarios:
For example, you want to create a modal popup and you directly use the bootstrap's library for the same. The look and feel will be different and then you would add your own CSS to override that - problematic thing.
Second scenario, you integrate bootstrap's cdn into shopify then all the other components styling will get affected like buttons, navbar, hrefs etc. So the flow is bootstrap's css overrided your shopify theme css and then you will override both in order to get back to the original - shortly it will become unmanageable.
But after all this I am not saying don't go ahead with this, what I have seen some people doing is utilizing only bootstrap's flexbox system to manage responsiveness in custom shopify pages (which is a good technique because bootstrap's flexbox system is pretty great). So basically what they do is take bootstrap's CSS file and remove all CSS tags not pertaining to the flexbox system and use that leftover CSS file.
And answering your doubt, what you should do now is - go with native HTML/CSS. You get stuck somewhere, SO that doubt/get the code by inspecting the website you have.
Shopify is using themes so you can start looking into tutorials on how to create themes for Shopify. Bootstrap is only controlling the look and feel of the website which is what you do. Shoppify will control the entire ecommerce functionality. So you can use Bootstrap inside the Shopify theme.
You need to be using LIQUID to code anything in Shopify and be sure not to use SCSS only CSS
I'm building a simple project with html, scss and javascript, i'm using Gulp.js as well.
I was wondering if it would be possible and a good practice to use the Angular Flex layout library in the proyect.
Note: I need to finish it very quickly while maintaining a responsive layout and I thought using the library would save me a lot of time.
Angular and CSS are two separate topics so using a library that creates a dependency between these two concepts is something I would never recommend.
You can use Flex layouts with base CSS that has nothing to do with Angular.
Your learning curve will be easier that way because you can learn Flex without thinking about Angular, just like you can learn Angular without knowing about Flex.
I started learning django a few weeks ago and the one thing i have noticed and causes me a lot of issues, is the clarification between HTML and Bootstrap classes. I know that when you are creating a tag in HTML, you can add a class in it that can be named anything and then we usually use the class to write CSS, right? But i finished some tutorials and realized that some people just wrote a class like btn btn-warning and a button with styling automatically came up even though they didn't write any CSS for it. And then i tested it with a random name and it was plain blank. Can someone please explain all of this that why when we use some specific names that already customized tag is shown on the website.
Thanks a lot!!
HTML and bootstrap are both somehow similar. Its just that with HTML you will have to manually write all codes to perform any action however Bootstrap saves your time as it has its inbuilt tags that work for specific action.
For example you can create your own navigation bar with HTML or use navbar tag of bootstrap. The navbar however has built in functions so there is less work. You can use in by including bootstrap link in your css like:
But it's kind of tedious to edit the bootstrap tags if you sometimes want to.
And,HTML is mainly used for the basic designs and bootstrap to make it more responsive.You can know about bootstrap more here:
https://www.w3schools.com/whatis/whatis_bootstrap.asp
Bootstrap is basically alot of premade css classes
so when you are using Bootstrap in your site you already have those classes and you can just use them
i recommend you to go to W3School and read about it in depth
Bootstrap is the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-first websites.
Bootstrap is completely free to download and use!
Bootsrap in W3School
I created webapp design in Adobe XD.
Now I want to create that design in Webstorm using Bootstrap framework and HTML.
Is there tool, which can recognize items from .xd files?
Or at least where I can create items in GUI, which translates my item into HTML (for example blue square button with text inside which changes opacity when having mouse arrow on it)?
Some tools make it easier to convert the design to code, but you'll (probably) won't get around writing code to get a good website.
First of all, there is no real way to directly "convert" prototypes to websites. There are now some plugins to make things like this easier (e.g. "Lightning Storm CC"), but in all honesty, that doesn't get you around writing code yourself.
Also, it could be challenging to implement a custom design with Bootstrap (or did you use a Bootstrap UI Kit for Adobe XD?), since Bootstrap itself makes it quite tricky to achieve custom designs.
All in all, I think the solution you're looking for doesn't exist. Some tools are making it more comfortable, but you won't get around writing code when implementing a custom design. I think the truth is that there are two options: Implement a custom design (with code!) or don't care about the design aspects and use framework X (here Bootstrap).
I think easiest way is to export the design from xd using any tools to html, here is another tool might be useful "web export"
after that you just have to implement bootstrap and start adding classes to your components button,input...etc
but as mr pklaschka said it's hard to do custom without getting your hand dirty with some codes
good luck
Is there tool, which can recognize items from .xd files?
Or at least where I can create items in GUI, which translates my item into HTML (for example blue square button with text inside which changes opacity when having mouse arrow on it)?
You can use Desech Studio to import your xd file and then you need to adjust some margins and sizes. This will convert it to vanilla html/css, not bootstrap.
After that you can switch to Webstorm and code your website there, or you can stay synced with Desech Studio and integrate with react, angular, vue etc.
I'm using Polymer 1.x and started using the Polymer Kit to build a current app. I know about the App-Elements, and currently I'm trying to achieve something like this:
Full:
Mobile:
So far I have something like this:
Do I need to use media queries to hide the tabs and show the logo?
On a side note, I'm really having a hard time understanding Polymer, because I don't know if the elements come with the predefined styles (as Bootstrap or Foundation would do) or you need to do some heavy-lifting in CSS (which is what I've been seeing). I would really appreciate if someone could show me a good tutorial (I've seen Polycasts and the Github) on how to fit things together!!
You can use iron-media-query to hide the tags.
All the polymer elements have predefined styles and have exposed certain mixins and variables for custom styling.
I would recommend going through polymer's documentation and element's documentation to best understand its usage as each element has its own set of properties and styling. Polycasts cover only a few topics and are good source of knowledge only if you are already familiar with polymer development.