content: bootstrap, tailwind

src/consts.ts

@@ -47,12 +47,13 @@ export const CONTENT_SLUGS = [
   'html/web-resource',
   'web-server/deploy-pages',
   'css/responsive-design',
+  'library/bootstrap',
+  'library/tailwind',
   'css/form',
   'css/position',
   'css/transform',
   'css/transition',
   'css/animation',
-  'library/introduction-bootstrap',
   'extra/exercises',
   'extra/next-steps',
 ];

src/content/classnotes/library/bootstrap/index.mdx

@@ -0,0 +1,172 @@
+---
+title: Bootstrap
+---
+
+import CodeHtmlPreview from '../../../../components/CodeHtmlPreview.astro';
+import CodeHtmlCssPreview from '../../../../components/CodeHtmlCssPreview.astro';
+import CodePreview from '../../../../components/CodePreview.astro';
+
+# {frontmatter.title}
+
+## CDN
+
+[Quick Start](https://getbootstrap.com/docs/5.3/getting-started/introduction/#quick-start)
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/cdn" onlyBody={false} />
+
+## Content
+
+[Reboot](https://getbootstrap.com/docs/5.3/content/reboot/) > Paragraphs
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/content-reboot-paragraphs" />
+
+[Reboot](https://getbootstrap.com/docs/5.3/content/reboot/) > Headings
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/content-reboot-headings" />
+
+[Reboot](https://getbootstrap.com/docs/5.3/content/reboot/) > Links
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/content-reboot-links" />
+
+[Tables](https://getbootstrap.com/docs/5.3/content/tables/) > default table
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/content-tables-default" />
+
+[Tables](https://getbootstrap.com/docs/5.3/content/tables/) > .table
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/content-tables-table" />
+
+[Tables](https://getbootstrap.com/docs/5.3/content/tables/) > .table-striped
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/content-tables-striped" class="border-8 border-sky-500" />
+
+## Helpers
+
+[Color & background](https://getbootstrap.com/docs/5.3/helpers/color-background/) > .text-\{color\}
+
+color: primary, secondary, success, danger, warning, info, light, dark
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/helpers-color-text" />
+
+[Color & background](https://getbootstrap.com/docs/5.3/helpers/color-background/) > .bg-\{color\}
+
+color: primary, secondary, success, danger, warning, info, light, dark
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/helpers-color-bg" />
+
+[Color & background](https://getbootstrap.com/docs/5.3/helpers/color-background/) > .text-bg-\{color\}
+
+color: primary, secondary, success, danger, warning, info, light, dark
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/helpers-color-text-bg" />
+
+## Utilities
+
+[Text](https://getbootstrap.com/docs/5.3/utilities/text/) > Text alignment: .text-start, .text-center, .text-end
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/utilities-text-alignment" />
+
+[Text](https://getbootstrap.com/docs/5.3/utilities/text/) > Text transform: .text-lowercase, .text-uppercase, .text-capitalize
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/utilities-text-transform" />
+
+[Text](https://getbootstrap.com/docs/5.3/utilities/text/) > Font weight and italics: .fw-bold, .fst-italic
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/utilities-font-weight-italic" />
+
+[Text](https://getbootstrap.com/docs/5.3/utilities/text/) > Font size: .fs-1, ..., .fs-6
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/utilities-font-size" />
+
+[Spacing](https://getbootstrap.com/docs/5.3/utilities/spacing/) > \{property\}\{sides\}-\{size\} & \{property\}\{sides\}-\{breakpoint\}-\{size\}
+
+property: m, p
+
+sides: t, b, s, e, x, y
+
+size: 0, 1, 2, 3, 4, 5, auto
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/utilities-spacing" />
+
+[Display](https://getbootstrap.com/docs/5.3/utilities/display/) > .d-\{value\}, .d-\{breakpoint\}-\{value\}
+
+value: none, inline, inline-block, block, grid, inline-grid, table, table-cell, table-row, flex, inline-flex
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/utilities-display" />
+
+[Visibility](https://getbootstrap.com/docs/5.3/utilities/visibility/) > .visible, .invisible
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/utilities-visibility" />
+
+## Components
+
+[Navbar](https://getbootstrap.com/docs/5.3/components-navbar)
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/components-navbar/" />
+
+[Card](https://getbootstrap.com/docs/5.3/components/card/) > Basic card
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/components-card-simple" />
+
+[Card](https://getbootstrap.com/docs/5.3/components/card/) > Header and Footer
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/components-card-header-footer" />
+
+[Card](https://getbootstrap.com/docs/5.3/components/card/) > Grid
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/components-card-grid" />
+
+## Layout
+
+[Breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/)
+
+| Breakpoint        | Class infix | Dimensions |
+| ----------------- | ----------- | ---------- |
+| Extra small       | None        | \<576px    |
+| Small             | sm          | ≥576px     |
+| Medium            | md          | ≥768px     |
+| Large             | lg          | ≥992px     |
+| Extra large       | xl          | ≥1200px    |
+| Extra extra large | xxl         | ≥1400px    |
+
+[Containers](https://getbootstrap.com/docs/5.3/layout/containers/)
+
+|                  | xs&lt;576px | sm≥576px | md≥768px | lg≥992px | xl≥1200px | xxl≥1400px |
+|------------------|-----------|----------|----------|----------|-----------|------------|
+| .container       | 100%      | 540px    | 720px    | 960px    | 1140px    | 1320px     |
+| .container-sm    | 100%      | 540px    | 720px    | 960px    | 1140px    | 1320px     |
+| .container-md    | 100%      | 100%     | 720px    | 960px    | 1140px    | 1320px     |
+| .container-lg    | 100%      | 100%     | 100%     | 960px    | 1140px    | 1320px     |
+| .container-xl    | 100%      | 100%     | 100%     | 100%     | 1140px    | 1320px     |
+| .container-xxl   | 100%      | 100%     | 100%     | 100%     | 100%      | 1320px     |
+| .container-fluid | 100%      | 100%     | 100%     | 100%     | 100%      | 100%       |
+
+
+
+[Grid system](https://getbootstrap.com/docs/5.3/layout/grid/) > Equal width
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/layout-grid-equal-width" />
+
+[Grid system](https://getbootstrap.com/docs/5.3/layout/grid/) > Column width - .col-\{width\}
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/layout-grid-column-width" />
+
+[Grid system](https://getbootstrap.com/docs/5.3/layout/grid/) > Responsive - .col-\{breakpoint\}-\{width\}, breakpoing: sm, md, lg, xl, xxl
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/layout-grid-responsive" />
+
+[Grid system](https://getbootstrap.com/docs/5.3/layout/grid/) > Row columns
+
+<CodeHtmlPreview src="/codes/package/bootstrap/docs/layout-grid-row-columns" />
+
+## Referências
+
+- [Documentação](https://getbootstrap.com/docs/)
+- Templates
+  - https://bootstrapmade.com/
+  - https://startbootstrap.com/themes
+- Inspirações de Componentes
+  - [Figma Design templates](https://www.figma.com/community/design-templates)
+  - [Dribbble](https://dribbble.com/)
+  - [UI Design Patterns](https://pageflows.com/)
+  - [One Page Love](https://onepagelove.com/inspiration)

src/content/classnotes/library/tailwind/index.mdx

@@ -0,0 +1,87 @@
+---
+title: Tailwind CSS
+---
+
+import CodeHtmlPreview from '../../../../components/CodeHtmlPreview.astro';
+
+# {frontmatter.title}
+
+## CDN
+
+[Get started](https://tailwindcss.com/docs/installation/play-cdn)
+
+<CodeHtmlPreview src="/codes/package/tailwind/docs/cdn" onlyBody={false} />
+
+## Dos
+
+- Core Concepts
+  - [Utility-First](https://tailwindcss.com/docs/utility-first)
+  - [Responsive Design](https://tailwindcss.com/docs/responsive-design)
+  - [Hover, Focus, and Other States](https://tailwindcss.com/docs/hover-focus-and-other-states)
+  - [Dark Mode](https://tailwindcss.com/docs/dark-mode)
+- Customization
+  - [Color](https://tailwindcss.com/docs/customizing-colors)
+  - [Spacing](https://tailwindcss.com/docs/customizing-spacing)
+- Flex & Grid
+  - [Flex](https://tailwindcss.com/docs/flex)
+  - [Grid](https://tailwindcss.com/docs/grid-template-columns)
+- Layout
+  - [Container](https://tailwindcss.com/docs/container)
+  - [Position](https://tailwindcss.com/docs/position)
+- Spacing
+  - [Padding](https://tailwindcss.com/docs/padding)
+  - [Margin](https://tailwindcss.com/docs/margin)
+  - [Space Between](https://tailwindcss.com/docs/space-between)
+- Sizing
+  - [Width](https://tailwindcss.com/docs/width)
+  - [Height](https://tailwindcss.com/docs/height)
+  - [Size](https://tailwindcss.com/docs/size)
+- Typography
+  - [Font Size](https://tailwindcss.com/docs/font-size)
+  - [Font Weight](https://tailwindcss.com/docs/font-weight)
+- Background
+  - [Background Color](https://tailwindcss.com/docs/background-color)
+- Borders
+  - [Border Width](https://tailwindcss.com/docs/border-width)
+  - [Border Radius](https://tailwindcss.com/docs/border-radius)
+- Effects
+  - [Shadow](https://tailwindcss.com/docs/box-shadow)
+  - [Opacity](https://tailwindcss.com/docs/opacity)
+- Filters
+  - [Blur](https://tailwindcss.com/docs/blur)
+- Tables
+  - [Border Collapse](https://tailwindcss.com/docs/border-collapse)
+- Transitions & Animations
+  - [Transition](https://tailwindcss.com/docs/transition-property)
+  - [Animation](https://tailwindcss.com/docs/animation)
+- Transform
+  - [Scale](https://tailwindcss.com/docs/scale)
+  - [Translate](https://tailwindcss.com/docs/translate)
+- Interactivity
+  - [Cursor](https://tailwindcss.com/docs/cursor)
+
+## Referências
+
+- [Documentação](https://tailwindcss.com/docs/installation)
+- Bibliotecas
+  - [HyperUI](https://www.hyperui.dev/)
+  - [Tailwind UI](https://tailwindui.com/)
+    - [Componentes](https://tailwindui.com/components)
+    - [Templates](https://tailwindui.com/templates)
+  - [Flowbite](https://flowbite.com/)
+    - [Blocks](https://flowbite.com/blocks/)
+    - [Components](https://flowbite.com/docs/components/alerts/)
+  - [Tailwind Awesome](https://www.tailwindawesome.com/)
+    - [Templates](https://www.tailwindawesome.com/?price=free&type=template)
+    - [UI Kits](https://www.tailwindawesome.com/?type=kit)
+  - [Preline](https://preline.co/)
+    - [Components](https://preline.co/docs/accordion.html)
+    - [Blocks](https://preline.co/examples.html)
+    - [Templates](https://preline.co/templates.html)
+- Templates
+  - [UIdeck](https://uideck.com/tailwind-templates)
+  - [Tailwind Tamplates](https://tailwindtemplates.co/)
+- Components
+  - [TailwindTemplates](https://tailwindtemplates.io/templates)
+- Tools
+  - [CSS 2 Tailwind](https://transform.tools/css-to-tailwind)