loading...

Web Developers and Designers, where do you get your raw materials from?

prahladyeri profile image Prahlad Yeri ・1 min read

Web Development is perhaps the fuzziest science of our times. It keeps evolving constantly and you must keep up with tons of things.

One of the most important things are resources, be it fonts, css and bootstrap themes, stock icons and background images or javascript frameworks. My question is what is the standard practice in this regard, where do you get these things from?

Discussion

pic
Editor guide
Collapse
rixcy profile image
Rick Booth
Collapse
nodeicode profile image
Lohit Aryan

Man this was useful wow I just go about making up some baseline Bulma page as frontend for playing around in node ;/

Collapse
rixcy profile image
Rick Booth

I used to rely heavily on stuff like Bootstrap/Bulma, but have found myself recently getting attached to utility frameworks like https://tailwindcss.com/. You can quickly create buttons and stuff with inline classes like <button class="px-4 py-2 border border-grey-darkest rounded hover:bg-grey-light">Click me!</button>

I feel like sometimes when prototyping you can get caught up with frameworks like Bulma trying to get everything to look nice and work well together, but if you create your own minimalistic components it can speed dev up a bit! Depends whether you hate css or not though I suppose haha

Thread Thread
prahladyeri profile image
Prahlad Yeri Author

Tailwind seems wonderful! But you also need a grid for your layouts, do you use a different minimal framework for that?

Then there's also the need for things like responsiveness, modal dialogs, navbars, carousel, etc. which come built-in with Bootstrap. What do you use for those?

Are these minimal frameworks too difficult to handle for someone with minimal knowledge of CSS?

Thread Thread
rixcy profile image
Rick Booth

For a grid I usually just use tailwind's built in width stuff, having a two column layout would be something like

<div class="flex flex-col md:flex-row">
  <section class="w-1/3">Sidebar</section>
  <section class="w-2/3">Main Content</section>
</div>

where initially it wraps and on medium screens and above it sits side by side.

I've found the responsive stuff in tailwind to be great. You can even hook directly in to the config if configured properly and do stuff like

.my-component {
  @apply bg-red text-white p-4;
  @screen md {
    font-family: config('fonts.primary');
    @apply bg-blue text-grey p-8 /* font-primary here would do the same as the above line */;
  }
}

As for stuff like modals, it's not too hard to achieve these in pure css without needing javascript or pre-built component (I know Bootstrap used to rely pretty heavily on jQuery which was one of the main reasons I moved away from it when starting to use stuff like Vue/React). Check out tailwindcomponents if you get chance, there's a load of pre built tailwind things there that you can either get inspiration from or copy :)

I wasn't that confident with CSS stuff until more recently and using tailwind has been a blessing.

Collapse
michaelandreuzza profile image
michael-andreuzza

Bulma is amazing...

Collapse
angelarae63 profile image
Angela Whisnant

Just what I needed! Thanks!
Angie

Collapse
highcenburg profile image
Vicente G. Reyes

I get stock photos from Pexels, Icons from icons8 and fonts from Google Fonts.

Collapse
rixcy profile image
Rick Booth

Pexels is great, I've found unsplash to be good too

Collapse
highcenburg profile image
Vicente G. Reyes

I was just drawn to Pexels because of the background photos on Brave Browser lol Unsplash is awesome too!

Collapse
peiche profile image
Paul

I won't duplicate what others have said, but in addition:

  • Font Awesome is still great, we have a pro license at work
  • Nucleo Icons for personal projects, I prefer them over FA actually, and their turnaround time for newly requested icons is much better
  • Codyhouse Framework for layouts, better support for modern browsers than Bootstrap like CSS Grid and Custom Properties, also smaller file size and more componentized, only use the CSS you need
  • UpLabs has some awesome freebies/inspiration
  • Lukasz Adam does some amazing SVG work
  • Absurd Design is just great
  • ManyPixels Illustration Gallery is a lot like UnDraw, but with more gradients and finer detail, I think
Collapse
michaelandreuzza profile image
michael-andreuzza

Hey Prahlad!

I have built colorsandfonts.com for that kind of situation. You can find color palettes, gradients, font pairings and a Material Ui color picker.

You can get the codes in just 1 click in colorsandfonts.com

I hope It helps.

Collapse
enbonnet profile image
Ender Bonnet

Nice works! Will be amazing include this resource on our tools github.com/enBonnet/Frontend-Tools

Collapse
michaelandreuzza profile image
michael-andreuzza

Sure! That would be amazing !

Collapse
cookrdan profile image
Dan

If need be I make images and icons. I’ve had a long history with design. I do own some pro software (Affinity Designer) which makes a lot of things easier. Free things exist too. Designing things in SVG is great.

There are a number of websites that offer free to use resources though for those who don’t have time/skill/personnel or etc.

Collapse
flrnd profile image
Florian Rand

Fonts: Adobe Typekit (now free) also well known Google fonts. Avoid dafonts and similar to it like a plague.

Icons inspiration: the noun project.
Some designers share free resources on Behance as self-promotion. You can search there too.

Be aware of Dribbble and other platforms. While it's cool search for inspiration, a good designer follows users needs, not the hype or trends.

Lastly, for any real professional work I hire illustrators or other professional profiles to the job, and if there is no budget for that then quality stock resources.

Collapse
alliwalk profile image
Allison Walker

Lorem Ipsum
blindtextgenerator.com/lorem-ipsum
generator.lorem-ipsum.info/

officeipsum.com/index.php — For fun

Web Typography
theasciicode.com.ar/ — ASCII chart
dev.w3.org/html5/html-author/charref — Character References
practicaltypography.com/straight-a... — quotations codes
cs.tut.fi/~jkorpela/dashes.html — codes for dashes and other shapes

Colors
coolors.co/
webgradients.com/

Pictures
placekitten.com/

Random Names
uinames.com/
fakenamegenerator.com/

CSS Stuff
leaverou.github.io/css3patterns/
cssmatic.com/

I have a very long list of silly text generators. I found them by searching for text generators. When I find something I like, I bookmark it. I find things I like either through classes, or maybe something like this where people list their favorite tools.

Collapse
wsilvaemp profile image
Walace Silva

I'm to using iconfinder for get several icons, pickImage for images background and currently I'm developing with kotlin lenguage

Collapse
nikkifurls profile image
Nicole Furlan

I've gained so many resources from this thread! Wow!

We forgot the best lipsum of all: bobrosslipsum.com 😁

Collapse
hondohondo profile image
Ami Amigo

This is a collection of some good design and development resources

jonas.io/resources

Collapse
michaelandreuzza profile image
michael-andreuzza

Another good idea is to learn Figma which is a FREE piece of software then you could do your own svg icons, backgrounds,etc,....

Collapse
enbonnet profile image
Ender Bonnet

We build a repositorie with a lot of resources github.com/enBonnet/Frontend-Tools