Useful (Free/Open Source) Apps for webdesign

I must admit, I have never managed to get that working correctly

For example the exact same html

First the default bootstrap:

Then the bootstrap.build

Notice the nav has now shifted to the start and the margin goes on the buttons

I never ever had problems with this tool and the effects of using it

It must be me :slight_smile:
If I remember correctly it worked fine for me in bs4, but always have problems in 5.x

I just use npm now, I only use it to change the colors most of the time.

Useful little tool
https://www.portablefreeware.com/index.php?id=2034

I’ve been messing with changing theme colors for about a week now, tried various methods that didn’t work at all, and now just tried the Builder for the 3rd time I think lol and it works with a CDN, but I’d prefer to have the files local. Any way to do that or are we stuck using a CDN?

I guess for me I’m worried that they may change some default BS code that I don’t want changed so I’d rather just have only the colors setup and leave the rest out since they do the whole entire file of all the settings. I’d rather pick and choose my poisons lol.

1 Like

Not entirely sure what you’re getting at Jo, but does this post help at all?

Personally, I don’t use Bootstrap’s predefined colors much. I prefer to make my own classes.

1 Like

@jo-r This is how I have started doing it:

Download bootstrap 5.1.3 from github (https://github.com/twbs/bootstrap/archive/v5.1.3.zip)
And extract the folder to your harddrive.

In Visual Studio Code, open a terminal and cd to the folder you extracted

Run the following commands in the terminal:
npm install
then
npm start

in VSC open the _variables.scss file (located in scss folder)
edit the colors and save

then run
npm run dist

This will then update the dist folder, copy the dist/css/bootstrap.min.css file, I rename it for the site it relates to (mysite-bs.min.css)

In BSS add the mysite-bs.min.css to your themes.

Hope this helps

You can find out more here: Contribute · Bootstrap v5.1

1 Like

Thanks @printninja that was kind of what I was looking for. I’ll check it out further.

Thanks @richards , I’ll take a look and try the npm way too which seems a bit easier than all the rest of the sites I checked.

lol ok @richards will try this other way with the design file you gave. I can’t get the “npm” method to finish for some reason. I can get all the way to the part where I’m supposed to type “npm run dist”, but it doesn’t do anything. I can see the colors were changed in the bootstrap.css file, but not in the bootstrap.min.css file so not sure what’s up there.

Moving forward with the new way lol.

You should be able to use the css file instead of the min.css - as long as it has the info you need

hmm, is the core files from 5.1.3? When I did as the project said to do, it messes up my project as if it strips all the colors and realigns everything when I choose that new theme lol. Any idea what I might have done wrong?

P.S. The colors are correct in the file so that part worked, just doesn’t pass it on to the site at all.

Yes, it was 5.1.3… I’ve started again on the bss project using exactly the same core as I’ve used in npm.

The npm works perfectly but the bss export makes all the columns go all over the place.

Nice project for the weekend :grin:

hmm guess I’ll try using the bootstrap.css from the npm and see if that goes well. I’ll be back! :stuck_out_tongue:

1 Like

ok so the colors are “somewhat” right (partly my fault there), but the npm file is still messing with my structure. Here’s some SS to show what it’s doing: (keeping in mind I’m on a Mac if that matters)

This is what it should look like:

This is what it looks like:

I know i have some colors mixed up that I’m going to go fix now (had some other custom colors in there that I probably don’t need now which are missing from the files now so that’s on me yet lol)

Just an update that all is well! TYTYTYTYTYTY!! :heart:

I had to add the color setups to my colors file to declare them (not sure why since they were in the new theme, but it made me do it so I did. I fixed some color issues that I knew were there and once I did all that it’s all working now! Yaaaaay I can’t thank you all enough!

Excellent :slight_smile:
Was that using the npm bootstrap.css?

UPDATE:
you don’t need to run the npm start command
just change your colours/variables in _variables.scss and then npm run dist

1 Like

A lot of resources here… Talking about design (for both desktop and Web in my own case), I like this tiny free desktop tool called PMeter: Pegtop PMeter which provides a color picker (taking any pixel on screen) and a rule (to see if things are aligned or how many pixels there).

I had posted this in another topic, but it seems apropos to place it here as well. These tools are all cloud-based on this website…

I used their paragraph writer AI tool and was astounded by the quality of copy it produced. In this example, I entered the term “bathroom renovation”, chose a “casual” voice, and the A.I. output the following paragraph…

If you’re looking to give your bathroom a makeover, then consider a renovation! Whether you want to completely gut the space or just change the fixtures, there are so many creative options and ways you can play with color and design elements to really customize it. From trendy tile patterns to adding extra vanities, from rustic shiplap accents to modern luxury features, you’ll be sure to find something perfect for any style or budget. Plus, updating this room can add value and energy efficiency that will last for years - what’s not to love?

This sort of thing can save me hours of copywriting for clients who don’t provide content, especially when it comes to subjects in which I have little expertise.

Enjoy these tools while they’re still free! Stuff this useful rarely stays free forever.

1 Like

Another site I found with a lot of useful tools

https://www.danstools.com/

2 Likes

Great website for creating SVG favicons with fallback for older/unsupported browsers. Just upload your SVG image and it creates the entire package to upload to your root directory, and the code to place in the head.

1 Like