I am trying to decide on a CSS framework for a basic portfolio website. I want to have some JS components that I can add with a separate library. It seems that people love Bulma but I am wondering what are the limitations give it is a "JS free" framework.
So far I have only used Bootstrap and I would like to try something new and preferably cleaner and easier to use.
Any insights and suggestions are welcomed.
Thank you!
Bulma has most of the important things that you will need. It does lack some things, however. For example, Bulma doesn't have alerts, carousel, list group, etc. Bulma addresses this on their website (https://bulma.io/alternative-to-bootstrap/). Personally, I would say stick to bootstrap. It has a larger community (which means more stack overflow questions, documentation, etc.), and its color scheme is more professional.
Related
I want to make a demo of some sort online study book. I am trying to use bootstrap as a core for my styles but it feels like it's not enough.
What I really like is a bootstrap site itself: getbootstrap.com.
Both of these sidebars with navigation and this fancy header. Plus they have nicer styles for typography:
So I have two question:
1) Am I allowed to use their styles?
2) If so what will be the right way to get those styles? I can see two extra files in the head of the site but I hope that maybe there is a repository or something.
P.S. any other advises are welcome too. Maybe you can recommend framework for online books/documentation or something?
Thanks.
UPD: For those who vote negatively on this question could you please explain why?
I'm not sure if you're directly allowed to use their styles. However, you could always legally obtain a similar template such as
https://guidebook.webuildthemes.com/html/docs/layout-2.html
Alternatively, there are plenty of other free options designed to build documentations and have them customized to suit your design needs. A few of them are listed below:
https://docusaurus.io/docs/en/installation
https://docsify.js.org/#/
https://daux.io/
https://www.mkdocs.org/
So in class, we've been applying css frameworks like Bootstrap, Foundation, Normalize.css but I do not understand what the point is of using them. Can someone briefly explain WHY they are used? How am I supposed to know which framework to use? For example, let's say I made a basic HTML file for my blog and I want to style it. Would I need to use a framework? How would I know which to use? How is it different from just styling on my own from scratch? I know these seem like stupid, ridiculous questions but I just started learning CSS a month ago and do not understand what frameworks like Bootstrap, Foundation, Normalize, etc. are and the purpose of them. Someone please explain as if how they would explain to a little child so I understand? Thanks.
A bit of an opinion-based question, but in short: developers are lazy and it takes time to code sites that are mobile-ready, consistent across browsers, and are easy to manage as browsers get updated.
With frameworks, developers need not waste time figuring any of this out.
For example, with Bootstrap, using the grid system, it is possible to make mobile-ready sites with minimal media queries and complex CSS rules.
Using other people's code, which has been tested on production environments and is constantly being patched and updated, saves a lot of time and a lot of bugs down the road.
You can think of frameworks (in any language, not just CSS) as a bunch of existing reusable codes you can readily use for your own projects. They essentially make your life easier because you don't have to reinvent the wheel anymore. Simply put, frameworks are a bunch of tested reusable codes for common tasks.
The purpose is to avoid having to make your CSS from scratch. There are a LOT of CSS activities that most people do over and over. If you look at a wide variety of sites, you'll notice similarities in the way information is presented. As a result, if you're going to be presenting information using one of those standard layouts, it's vastly easier to simply use a CSS framework than roll your own version.
Also, different browsers have different default CSS settings. Using a CSS framework will provide a CSS reset as part of what they do. This helps ensure that what you see in one browser is what will be seen in all browsers. This helps you spend more time building your site and less time trying to figure out why the display is different in a particular version of IE, for example.
frameworks comes with lots of features like grid, components, typography along with good browser compatibility so you can simple use them instead of creating them from scratch. It totally based on project requirement that what framework you should use. Apart from bootstrap and Foundation there are more great out there created by few geeks.
I would like to know which is the best css framework to use for all types of responsive as well as non responsive websites like ecommerce, CRM, Real estate and many more?
Bootstrap, Gumby ,Yaml, 960 grid or Blueprint CSS, which one is the best to create new theme or modify themes which is already created?
This is an opinion-based question, and is very likely to be closed as off-topic or too broad. There is no definitive answer to say 'Which is best?', it would come down to whichever one's best suited to your needs.
If you want my opinion though, I would choose Bootstrap. Only because it's the only one I've used out of the three examples in your list.
The best is Bootstrap. The e-commerce where I'm working was created without CSS framework and now the firm has updated it with bootstrap and I am not finding any problem developing it.
I have tried jQuery mobile and Foundation too but Bootstrap is the better.
I recently got two similar jobs of porting a responsive website from one framework to another ie Zurb Foundation to Bootstap and Gumby Framework to Zurb/Bootstrap. Do I have to personally go through the various nitty gritties, functions and all or is there any other way. Also aren't these three frameworks connected, functions and all similar. (I've heard that Gumby's basically a fork of Zurb Foundation) How much work do you think i'll have to do, I'am relatively new to responsive design and this isn't one of my highest paying projects! :D
Just replace the CSS/JS files and then do a find/replace in all of your HTML files to swap in the correct classes. For instance, if you were going from Bootstrap to Foundation you would have to change all instances of col-sm-12 to small-12 columns.
It's a lot of work, and it can be overwhelming. I'd rather avoid it, but then again, I have also been in situations where you really can't — for instance when merging two code bases. The problem is that if you just start a project, you might not really care that much. But then by the time you start to care, it's already too late: all your HTML has bene structured according to the standards dictated by the CSS framework you started with.
I also addressed this problem here. In that answer, I mentioned experimenting with Pug mixins to produce my HTML, introducing a lever of indirection allowing me to change the way my HTML is getting generated if I choose to switch CSS frameworks in the future. That might not help in your specific situation, where you need to fix things after the fact, but it might be helpful to know about it anyhow.
I am basically a PHP developer, but interested in javascript, so learned angularjs and jquery by own. The recent update I got is only learning angular is not enough, need to learn bootstrap also. But I really scared of CSS, because need to deal with pixels and have to design such a way that it has to fit for any device.
Bootstrap does that, ok fine, but how to keep in mind those hundreds of css class names. Can you guys give me some tricks and clues on how to memorize the css classes. And what we have to know before designing a layout (Asking these silly question, because I am into css for the first time).
You don't need to keep in mind class names, you just have to know framework components purpose.
On first steps you just need to checkout BS components and feature list (grids, tables, buttons, js-features) and see how they work and how could be used in your projects.
Next step checkout show cases and examples - you will get to know how compose page using grids and how components works together.
On this stage you will have enough information to start develop with BS.
Later you will face a lot of issues for sure, but it will be concrete questions, which answers could be googled.