Useful (Free/Open Source) Apps for webdesign

I thought I would start this thread for us to share useful apps/tools to help with web design.

A few to get us started:

Squoosh
Squoosh is an image compression web app that allows you to dive into the advanced options provided by various image compressors.

Counter
Simple Web Analytics - Web Analytics made simple and therefore privacy-friendly.
Easy to set up, just one line of js (The same line for all sites), easy to use dashboard. Not indepth analytics, but enough to get an idea of where visitors are coming from.

Responsively
Preview all target screens in a single window side-by-side, brings down your development time!

SEO Meta in 1 click (Chrome Extension)

7 Likes

Really cool post for others ^^

Thanks for the share @richards , and I’d like to add to it as well. Also can you post if the apps you have listed are for PC or MAC or both? That might help as well.

Along with Responsively app, there’s also Polypane which does basically the same thing, but has a price and I think is just a little better. Works with Windows, Mac and Linux.

Pixelmator and it’s Pro version are great image editors for Mac.

Colorslurp is a great little tool for color picking, mixing, etc. for Mac.

Thanks! i have to try some of this apps.

Font Ninja (Chrome Extension)
Identify fonts from any website

2 Likes
  1. cropp.me for auto-cropping images.
  2. buttonoptimizer.com Design and customize awesome call-to-action buttons in minutes.
  3. responsivebreakpoints.com breakpoint imagegenerator.
  4. email-obfuscator.com obfuscate an email address for your website.
3 Likes

Bootstrap Build
CSS personalization / styling tool for Bootstrap 5

https://bootstrap.build/app

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.

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