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.
Related
In one of the projects i'm working on, the team decided to use angular/flex-layout.
I was wondering, what are the reasons to use it at all ?
I could only find reasons against.
For example this code:
<div fxLayout="row" fxLayoutAlign="space-between">
</div>
The first "best practice"/"separation of concerns" regarding html & CSS we are all familiar with, is the separation of content and style; with flex-layout we totally lose it.
it looks like an inline style, which is a really bad practice.
the only good thing I can think about is using variables directly to flex-layout directives, but we can achieve that using ngStyle directive as well.
I'm really interested in your opinions, What do you think about it ?
As the name suggests [Angular Flex-Layout] is a library for laying out your components on your web page. The library does not provide a means for styling, fonts, or colours, as those tasks are delegated to traditional styling in your application. Angular Flex-Layout deals with component positioning and works well with or without Angular Material. It is also built by the Angular team and supported by the community.
Some of the main advantages for using Angular Flex-Layout are:
The library is a pure Typescript Layout engine.
Uses HTML markup to specify layout configurations.
Independent of Angular Material.
A responsive API can specify different layouts, sizing, visibilities, viewport sizes, and display devices.
Includes CSS Grid.
Requires no external stylesheets.
I may have a very stupid question for some of you, but I am a beginner, and need a little help from some of you who have experience in this area.
For example, I work freelance or have my own business where I do web design with HTML, CSS and JS.
Now I feel very comfortable writing my code with the FLEXBOXGrid system instead of maybe Bootstrap4 or something like that.
does it matter, if I use the Flexboxgrid system or bootstrap or maybe raw Html,css without frameworks?
Is it perhaps better paid to do it with Bootstrap than with Flexboxgrid?
Thanks !
FlexboxGrid http://flexboxgrid.com/ is just a grid. If you need make things like modals, tooltips, etc. use Bootstrap. Bootstrap offers the grid and other components.
That said, do what you feel comfortable with. But a few caveats:
1) When using a framework, it's good to know the underlying technology and how it works, because you can debug your code faster and make optimizations easier.
2) You also don't need to know the underlying technology all that well to use a framework. That's why the framework was invented. It was made to speed up the entire dev process. So by all means, use Bootstrap if you need a suite of components, use FlexboxGrid if you just need a grid. You can also make a custom build of Bootstrap. A quick Google only turned up a custom build of Bootstrap 3 https://getbootstrap.com/docs/3.4/customize/ But if you're using npm to get your libraries you can probably import only the parts of the framework you need.
3) If you're looking to just get the job done for the front-end try approaching it like this:
- What does the client need (modals, grids, static content, etc?)
- If client needs more than static content and a grid, use Bootstrap
- Checkout bootstraps Docs, also checkout other forms of bootstrap. There's two that I love: https://github.com/thednp/bootstrap.native
and https://reactstrap.github.io/
If you're not looking to add more overhead, go with Bootstrap Native.
You're going to get paid based on the agreed upon price. But if you make a fantastic looking site quickly, you may get more. Remember that when using Bootstrap, you can customize the CSS to essentially add your own theme. There are also plenty of free themes out there.
Best of luck
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)
I am in the process of learning and building my first website using HTML/CSS.
I have come across several nifty tricks that rely solely on CSS or sometimes on CSS+HTML to create a variety of UI features (or should I call them widgets or components?). I want to learn more about these, but I can't find proper name(s) for such features.
From what little I have been able to learn, some of them are commonly known as: Accordions, Tabs, Carousel (slider), Flip-boxes, etc.
Is there any authentic/reliable source where I can learn proper names of these CSS features or widgets, and then learn more about using them in my work.
Thanks,
These are the most common HTML/CSS/Javascript frameworks to build websites.
Go through with their Documentation.
ZurbFoundation
Bootstrap
Refer to some CSS frameworks like Bootstrap, Semantic-ui. They will have a bunch of css components/elements under them.
Use Semantic-ui page to get started
I was always using frameworks or ready-to-use boilerplates for apps development (ReactJS mostly). Right now I'm building a simple static website (using Hugo generator). I don't want to use any kind of big-ish CSS frameworks. However, I wouldn't like to reinvent a wheel by building it completely from scratch. Is there any kind of conventional solutions for this? May be some kind of tiny css-framework or a normalizer etc?
I am not asking for a specific library - I'm asking what should I look for IN the first place: framework, compiler, normalizer etc.
Well, I don't know if I understood completely what you want, but, I think this can help you.
This is a list of the top UI frameworks of 2016/2017.
My favorites are:
Semantic-UI
Material-UI
There are more simple solutions like Pure.
Recently I used Material-UI to build this React Application.