diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..caeab1bc --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +root = true +charset = utf-8 +end_of_line = lf +indent_size = 2 +tab_width = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..81c05ed1 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +*.lockb binary diff=lockb diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md new file mode 100644 index 00000000..1efa3ec7 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug-report.md @@ -0,0 +1,25 @@ +--- +name: 🐞 Bug Report +about: Create a bug report to help us improve Nue +labels: bug +--- + + + +### Describe the Bug + + +### Environment + + +### Minimal Reproduction + + +### Logs & Additional Context + diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 00000000..46d183e5 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,5 @@ +blank_issues_enabled: true +contact_links: + - name: 💬 Discussions + url: https://github.com/nuejs/nue/discussions + about: Use discussions if you have an idea for improvement and asking questions diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md new file mode 100644 index 00000000..d58ed221 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature-request.md @@ -0,0 +1,17 @@ +--- +name: 💡 Feature Request or Improvement +about: Suggest an idea or improvement +labels: new feature, improvement +--- + +### Is your feature request or improvement related to a problem? + + +### Solution you'd like + + +### Alternatives you've considered + + +### Additional context + diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index 2828ffa6..575667a4 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -1,11 +1,9 @@ name: Test -on: +on: push: branches: - master pull_request: - branches: - - master workflow_dispatch: jobs: @@ -15,23 +13,22 @@ jobs: env: - { os: 'ubuntu-22.04', tool: 'bun' } - { os: 'macos-12', tool: 'bun' } - # Windows support for bun install is not implemented yet - # - { os: 'windows-2022', tool: 'bun' } + - { os: 'windows-2022', tool: 'bun' } # - { os: 'ubuntu-22.04', tool: 'node+jest' } # - { os: 'macos-12', tool: 'node+jest' } - { os: 'windows-2022', tool: 'node+jest' } runs-on: ${{ matrix.env.os }} steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 # Testing `bun` - - uses: oven-sh/setup-bun@v1 + - uses: oven-sh/setup-bun@v2 if: ${{ matrix.env.tool == 'bun' }} - name: Install and test with Bun run: | bun -v bun install - bun install --no-save esbuild@^0.19.11 + bun install --no-save esbuild bun test --coverage if: ${{ matrix.env.tool == 'bun' }} @@ -40,7 +37,6 @@ jobs: run: | node -v && npm -v npm install - npm install --no-save jest jest-extended esbuild@^0.19.11 - # https://jestjs.io/docs/ecmascript-modules - node --experimental-vm-modules node_modules/jest/bin/jest --runInBand --coverage + npm install --no-save jest jest-extended esbuild + npm test -- --coverage if: ${{ matrix.env.tool == 'node+jest' }} diff --git a/.gitignore b/.gitignore index 1d2a69b1..b93267f1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,9 @@ .DS_Store node_modules dist +.dist +.env .idea .vscode -_test \ No newline at end of file +_test +coverage diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 782dd2c3..36d44089 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,7 +1,7 @@ # Contributing to Nue -First and foremost: thank you for helping with Nue! ❤️❤️ +First and foremost: Thank you for helping with Nue! ❤️❤️ ### Guidelines @@ -12,9 +12,9 @@ First and foremost: thank you for helping with Nue! ❤️❤️ 3. Please create only one thing per pull request. Easier to validate and merge. And less potential for conflicts. -3. Please add a test case for every bug fix +4. Please add a test case for every bug fix. -3. Please write JavaScript. No TypeScript here, because Nue aims to work as close to web standards as possible. +5. Please write JavaScript. No TypeScript here, because Nue aims to work as close to web standards as possible. ### Formatting @@ -42,7 +42,7 @@ bun test # if using node npm install npm install --no-save jest jest-extended esbuild -node --experimental-vm-modules node_modules/jest/bin/jest --runInBand +npm test ``` diff --git a/bun.lockb b/bun.lockb index a35b249e..f4d42173 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 5d5abdf2..7aadbc11 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,9 @@ { "name": "nue", "version": "0.0.0", - "private": true, "license": "MIT", + "type": "module", + "private": true, "workspaces": [ "packages/*" ], @@ -10,7 +11,13 @@ "bun": ">=1", "node": ">=18" }, + "scripts": { + "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --runInBand" + }, "jest": { - "setupFilesAfterEnv": ["jest-extended/all"] + "setupFilesAfterEnv": [ + "jest-extended/all", + "/setup-jest.js" + ] } } diff --git a/packages/examples/simple-blog/.gitignore b/packages/examples/simple-blog/.gitignore new file mode 100644 index 00000000..3504a2a0 --- /dev/null +++ b/packages/examples/simple-blog/.gitignore @@ -0,0 +1,2 @@ +*.zip +*.gz diff --git a/packages/examples/simple-blog/@global/colors.css b/packages/examples/simple-blog/@global/colors.css new file mode 100644 index 00000000..2e49f764 --- /dev/null +++ b/packages/examples/simple-blog/@global/colors.css @@ -0,0 +1,23 @@ +:root { + + /* slate gray */ + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-300: #d1d5db; + --gray-500: #6b7280; + --gray-800: #1f2937; + --gray-900: #111827; + + /* main color */ + --main-500: #3b82f6; + --main-600: #2563eb; + + /* gradients */ + --pink-gradient: linear-gradient(#e879f9, #ec4899); + --blue-gradient: linear-gradient(#0ea5e9, #67e8f9); + + /* special colors */ + --marker: #ffff7a; +} + + diff --git a/packages/examples/simple-blog/@global/layout.css b/packages/examples/simple-blog/@global/layout.css new file mode 100644 index 00000000..c80e279a --- /dev/null +++ b/packages/examples/simple-blog/@global/layout.css @@ -0,0 +1,67 @@ + +/* all reset/normalization you need */ +*, *::before, *::after { + box-sizing: border-box; +} + +/* consistent whitespace */ +ul, ol ,figure, pre { + margin: 2em 0; +} + +/* page layout */ +body { + max-width: 1000px; + margin: 0 auto; + padding: 2% 5%; + + > header nav { + justify-content: space-between; + margin-bottom: 4rem; + display: flex; + + /* avatar image */ + > a:first-child { + background: url(/img/avatar-rounded.jpg) 0 50% no-repeat; + background-size: 2em; + padding-left: 2.5em; + } + + a { padding: 1em 0 } + } + + /* content area: hero and sections */ + article { + > header { margin-bottom: 2rem } + + > section { + max-width: 650px; + margin: 0 auto; + } + } + + /* global footer */ + > footer { + border-top: 1px solid var(--gray-200); + justify-content: space-between; + margin-top: 6rem; + padding: 1rem 0; + display: flex; + + /* social icons */ + > :last-child { + display: flex; + gap: .5em; + a:hover { + transform: scale(1.1) + } + } + } +} + + + + + + + diff --git a/packages/examples/simple-blog/@global/typography.css b/packages/examples/simple-blog/@global/typography.css new file mode 100644 index 00000000..54428ca4 --- /dev/null +++ b/packages/examples/simple-blog/@global/typography.css @@ -0,0 +1,46 @@ + +body { + font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Segoe UI, Roboto; +} + +/* heading and subtitle */ +h1 { + letter-spacing: -0.03em; + font-size: 2.6rem; + + &, + p { + text-align: center; + text-wrap: balance; + max-width: 40rem; + margin: 0 auto .2em; + } + + + p { + font-size: 1.15em; + font-weight: 300; + margin-bottom: 2em; + } +} + +/* links */ +a { + text-decoration: none; + + /* navigational links */ + nav & { + font-weight: 500; + color: var(--gray-900); + + &[aria-selected] { + text-decoration: 2px underline var(--main-500); + text-underline-offset: 8px; + } + } +} + +/* bulk content */ +p, li { + color: var(--gray-500); + line-height: 1.65; + strong { color: var(--gray-800) } +} \ No newline at end of file diff --git a/packages/examples/simple-blog/@library/cards.css b/packages/examples/simple-blog/@library/cards.css new file mode 100644 index 00000000..cbbd3dd0 --- /dev/null +++ b/packages/examples/simple-blog/@library/cards.css @@ -0,0 +1,21 @@ + +.pink, .blue { + background-image: var(--pink-gradient); + padding: 3em 0 0 3em; + border-radius: .8em; + overflow: hidden; + margin: 1.5em 0 2em; + + pre { + padding: 2em; + margin: 0; + } + + > * { + border-radius: .6em 0 0 0; + } +} + +.blue { + background-image: var(--blue-gradient); +} diff --git a/packages/examples/simple-blog/@library/content.css b/packages/examples/simple-blog/@library/content.css new file mode 100644 index 00000000..4e8c0d64 --- /dev/null +++ b/packages/examples/simple-blog/@library/content.css @@ -0,0 +1,64 @@ + +/* Styling for technical content */ + +article a { + text-decoration: underline var(--main-500) 1px; + text-underline-offset: 3px; + color: var(--gray-800); + font-weight: 500; + + &:hover { + text-decoration-color: var(--main-600); + text-decoration-thickness: 2px; + color: black; + } +} + +h2 { + color: var(--gray-900); + font-size: 1.1rem; + margin: 4em 0 0; + font-weight: 500; +} + +li { + text-wrap: balance; + margin-bottom: 1em; +} + +/* syntax highligted code */ +pre { + --glow-padding: 2em; + font-size: 105%; +} + +/* images and code blocks */ +img, pre { + border-radius: 8px; +} + +img { + max-width: 100%; + height: auto; +} + +blockquote { + border-left: 5px solid var(--gray-900); + text-wrap: balance; + padding-left: 1.5em; + margin: 2.5em 0; + + p { + font-weight: 600; + line-height: 1.5; + font-size: 140%; + color: var(--gray-900); + } + + strong { + background-color: var(--marker); + font-weight: inherit; + padding: .1em .2em; + margin-inline: -.2em; + } +} diff --git a/packages/examples/simple-blog/@library/forms.css b/packages/examples/simple-blog/@library/forms.css new file mode 100644 index 00000000..a5470a41 --- /dev/null +++ b/packages/examples/simple-blog/@library/forms.css @@ -0,0 +1,56 @@ + + +/* basic form styling */ +:focus-visible { + outline: 3px solid var(--gray-100); + border-color: var(--main-500); + outline-offset: 1px; +} + + +label { + display: block; + margin-bottom: 1em; + span { + font-weight: 500; + margin-bottom: .3em; + display: block; + } +} + +input, textarea { + border: 1px solid var(--gray-200); + font-family: inherit; + font-size: inherit; + padding: .7em 1em; + border-radius: 4px; + width: 100%; +} + +textarea { + form-sizing: normal; + min-height: 80px; +} + +button, [role=button] { + background-color: var(--main-500); + font-family: inherit; + font-size: inherit; + width: 100%; + padding: .75em 1.5em; + border-radius: 4px; + font-weight: 550; + cursor: pointer; + color: white; + border: 0; + + &:hover { + background-color: var(--main-600); + } + + &:active { + transform: translateY(1px); + } +} + + diff --git a/packages/examples/simple-blog/@library/gallery.css b/packages/examples/simple-blog/@library/gallery.css new file mode 100644 index 00000000..c2a1b7a9 --- /dev/null +++ b/packages/examples/simple-blog/@library/gallery.css @@ -0,0 +1,44 @@ + + + +ul:has(time) { + list-style: none; + margin: 4em 0; + padding: 0;; + + + li { + margin-bottom: 3em; + } + + figure { + transition: transform .1s; + align-items: center; + display: flex; + margin: 1em 0; + gap: 3rem; + margin: 0; + &:hover { transform: scale(1.01) } + } + + time { + color: var(--gray-500); + font-weight: 300; + font-size: 85%; + } + + h2 { + color: var(--gray-800); + text-wrap: balance; + font-size: 1.05em; + font-weight: 500; + line-height: 1.5; + margin: .3em 0 0; + } + + img { + max-width: 12em; + border-radius: 4px; + } +} + diff --git a/packages/examples/simple-blog/@library/motion.css b/packages/examples/simple-blog/@library/motion.css new file mode 100644 index 00000000..c334a852 --- /dev/null +++ b/packages/examples/simple-blog/@library/motion.css @@ -0,0 +1,30 @@ + +/* motion setup */ +header, h1, h1 + p, h1 + p + * { + transition: opacity .5s, filter .7s; + filter: none; + opacity: 1; + + @starting-style { + filter: blur(10px); + opacity: 0; + } +} + +/* apply motion in sequence */ +h1 { transition-delay: .1s } +h1 + p { transition-delay: .2s } +h1 + p + * { transition-delay: .4s } + + +/* view transitions */ +article { + view-transition-name: article; +} + +/* view transition (scales down the old page) */ +::view-transition-old(article) { + transform: scale(1.2) translateY(2em); + transition: .8s; +} + diff --git a/packages/examples/simple-blog/README.md b/packages/examples/simple-blog/README.md new file mode 100644 index 00000000..2564629b --- /dev/null +++ b/packages/examples/simple-blog/README.md @@ -0,0 +1,16 @@ + +# Nue website template + +The default website template for `nue create` command: + + + + +### Links + +* [Template tutorial](https://nuejs.org/docs/tutorial.html) + +* [Live version](https://simple-blog.nuejs.org/) + +* [Installing Nue](https://nuejs.org/docs/installation.html) + diff --git a/packages/examples/simple-blog/blog/blog.yaml b/packages/examples/simple-blog/blog/blog.yaml new file mode 100644 index 00000000..85fee40c --- /dev/null +++ b/packages/examples/simple-blog/blog/blog.yaml @@ -0,0 +1,2 @@ + +include: [ content, cards, motion ] \ No newline at end of file diff --git a/packages/examples/simple-blog/blog/class-naming-strategies.md b/packages/examples/simple-blog/blog/class-naming-strategies.md new file mode 100644 index 00000000..8bec6af3 --- /dev/null +++ b/packages/examples/simple-blog/blog/class-naming-strategies.md @@ -0,0 +1,73 @@ +--- +title: CSS class naming strategies for scaleable dasboard design +og: img/dashboard-3.png +thumb: img/dashboard-thumb.png +date: 2024-03-13 +credits: ui8 +--- + +In web development, CSS and design work hand-in-hand to create compelling user experiences. CSS brings designs to life digitally, translating visual mockups into actual rendered elements. But CSS also informs the design process itself. Understanding its capabilities and limitations allows designers to craft effective layouts and interfaces. + + +## Keep them short + +When designing for the web, keeping CSS in mind from the start prevents frustration down the road. For example, layered graphical elements must be broken down into achievable HTML components. Typography and color schemes are also heavily influenced by CSS possibilities. + + +Designers should have a strong handle on core CSS concepts like the box model, selectors, specificity and inheritance. + +> When designing for the web, keeping CSS in mind from the start prevents frustration down the road. For example, **typography and color schemes are heavily influenced by CSS** and layered graphical elements must be broken down into achievable HTML components. + + +``` js.blue +function toggleAttr(el, name, flag) { + flag ? el.setAttribute(name, 1) : el.removeAttribute(name) +} + +function restoreTabs(flags) { + const panels = $$('[role=tabpanel]') + + $$('[role=tab]').forEach((el, i) => { + toggleAttr(el, 'aria-selected', flags[i]) + toggleAttr(panels[i], 'hidden', !flags[i]) + }) +} +``` + + +## Exploit the power of selectors + +On the development side, CSS itself involves visual design skills.Bringing a layout to life requires not just coding, but typographic, spacing and color sensibilities. CSS skills give developers control over the final look and feel. + + +[! img/dashboard-1.png] + +Overall, CSS is a uniquely visual language, with a direct impact on user-facing design. By embracing its connection to the design process, both designers and developers can build interfaces that are engaging and "CSS-native". The closer these roles work together, the better the end result. (edited) + +``` .pink +.pink { + background-image: linear-gradient(#e879f9, #ec4899); + padding: 3em 0 0 3em; + border-radius: .8em; + overflow: hidden; + margin: 1.5em 0 2em; + + pre { + padding: 2em; + margin: 0; + } +} +``` + +## Conclusion + +In conclusion, thoughtfully naming CSS classes, IDs, and other selectors is an important part of keeping stylesheets scalable and maintainable. Use semantic, descriptive names that communicate what a selector is styling. Implement methodical naming conventions and structures for better organization + +[! img/dashboard-2.png] + +Avoid repetitive and overly specific names by separating structural styles from visual ones. And don’t be afraid to chain multiple classes together for more modular and flexible selectors. + + + + + diff --git a/packages/examples/simple-blog/blog/color-strategies.md b/packages/examples/simple-blog/blog/color-strategies.md new file mode 100644 index 00000000..d492356a --- /dev/null +++ b/packages/examples/simple-blog/blog/color-strategies.md @@ -0,0 +1,83 @@ +--- +title: Practical strategies for using colors in CSS +credits: BalkanBrothers +thumb: img/colors-thumb.png +og: img/colors-2.jpg +date: 2024-05-23 +--- + +Working with color is one of the most fun parts of web design. But if you don't use them right in your CSS code, colors can also tank a site's usability and accessibility. In this post, we'll explore simple, real-world tips for effectively using color in your stylesheets. + + +``` css .blue +/* Tab styling */ +[role=tablist] { + background: rgba(0, 0, 0, .7); + background-size: 3.5em; +> padding: .7em 1.3em 0; +> overflow: hidden; +> display: flex; + + a { + color: #fff9; + padding: .2em 1em .4em; + font-size: 90%; + cursor: pointer; + } +} +``` + + +## How to create a foolproof color palette + +Choosing the right colors for a website can be tricky. Get one wrong and your entire design can feel off. Luckily, there are some simple strategies to create a foolproof web color palette: + +- **Limit your palette** - Stick to just 2-4 core colors for most sites. Too many colors look disjointed. + +- **Focus on one dominant hue** - Pick one main color and derive the rest of the palette from it. This creates cohesion. + +- **Use color wheel relationships** - Choose adjacent or complementary colors on the wheel for built-in harmony. + +- **Consider tone and contrast** - Include light, medium and dark tones for visual interest. Test contrast for accessibility. + + +[image img/colors-1.png] + foo: bar + +Considering the different formatting options, you can optimize CSS color usage for any need. Use hex for one-off values, RGBA where you need opacity control, HSL for color adjustments, variables for theming, and preprocessor operations for transformations. With the right format, implementing colors in CSS becomes much more flexible and manageable. + +Following these simple tips will ensure you have a tightly edited, flexible, and foolproof palette ready for your next web project. + +> Focus on one dominant hue - Pick one main color and derive the rest of the palette from it. This creates cohesion. + + +``` .pink +/* Tab styling */ +[role=tablist] { + background: rgba(0, 0, 0, .7); + background-size: 3.5em; + padding: .7em 1.3em 0; + overflow: hidden; + display: flex; +} +``` + + +## The best CSS color formats for different needs + +When adding color in CSS, you have a few formatting options to choose from. Each has their own strengths depending on the use case. For specifying plain color values, hex codes are the usual default. + + +[! img/colors-3.png] + +They allow for millions of specific color values in a compact 6-character string. But RGB and HSL values also have advantages. RGB provides an easy way to adjust opacity with the alpha channel. And HSL makes it simple to tweak hue, saturation and lightness independently. + +For colors tied to theme values, CSS custom properties (variables) are extremely useful. You can update colors site-wide just by changing the variable values. Preprocessors like Sass take this a step further, allowing color operations like lightening and darkening right in the stylesheet. + + + + + + + + diff --git a/packages/examples/simple-blog/blog/hero.html b/packages/examples/simple-blog/blog/hero.html new file mode 100644 index 00000000..c96d45f5 --- /dev/null +++ b/packages/examples/simple-blog/blog/hero.html @@ -0,0 +1,10 @@ + +
+

{ title }

+

+ • Content by AI • + Photo credits: { credits } +

+ + Hero image for { title } +
\ No newline at end of file diff --git a/packages/examples/simple-blog/blog/img/colors-1.png b/packages/examples/simple-blog/blog/img/colors-1.png new file mode 100644 index 00000000..76f9fd1d Binary files /dev/null and b/packages/examples/simple-blog/blog/img/colors-1.png differ diff --git a/packages/examples/simple-blog/blog/img/colors-2.jpg b/packages/examples/simple-blog/blog/img/colors-2.jpg new file mode 100644 index 00000000..0c295f1c Binary files /dev/null and b/packages/examples/simple-blog/blog/img/colors-2.jpg differ diff --git a/packages/examples/simple-blog/blog/img/colors-3.png b/packages/examples/simple-blog/blog/img/colors-3.png new file mode 100644 index 00000000..1992f5fc Binary files /dev/null and b/packages/examples/simple-blog/blog/img/colors-3.png differ diff --git a/packages/examples/simple-blog/blog/img/colors-thumb.png b/packages/examples/simple-blog/blog/img/colors-thumb.png new file mode 100644 index 00000000..0b4c96e8 Binary files /dev/null and b/packages/examples/simple-blog/blog/img/colors-thumb.png differ diff --git a/packages/examples/simple-blog/blog/img/dashboard-1.png b/packages/examples/simple-blog/blog/img/dashboard-1.png new file mode 100644 index 00000000..a5163c20 Binary files /dev/null and b/packages/examples/simple-blog/blog/img/dashboard-1.png differ diff --git a/packages/examples/simple-blog/blog/img/dashboard-2.png b/packages/examples/simple-blog/blog/img/dashboard-2.png new file mode 100644 index 00000000..a61fdc3a Binary files /dev/null and b/packages/examples/simple-blog/blog/img/dashboard-2.png differ diff --git a/packages/examples/simple-blog/blog/img/dashboard-3.png b/packages/examples/simple-blog/blog/img/dashboard-3.png new file mode 100644 index 00000000..0dcdcaff Binary files /dev/null and b/packages/examples/simple-blog/blog/img/dashboard-3.png differ diff --git a/packages/examples/simple-blog/blog/img/dashboard-thumb.png b/packages/examples/simple-blog/blog/img/dashboard-thumb.png new file mode 100644 index 00000000..520a395f Binary files /dev/null and b/packages/examples/simple-blog/blog/img/dashboard-thumb.png differ diff --git a/packages/examples/simple-blog/blog/img/ui-1.png b/packages/examples/simple-blog/blog/img/ui-1.png new file mode 100644 index 00000000..1f08d6fb Binary files /dev/null and b/packages/examples/simple-blog/blog/img/ui-1.png differ diff --git a/packages/examples/simple-blog/blog/img/ui-2.png b/packages/examples/simple-blog/blog/img/ui-2.png new file mode 100644 index 00000000..75196b78 Binary files /dev/null and b/packages/examples/simple-blog/blog/img/ui-2.png differ diff --git a/packages/examples/simple-blog/blog/img/ui-3.png b/packages/examples/simple-blog/blog/img/ui-3.png new file mode 100644 index 00000000..a2ca1a5f Binary files /dev/null and b/packages/examples/simple-blog/blog/img/ui-3.png differ diff --git a/packages/examples/simple-blog/blog/img/ui-thumb.png b/packages/examples/simple-blog/blog/img/ui-thumb.png new file mode 100644 index 00000000..c448061f Binary files /dev/null and b/packages/examples/simple-blog/blog/img/ui-thumb.png differ diff --git a/packages/examples/simple-blog/blog/scaleable-design-system.md b/packages/examples/simple-blog/blog/scaleable-design-system.md new file mode 100644 index 00000000..e87ade9d --- /dev/null +++ b/packages/examples/simple-blog/blog/scaleable-design-system.md @@ -0,0 +1,81 @@ +--- +title: Crafting a scaleable CSS design system +thumb: img/ui-thumb.png +og: img/ui-1.png +date: 2024-09-15 +credits: vlockn +--- + +Design systems are key to managing code at scale, but creating one that’s flexible and maintainable takes work. A key to success is to break UI elements into reusable, abstracted components. When building a CSS design system, focus on these areas: + +1. **Respect constraints**: Construct stylistic foundations for typography, [color palettes](color-strategies.html), spacing, etc. But don’t be overly prescriptive. Leave room for one-off deviations. + +1. **Reusable components**: Break UI elements into reusable, abstracted components. A button should be built independently from where it’s used. This promotes consistency across properties and apps. + +3. **Clear naming conventions**: Utilize consistent, semantic naming for classes, variables, mixins, etc. This improves developer efficiency and organization. + + +## Keep things minimal +It's important to keep things lightweight: Write CSS that’s DRY, separating structure from skin using methodologies like BEM. Don't over-engineer - keep logic simple. + +[code numbered="true"] +
+ + + -
{{ caption }}
+ + +

{{ caption }}

+ + +
+ + +Use gradual rollouts: Introduce changes incrementally over time. Don't rebuild everything at once. Maintain backwards compatibility. + + +By investing in these areas, you can craft a design system that brings cohesion and consistency to products, while still being flexible enough to allow for creative solutions. The ultimate goal is scalable, maintainable CSS that matches the ever-evolving needs of organizations and developers alike. Put in the work upfront, and your system will pay dividends down the road. + +[! img/ui-2.png] + +Once a painting is underway, digital photography can also assist the process. Taking in-progress photos allows you to see compositions with fresh eyes. You can spot areas for improvement, mistakes that need correcting, or places that would benefit from increased attention. Like having an undo button, it gives the opportunity for editing mid-painting. + +> Put in the work upfront, and your system will pay dividends down the road. + + +``` .blue +
+ + +> + +