Get Started
-
+
Installation
@@ -34,14 +38,17 @@Download Rails
-
Get Rails installed and set up on your system—Windows, macOS, or Linux.
++ Get Rails installed and set up on your system—Windows, + macOS, or Linux. +
-
+
Education
@@ -52,14 +59,20 @@Follow a tutorial
-
Build an app and learn the basics of Rails with a hands-on, step-by-step tutorial.
++ Build an app and learn the basics of Rails with hands-on, + step-by-step tutorials. +
-
+
@@ -90,7 +106,10 @@
Level Up
@@ -70,7 +83,10 @@Read the guides
-
Explore in-depth guides covering essential Rails features and built-in libraries.
++ Explore in-depth guides covering essential Rails features and + built-in libraries. +
The API Documentation
-
The full framework reference, from A to Z for every piece of Rails.
++ The full framework reference, from A to Z for every piece of + Rails. +
Join the conversation
-
+
@@ -141,22 +166,22 @@
diff --git a/_pages/tutorial.html b/_pages/tutorial.html
new file mode 100644
index 000000000..94ebaa5aa
--- /dev/null
+++ b/_pages/tutorial.html
@@ -0,0 +1,159 @@
+---
+title: "Ruby on Rails Tutorials"
+description: "Ruby on Rails Tutorials"
+permalink: /docs/tutorials
+redirect_from:
+ - /docs/tutorials/
+---
+
+Get Involved
@@ -126,7 +148,10 @@Contribute to Rails
-
Report issues, review code, or submit updates to the open source Rails project.
++ Report issues, review code, or submit updates to the open source + Rails project. +
Contribute to Rails
How did they do it?
- See how some of the most successful online products used - Rails to launch, scale, and thrive in a competitive world. - Read these case studies to learn more: + See how some of the most successful online products used Rails to + launch, scale, and thrive in a competitive world. Read these case + studies to learn more:
+ - More stories coming soon, but for now here's some of our friends - who have used Rails to take their products from zero to enterprise: + More stories coming soon, but for now here's some of our friends who + have used Rails to take their products from zero to enterprise:
- -
+ 
- 
+ 
- 
+
+
+
+
+
+
+
+
+
+ Tutorials for
+
+ Tutorials for
All Levels
+
+
+
+
+
+Beginner
+ ++ Build an e-commerce app and learn the basics of Rails with this in-depth, + hands-on, step-by-step tutorial. If you have no prior knowledge of Rails, + this is a great place to start. +
+ + +
+
+
+
+
+
+Advanced
+ ++ Continue learning Rails with focused tutorials adding features to the + e-commerce app you created above. +
+ +
+
+
+
+
+
+
diff --git a/_sass/modules/_cards.scss b/_sass/modules/_cards.scss
index 2b0f82e10..7f016e561 100755
--- a/_sass/modules/_cards.scss
+++ b/_sass/modules/_cards.scss
@@ -1,11 +1,26 @@
.cards {
-
font-size: 0;
line-height: 0;
position: relative;
.container {
max-width: 1280px;
+
+ // Override zero font-size for direct text content
+ > h2,
+ > p {
+ font-size: 20px;
+ line-height: 1.2;
+ text-align: center;
+ max-width: 80%;
+ margin: 0 auto 2em;
+ text-wrap: balance;
+ }
+
+ > h2 {
+ font-size: 26px;
+ line-height: 1.2;
+ }
}
&__container {
@@ -13,10 +28,145 @@
gap: 30px 0;
margin: 3px 30px;
z-index: 1;
+
+ // Mobile-specific adjustments for fullwidth cards
+ @media (max-width: 767px) {
+ &.card__fullwidth {
+ margin: 3px 15px; // Reduced margins for mobile
+ gap: 20px 0; // Reduced gap to prevent overlap
+ }
+ }
+
+ &.card__fullwidth {
+ // Mobile: Single column layout
+ grid-template-columns: 1fr;
+ justify-content: center;
+ margin: 3px 15px; // Reduce side margins on mobile to prevent overflow
+
+ .card {
+ max-height: auto !important;
+ width: 100%; // Ensure card doesn't exceed container
+ box-sizing: border-box; // Include padding in width calculation
+
+ &__body {
+ display: flex;
+ flex-direction: column;
+ text-align: left;
+ padding: 20px; // Uniform padding on mobile
+ box-sizing: border-box; // Include padding in width calculation
+
+ img {
+ width: 100%;
+ margin: 0 0 15px 0; // Slightly reduced bottom margin
+ height: auto;
+ max-width: 100%; // Prevent image overflow
+ }
+
+ // Target the actual content wrapper div (contains card__headline and card__content)
+ > div {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .card__headline {
+ text-align: center;
+ margin-left: 0;
+ margin-right: 0;
+ padding-top: 0;
+ h3 {
+ /* text-align: left; */
+ margin-bottom: 10px;
+ margin-top: 0;
+ padding-bottom: 0; // Override default padding
+ }
+ }
+
+ .card__content {
+ text-align: center;
+ padding-bottom: 0;
+ margin-left: 0;
+ margin-right: 0;
+ p {
+ margin-bottom: 1em;
+ /* text-align: left; */
+ }
+
+ ul {
+ list-style-type: disc;
+ padding-left: 0;
+ margin: 0 0 5px 0; // Further reduced bottom margin
+
+ li {
+ text-align: center;
+ list-style: none;
+ padding-left: 0;
+ }
+ }
+ }
+ }
+ }
+
+ // Tablet: 768px+ - Start showing side-by-side layout
+ @media (min-width: 768px) {
+ grid-template-columns: minmax(500px, 700px);
+ margin: 3px 30px; // Restore normal margins on tablet+
+
+ .card {
+ &__body {
+ flex-direction: row;
+ padding: 25px 25px 20px 25px; // Reduced bottom padding
+ gap: 25px;
+ align-items: flex-start;
+
+ .card__headline,
+ .card__content {
+ text-align: left;
+
+ ul {
+ padding-left: 1.5em;
+
+ li {
+ text-align: left;
+ list-style-type: disc;
+ padding-left: unset;
+ }
+ }
+ }
+
+ img {
+ flex: 0 0 60%; // Increased to ~2/3
+ margin: 0;
+ }
+
+ > div {
+ flex: 1; // ~1/3 remaining space
+ display: flex;
+ flex-direction: column;
+ }
+ }
+ }
+ }
+
+ // Desktop: 1024px+
+ @media (min-width: 1024px) {
+ grid-template-columns: minmax(600px, 800px);
+
+ .card {
+ &__body {
+ padding: 30px 30px 25px 30px; // Reduced bottom padding
+ gap: 30px;
+
+ img {
+ flex: 0 0 65%; // Image takes ~2/3
+ }
+ }
+ }
+ }
+ }
}
.card {
-
position: relative;
a,
@@ -25,26 +175,24 @@
}
a {
-
display: block;
&:hover {
-
.card__label h6 {
background: $color-red;
}
.card__body {
- box-shadow: 0 3px 15px 2px rgba($color-black, 0.05), 0 1px 1px rgba($color-black, 0.02), 0 0 0 3px $color-red;
+ box-shadow:
+ 0 3px 15px 2px rgba($color-black, 0.05),
+ 0 1px 1px rgba($color-black, 0.02),
+ 0 0 0 3px $color-red;
transform: translateY(-3px);
}
-
}
-
}
&__label {
-
position: absolute;
text-align: center;
top: -15px;
@@ -52,7 +200,6 @@
z-index: 1;
h6 {
-
background: $color-red;
border-radius: 3px;
color: $color-white;
@@ -68,7 +215,7 @@
&:after {
background: url(../images/icon-card.svg) center center no-repeat;
- content: '';
+ content: "";
filter: $filter-white;
height: 9px;
position: absolute;
@@ -76,20 +223,51 @@
top: 9px;
width: 6px;
}
+ }
+ }
+ &__coming-soon {
+ opacity: 0.6;
+
+ a {
+ &:hover {
+ .card__body {
+ box-shadow:
+ 0 3px 15px 2px rgba($color-black, 0.05),
+ 0 1px 1px rgba($color-black, 0.02),
+ 0 0 0 3px rgba($color-black, 0.1);
+ transform: translateY(0);
+ }
+ }
}
+ .card__label {
+ position: relative;
+ h6 {
+ padding: 3px 13px;
+
+ &:after {
+ background: transparent;
+ }
+ }
+ }
}
&__body {
align-items: center;
background: $color-white;
border-radius: 8px;
- box-shadow: 0 3px 15px 2px rgba($color-black, 0.05), 0 1px 1px rgba($color-black, 0.02), 0 0 0 3px rgba($color-black, 0.1);
+ box-shadow:
+ 0 3px 15px 2px rgba($color-black, 0.05),
+ 0 1px 1px rgba($color-black, 0.02),
+ 0 0 0 3px rgba($color-black, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
- transition: background $transition, box-shadow $transition, transform $transition;
+ transition:
+ background $transition,
+ box-shadow $transition,
+ transform $transition;
}
&__headline,
@@ -100,7 +278,6 @@
}
&__headline {
-
padding-bottom: 6px;
padding-top: 32px;
@@ -117,11 +294,9 @@
text-decoration-thickness: 2px;
transition: color $transition;
}
-
}
&__content {
-
padding-bottom: 35px;
p {
@@ -134,21 +309,53 @@
transition: color $transition;
}
- }
+ ul {
+ font-size: 18px;
+ line-height: 23px;
+ list-style-type: disc;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: left;
+ li {
+ color: $color-grey-5;
+ margin-bottom: 0.5em;
+ }
+ }
+ }
}
+ &.padfix {
+ padding-bottom: 80px;
+ }
+ @media (min-width: 768px) {
+ &.padfix {
+ padding-bottom: 0;
+ }
+ }
- @media(min-width: 768px) {
-
+ @media (min-width: 768px) {
&__container {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
+
+ &.card__fullwidth {
+ // This is handled in the specific fullwidth section above
+ .card {
+ height: auto; // Override the fixed height for fullwidth cards
+ max-height: none; // Remove max-height constraint
+
+ a,
+ &__body {
+ height: auto; // Override the 100% height
+ position: static; // Override absolute positioning
+ }
+ }
+ }
}
.card {
-
height: 30vw;
max-height: 150px;
@@ -157,23 +364,28 @@
height: 100%;
position: absolute;
}
-
}
-
}
-
-
- @media(min-width: 1024px) {
-
+ @media (min-width: 1024px) {
&__container {
grid-template-columns: repeat(3, 1fr);
margin-left: 60px;
margin-right: 60px;
- }
+ &.card__fullwidth {
+ // This is handled in the specific fullwidth section above
+ .card {
+ height: auto; // Override the fixed height for fullwidth cards
+ max-height: none; // Remove max-height constraint
+
+ a,
+ &__body {
+ height: auto; // Override the 100% height
+ position: static; // Override absolute positioning
+ }
+ }
+ }
+ }
}
-
-
-
}
diff --git a/_sass/modules/_docs.scss b/_sass/modules/_docs.scss
index c15e8fffa..15e1e8539 100644
--- a/_sass/modules/_docs.scss
+++ b/_sass/modules/_docs.scss
@@ -1,6 +1,15 @@
.docs {
&.heading {
padding-bottom: 0;
+
+ .breadcrumb {
+ margin-bottom: 1rem;
+ a {
+ color: $color-red;
+ text-decoration: none;
+ text-transform: uppercase;
+ }
+ }
h1 {
br {
display: none;
@@ -55,17 +64,27 @@
max-height: 200px !important;
}
- // UL/LIs here are for cards, no bullets actually used.
+ .card__fullwidth .card {
+ max-height: 500px !important;
+ }
+
+ // UL/LIs here are for cards, no bullets actually used.
ul {
- list-style-type: none;
- padding: 0;
- margin: 0;
+ &.learning-cards,
+ &.use-rails,
+ &.case-studies {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
- li {
- margin-bottom: 1em;
- } // li
+ li {
+ margin-bottom: 1em;
+ } // li
+ }
- &.learning-cards, &.use-rails, &.case-studies {
+ &.learning-cards,
+ &.use-rails,
+ &.case-studies {
display: flex;
flex-direction: column;
flex-wrap: wrap;
@@ -76,7 +95,7 @@
margin-bottom: 0;
} // li
} // &.learning-cards
-
+
&.learning-cards {
li {
img {
@@ -88,45 +107,82 @@
background-position: right top;
background-size: contain;
}
-
+
&#install h4 {
- background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%),
- url("/assets/images/docs-banner-installation.svg");
+ background-image:
+ linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 1) 0%,
+ rgba(255, 255, 255, 1) 75%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ url("/assets/images/docs-banner-installation.svg");
}
&#tutorial h4 {
- background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%),
- url("/assets/images/docs-banner-tutorial.svg");
+ background-image:
+ linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 1) 0%,
+ rgba(255, 255, 255, 1) 75%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ url("/assets/images/docs-banner-tutorial.svg");
}
&#guides h4 {
- background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%),
- url("/assets/images/docs-banner-guides.svg");
+ background-image:
+ linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 1) 0%,
+ rgba(255, 255, 255, 1) 75%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ url("/assets/images/docs-banner-guides.svg");
}
&#api h4 {
- background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%),
- url("/assets/images/docs-banner-api.svg");
+ background-image:
+ linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 1) 0%,
+ rgba(255, 255, 255, 1) 75%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ url("/assets/images/docs-banner-api.svg");
}
&#forum h4 {
- background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%),
- url("/assets/images/docs-banner-forum.svg");
+ background-image:
+ linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 1) 0%,
+ rgba(255, 255, 255, 1) 75%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ url("/assets/images/docs-banner-forum.svg");
}
&#contribute h4 {
- background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%),
- url("/assets/images/docs-banner-contribute.svg");
+ background-image:
+ linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 1) 0%,
+ rgba(255, 255, 255, 1) 75%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ url("/assets/images/docs-banner-contribute.svg");
}
}
-
+
li h4 {
margin-bottom: 0.5em;
padding: 0;
}
} // &.learning-cards
- &.use-rails, &.case-studies {
+ &.use-rails,
+ &.case-studies {
flex-direction: row;
li {
flex-basis: 48%;
@@ -169,18 +225,19 @@
b {
font-weight: bold;
} // b
-
+
cite {
display: block;
font-size: 18px;
-
} // cite
} // blockquote
.casestudy__floater {
background: $color-white;
border-radius: 12px;
- box-shadow: 0 15px 40px 5px rgba($color-black, 0.15), 0 1px 1px rgba($color-black, 0.04);
+ box-shadow:
+ 0 15px 40px 5px rgba($color-black, 0.15),
+ 0 1px 1px rgba($color-black, 0.04);
display: flex;
margin-left: 30px;
margin-right: 30px;
@@ -199,7 +256,7 @@
} // .casestudy__image
.casestudy__quote {
- flex-direction: column;
+ flex-direction: column;
align-items: center;
padding: 40px;
text-align: center;
@@ -211,7 +268,7 @@
margin-bottom: 1em;
max-width: 160px;
} // img
-
+
&.no_image blockquote {
text-align: center;
}
@@ -219,7 +276,7 @@
&.keytakeaways {
.text__body {
- background-color: #F1F3F5;
+ background-color: #f1f3f5;
border: 1px solid #cc0000;
border-radius: 12px;
padding: 40px;
@@ -264,7 +321,7 @@
@media (min-width: 1024px) {
.docs {
- &.heading {
+ &.heading {
h1 {
br {
display: block;
@@ -273,17 +330,15 @@
} // &.heading
&.casestudy {
- overflow: visible;
-
+ overflow: visible;
+
&.text {
max-width: 840px;
margin: 0 auto;
}
blockquote {
-
&.inline-quote {
-
&.float-left {
float: left;
margin: 0 1em 0 -150px;
@@ -301,7 +356,9 @@
font-size: 24px;
text-align: right;
- br { display: none;}
+ br {
+ display: none;
+ }
} // cite
} // blockquote
@@ -310,11 +367,11 @@
flex-direction: row;
justify-content: center;
text-align: left;
-
+
img {
margin-right: 1em;
}
-
+
blockquote {
flex-basis: auto;
font-size: 30px;
@@ -337,16 +394,28 @@
} // .button
} // &.cta
} // .casestudy
+
+ .container {
+ > h2 {
+ font-size: 39px;
+ }
+ > p {
+ font-size: 26px;
+ }
+ }
} // .docs
.text {
ul {
- &.learning-cards, &.use-rails, &.case-studies {
- display: flex;
+ &.learning-cards,
+ &.use-rails,
+ &.case-studies {
+ display: flex;
flex-direction: row;
} // &.learning-cards, &.use-rails, &.case-studies
- &.learning-cards, &.case-studies {
+ &.learning-cards,
+ &.case-studies {
li {
flex-basis: 32%;
width: 32%;
@@ -375,4 +444,4 @@
} // &.use-rails
} // ul
} // .text
-} // @media
\ No newline at end of file
+} // @media
diff --git a/assets/images/tutorial-store.jpg b/assets/images/tutorial-store.jpg
new file mode 100644
index 000000000..4b4f5faa3
Binary files /dev/null and b/assets/images/tutorial-store.jpg differ
+
+
+
+
+
+ More in the Pipeline
++ This tutorial series will expand to add more features so you can learn + Rails. Have something you’d like us to cover? + Let us know. +
+