Use Pico.css for pleasant out-of-the-box styling

README.md

@@ -87,6 +87,8 @@ If you don't specify `--javascript vite`, then this template will use the standa
     * [sidekiq][] – Redis-based job queue implementation for Active Job
 * Configuration
     * [dotenv][] – for local configuration
+* Style
+    * [Pico.css][pico] - a great-looking default stylesheet
 * Utilities
     * [annotate][] – auto-generates schema documentation
     * [amazing_print][] – try `ap` instead of `puts`
@@ -121,6 +123,7 @@ Rails generators are very lightly documented; what you’ll find is that most of
 [annotate]:https://github.com/ctran/annotate_models
 [amazing_print]:https://github.com/amazing-print/amazing_print
 [rubocop]:https://github.com/bbatsov/rubocop
+[pico]:https://picocss.com
 [Postmark]:http://postmarkapp.com
 [postmark-rails]:http://www.rubydoc.info/gems/postmark-rails/0.12.0
 [brakeman]:https://github.com/presidentbeef/brakeman

app/assets/stylesheets/application.sass.scss

@@ -1,9 +0,0 @@
-@use "./mixins/typography";
-
-@import "./colors";
-
-body {
-  @include typography.body;
-  background-color: var(--white);
-  color: var(--black);
-}

app/assets/stylesheets/colors.scss

@@ -1,26 +0,0 @@
-@use "sass:color";
-
-// This starter palette is courtesy of https://github.com/mrmrs/colors (MIT license)
-:root {
-  // == cool =======
-  --aqua: #7fdbff;
-  --blue: #0074d9;
-  --navy: #001f3f;
-  --teal: #39cccc;
-  --green: #2ecc40;
-  --olive: #3d9970;
-  --lime: #01ff70;
-  // == warm =======
-  --yellow: #ffdc00;
-  --orange: #ff851b;
-  --red: #ff4136;
-  --fuchsia: #f012be;
-  --purple: #b10dc9;
-  --maroon: #85144b;
-  // == gray =======
-  --white: #ffffff;
-  --silver: #dddddd;
-  --gray: #aaaaaa;
-  --black: #111111;
-  --black-transparent: #{color.adjust(#111, $alpha: -0.9)};
-}

app/assets/stylesheets/mixins/typography.scss

@@ -1,16 +0,0 @@
-$font-sans-serif: -apple-system, BlinkMacSystemFont, sans-serif;
-
-// Type scale:
-// 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72px
-
-@mixin body {
-  font-family: $font-sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-}
-
-@mixin headline {
-  font-family: $font-sans-serif;
-  font-size: 24px;
-  line-height: 1;
-}

app/assets/template.rb

@@ -1,7 +0,0 @@
-if options[:css] == "sass"
-  empty_directory_with_keep_file "app/assets/fonts"
-  empty_directory "app/assets/stylesheets/mixins"
-  copy_file "app/assets/stylesheets/colors.scss"
-  copy_file "app/assets/stylesheets/application.sass.scss", force: true
-  copy_file "app/assets/stylesheets/mixins/typography.scss"
-end

app/frontend/stylesheets/index.scss

@@ -0,0 +1,6 @@
+@import "@picocss/pico";
+
+// Uncomment this to disable Pico's responsive sizing and instead respect the user's browser font size setting
+// :root {
+//   --font-size: revert;
+// }

app/frontend/template.rb

@@ -1,12 +1,7 @@
 empty_directory_with_keep_file "app/frontend/fonts"
 empty_directory_with_keep_file "app/frontend/images"
-empty_directory "app/frontend/stylesheets/mixins"
 
-copy_file "app/assets/stylesheets/colors.scss", "app/frontend/stylesheets/colors.scss"
-copy_file "app/assets/stylesheets/application.sass.scss", "app/frontend/stylesheets/index.scss"
-copy_file "app/assets/stylesheets/mixins/typography.scss", "app/frontend/stylesheets/mixins/typography.scss"
-
-gsub_file "app/frontend/stylesheets/index.scss", /@use "\./, '@use "~/stylesheets'
+copy_file "app/frontend/stylesheets/index.scss"
 
 package_json = File.read("package.json")
 if package_json.match?(%r{@hotwired/turbo-rails})

app/template.rb

@@ -39,6 +39,10 @@ if install_vite?
   gsub_file "app/views/layouts/base.html.erb",
             /vite_javascript_tag 'application' %>/,
             'vite_javascript_tag "application", "data-turbo-track": "reload" %>'
+else
+  insert_into_file "app/views/layouts/base.html.erb", <<-ERB, before: /^.*<%= stylesheet_link_tag.*$/
+    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
+  ERB
 end
 
 copy_file "app/views/layouts/application.html.erb"

app/views/layouts/application.html.erb

@@ -2,8 +2,9 @@
 <%# to include things like header, footer, and alerts that are common  %>
 <%# to most (but not all) views.                                       %>
 
-<%= render("shared/flash") %>
-
-<%= yield %>
+<main class="container">
+  <%= render("shared/flash") %>
+  <%= yield %>
+</main>
 
 <% parent_layout "base" %>

template.rb

@@ -40,8 +40,6 @@ def apply_template!
   empty_directory ".git/safe"
 
   after_bundle do
-    apply "app/assets/template.rb"
-
     append_to_file ".gitignore", <<~IGNORE
 
       # Ignore application config.
@@ -52,7 +50,7 @@ def apply_template!
     if install_vite?
       File.rename("app/javascript", "app/frontend") if File.exist?("app/javascript")
       run_with_clean_bundler_env "bundle exec vite install"
-      run "yarn add sass"
+      run "yarn add sass @picocss/pico"
       apply "app/frontend/template.rb"
     end