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.
Related
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 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 am Java developer before but now i am starting to work only on UI. I have little experience with UI. So I need a tool for Html 5.0, css 3.0, & angular Js.
Taking the comment above into account it is right for me to say the following answer is based on assumption but here we go:
I'm not quite sure what you mean by tools but if you mean a program to create your code in I would personally recommend Sublime text or Atom.
If you mean tools that are easily available to you to test and play around with your code then there are a number that are available to you, JSFiddle, Codepen and Liveweave are just a few.
I personally use Codepen as it has a nice and easy to use interface and I like the community around it, the homepage features a "picked" section which showcases user created content, it does however seem to have a heavy focus on "pretty" projects rather than functional ones. The editor it offers allows users to use a number of HTML, CSS and Javascript processors as well as use libraries such as Angular and JQuery. I created multiple angular projects using Codepen so I know it is capable of that and it is also really easy to implement it into a pen/project.
I hope this has answered the question but please remember that this is all my opinion each one of these things has their own strengths and weaknesses and overall the choice should be yours.
We have to build an app which should run on iOS and android. For expenses reason we decided to to it with html5 and phonegap.
Now we have to decide which mobile framework we wann use for it. I know there are already a lot of this issues and I also already did a lot of research. But I'm still not sure which one we should pick.
I've heard a lot down side points from Jquery mobile, but on the other hands it seems there is nothing really better, beside senche touch, out there.
What are your experience, what whould you suggest?
I'm looking forward hearing your opinion
(let me now if you need further information for evaluating)
Thanks
Building PhoneGap with Bootstrap and AngularJS is a breeze.
AngularJS provide a really nice separation between Route, Model, View, and Controller. Learn Angular directives and stop writing spaghetti js dom interaction code.
Bootstrap, though not as nice as jQM for mobile features (maybe until v3), still provide a nice starter CSS such as (navbar, fixed top, bottom, etc...) And if you know your css, then I think Bootstrap is more flexible than jQM. Combine with some nodejs build script to compile your less file to css and you are all set. Glyphicons is also a good starter set of asset/images.
I am sure you would have done a lot of research on this but from my experience I would suggest you to take a look at Sencha Touch + Phonegap combination.
The reason why I opted for Sencha Touch over Jquery Mobile is that the JM is quite sluggish when it comes to page transition and animation. Whereas, Sencha Touch provides you all-in-one place regarding building a rich mobile app with HTML5, CSS and Javascript. The only thing about ST is that you might require to learn some Ext JS which is used by Sencha Touch to create components. They do have a lot of documentations which you can refer to.
You can refer these links to kickstart on Sencha:
https://github.com/senchalearn
http://www.sencha.com/learn/touch/
All the best! :)
We have just started working with PhoneGap in my studio and we are using Backbone.js + Handlebars.js and Bootstrap or Ratchet depending on the case. It seems to work very well.
If you want some more resources on that I will suggest you start with
http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications/
http://coenraets.org/blog/2013/05/architecting-a-phonegap-application-video-slides/
http://coenraets.org/blog/2013/06/sample-mobile-phonegap-application-with-backbone-js-and-ratchet/
Really good resources.
I am pretty bad with CSS and HTML5 designing/templates. So, I google around and found two frameworks to start with nice looking layouts, necessary js and html5 support. But I don't know which on to use.
I would appreciate your answers on
What is the main different between two except google analytics ?
Which one is more rails friendly ?
Which one fits best to e-commerce sites, i.e. create rich content, integrate with user management frameworks etc?
Combine them and use them both - http://www.initializr.com/
The HTML5 Boilerplate (H5BP) is a starting project template that is designed to be adapted to your needs. Bootstrap is a specialized, modular, HTML/CSS/JS toolkit.
boilerplate provides you with a best practice HTML5 document, some reset CSS and a lot of javascript goodness like modernizer.js; this Twitter toolkit provides you with stylesheets that define a lot more than just a reset.
The Twitter toolkit is better compared to CSS frameworks like blueprintcss and 960 grid system and positions itself somewhere in between those two. Twitter bootstrap comes with its own fixed look and feel so you can concentrate on your content and logic.
checkout this Quora Thread
Based on your question, I gather you misunderstand what these two projects are. "Google analytics" is not the difference.
Expanding on what #thomas has already stated, Boilerplate contains starter HTML templates with best practices built-in and Bootstrap is a library of CSS and JS UI elements. They are not mutually exclusive.
You may want to look at initializer as #Zlatan has already recommended, or Kickstrap, which is an extension framework for Twitter Bootstrap.