Tool for setup and preview colors from scratch

[andee]

One missing funcionality is for me create inside app new color scheme. For example I use something like Adobe Kuler / color wheel in my graphic apps to choose colors. I have palette. I would simply open menu and setup primary colors, danger, color of text and then only use visual builder. Now only option is override via CSS or create CSS file and load to app usinging import.

I see as window where I can setup in basic mode primary colors. On advanced I can simply browse via typical elements like paragraphs, heading (what is available on the left in app) and from one place setup all colors at once. I think it could be improve overall experiance when prototyping and add possibility to better create something from scratch.

Best regards

[printninja]

You can do anything you want in terms of customizing the color schemes of your websites built with Bootstrap Studio, but this is not a program for novice website builders who simply want a 100% drag-and-drop program that requires no knowledge of HTML, CSS or Javascript. While you CAN build a website with just the program’s visual interface, it will be somewhat limited.

But the program includes ALL the provisions one requires to customize your site to any degree imaginable. You simply have to do some leg-work, and learn the fundamental methods by which websites are styled.

Even if you don’t want to learn CSS, you still have a wide range of options to choose from when you create a new blank website. After you’ve created your new file, go to the top menu and choose File > Settings. Within the window that appears, under the Design heading on the left (you may need to click the word Design) click the Bootstrap icon.

This will show the Bootstrap Settings on the right, and you will see a drop down menu called Theme. From this menu, you can choose from a variety of 22 different base color combinations. Bootstrap will be selected by default, but you can pick any of the 21 other themes, or import a theme of your own.

If you are more ambitious, you can alter the actual Bootstrap Theme using SCSS Theming Bootstrap · Bootstrap

This program is nothing like Adobe products (which are pure garbage when it comes to web development), or cloud-based builders like Wix, Weebly or Squarespace. Those are programs created for people who are unwilling (or afraid) to learn how to code. But as with anything, web development follows the same rules… no pain, no gain. If you want to be able to create dynamic websites that are super personalized, and look like nothing else out there, you need to put in the hours, and learn the technology. Bootstrap Studio is like having a complete woodworking shop at your disposal, and it contains all the tools to enable you to build anything you can imagine, but you still need to learn the craft of woodworking, to know what each tool does, and how to properly use it.

[jo-r]

@andee Actually the program does have a pretty good color schemer setup if you have an idea how to get to it, which took me all of 2 seconds to find it by trial and error since I haven’t used it in a while. I’m not sure if this is what you’re looking for but …

In the Appearance tab choose a color for whatever component you are trying to color. You can do this visually by doing the following:

1. Select the component you want to color (text, box, etc)
2. Scroll down to the Font section of the Appearance tab and put any color name or number in that box. If the item is already colored there will be a color swatch on the right side of it.
3. Left click that color swatch to adjust the color using a visual slider set or mouse target in the window.
4. Right click it to access a color schemer setup that you can put specific colors for your project into so you can access them more easily in the future. This also gives you a set of all colors currently in the design under the Design tab.
5. Click the Favorites tab to add colors there for your project. To add any color to that Favorites just click the “heart” icon next to the color number of that dialog window.

Let us know if that helped at all, hopefully that’s what you’re looking for.l

[andee]

It is very close what I want. Using favorites is very satisfaction way of doing it. Now I fx. choose complementary colors which I like, create pallette with codes and after that I use online tool to generate color scheme. After that I generate bootstrap.css and import to Bootstrap Studio.

My dream is when I have elements like:

-- primary: green;
-- secondary: white;
-- success: yellow;

I can using blank project setup this in Bootstrap Studio to later use. When I have some parts like that:

.table-success tbody + tbody {
  border-color: #8fd19e; }

.table-hover .table-success:hover {
  background-color: #b1dfbb; }
  .table-hover .table-success:hover > td,
  .table-hover .table-success:hover > th {
    background-color: #b1dfbb; }

.table-info,
.table-info > th,
.table-info > td {
  background-color: #bee5eb; }

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
  border-color: #86cfda; }

I would see preview fx. when I add to project. Setup visually style, connected what I choose with fx .table-info and after that have the same stuff for all .table-info. After that I can simply edited fx. add new effects, animation or other fancy stuff but via coding myself, but with some base.

I hope I explain my expentation clearer. Thank you for your suggestion. I’m still beginner on the field using Bootstrap Studio.

[printninja]

My brain is a bit fried at the moment, but whatever you’ve described here I will reread and try out. It sounds like you’ve discovered something interesting.

[michalbialkowski]

If you need advanced editing of layout parameters (such as: color styles, spacing, borders, header sizes, etc.) directly in Bootstrap Studio, it is possible.
This application allows you to modify literally every aspect of the Bootstrap SCSS source

[printninja]

I see the jpg image, but where does one find this application? Is it inside BSS? Something you created? An online library component? A third-party tool? Is there a link or file? Perhaps you could post the source to this in the Tips and Tricks category of the Forum?

[twinstream]

It would be nice if the devs would allow us to choose this as a option so we dont have to import the scss. Its like finding a Golden Willy Wonka ticket though…so powerful ! Nice to see someone else getting creative with the compiler.

I setup another identical structure to hold all my edits though. I never edit the core as Bootstrap gets updated often. The files in my duplicate structure folder are empty but I just copy what I change and import to the bootstrap scss.

[hackers_84]

Kudos Michal if you have spent the time building out a UI Kit that can use drag and drop from scratch

[michalbialkowski]

It is very easy:

1. Create an empty file called bootstrap.css and import it as a theme into Bootstrap Studio. Next, select this style for your project
2. Download the Bootstrap development package, compatible with the Bootstrap version in BS Studio
3. Import all SCSS files from the scss directory (e.g. to a separate folder in the styles tree like ‘Styles/core/’) - remember to keep the appropriate directory and file structure identical to the original structure
4. It works. Now you can modify the layout parameters via the _variables.scss file. You can also customize other Bootstrap files, create dependent styles, etc.