From 4f3223ff0d309ebf401d9f8d527cda3c42ad8e3f Mon Sep 17 00:00:00 2001 From: Benjamin Willems Date: Tue, 6 Feb 2018 18:51:06 -0800 Subject: [PATCH 1/2] Add article on views for new Rails developers This article provides some resources and information for frontend developers who are maybe less experienced with Rails. It probably doesn't make a lot of sense to have this information in a `views/` subdirectory (views depend on controllers), so it will probably move later on. --- guides/views/custom-frontend.md | 110 ++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 guides/views/custom-frontend.md diff --git a/guides/views/custom-frontend.md b/guides/views/custom-frontend.md new file mode 100644 index 00000000000..ace4fe44f8d --- /dev/null +++ b/guides/views/custom-frontend.md @@ -0,0 +1,110 @@ +# Custom frontend + +As a Rails engine, Solidus allows you to build a custom application frontend +from scratch. You can build out a frontend in the same way that you would for +any other Rails application. + +This article focuses how you can build out views for your application. However, +keep in mind that you would also need to utilize Solidus's models and create +your own controllers to create a functional storefront. + +## `solidus_frontend` and `solidus_backend` + +Solidus includes both a storefront ([`solidus_frontend`][solidus-frontend]) and +admin area ([`solidus_backend`][solidus-backend]). Both are based on +[Bootstrap][bootstrap]. These gems offer the features of a typical store and +make extensive use of `solidus_core`'s features. + +You may not want to use the gems for your own store. However, you may want to +use them as a reference when building out your own frontend and backend. + +These gems use the following tools to create views: + +- [ERB][erb] for view templates. +- [SASS][sass] for CSS preprocessing. +- Pure JavaScript for JavaScript assets. + +[bootstrap]: https://getbootstrap.com +[solidus-backend]: https://github.com/solidusio/solidus/tree/master/frontend +[solidus-frontend]: https://github.com/solidusio/solidus/tree/master/backend + +## Getting started with Rails frontend development + +If you intend to create your own storefront or admin area for a Solidus-based +store, we recommend that you first familiarize yourself with Rails. Solidus is a +Rails engine, so you would develop it the same way you would any other Rails +app. + +If you are new to Rails, here are some resources you can use to get started +building your own application frontend: + +- [Ruby on Rails Tutorial: Learn Web Development with + Rails](https://www.railstutorial.org/book/) (Michael Hartl) +- [Getting Started with Rails](http://guides.rubyonrails.org/getting_started.html) + (*Rails Guides*) +- [The Asset Pipeline](http://guides.rubyonrails.org/asset_pipeline.html) + (*Rails Guides*) +- [Rails Internationalization (I18n) API](http://guides.rubyonrails.org/i18n.html) + (*Rails Guides*) + +Note that we could recommend all of the [Rails Guides][rails-guides]. But for +frontend development, pay special attention to the Rails Guides linked to above. + +[rails-guides]: http://guides.rubyonrails.org + + + +## Create your own Solidus frontend + +If you choose not to use the `solidus_frontend` gem and build your own +storefront from scratch, see the list below for Solidus-specific setup +information. + +### Solidus application settings + +The `Solidus::Config` settings affect many values across the frontend of your +store. You can change these settings in your `/config/initializers/spree.rb` +file or any other initializer. + +You can check all of the default settings of `Spree::Config` by sending this +command to your Rails console: + +```shell +Spree::Config.inspect +``` + +As you develop your application's frontend specifically, you may want to +initialize your own values for the following `Spree::Config` settings: + +- `:layout`: Specifies a view in your `/app/view` to be used as the base layout + for your storefront. The default value is + `spree/layouts/spree_application[.html.erb]`, which is a file included in the + `solidus_frontend` gem. +- `:logo`: Specifies a file in your `/app/assets/images` to be used as the logo + on the storefront. You can access the logo from any view using the `<%= logo + %>` variable. The default value is `logo/solidus_logo.png` +- `:products_per_page`: Sets the amount of products that should be displayed on + a single page. The default value is `12`. + +[erb]: https://apidock.com/ruby/ERB +[sass]: https://sass-lang.com + +### Contributing back to Solidus + +If you intend to submit pull requests to Solidus, note that Solidus uses pure +JavaScript for all of its `solidus_frontend` and `solidus_backend` code. Files +written in CoffeeScript would not be accepted. For more information about +contributing to Solidus, see the [Contributing][contributing] guide. + +[contributing]: https://github.com/solidusio/solidus/blob/master/CONTRIBUTING.md + From 342af0e63078e70452aeb89d474f627d436445b1 Mon Sep 17 00:00:00 2001 From: Benjamin Willems Date: Wed, 7 Feb 2018 10:56:15 -0800 Subject: [PATCH 2/2] Document usage of Bootstrap, Skeleton CSS --- guides/views/custom-frontend.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/guides/views/custom-frontend.md b/guides/views/custom-frontend.md index ace4fe44f8d..cefff95e8e9 100644 --- a/guides/views/custom-frontend.md +++ b/guides/views/custom-frontend.md @@ -11,7 +11,8 @@ your own controllers to create a functional storefront. ## `solidus_frontend` and `solidus_backend` Solidus includes both a storefront ([`solidus_frontend`][solidus-frontend]) and -admin area ([`solidus_backend`][solidus-backend]). Both are based on +admin area ([`solidus_backend`][solidus-backend]). The storefront uses +[Skeleton][skeleton] for its CSS grids and the admin area is based on [Bootstrap][bootstrap]. These gems offer the features of a typical store and make extensive use of `solidus_core`'s features. @@ -25,6 +26,9 @@ These gems use the following tools to create views: - Pure JavaScript for JavaScript assets. [bootstrap]: https://getbootstrap.com +[erb]: https://apidock.com/ruby/ERB +[sass]: https://sass-lang.com +[skeleton]: http://getskeleton.com [solidus-backend]: https://github.com/solidusio/solidus/tree/master/frontend [solidus-frontend]: https://github.com/solidusio/solidus/tree/master/backend @@ -96,9 +100,6 @@ initialize your own values for the following `Spree::Config` settings: - `:products_per_page`: Sets the amount of products that should be displayed on a single page. The default value is `12`. -[erb]: https://apidock.com/ruby/ERB -[sass]: https://sass-lang.com - ### Contributing back to Solidus If you intend to submit pull requests to Solidus, note that Solidus uses pure