1597804248
Start a Component Library with Storybook, Tailwind CSS and TypeScript
What’s Storybook?
Storybook is a tool for developing UI components in isolation — meaning we can have components outside of our main app, make the necessary changes, and import them into our app knowing how they look.
Design systems have become an important part of any product development process, and chances are you already work with one. This system delivers a style guide for designers and developers to follow. You have many UI components with different patterns and variations. This is a perfect scenario to use Storybook.
The Advantages of Tailwind
Tailwind CSS is a highly customizable, low-level CSS framework.
It’s not a UI kit like many other frameworks — it gives you full control over how your website looks, all through CSS classes.
#react #typescript #tailwind css #javascript
What is GEEK
Buddha Community
1597804248
Start a Component Library with Storybook, Tailwind CSS and TypeScript
What’s Storybook?
Storybook is a tool for developing UI components in isolation — meaning we can have components outside of our main app, make the necessary changes, and import them into our app knowing how they look.
Design systems have become an important part of any product development process, and chances are you already work with one. This system delivers a style guide for designers and developers to follow. You have many UI components with different patterns and variations. This is a perfect scenario to use Storybook.
The Advantages of Tailwind
Tailwind CSS is a highly customizable, low-level CSS framework.
It’s not a UI kit like many other frameworks — it gives you full control over how your website looks, all through CSS classes.
#react #typescript #tailwind css #javascript
1578029098
7 Best Vue CSS Component for Your App
Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process.
1. Tailwindcss-Vue
Tailwindcss-Vue is a library of UI components for Vue.js built using the Tailwind CSS utility-first CSS framework.
Download: https://github.com/advanced-data-machines/tailwindcss-vue/archive/master.zip
2. @zeit-ui/vue
Vue implementation for Zeit Style, originating from Zeit Design.
@zeit-ui/vue is a Vue implementation for zeit style, originating from Zeit Design. Lean more at GITHUB.
The design of the Zeit is concise and aesthetic feeling, this is an important reason for popular of Zeit. Now you can use them through the @zeit-ui/vue.
Download: https://github.com/zeit-ui/vue/archive/master.zip
3. CSSeffectsSnippets
Click on the animation to copy it to your clipboard
Demo: https://emilkowalski.github.io/css-effects-snippets/
Download: https://github.com/emilkowalski/css-effects-snippets/archive/master.zip
4. Vue Cirrus
A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh. These are the Vue Components for this CSS framework.
Demo: https://florianwoelki.github.io/vue-cirrus/#/
Download: https://github.com/FlorianWoelki/vue-cirrus/archive/master.zip
5. Vue CSS Modules
Seamless mapping of class names to CSS modules inside of Vue components.
Download: https://github.com/fjc0k/vue-css-modules/archive/master.zip
6. BG MixMaster 90 — CSS Background Grid /Pattern Generator
make a background grid (like graph paper) using only one background gradient property and ended up with this killer mix tape for making all kinds of background grids and patterns.
Download: https://codepen.io/jasesmith/pen/YZEYRL
7. CSSOBJ
CSS Rules from JS, change rules dynamically, CSSOM, css modules, auto vendor prefixer, media query for old browsers.
CSS in JS solution, create CSSOM and CSS rules from js, features:
- CSS Rules create and diff
- CSS modules with local class
- Auto vendor prefixer
- Media query for old browsers
- Dynamically change CSS
Demo: https://cssobj.github.io/cssobj-demo/
Download: https://github.com/cssobj/cssobj/archive/master.zip
#css #vue-css #css-component #vue-css-component #vue-js
1620458899
…and naming things; Tailwind CSS, Typescript and mammals
Tailwind CSS is so hot right now. And somewhat controversial, but I guess that only makes it even hotter. I’m a fan myself, I think the predefined sizes provide just the granularity necessary but no more. It’s sort of like going from drawing charts on blank paper to grid paper. Also, I really like not having to switch back and forth between js and css files.
While that’s all great, I think my true productivity gain comes from being spared of coming up with names. If you are not aware, Tailwind CSS uses_ utility classes: _tiny classes that define one styling aspect each.
#computer-science #tailwind-css #typescript #productivity #typescript
1654588030
The Definitive Guide to TypeScript & Possibly The Best TypeScript Book
TypeScript Deep Dive
I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack Overflow / DefinitelyTyped and general engagement with the TypeScript community. You can follow for updates and don't forget to ★ on GitHub 🌹
Reviews
- Thanks for the wonderful book. Learned a lot from it. (link)
- Its probably the Best TypeScript book out there. Good Job (link)
- Love how precise and clear the examples and explanations are! (link)
- For the low, low price of free, you get pages of pure awesomeness. Chock full of source code examples and clear, concise explanations, TypeScript Deep Dive will help you learn TypeScript development. (link)
- Just a big thank you! Best TypeScript 2 detailed explanation! (link)
- This gitbook got my project going pronto. Fluent easy read 5 stars. (link)
- I recommend the online #typescript book by @basarat you'll love it.(link)
- I've always found this by @basarat really helpful. (link)
- We must highlight TypeScript Deep Dive, an open source book.(link)
- Great online resource for learning. (link)
- Thank you for putting this book together, and for all your hard work within the TypeScript community. (link)
- TypeScript Deep Dive is one of the best technical texts I've read in a while. (link)
- Thanks @basarat for the TypeScript Deep Dive Book. Help me a lot with my first TypeScript project. (link)
- Thanks to @basarat for this great #typescript learning resource. (link)
- Guyz excellent book on Typescript(@typescriptlang) by @basarat (link)
- Leaning on the legendary @basarat's "TypeScript Deep Dive" book heavily at the moment (link)
- numTimesPointedPeopleToBasaratsTypeScriptBook++; (link)
- A book not only for typescript, a good one for deeper JavaScript knowledge as well. link
- In my new job, we're using @typescriptlang, which I am new to. This is insanely helpful huge thanks, @basarat! link
- Thank you for writing TypeScript Deep Dive. I have learned so much. link
- Loving @basarat's @typescriptlang online book basarat.gitbooks.io/typescript/# loaded with great recipes! link
- Microsoft doc is great already, but if want to "dig deeper" into TypeScript I find this book of great value link
- Thanks, this is a great book 🤓🤓 link
- Deep dive to typescript is awesome in so many levels. i find it very insightful. Thanks link
- @basarat's intro to @typescriptlang is still one of the best going (if not THE best) link
- This is sweet! So many #typescript goodies! link
Get Started
If you are here to read the book online get started.
Translations
Book is completely free so you can copy paste whatever you want without requiring permission. If you have a translation you want me to link here. Send a PR.
Other Options
You can also download one of the Epub, Mobi, or PDF formats from the actions tab by clicking on the latest build run. You will find the files in the artifacts section.
Special Thanks
All the amazing contributors 🌹
Share
Share URL: https://basarat.gitbook.io/typescript/
Author: Basarat
Source Code: https://github.com/basarat/typescript-book/
License: View license
1620463500
Material Tailwind – CSS Components Library
Have a quick look at this components library created with Tailwind CSS & Material Design standards. It implements React components. A version for use with VueJS & Angular will be available soon. Find out more Tailwind tools .
#material tailwind #tailwind #css