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.
Related
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
Is there any alternatives for bootstrap or any predefined CSS library to align and set up a HTML page pretty easily?
I'm doing my development with asp.net and bootstrap and now I got bored of it. So if there is a new library or CDN it would help me a lot.
There are a lot of other free css frameworks with easy to understand grid layouts.
For example:
http://foundation.zurb.com/
http://960.gs/
http://getbase.org/
But it totally depends on your usage case which to use (for example if you want to use sass, etc.).
yes you have many libraries
http://cardinalcss.com/
http://getskeleton.com/
etc
but remember the support ability is limited than Bootstrap. Also totally different keywords.
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.
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.
I'm starting a HTML5 mobile application with HTML5BoilerPlate as a template and I cannot find a lot of resources regarding the best practises for HTML5 mobile development. I am looking for stuff such as:
- navigation using tab bar controller
- navigation between view
- how to best handle content ? (is it better to use several divs within the content div and only show one div at a time ?)
In fact, I'd like to understand some of the things done in Google Latitude.
Is there any good beginners guide for those items ?
You have to implement a lot more of the logic around these 'controller' components. Some of the classes that might be present in iOS development are not in HTML5. You either need to roll your own or use an existing framework.
Navigation between views is handled programmatically. You would need to do it yourself, by implementing components that can animate to/from the screen, or use one of the readily available frameworks like Sencha Touch or jQuery Mobile.
It depends on how you want the visual flow to work. I know that Sencha Touch adds in the divs lazily so not to take up as much memory. I guess the trick here is to experiment to find the best implementation that suits your needs (and then write a blog article).
SixRevisions has a pretty good article on getting started in general HTML5 programming. Some other articles, here, some good tips here, and Apple's docs.
The best beginner guide that I found for Sencha Touch was their examples included with the source code. They have an example for just about every UI control they ship and multiple applications that will gently introduce you to the framework. Other resources include their Vimeo Channel, their forum, and their docs.
Also, you can probably pull up a mobile site and take a look at how they are implementing their code using Chrome/Safari's developer toolbar. You may have to emulate a user agent string of a mobile browser though.
We have released a Mobile Boilerplate and the documents in the associated wiki are definitely something you should look into for info about this.
While not guides, I would HIGHLY recomend looking into either the Sencha Touch or JQuery Mobile HTML5 Mobile Frameworks. They, combined with HTML5 Boilerplate, will do more to bootstrap your project then just HTML5 Boilerplate alone.