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.
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've recently been going over some HTML and CSS stuff to get more into web development, I have been designing sites on and off for a while now and I would love to start actually developing some.
I've seen Bootstrap mentioned so many times all over the internet and I was wondering if someone could help me out and point me in the right direction... I've been learning the fundamentals of HTML/CSS and as I understand it, Bootstrap is a html/css UI framework?
I have my own UI designs in a PSD file, how would I get them to work within Bootstrap?
Is it a matter of slicing up my images and adding custom CSS into Bootstrap?
I know that I am a long way off from this, but this is the type of stuff I want to be doing:
http://heyflat.com/themes/todo/index.html
If you can point me towards the type of stuff I should be learning in order to get there I would much appreciate it, so far I will continue with my html/css stuff but I would love to start using Bootstrap and customizing it seems essential to me for what I would like to be able to achieve...
Thank you for reading :)
Updated
Overall, my process has not changed much except for how I think about converting PSDs to HTML and CSS. I look forward to the day I discover a tool as flexible and comfortable as Photoshop that can output directly to good HTML and CSS. That day has yet to come to me. Here's the process I follow, utilizing Photoshop and Bootstrap.
I find that Photoshop is a great way to imagine, share and iterate over a visual design because it frees me to experiment in ways that are currently either impossible or too time consuming to realize just with HTML and CSS.
Once a design is agreed upon, I begin planning how the target design will be realized with HTML, CSS and JavaScript.
I consider the browsers of my target audience. For example, IE8-, does not support rounded borders. If IE8- users are a large portion of my audience and those rounded borders are critical to the design I may take the time to slice out images and add extra HTML and CSS.
I decide if I am going to use a framework like bootstrap. Browser support must also be considered when deciding on a framework. If a framework has examples like bootstrap then I can checkout those examples in various browsers. If using a framework then I commit to doing it their way. That is, I use their grid system, html and class names for everything. I only add my own when the framework cannot meet a specific need. I do augment their classes as needed using a separate stylesheet but always in appropriate, low risk ways, bootstrap encourages this. I will probably never augment the grid system except perhaps through their customizer, but I have never needed to do that.
Next I implement the design. I may find that some elements need to be sliced out of the PSD, but most, like drop shadows, rounded borders and gradients, can be rendered using CSS. Some aspects of the PSD may need to be tweaked to accommodate responsive behavior or to make implementation simpler. As has always been the case, I target standards compliant browsers first and adjust for the others later. One of the nice parts about a good framework is that there is usually very little that needs tweaked.
I review the document at various resolutions in browsers my target audience use, and consider and implement additional tradeoffs as needed. For example, if it is not critical that those rounded corners show up in IE8- then I will keep it simple, render them using CSS, and let IE8- alone. I still verify that it looks acceptable in IE8 and IE7.
Steps 4 and 5 are generally not sequential but steps I bounce back and forth on. Also, make sure your client is on board or you can get them on board with how you are supporting various (not-so-modern) browsers and your reasons for doing so (shorter load times, less development time, easier maintenance, and so on).
Bootstrap 2 examples: http://getbootstrap.com/2.3.2/getting-started.html#examples
Bootstrap 3 examples: http://getbootstrap.com/getting-started/#examples
The card design approach utilized by Google Plus or Facebook is great. How can I do so using twitter bootstrap 2.3 (can't use 3) where I do not want my card size and content to stay sane for a responsive design? I mean, I want the re-sizing to of a card based on the screen size and the content on it stay acceptable. Sorry for the fuzzy question. I am not sure how to be best ask what I have in my head.
Any website you may that that has card ui desing and using bootstrap?
Is there any framework that help with Card UI for desktop web application in general?
Found this the other week and it's exactly what you want:
Bootplus - Sleek, intuitive, and powerful Google styled front-end framework for faster and easier web development (Based on bootstrap)
The particular section you want is under Plus.
So just take the styles you need and you're good to go.
In my case I didn't want a fully fledged framework as I tend to like more the componental way of adding features, since modern web times...
Bootcards does just Cards in three flavors (Android, iOS, Desktop).
http://bootcards.org/index.html
A great addition to Bootstrap and supports bower which was just perfect as a simple command and a couple of lines got me set up.
This has the obvious advantage of decoupling framework core from fancy cards.
Moreover its style is not shouting Google Plus all over like bootplus, which is great to give it a genuine touch.
Just another option ;) hope it helps someone
Someone asked me to cut a design layout using bootstrap/less/html5 and i am not really sure what they mean. I found something related to bootstrap from twitter, but nothing related to less.
Thank you.
Bootstrap is a css framework from twitter . Excellent for frontend prototyping and building robust crossbrowser and mobile friendly websites.
HTML5 Its an improved version of html and is in continuous development for more robustness and usability.
Less is a css preprocessor . It allows you to write css more dynamically providing re-usability and cutting short the time to write and manage large css files .
Links To read more about them :
Bootstrap : http://twitter.github.com/bootstrap/
HTML5 : http://www.w3schools.com/html/html5_intro.asp
Less : http://lesscss.org
Less is a dynamic stylesheet language. You can find it here, Less.
Bootstrap is a framework to define web pages. It is very common for the designers because they can produce an HTML/Javascript that is cross-browser, very simple and also ready for the mobile. Bootstrap.
HTML5 is the most recent standard to define web pages. It is more powerfull than previous versions. If you want to know more, try to search HTML5.
This tools have a lot of features that are impossible to describe here. Check the links, you will learn with no troubles.
I have been looking at CSS3/HTML5 frameworks available, but there is simply too many to make a decision quickly, and they all seem to be focused on streamlining javascript development and UI elements.
In particular, a very useful part of a framework would be to create CSS-based layouts quickly - without having to worry about browser compatibility. However, without actually using the existing frameworks it seems impossible to understand whether the existing frameworks do that, or how they do it.
For example, I would like to create a simple layout that fills the whole page but has a minimum height/width. This should be a 5-line CSS declaration but it's a headache because of IE. Ideally a good framework would allow me to define this once, instead of adding in a special solution for every browser.
Which of the existing frameworks address this? I'm not talking necessarily about frameworks (as the meaning of 'framework' is somewhat loose when talking about HTML/CSS) but other things that you find helpful in development.
I have looked at column-layout frameworks like 960.gs or blueprint but they seem to be geared toward website development, rather than web application development.
Thanks,
960 sounds right up your alley. http://960.gs/ you can tie it with adapt.js to make it adaptive. http://adapt.960.gs/
personally if i have to use a css framework, i'll go with oocss https://github.com/stubbornella/oocss/wiki but i think 960 is exactly what you are looking for.