How to modify Bootstrap easily and quickly

Date: 2013-7-22 Source: gbin1.com

Bootstrap does not just mean the HTML/CSS interface framework. More specifically, it changes the entire game rule. The code framework that includes everything makes design and development of many applications and websites much easier, and it popularized a large number of HTML frameworks into products.

Sadly, its pure functionality inspires our instinctive laziness, and many people always stick to its default settings. Now, you need to know that the default style and layout grid with rich imagination are not bad. They are the product of Twitter team spending a lot of time and energy. They are a solid foundation.

However, bootstrap is the cornerstone ". The bootstrap framework does not mean that it is an end-to-end solution. An exception to this rule may be that if you develop something internally, it is invisible to the public. But even so, your thoughts will take people farther and even change everything.

Bootstrap developers did a great job, making a lot of things simple. Their code is modularized and you can download the independent components of the framework. They even provide a basic custom tool on the website that allows you to edit variables.

The rest depends on us. Some real designers and developers have stepped up the creation of tools and changes, and we have no reason to fall behind. Now there is no excuse to use the default settings of Bootstrap.

Bootstrap change

The following are a series of changes that are very mature and can make your basic Bootstrap look no longer familiar to you. The use of these changes may be limited or used under certain conditions. However, if they meet your needs, they will save you a lot of time and money.

Flat UI

The first change is the flat UI (flat design interface), which is released by designmodo. Flat UI is becoming increasingly popular. There is a good reason in the design field: It is very beautiful. It exists for those who prefer flat design-the opposite is true for the quasi-materialized Design of Bootstrap.
-Every UI element is redesigned based on brand new aesthetics.

Vector icon, a new font of the font, custom UI elements (similar to-do list) and various easily changed color themes, flat UI let me, maybe many people share the same idea about how Bootstrap can be presented. I often think that the text size in basic section elements is a little small for the website. I think they are only suitable for the application interface. In the application interface, you can put the text in a small space.

Flat UI is free of charge, but you can use paid professional versions. Professional versions include additional elements, functions, and PSD files.

Fbootstrapp

I have mentioned that some changes have specific conditions for use? Of course I'm not kidding. Fbootstrapp has completely re-developed the user interface elements for Facebook compatibility.

Why? In their own words, "fbootstrapp is a set of tools used to launch Facebook IFRAME application development. It includes basic typography, tables, buttons, forms, grids, navigation, and CSS and HTML styles for more elements to make them look and experience the same as the typical Facebook ".

Facebook developers, note that your work is getting easier.

Jumpstart UI management template

Bootstrap is mainly used for applications. If you want to apply it on the classic "administrator interface", you need additional work. The JUMPstart UI brings you three different templates, removing effort.

The Administrator UI icon, widget style, jquery-based data visualization plug-in, and more others have been introduced into the clean, customizable, and full response layout.

The biggest difference between such a change and others is that it does not have any free version and must be paid for it. It only costs $15 to $20, which is very cost-effective in terms of what it can implement and what it meets your special needs.

Bootmetro

Some people like it, but more people hate it, but it is undeniable that Windows 8 and its Metro UI have caused a sensation in the design field. I don't think this kind of UI is particularly useful (except for some software stores), but we have a bootmetro!

It is free and looks perfect, so feel free to use it. For most people, he may not be particularly useful, but he is a novel code experience.

Bootstrap customized Tool

So how do you start to guide your Bootstrap to better meet your UI requirements? Of course you can read the code directly. I can tell you that it is very difficult to do so.

If you want to manually change all the typography, buttons, link colors, or navigation Styles, you can edit all the variables in the Custom app on the bootstrap website, but you must know the hex code of all colors, and when you make changes, you cannot see any visibility returned, that is, when you modify, it is totally unpredictable what you will look like after editing.

Fortunately, a few Bootstrap topic creators have made some special tools for this customization requirement. Here are two of the best ones I think so far.

Stylebootstrap

If you ignore clumsy interfaces, stylebootstrap is a powerful tool for editing most of the default UI elements you can see in the framework.

Bootstrap magic

Bootstrap magic is a tool that helps you reshape your architecture. Its interface is simple and friendly, and more elements can be fine-tuned than stylebootstrap. Therefore, it takes more time, but it saves a lot of time compared to manually modifying all elements.

Plug-ins & clips

Some things do not exist in Bootstrap, but they are very important to us. The first is the icon.

Font awesome

The image character icons provided by bootstrap are cool, but limited. You have a "dark" icon and a "bright" icon, which is a cute little genie image. However, the icon font should be more flexible. Any edits you can make with css3 should also be implemented on these icons. For example, changing the color and adding a shadow to them is as simple as writing CSS. Font awesome can now be modified for 361 icons.

Bootsnipp

Bootsnipp is an HTML snippet library used in combination with bootstrap and does not need to be added to other libraries. The snippets include registration and login forms, calendars, e-mail interfaces like Gmail, Media Player interfaces, and more.

Not all

Twitter's favorite templates are becoming more and more widely used. There may be more methods and more information on custom Bootstrap, which is not available in my list or even any list. After all, the Internet exists for this, right?

Via Nelly @ geeks

Source: how to modify Bootstrap easily and quickly