diff --git a/src/consts.ts b/src/consts.ts index 4e7bdb3..96ac694 100644 --- a/src/consts.ts +++ b/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', ]; diff --git a/src/content/classnotes/library/bootstrap/index.mdx b/src/content/classnotes/library/bootstrap/index.mdx new file mode 100644 index 0000000..d711922 --- /dev/null +++ b/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) + + + +## Content + +[Reboot](https://getbootstrap.com/docs/5.3/content/reboot/) > Paragraphs + + + +[Reboot](https://getbootstrap.com/docs/5.3/content/reboot/) > Headings + + + +[Reboot](https://getbootstrap.com/docs/5.3/content/reboot/) > Links + + + +[Tables](https://getbootstrap.com/docs/5.3/content/tables/) > default table + + + +[Tables](https://getbootstrap.com/docs/5.3/content/tables/) > .table + + + +[Tables](https://getbootstrap.com/docs/5.3/content/tables/) > .table-striped + + + +## Helpers + +[Color & background](https://getbootstrap.com/docs/5.3/helpers/color-background/) > .text-\{color\} + +color: primary, secondary, success, danger, warning, info, light, dark + + + +[Color & background](https://getbootstrap.com/docs/5.3/helpers/color-background/) > .bg-\{color\} + +color: primary, secondary, success, danger, warning, info, light, dark + + + +[Color & background](https://getbootstrap.com/docs/5.3/helpers/color-background/) > .text-bg-\{color\} + +color: primary, secondary, success, danger, warning, info, light, dark + + + +## Utilities + +[Text](https://getbootstrap.com/docs/5.3/utilities/text/) > Text alignment: .text-start, .text-center, .text-end + + + +[Text](https://getbootstrap.com/docs/5.3/utilities/text/) > Text transform: .text-lowercase, .text-uppercase, .text-capitalize + + + +[Text](https://getbootstrap.com/docs/5.3/utilities/text/) > Font weight and italics: .fw-bold, .fst-italic + + + +[Text](https://getbootstrap.com/docs/5.3/utilities/text/) > Font size: .fs-1, ..., .fs-6 + + + +[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 + + + +[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 + + + +[Visibility](https://getbootstrap.com/docs/5.3/utilities/visibility/) > .visible, .invisible + + + +## Components + +[Navbar](https://getbootstrap.com/docs/5.3/components-navbar) + + + +[Card](https://getbootstrap.com/docs/5.3/components/card/) > Basic card + + + +[Card](https://getbootstrap.com/docs/5.3/components/card/) > Header and Footer + + + +[Card](https://getbootstrap.com/docs/5.3/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<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 + + + +[Grid system](https://getbootstrap.com/docs/5.3/layout/grid/) > Column width - .col-\{width\} + + + +[Grid system](https://getbootstrap.com/docs/5.3/layout/grid/) > Responsive - .col-\{breakpoint\}-\{width\}, breakpoing: sm, md, lg, xl, xxl + + + +[Grid system](https://getbootstrap.com/docs/5.3/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) diff --git a/src/content/classnotes/library/introduction-bootstrap/index.mdx b/src/content/classnotes/library/introduction-bootstrap/index.mdx deleted file mode 100644 index d4a68b0..0000000 --- a/src/content/classnotes/library/introduction-bootstrap/index.mdx +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Componentes Web ---- - -# {frontmatter.title} - -## Bootstrap - -- [Documentação](https://getbootstrap.com/docs/) -- [Exemplo](https://ifpb.github.io/css-guide/packages/bootstrap/intro/) diff --git a/src/content/classnotes/library/tailwind/index.mdx b/src/content/classnotes/library/tailwind/index.mdx new file mode 100644 index 0000000..6a105d0 --- /dev/null +++ b/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) + + + +## 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)