From 97a4a3f155b2b8854f944165c4ccb74c0305263c Mon Sep 17 00:00:00 2001 From: "Caleb Williams [SSW]" <65635198+Calinator444@users.noreply.github.com> Date: Fri, 10 Jan 2025 08:40:11 +1100 Subject: [PATCH 1/4] =?UTF-8?q?Update=20Rule=20=E2=80=9Cdo-you-use-twitter?= =?UTF-8?q?-bootstrap/rule=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- rules/do-you-use-twitter-bootstrap/rule.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/rules/do-you-use-twitter-bootstrap/rule.md b/rules/do-you-use-twitter-bootstrap/rule.md index f472aaf8093..b54b92b84ec 100644 --- a/rules/do-you-use-twitter-bootstrap/rule.md +++ b/rules/do-you-use-twitter-bootstrap/rule.md @@ -1,11 +1,9 @@ --- -seoDescription: Do you use Bootstrap to create responsive and user-friendly websites that adapt to various devices and browsers? type: rule -archivedreason: title: Do you use Bootstrap? -guid: a77d521f-eab3-4490-9ed2-95cec7026f9f +seoDescription: Do you use Bootstrap to create responsive and user-friendly + websites that adapt to various devices and browsers? uri: do-you-use-twitter-bootstrap -created: 2012-07-23T16:04:48.0000000Z authors: - title: Adam Stephensen url: https://ssw.com.au/people/adam-stephensen @@ -15,6 +13,9 @@ authors: url: https://ssw.com.au/people/rebecca-liu related: [] redirects: [] +created: 2012-07-23T16:04:48.000Z +archivedreason: null +guid: a77d521f-eab3-4490-9ed2-95cec7026f9f --- Efficient programmers do not re-invent the wheel. That's why we [use the best Web UI libraries](/do-you-use-the-best-web-ui-libraries). @@ -41,6 +42,16 @@ Read our [Rules to Better UI (Bootstrap)](/rules-to-better-ui-bootstrap). [Bootstrap, from Twitter](https://github.com/twbs/bootstrap) +### Framework Integrations + +One of the benefits of using Bootstrap over a library such as [Shadcn](https://ui.shadcn.com/) is that it's widely supported across a large number of Front end frameworks. Take a look at the following Bootstrap integrations for example: + +- [BootstrapVue](https://bootstrap-vue.org/), +- [Angular](https://ng-bootstrap.github.io/#/home) +- [React Bootstrap](https://react-bootstrap.netlify.app/) + +While you can use Bootstrap without any framework specific integrations, using one of the libraries can save you a lot of time managing your css classes and writing boilerplate code while building your Interface. The front end frameworks listed above are ultimately just wrappers for using Bootstrap, which is little more than a CSS library. This means that you can use Bootstrap with any front end framework of your choosing. You can even use it for static html pages provided that you include links to the required JavaScript and CSS files in your pages. This can be achieved by adding a link to bootstrap's [CDN](https://getbootstrap.com/) in your pages. + ### Tailwind Alternatively, [TailwindCSS](https://tailwindcss.com/) is also acceptable. The difference between the Tailwind and Bootstrap is a matter of how comfortable you are with CSS. From ec6f157b0003077d54996b689f636ec47f4dd46e Mon Sep 17 00:00:00 2001 From: Calinator444 Date: Fri, 10 Jan 2025 09:02:18 +1100 Subject: [PATCH 2/4] renamed bootstrap rule and added redirect --- .../bootstrap-1.jpg | Bin .../bootstrap-3.jpg | Bin .../iphonenonresponsive.png | Bin .../rule.md | 3 ++- 4 files changed, 2 insertions(+), 1 deletion(-) rename rules/{do-you-use-twitter-bootstrap => do-you-use-bootstrap}/bootstrap-1.jpg (100%) rename rules/{do-you-use-twitter-bootstrap => do-you-use-bootstrap}/bootstrap-3.jpg (100%) rename rules/{do-you-use-twitter-bootstrap => do-you-use-bootstrap}/iphonenonresponsive.png (100%) rename rules/{do-you-use-twitter-bootstrap => do-you-use-bootstrap}/rule.md (98%) diff --git a/rules/do-you-use-twitter-bootstrap/bootstrap-1.jpg b/rules/do-you-use-bootstrap/bootstrap-1.jpg similarity index 100% rename from rules/do-you-use-twitter-bootstrap/bootstrap-1.jpg rename to rules/do-you-use-bootstrap/bootstrap-1.jpg diff --git a/rules/do-you-use-twitter-bootstrap/bootstrap-3.jpg b/rules/do-you-use-bootstrap/bootstrap-3.jpg similarity index 100% rename from rules/do-you-use-twitter-bootstrap/bootstrap-3.jpg rename to rules/do-you-use-bootstrap/bootstrap-3.jpg diff --git a/rules/do-you-use-twitter-bootstrap/iphonenonresponsive.png b/rules/do-you-use-bootstrap/iphonenonresponsive.png similarity index 100% rename from rules/do-you-use-twitter-bootstrap/iphonenonresponsive.png rename to rules/do-you-use-bootstrap/iphonenonresponsive.png diff --git a/rules/do-you-use-twitter-bootstrap/rule.md b/rules/do-you-use-bootstrap/rule.md similarity index 98% rename from rules/do-you-use-twitter-bootstrap/rule.md rename to rules/do-you-use-bootstrap/rule.md index b54b92b84ec..bd2b3cbd7fd 100644 --- a/rules/do-you-use-twitter-bootstrap/rule.md +++ b/rules/do-you-use-bootstrap/rule.md @@ -12,7 +12,8 @@ authors: - title: Rebecca Liu url: https://ssw.com.au/people/rebecca-liu related: [] -redirects: [] +redirects: + - do-you-use-twitter-bootstrap created: 2012-07-23T16:04:48.000Z archivedreason: null guid: a77d521f-eab3-4490-9ed2-95cec7026f9f From d79ce06c4a5b00af1ecadc1a80739090198fb48f Mon Sep 17 00:00:00 2001 From: Calinator444 Date: Fri, 10 Jan 2025 09:04:44 +1100 Subject: [PATCH 3/4] changed uri for for rule --- rules/do-you-use-bootstrap/rule.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/rules/do-you-use-bootstrap/rule.md b/rules/do-you-use-bootstrap/rule.md index bd2b3cbd7fd..dcca9037460 100644 --- a/rules/do-you-use-bootstrap/rule.md +++ b/rules/do-you-use-bootstrap/rule.md @@ -3,7 +3,7 @@ type: rule title: Do you use Bootstrap? seoDescription: Do you use Bootstrap to create responsive and user-friendly websites that adapt to various devices and browsers? -uri: do-you-use-twitter-bootstrap +uri: do-you-use-bootstrap authors: - title: Adam Stephensen url: https://ssw.com.au/people/adam-stephensen From 67203d2d00ba9db58b49a600e4307ec5ede2b9b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tiago=20Ara=C3=BAjo=20=5BSSW=5D?= Date: Thu, 9 Jan 2025 21:31:41 -0300 Subject: [PATCH 4/4] Update rule.md --- rules/do-you-use-bootstrap/rule.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/rules/do-you-use-bootstrap/rule.md b/rules/do-you-use-bootstrap/rule.md index dcca9037460..911d6a2dbbd 100644 --- a/rules/do-you-use-bootstrap/rule.md +++ b/rules/do-you-use-bootstrap/rule.md @@ -21,11 +21,13 @@ guid: a77d521f-eab3-4490-9ed2-95cec7026f9f Efficient programmers do not re-invent the wheel. That's why we [use the best Web UI libraries](/do-you-use-the-best-web-ui-libraries). -Twitter Bootstrap is a NuGet Package that provides a jump-start for HTML based projects. It includes the HTML, CSS and JavaScript framework used by Twitter, to build the Twitter site. +Bootstrap is a NuGet Package that provides a jump-start for HTML based projects. It includes the HTML, CSS and JavaScript framework used to build the Twitter site. -Building your site on top of bootstrap makes it much easier to have your website look great on devices of all sizes, across many different browsers. +Building your site on top of Bootstrap makes it much easier to have your website look great on devices of all sizes, across many different browsers. + +Read our [Rules to Better UI (Bootstrap)](/rules-to-better-ui-bootstrap). ![Figure: This website template, along with many others is available as a starting point for building Bootstrap-based sites](bootstrap-1.jpg) @@ -34,28 +36,26 @@ Building your site on top of bootstrap makes it much easier to have your website ::: ::: good -![Figure: Good example - Twitter Bootstrap uses many techniques to help make your site look great on different browsers, on all devices](bootstrap-3.jpg) +![Figure: Good example - Bootstrap uses many techniques to help make your site look great on different browsers, on all devices](bootstrap-3.jpg) ::: -Read our [Rules to Better UI (Bootstrap)](/rules-to-better-ui-bootstrap). - -### Documentation +## Documentation -[Bootstrap, from Twitter](https://github.com/twbs/bootstrap) +[Bootstrap on GitHub](https://github.com/twbs/bootstrap). -### Framework Integrations +## Framework integrations -One of the benefits of using Bootstrap over a library such as [Shadcn](https://ui.shadcn.com/) is that it's widely supported across a large number of Front end frameworks. Take a look at the following Bootstrap integrations for example: +One of the benefits of using Bootstrap over a library such as [Shadcn](https://ui.shadcn.com) is that it's widely supported across a large number of Front end frameworks. Take a look at the following Bootstrap integrations for example: -- [BootstrapVue](https://bootstrap-vue.org/), +- [BootstrapVue](https://bootstrap-vue.org) - [Angular](https://ng-bootstrap.github.io/#/home) -- [React Bootstrap](https://react-bootstrap.netlify.app/) +- [React Bootstrap](https://react-bootstrap.netlify.app) -While you can use Bootstrap without any framework specific integrations, using one of the libraries can save you a lot of time managing your css classes and writing boilerplate code while building your Interface. The front end frameworks listed above are ultimately just wrappers for using Bootstrap, which is little more than a CSS library. This means that you can use Bootstrap with any front end framework of your choosing. You can even use it for static html pages provided that you include links to the required JavaScript and CSS files in your pages. This can be achieved by adding a link to bootstrap's [CDN](https://getbootstrap.com/) in your pages. +While you can use Bootstrap without any framework specific integrations, using one of the libraries can save you a lot of time managing your css classes and writing boilerplate code while building your Interface. The front end frameworks listed above are ultimately just wrappers for using Bootstrap, which is little more than a CSS library. This means that you can use Bootstrap with any front end framework of your choosing. You can even use it for static html pages provided that you include links to the required JavaScript and CSS files in your pages. This can be achieved by adding a link to bootstrap's [CDN](https://getbootstrap.com) in your pages. -### Tailwind +## Tailwind -Alternatively, [TailwindCSS](https://tailwindcss.com/) is also acceptable. The difference between the Tailwind and Bootstrap is a matter of how comfortable you are with CSS. +Alternatively, [TailwindCSS](https://tailwindcss.com) is also acceptable. The difference between the Tailwind and Bootstrap is a matter of how comfortable you are with CSS. Out of the box, Tailwind is lightweight and will get the job done simply; you can build a website without ever having to look at CSS.