Using Flexboxgrid or Bootstrap? - html

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

Related

Q: How to speed up converting designs to html pages process (manual)?

As a front-end designer converting designs (PSD, Sketch, AdobeXD, ..etc) to dynamic HTML pages manual. I'm using bootstrap framework with jQuery library.
When I started this job it took long time to convert the designs to html, after that the time decreased because the work becomes classic and it is routine. But every design is different and I start from the scratch using bootstrap component then adding my override CSS and JS.
I wondering if there is tools or ideas to improve my work and do things faster??
What I know is that I can create my own JS or CSS codes that I use
usually (common things). Then, I can include these files all projects
that I'm working on.
I need other tools and ideas to use.
There are different front end starter tools (boilerplate) which you may use as a basis and write you code on top of them each time.
Also consider remove bootstrap if you need everytime to override it, as you said.
It is better to have less dependencies for sure.
Also try to write your html/css as like you create page full of components, which are independent. Use CSS BEM methodology and try to make components as reausable as you can.
In that into mind you may create something like your own library / framework of most used common components between projects and just to include them everytime.
You may provide simple customization via CSS native variables or LESS/SASS ones with help of mixins.

Basic crossbrowser stylesheet template

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.

Best Practice Approach to Bootstrap 3

I've been fiddling around with bootstrap for some weeks now and I'm feeling like running in a maze.
There is thousands-and-millions of programs to help you visually building up a bootstrap website, I took a look at various options like: blocs app, rapid weaver, pine grow and some web apps now but I didn't find a solution that makes me confident.
I'm not that into coding, I can do some html, css and low-level php-programming but getting into this framework was not manageable for me while studying and working. As a designer my first approach was using those "visual apps" and to a certain point they can be nice.
Would it be easier to use an IDE and is there an IDE, that can handle bootstrap in a way I don't have to read all the docs to understand what I have to do just to create a simple page?
I'm just searching for the right tool to work with the bootstrap framework and would like some advice from more experienced users - thank you.
Take a look at Bootstrap Studio. They provide a guy to build bootstrap projects.
https://bootstrapstudio.io/

Choosing the right front-end framework

I'm looking into Bootstrap vs Foundation my criterias are:
Lightweight
Easily customized
Easily build complex HTML layout
Mobile / Responsive
In my past experience with Bootstrap, building layout from a designer mockup as a "pixel perfect" HTML was not trivial.
Your thoughts, ideas are appreciated.
Bootstrap and Zurb Foundation are both CSS frameworks, but they have a different purposes.
The primary goal of Bootstrap is fast prototyping of websites or web applications that have a base style. Since the styles are opinionated, that makes it more work to get it to match a custom design. It is heavily supported and a large community. It is built on Less and that can be a plus for some people.
Zurb Foundation 4 takes a different approach. It is more of a base framework for a project that will be customized fully based on project need. The styles are easily overridable. It is a great prototyping tool and it is not opinionated with styles. The grid system is great, and anyone can understand it. If you use Foundation your designer will think differently (they will keep mobile in mind more). It is built on SASS. That makes it easy to incorporate Compass sprite generation. I found the CSS classes in foundation to be easier for beginners to pick up and remember.
You can watch some of the Zurb presentation videos on the internet and they really help you understand why they built it.
I was working on my own framework to realize that everything I needed and more was already built into Foundation. The hardest part is understanding Compass and Sass. After that you will get the hang of Foundation easily.
It really depends on which of your criteria are more important.
Foundation is built for making complex, responsive websites, but it has a pretty big footprint if you want to use everything it has to offer. Bootstrap, on the other hand, is comparatively small but doesn't have anywhere near as much functionality built in. I can't speak to how easy it is to customize Bootstrap, but altering Foundation to fit your needs is very simple (especially if you use the SASS version).
It's a subjective choice: if your priority is to use something with a small footprint, go with Bootstrap. If having a big, responsive-ready library to work with is more important to you, go with Foundation.

best css framework for layouts, boxes, images, ...?

I'm a coder coming from the pre-CSS era and trying to find a powerful but simple CSS framework, that would let me create any kind of layout with boxes I want.
I already have a wordpress theme so I'm looking for something to include into the theme.
I looked at ez-css which looks nice, but it just seems to do the box layouts, and I was wondering if there exists a framework that comes with many different snippets for typical layout tasks, like a box with a small image + paragraph text, etc.
I've looked at wordpress themes like pagelines, builder and headway but don't like them very much because they lock me into their themes, and they seem quite fiddly after playing with them.
Thanks
B
http://twitter.github.com/bootstrap/
You could have a look at -
blueprint - http://www.blueprintcss.org/
or
960 Grid System - http://960.gs/
Have you taken a look at http://960.gs/?
It would be easier for you if you search separately for a CSS Framework and after for a blank WordPress Theme.
Most of these "CSS frameworks" are not really frameworks because CSS is not like JavaScript or PHP, so don't bother spending time with them.
What I will suggest is to get a premium html/css theme and modify it yourself and turn it to your own custom framework.