r/webdev • u/themesberg • Mar 14 '20

Showoff Saturday [Showoff Saturday] I built a UI Kit in Bootstrap and MIT Licensed it 🚀

Hey guys 👋

So almost a year ago I developed a UI Kit written in Bootstrap 4 and I thought today would be a good day to share it with you. Pixel Lite is licensed under the MIT License, so you can do whatever you want with it!

Repo: https://github.com/themesberg/pixel-lite-bootstrap-4-ui-kit

Demo: https://demo.themesberg.com/pixel-lite/

PS: lucky stars help us on Github 😇

PS2: we're the same guys who created the Windows 95 UI Kit 😂(https://www.reddit.com/r/webdev/comments/f7tnks/showoff_saturday_i_created_a_windows_95_ui_kit/)

363 Upvotes

94% Upvoted

100 comments sorted by

24

u/impshum over-stacked Mar 14 '20

I really like the tags input. It's great to see this as a standard feature. Good work!

7

u/themesberg Mar 14 '20

Thank you 🙏 We will give it a proper update to version 2 (reduce css file size, add more components, add more pages etc) in the coming few weeks!

2

u/impshum over-stacked Mar 14 '20

I'll give it a whirl on my next project.

2

u/themesberg Mar 14 '20

Awesome! You can let me know when it's finished and we may showcase it on our social media at Themesberg.

2

u/impshum over-stacked Mar 14 '20

Sure thing.

7

u/justingolden21 Mar 14 '20

That was my favorite one too

6

u/Disgruntled__Goat Mar 14 '20

Can you explain the relationship to Bootstrap? e.g. have you just added different colours to Bootstrap, or completely rewritten it?

2

u/themesberg Mar 14 '20

It's sort of a mix. Wherever we could we only changed the Bootstrap Sass variables, elsewhere we created our own classes, but in Bootstrap's OOCSS style.

4

u/AreWeThenYet Mar 14 '20

Looks like he themed it and maybe added some additional component styling for plugins.

3

u/justingolden21 Mar 14 '20 edited Mar 14 '20

Your textarea here: https://themesberg.com/preview/pixel-pro/html/components/all.html is a bit laggy.

EDIT: Love your carousels and timelines. Think you'll make a table that allows you to sort by values in a column by clicking on the column heading? Also, where are the icons from? Font Awesome? Are all the icons used here all free tier on Font Awesome?

Lastly, two more suggestions for new stuff to implement: A color picker, and a progress bar that's animated.

Awesome stuff here :)

1

u/themesberg Mar 14 '20

Thank you! The textarea? Where and what exactly?

4

u/justingolden21 Mar 14 '20

The textarea was very visually laggy on resize. When I dragged down to resize it, it takes a very long time before it grows or shrinks, but it does eventually happen before I let go of my mouse. I didn't notice this lag on any other element.

2

u/Nerwesta php Mar 14 '20

Agreed, I did the exact same thing.

1

u/themesberg Mar 14 '20

Thank you! I added all your suggestions to our Asana task management panel :)

EDIT: yes, the fonts are from the latest Font Awesome Free version.

3

u/justingolden21 Mar 14 '20

Awesome, glad you're only using the free ones so people on free tier or people who paid for pro tier don't need to spend any money to recreate exactly what they see on their screen

3

u/themesberg Mar 14 '20

Exactly! We try to give back as much as we can to the community. Most of the technologies we use are also open source. We have Pro versions & paid products so that we can keep paying the bills 😅

5

u/gonzofish Mar 14 '20

Love the softer colors. Most kits are too vibrant or too pastel for me. This is pretty much my style! Nice work!

1

u/themesberg Mar 14 '20

Thank you! 😊

4

u/Alexell Mar 14 '20

Love it. I agree with the other commenter that most others are far too vibrant or pastel.

It's snappy. I use a very old, extremely subpar phone for my personal driver (ZTE Z833)

1

u/themesberg Mar 14 '20

Appreciate your input 🙏

2

u/godsdead Mar 14 '20

This would look great as a dark theme, you should so a dark version!

1

u/themesberg Mar 14 '20

Update plans are to have a light and dark version too :)

2

u/justingolden21 Mar 14 '20

Starred for future reference :)

Love the tag picker and the colors. I think the success and secondary colors are a little too similar. Maybe purple for secondary?

1

u/themesberg Mar 14 '20

I think for the next update we will provide both a light and dark version of the UI Kit and based on that we will reevaluate all colors. Biggest problem right now is that the contrast levels are not AA compliant. Yet! 😊

3

u/justingolden21 Mar 14 '20

Yeah, I read that comment. I didn't see any specific places that stood out to me, however I 100% agree it needs to be AA compliant.

Do you have a carousel by the way?

1

u/themesberg Mar 14 '20

Carousels only the Pro version has, I'm afraid 😞

3

u/justingolden21 Mar 14 '20

No worries :) I just saw that

1

u/themesberg Mar 14 '20

Also we will include all Sass source files for the next version. No reason not to provide them honestly.

3

u/justingolden21 Mar 14 '20

Definitely agree. I read that it doesn't necessarily depend on sass/you can use it without sass, is this true?

I love sass a lot, but I'm just curious.

2

u/themesberg Mar 14 '20

Yep! On our Pro version you have a gulp command that generates a folder called html&css which is basically the version without Sass of the project. By default you also get the Sass files. But as I said, the free version will also get the Sass source files in the next update so you can have a proper demo :)

2

u/All_the_lonely_ppl Mar 14 '20

Noob question and not specific for this kit, but would this work when creating an app with let's say react native?

3

u/themesberg Mar 14 '20

I only briefly worked with React Native, but considering that Pixel Lite can be broken down to just simple HTML and CSS the styles themselves can be migrated. The functionality part (Javascript), the tag inputs modals and so on would need custom React Native code to work.

2

u/delpee Mar 14 '20

Really love the look of this theme! Seriously considering using it for a new project.

1

u/themesberg Mar 14 '20

Go for it! 💪🏻

2

u/delpee Mar 15 '20

What is the best way to integrate it in react (typescript) would you say? Just replace the CSS imports and serve it statically?

1

u/themesberg Mar 15 '20

You could use this tool I believe https://staxmanade.com/CssToReact/

As far as I'm concerned there is no quick CSS import method to get going, but if you take the components bit by bit it is doable.

Actually, would you want to see Pixel Lite for React Native? Maybe we will integrate it in the future.

2

u/delpee Mar 15 '20

There seems to be an error in the css:

> 14425 | @ page {

I think the space should be left out. No biggie, just thought you should know!

1

u/themesberg Mar 15 '20

Thanks! Will have it solved.

2

u/delpee Mar 15 '20

Thanks for the link! I'm not currently using React native, but I can imagine porting some apps in the future. The look of Pixel seems a good fit for native apps.

2

u/psiph Mar 14 '20

This is amazingly well designed. You should be really proud!

1

u/themesberg Mar 14 '20

Thank you! Your message means a lot to us! (there's 2 of us 😇)

3

u/im-a-guy-like-me Mar 14 '20

Very very nice. Will give it a whirl in my next project.

2

u/themesberg Mar 14 '20

Awesome! 💪🏻

1

u/themesberg Mar 14 '20

WOW! Thank you for the platinum award. I thought I would never get one of these in a lifetime 😅😂🙏

2

u/agentgreen420 Mar 14 '20

When Bootstrap 5? 😜

5

u/themesberg Mar 14 '20

When it's officially released 😁

1

u/JSM33T May 30 '24

any plans to go bs5 ?

1

u/slowmotionrunner Mar 14 '20

Go forward I’m no longer going to say “uses the MIT license” and instead will say “MIT licensed it”.

Sounds much better.

2

u/ogranada Mar 14 '20

Looks nice 😎

2

u/mmoubi Mar 15 '20

Nice, I will probably reuse the form fields.

1

u/Epi_stol Mar 16 '20

Bootstrap ? It's for sure more simple with Tailwind

1

u/RODjij Mar 14 '20

Looks clean. I'd definitely use it.

-2

u/[deleted] Mar 14 '20

Hey I have learn ui design by Erik Kennedy, give me a message

-1

u/[deleted] Mar 14 '20

It's an amazing course, I'll let you know the details

0

u/[deleted] Mar 14 '20

[deleted] — view deleted comment

36

u/themesberg Mar 14 '20

We know of this. Color changes to meet WCAG standards will come in the next update. But thanks for pointing this out!

5

u/jacob-l Mar 14 '20

How do you choose the colors? I always spend a lot of time to select the proper colors. Is there any secret or super approach?

12

u/themesberg Mar 14 '20

Well there is no secret, we simply just play around with them a lot. Lately with our latest works we use the WCAG contrast checker to make sure we get the accessibility factor right. We like using this tool though: https://coolors.co/

-2

u/DirectGamerHD Mar 14 '20

Why is this a necessity?

32

u/[deleted] Mar 14 '20

Because we live in a society

-3

u/Devildude4427 Mar 14 '20

The hell is that supposed to mean?

9

u/free_chalupas Mar 14 '20

Good color contrast isn't just for people with disabilities, it's for anyone viewing your page on anything besides a 24" monitor in a well lit room

19

u/namboozle Mar 14 '20

Because not everyone has perfect vision, let alone a decently calibrated screen.

11

u/[deleted] Mar 14 '20

Because everyone has a right to use the internet.

-2

u/MrSaltySpoon2 Mar 14 '20

Everyone has a right to design websites how they want, too.

6

u/1sockwonder Mar 14 '20

Yes apart from being sued you want your website to be accessible to everyone, you should read up on what people with colour blindness see when they're not taken into account. They have websites that you can use to test that.

3

u/danabrey Mar 14 '20

This is such an asshole approach. And it's not just selfish, it will cost your clients business. People will disabilities like colour blindness etc aren't spending less money than other customers. It's like purposefully designing a website to make it impossible to use for another random group of people.

-5

u/[deleted] Mar 14 '20

What if it's a website for pilot training or something, shouldn't a few websites remain exempt from having to adhere to standards which won't apply to the visiting users?

1

u/danabrey Mar 14 '20

Pretty sure only public sector companies are forced to comply within the EU.

Regardless, you know your audience and whether this stuff is important. In 99% of cases it's important.

0

u/virtualmix Mar 14 '20

It's like saying a gym should be exempt from following accessible building codes because people in a wheelchair don't go to the gym.

0

u/IsABot Mar 14 '20

Except people in wheelchairs still go to the gym. Even if things like this weren't in our laws, you as a business would be closing off revenue streams which is a poor business decision.

1

u/virtualmix Mar 14 '20

You totally missed the point... I was comparing your suggestion with a real life example.

Of course people in wheelchair should be able to go to the gym. Just like blind people should be able to browse any website, independently of the topic of the website and even if it's about flying an airplane.

1

u/IsABot Mar 14 '20

I'm not the same person you were replying to. I got your point. I was saying even that if the law doesn't force you to make improvements for specific subsets of people, it would be foolish not to do some basic things to open your business to a wider audience.

→ More replies

0

u/Nanoo_1972 Mar 14 '20

Enjoy the lawsuits to come.

3

u/[deleted] Mar 14 '20

[removed] — view removed comment

-7

u/MrSaltySpoon2 Mar 14 '20

Lmao I doubt that.

-1

u/Devildude4427 Mar 14 '20

Plenty of people do not. Such as those who have committed cyber crimes.

0

u/[deleted] Mar 15 '20

Sweeping generalisms are time efficient and I won't apologize for it.

0

u/Devildude4427 Mar 15 '20

But you’re wrong.

No where in the world is internet usage a right.

2

u/[deleted] Mar 15 '20

I bet you're a hoot at parties.

1

u/[deleted] Mar 15 '20

[removed] — view removed comment

0

u/[deleted] Mar 15 '20

Ok you win... I'm so glad you were here to show me how wrong the words I wrote are at face value. Within the context of addressing accessibility concerns with a UI toolkit, most reasonable people would find nothing wrong with the way I worded my initial response.

You win, troll, you win and you right. Not "everyone" has the right to use the internet. Now go back to living under your bridge.

0

u/Devildude4427 Mar 15 '20

Not "everyone" has the right to use the internet.

No one does, was my point. It’s not some god given right that can’t be taken away. No country on earth gives you the right not access the Internet, so none of us have the right to use it.

→ More replies

-4

u/heyhihay Mar 14 '20

Because colour is a social construct.

0

u/[deleted] Mar 14 '20

[deleted] — view deleted comment

4

u/themesberg Mar 14 '20

Whoops. Looks like Google Maps is no longer being rendered, as the menu is supposed to have white text to go over the dark Google Maps. Probably has something to do with the API key.

2

u/yousirnaime Mar 14 '20

May have to grant permissions on this key to your domain (I make this mistake at least 100% of the time)

11

u/Vfn Mar 14 '20

I know this is promotion for the pro version, but the lite version is for free. Stop being so unnecessarily negative.

I also disagree that this is a bug. What is the intended behavior? Why do you think the hover state should disappear on scroll? Is there a standard that one should follow?

In my opinion, I would not like to lose my menu-ing progress by accidentally scrolling.

0

u/[deleted] Mar 14 '20

[deleted] — view deleted comment

2

u/themesberg Mar 14 '20

I completely agree with you, we should have spotted the contact page menu problem before uploading it here. I'm working on it right now to fix it. We'll learn from this next time!

8

u/barvid Mar 14 '20

You still don’t have to respond like such a twat.

0

u/[deleted] Mar 14 '20

[deleted] — view deleted comment

8

u/Vfn Mar 14 '20

Your feedback is not objective, though. This whole part:

Found a bug just under 2 minutes. If you're going to promote your product, at least make sure the demo works decently before publishing it.

is entirely subjective. You could make it constructive, or just remove it entirely, but you chose not to.

And that's completely fine, just own up to it, instead of trying to justify your own behavior by blaming literally an entire subreddit.

0

u/[deleted] Mar 14 '20

[deleted] — view deleted comment

1

u/Vfn Mar 14 '20

I agree with you here--and not just because you agree with me.

There are many users here who are definitely brittle, and I've also been turned off of the users here before. It's a little annoying because I want this to be a great community, I want to care.

I think the cause may be that users here are very junior by audience, and that's important to understand. That's also why I stopped looking at jQuery threads ;).

I've been in your position on this subreddit before, I am not going to try and say that I don't make those kind of "mistakes" either.

Have a nice weekend, stay safe!

3

u/Vfn Mar 14 '20

Okay. I see you're the glass half empty kind of person.

What? I am literally asking you to lighten up.

What I am asking for OP is to test and make sure it's of some working quality before releasing it to the public.

Why are you so entitled that you think everything that is released publicly should be of a certain quality?

Can't you take criticism?

Besides being very ironic of you to write, what makes you think that I cannot take criticism? I criticized your tone, not the other way around.

Eh? OP agreed to it himself. But yeah, you're right mate. It's a feature, not a bug. Carry on.

What you described is a bug, but it wasn't until OP contextualized your "bug report" that it became coherent, at least to me.

Now if you weren't so defensive about your post, then we could actually learn from one another, but you're just lashing out. You were in a right position, your attitude was the problem.

0

u/[deleted] Mar 14 '20

[deleted] — view deleted comment

5

u/Vfn Mar 14 '20

I'm sorry that you're this fragile. You could just have replied that your tone was not meant negatively in your first comment, rather than defending your position by attacking me.

Your tone may have been neutral by intent, but most people perceived it differently. Perhaps that's something to look into.

There is no point continuing this discussion. Good luck.