styled-jsx VS antd

You'd rather use this over tailwind? Na...

styled-jsx -> A library with a lot of similar features like styled-components. Has some extra features here and there.

This isn't a new idea. CSS in JS is obviously a thing, but that usually implies having component code with CSS right alongside it in some sort of JS based syntax. There's also JSS which is a library for writing CSS with JS.

The CSS we'll use for the Gantt chart is included in the starter code. We've used Styled JSX, which comes with Next.js, to write scoped-styled components. There are some global styles in styles/globals.js. These global styles are added to our app in the Layout component in the components folder. The entire app is wrapped in this Layout component in the _app.js file, which is in the pages folder.

Styled JSX is what we're using at work right now, since we're using Next.js and it comes with this out of the box. We're actually using both SCSS modules for static styles and Styled JSX for dynamic styles. It's been great so far.

// schema.json { "$schema": "http://json-schema.org/schema", "cli": "nx", "$id": "ReactLibrary", "title": "", "type": "object", "properties": { "name": { "type": "string", "description": "Library name", "$default": { "$source": "argv", "index": 0 }, "x-prompt": "What name would you like to use for the library?", "pattern": "^[a-zA-Z].*$" }, "directory": { "type": "string", "description": "A directory where the lib is placed.", "alias": "dir" }, "domain": { "description": "Domain where this library belongs.", "type": "string", "default": "none", "alias": "dom", "x-prompt": { "message": "Which domain this library belongs?", "type": "list", "items": [ { "value": "web", "label": "Web" }, { "value": "common", "label": "Common" } ] } }, "scope": { "type": "string", "description": "A scope for the lib.", "alias": "sc" }, "type": { "description": "Library type", "type": "string", "alias": "t", "x-prompt": { "message": "Select library type?", "type": "list", "items": [ { "value": "data", "label": "Data" }, { "value": "model", "label": "Model" }, { "value": "util", "label": "Util" }, { "value": "feature", "label": "Feature" }, { "value": "ui", "label": "Ui" } ] } }, "style": { "description": "The file extension to be used for style files.", "type": "string", "default": "none", "alias": "s", "x-prompt": { "message": "Which stylesheet format would you like to use?", "type": "list", "items": [ { "value": "css", "label": "CSS" }, { "value": "scss", "label": "SASS(.scss) [ http://sass-lang.com ]" }, { "value": "styl", "label": "Stylus(.styl) [ http://stylus-lang.com ]" }, { "value": "less", "label": "LESS [ http://lesscss.org ]" }, { "value": "styled-components", "label": "styled-components [ https://styled-components.com ]" }, { "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, { "value": "styled-jsx", "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" }, { "value": "none", "label": "None" } ] } }, "linter": { "description": "The tool to use for running lint checks.", "type": "string", "enum": ["eslint", "tslint"], "default": "eslint" }, "unitTestRunner": { "type": "string", "enum": ["jest", "none"], "description": "Test runner to use for unit tests.", "default": "jest" }, "skipFormat": { "description": "Skip formatting files.", "type": "boolean", "default": false }, "skipTsConfig": { "type": "boolean", "default": false, "description": "Do not update `tsconfig.json` for development experience." }, "pascalCaseFiles": { "type": "boolean", "description": "Use pascal case component file name (e.g. `App.tsx`).", "alias": "P", "default": false }, "routing": { "type": "boolean", "description": "Generate library with routes." }, "appProject": { "type": "string", "description": "The application project to add the library route to.", "alias": "a" }, "publishable": { "type": "boolean", "description": "Create a publishable library." }, "buildable": { "type": "boolean", "default": false, "description": "Generate a buildable library." }, "importPath": { "type": "string", "description": "The library name used to import it, like `@myorg/my-awesome-lib`." }, "component": { "type": "boolean", "description": "Generate a default component.", "default": true }, "js": { "type": "boolean", "description": "Generate JavaScript files rather than TypeScript files.", "default": false }, "globalCss": { "type": "boolean", "description": "When `true`, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is `*.css` rather than `*.module.css`).", "default": false }, "strict": { "type": "boolean", "description": "Whether to enable tsconfig strict mode or not.", "default": true }, "setParserOptionsProject": { "type": "boolean", "description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.", "default": false }, "standaloneConfig": { "description": "Split the project configuration into `/project.json` rather than including it inside `workspace.json`.", "type": "boolean" }, "compiler": { "type": "string", "enum": ["babel", "swc"], "default": "swc", "description": "Which compiler to use." } }, "required": ["name", "type", "scope", "domain"] }

The previous three methods covered the best styling options if you prefer Utility CSS. But perhaps you are more of a CSS-in-JS kind of person. In which case, Styled-JSX might be up your alley.

Ant Design

Official Website: https://ant.design/

Ant Design (antd) is a React component library for building beautiful and modern user interfaces. It comes with a collection of prebuilt, enterprise-level UI components. To install Ant Design, use the command below:

🔍 Site ⭐ GitHub

(I'm a frontend dev, but I came into the design side only later in my career, after having started as a full-stack programmer.)

I think this book is probably the single best resource I've seen on the topic: https://www.refactoringui.com/

It's a really easy-to-use format (one quick tip on each page, with clear examples).

It's from the people who made Tailwind, a CSS framework that's basically a reimagining of Bootcamp for the Javascript/component era.

Check out some of their templates: https://tailwindui.com/templates

These are lookalike "modern" designs that you can pay to use, or just draw inspiration from. Imitation == flattery and all that.

Along similar lines, check out the free Next.js templates: https://vercel.com/templates/next.js

If you want to build up from components instead, Tailwind offers a component library too: https://tailwindui.com/components

For React, I prefer the astoundingly good MUI framework (amazing components with lots of customizability, a good enough default look, and great documentation): https://mui.com/ If you end up going this route, using their Figma kit (https://mui.com/store/items/figma-react/) plus the Refactoring UI book from above should allow you to whip up a pretty standard-looking, "pretty enough" design in very little time. And then implementing it using the actual MUI lib would just take a few days.

There's also Ant Design: https://ant.design/

And Chakra UI: https://chakra-ui.com/

-----------

For more theoretical stuff (i.e., less visual but still very valuable), the UX research group Nielsen Norman still has a treasure trove of valuable advice: https://www.nngroup.com/articles/top-ten-guidelines-for-home...

You should know the basics of accessibility (beyond general usability, this alos means alt text, header levels, contrast ratios, readability, screen readers, keyboard navigation, special considerations for the hard of sight and hearing, etc.): https://www.w3.org/WAI/standards-guidelines/wcag/ or at least use an easy checklist tool like Microsoft's WCAG analyzer: https://accessibilityinsights.io/

Ant Design is a fantastic toolkit for React developers. It's like having a box of building blocks that are not only stylish but also super functional. With Ant Design, you get a collection of pre-made React components that you can easily put together to create a sleek and modern look for your web projects. Whether you're a beginner or a seasoned developer, Ant Design simplifies the process of making your web applications both visually appealing and user-friendly. It's a go-to choice for those who want a seamless blend of design and functionality in their React applications.

The backend UI is a combination of React + MUI + Ant Design.

Material-UI Ant Design Chakra UI Semantic UI React

ant-design -> Less configurable. Limited but nice components.

GitHub stars: 88k GitHub link: https://github.com/ant-design/ant-design Documentation: https://ant.design/docs/react/getting-started