diff --git a/packages/examples/simple-blog/@global/layout.html b/packages/examples/simple-blog/@global/layout.html index 9a39bb02..993e3808 100644 --- a/packages/examples/simple-blog/@global/layout.html +++ b/packages/examples/simple-blog/@global/layout.html @@ -4,4 +4,4 @@ \ No newline at end of file + diff --git a/packages/examples/simple-blog/README.md b/packages/examples/simple-blog/README.md index ebfef6b6..eb8cd1ba 100644 --- a/packages/examples/simple-blog/README.md +++ b/packages/examples/simple-blog/README.md @@ -3,7 +3,8 @@ The default website template for `nue create` command: - Blog screenshots + Blog screenshots + ## Links diff --git a/packages/examples/simple-blog/blog/blog.yaml b/packages/examples/simple-blog/blog/blog.yaml index 85fee40c..1d05f34d 100644 --- a/packages/examples/simple-blog/blog/blog.yaml +++ b/packages/examples/simple-blog/blog/blog.yaml @@ -1,2 +1,2 @@ -include: [ content, cards, motion ] \ No newline at end of file +include: [ content, cards, motion ] diff --git a/packages/examples/simple-blog/blog/class-naming-strategies.md b/packages/examples/simple-blog/blog/class-naming-strategies.md index 4f6151e3..3979914b 100644 --- a/packages/examples/simple-blog/blog/class-naming-strategies.md +++ b/packages/examples/simple-blog/blog/class-naming-strategies.md @@ -14,7 +14,7 @@ When designing for the web, keeping CSS in mind from the start prevents frustrat 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. +> 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) { @@ -33,7 +33,7 @@ function restoreTabs(flags) { ## 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. +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] @@ -56,7 +56,7 @@ Overall, CSS is a uniquely visual language, with a direct impact on user-facing ## 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 +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] diff --git a/packages/examples/simple-blog/blog/color-strategies.md b/packages/examples/simple-blog/blog/color-strategies.md index 651165a0..d00f0d25 100644 --- a/packages/examples/simple-blog/blog/color-strategies.md +++ b/packages/examples/simple-blog/blog/color-strategies.md @@ -30,21 +30,21 @@ Working with color is one of the most fun parts of web design. But if you don't 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. +- **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. +- **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. +- **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. +- **Consider tone and contrast** — Include light, medium and dark tones for visual interest. Test contrast for accessibility. [image img/colors-1.png] -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. +Considering the different formatting options, you can optimize CSS color usage for any need. Use hex for one-off values, RGBA where you require 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. +> Focus on one dominant hue — Pick one main color and derive the rest of the palette from it. This creates cohesion. ``` .pink /* Tab styling */ diff --git a/packages/examples/simple-blog/blog/hero.html b/packages/examples/simple-blog/blog/hero.html index 58ddcd2d..b77acabf 100644 --- a/packages/examples/simple-blog/blog/hero.html +++ b/packages/examples/simple-blog/blog/hero.html @@ -6,4 +6,4 @@

{ title }

Hero image for { title } - \ No newline at end of file + diff --git a/packages/examples/simple-blog/blog/scaleable-design-system.md b/packages/examples/simple-blog/blog/scaleable-design-system.md index c02475cd..4034b8fb 100644 --- a/packages/examples/simple-blog/blog/scaleable-design-system.md +++ b/packages/examples/simple-blog/blog/scaleable-design-system.md @@ -10,13 +10,13 @@ Design systems are key to managing code at scale, but creating one that’s flex 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. -2. **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. +2. **Reusable components**: Break UI elements into reusable, abstracted components. A button should be built independently of 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. +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. ``` html numbered
@@ -40,7 +40,7 @@ By investing in these areas, you can craft a design system that brings cohesion [! 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. +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 require 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. @@ -68,6 +68,6 @@ Once a painting is underway, digital photography can also assist the process. Ta 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. -[image img/ui-3.png] +[! img/ui-3.png] Using color effectively is a vital part of web design. When planned intentionally, your color palette creates visual harmony across your website or application. A cohesive color scheme boosts recognition of your brand, while making the interface feel cohesive. diff --git a/packages/examples/simple-blog/index.md b/packages/examples/simple-blog/index.md index 28558881..2f67e8b6 100644 --- a/packages/examples/simple-blog/index.md +++ b/packages/examples/simple-blog/index.md @@ -5,6 +5,6 @@ content_collection: blog # Minimalist, UX developer, designer, urban explorer -I'm Emma Bennett, an user experience developer from Berlin. I build websites that are exceptionally well designed — inside, and outside. +I'm Emma Bennett, a user experience developer from Berlin. I build websites that are exceptionally well-designed — inside, and outside. [page-list] diff --git a/packages/examples/simple-blog/site.yaml b/packages/examples/simple-blog/site.yaml index 0bf2fb5c..01501853 100644 --- a/packages/examples/simple-blog/site.yaml +++ b/packages/examples/simple-blog/site.yaml @@ -41,6 +41,3 @@ navigation: url: //linkedin.com/in/tipiirai alt: LinkedIn profile size: 22 x 22 - - - diff --git a/packages/nuejs.org/blog/introducing-glow/index.md b/packages/nuejs.org/blog/introducing-glow/index.md index c519dcb5..c6cd9172 100644 --- a/packages/nuejs.org/blog/introducing-glow/index.md +++ b/packages/nuejs.org/blog/introducing-glow/index.md @@ -20,7 +20,7 @@ Today we're launching *Glow* — a new take on syntax highlighting: *Glow is simple*: With just a few CSS variables, Glow adapts all languages to match your brand colors effortlessly. -*Glow is small*: Glow is significantly smaller than mainstream alternatives—around [5KB](//pkg-size.dev/nue-glow) compared to [5MB](//pkg-size.dev/shiki). It’s the most compact implementation available. +*Glow is small*: Glow is significantly smaller than mainstream alternatives — around [5KB](//pkg-size.dev/nue-glow) compared to [5MB](//pkg-size.dev/shiki). It’s the most compact implementation available. [image.tall] @@ -67,7 +67,7 @@ Contrast this to grammar-aware theming systems, like Shiki and *Prism*, where a ## Unlimited possibilities -Glow's unique, [classless design system](/docs/syntax-highlighting.html#html-markup) gives you line numbers, selections, error highlights, insertions, deletions, and much much more. +Glow's unique, [classless design system](/docs/syntax-highlighting.html#html-markup) gives you line numbers, selections, error highlights, insertions, deletions, and much, much more. ``` .gradient.sky numbered