Complete Ryhe Framework Reference

Kitchen Sink

Scroll Down

CSS Variables

Dark Colors

--color-dark-1 / .bg-dark-1
#111111

--color-dark-2 / .bg-dark-2
#262626

--color-dark-3 / .bg-dark-3
#333333

--color-dark-4 / .bg-dark-4
#555555

Light Colors

--color-light-1 / .bg-light-1
#eeece6 (Beige)

--color-light-2 / .bg-light-2
#f2f1ed

--color-light-3 / .bg-light-3
#f7f6f3

--color-light-4 / .bg-light-4
#f1e9db

.bg-white
#ffffff

Gray Colors

--color-gray-1
#888888

--color-gray-2
#cccccc

Font Variables

--font-primary: Raleway

--font-secondary: Cinzel

Spacing Variables

--distance-min/max-xsmall: 30px / 50px

--distance-min/max-small: 30px / 120px

--distance-min/max-medium: 50px / 240px

--distance-min/max-large: 100px / 360px

Section 2

Typography

Headlines (Cinzel)

--font-secondary applied via classes

.h1 / H1 (104px → 35px)

.h2 / H2 (65px → 31px)

.h3 / H3 (42px → 24px)

.h4 / H4 (26px → 22px)

.h5 / H5 (18px)

.h6 / H6 (14px)

Text Styles

Regular paragraph with --font-primary (Raleway). Font size scales from 16px to 18px.

.small-caps — Decorative Small Capitals

.text-muted — Muted gray text

Bold text and italic text and link text

Small text via <small> tag

Drop Cap

Whatever steepest yet her beyond looked either day wished nay. By doubtful disposed do juvenile an. Now curiosity you explained immediate why behaviour. An dispatched impossible of of melancholy favourable.

.has-drop-cap on paragraph (inside .post__content)

Blockquote

"Design can be art. Design can be aesthetics. Design is so simple, that's why it is so complicated."
Paul Rand

Text Alignment

.text-left

.text-center

.text-right

.text-lg-right (responsive: right on desktop)

Section 3

Backgrounds & Themes

.bg-dark-1 + data-arts-theme-text="light"

Theme text switches all typography to light colors automatically.

.bg-dark-2 (#262626) — Perfect for footer areas

.bg-dark-3 (#333333) — Used for CTA sections

.bg-light-1 + data-arts-theme-text="dark" — Primary beige background

.bg-light-2 — Alternating content sections

.bg-white — Card backgrounds, forms

Section 4

Buttons & Interactive

Solid Button

Solid Black

Full Width Button

<a class="button button_solid button_black" 
   data-hover="Hover Text" href="#">
  <span class="button__label-hover">Label</span>
</a>

Bordered Button

Bordered Black

<a class="button button_bordered button_black" 
   data-hover="Hover Text" href="#">
  <span class="button__label-hover">Label</span>
</a>

Arrow Right

.arrow .arrow-right .js-arrow

Arrow Left

.arrow .arrow-left .js-arrow

Arrow Mini

Add .arrow_mini

Arrow Up/Down

.arrow-up / .arrow-down

Button with Icon

Button with label + icon section. Uses .button_icon

<a class="button button_solid button_black button_icon" href="#">
  <span class="button__label">View More</span>
  <span class="button__icon">
    <i class="material-icons">arrow_forward</i>
  </span>
</a>

Change Text Hover

Text link with animated line on hover. Uses .change-text-hover

Normal Text Hover Text

<a class="change-text-hover" href="#">
  <span class="change-text-hover__normal">Normal</span>
  <span class="change-text-hover__hover">
    <span class="change-text-hover__line"></span>
    <span>Hover Text</span>
  </span>
</a>

Circle Button Link

Dark filled circle button with icon. Uses .circle-button_link

<div class="circle-button circle-button_link">
  <div class="circle-button__inner">
    <div class="circle-button__circle">
      <svg class="svg-circle">...</svg>
    </div>
    <div class="circle-button__icon">
      <i class="material-icons">arrow_forward</i>
    </div>
  </div>
</div>

Buttons on Dark Background

Arrows auto-adapt to light theme. Use .button_white for solid/bordered buttons.

Solid White

.button_white

Bordered

.button_bordered

Auto light theme

Mini variant

Section 5

Form Elements

Floating Label Inputs

Label floats up on focus. Uses .input-float .js-input-float

Your Name

Email Address

Your Message

Code Structure

<form class="form js-ajax-form" action="..." method="POST">
  <div class="row form__row">
    <div class="col form__col">
      <label class="input-float js-input-float">
        <input class="input-float__input" 
               type="text" name="name" required />
        <span class="input-float__label">Label</span>
        <span class="form__error"></span>
      </label>
    </div>
  </div>

  <!-- Textarea -->
  <label class="input-float js-input-float">
    <textarea class="input-float__input 
                     input-float__input_textarea">
    </textarea>
    <span class="input-float__label">Message</span>
  </label>

  <!-- Submit -->
  <button class="button button_solid button_black" 
          data-hover="Submit">
    <span class="button__label-hover">Send</span>
  </button>
</form>

Section 6

Animations

Split Text Animation

Text splits into words or lines for staggered reveal.

Word-by-word animation

data-split-text-type="lines,words"

This paragraph animates line by line. Each line fades in separately creating a staggered reveal effect as you scroll.

data-split-text-type="lines"

Required Attributes

<!-- Container must have OS animation -->
<section data-arts-os-animation="data-arts-os-animation">

  <!-- Split text element -->
  <div class="split-text js-split-text" 
       data-split-text-type="lines,words" 
       data-split-text-set="words">
    Animated Headline
  </div>

  <!-- Line-only split -->
  <div class="split-text js-split-text" 
       data-split-text-type="lines" 
       data-split-text-set="lines">
    Paragraph text...
  </div>

</section>

Parallax

Elements move slower/faster than scroll.

<div data-arts-parallax="data-arts-parallax" 
     data-arts-parallax-factor="0.15">
  Moves at 15% scroll speed
</div>

Section 7

Components

Section Headline

Decorative line element

<div class="section__headline"></div>

.section__headline.mx-auto (centered)

Figure Info

Contact/property display pattern

Studio

Torsten Baldes
Hamburg, Germany
+49 176 123 45678

Animated Counter

Numbers animate from 0 to target on scroll.

139

Projects

52

Clients

8

Years

100

Percent

Social Icons

Testimonial/Quote Pattern

"For the past four years, we've always been enjoying to experiment new technologies, working with people coming from different backgrounds."

Torsten Baldes

Section 8

Cards & Figures

Figure Feature (Icon Box)

Service/feature cards with icon and title. Uses .figure-feature

<div class="figure-feature bg-white">
  <div class="figure-feature__header">
    <div class="figure-feature__icon">
      <img src="icon.svg" alt=""/>
    </div>
    <div class="figure-feature__heading h4 mt-0-5 mb-0">Title</div>
  </div>
</div>

Figure Member (Team Card)

Team member cards with avatar, name, position and social links. Uses .figure-member

<div class="figure-member figure-member_has-social">
  <div class="figure-member__avatar">
    <div class="lazy"><img data-src="photo.jpg" /></div>
  </div>
  <div class="figure-member__headline mt-1"></div>
  <div class="figure-member__footer mt-0-5">
    <div class="figure-member__name h4">Name</div>
    <div class="figure-member__position small-caps mt-1">Position</div>
    <div class="figure-member__social">
      <ul class="social">...</ul>
    </div>
  </div>
</div>

Figure Service (Service Card with Price)

Service card with heading, description, price and arrow button. Uses .figure-service

Image

€990

<div class="figure-service bg-white">
  <div class="row no-gutters">
    <div class="col-lg-5">
      <div class="figure-service__wrapper-bg">...image...</div>
    </div>
    <div class="col-lg-7">
      <div class="figure-service__content p-small">
        <div class="figure-service__header">
          <div class="figure-service__heading"><h2>Title</h2></div>
          <div class="figure-service__text"><p>Description</p></div>
        </div>
        <div class="figure-service__footer d-flex justify-content-between align-items-center">
          <div class="figure-service__price">
            <div class="small-caps mb-0-5">Starting From</div>
            <div class="figure-service__amount h3">€990</div>
          </div>
          <div class="figure-service__wrapper-button">...arrow...</div>
        </div>
      </div>
    </div>
  </div>
</div>

Section Video (with Play Button)

Video section with centered play button and dark overlay. Opens in lightbox.

play_arrow

Video Background Image

<section class="section section-video section-content section_h-700">
  <a class="section-video__link" href="video.mp4" data-autoplay>
    <div class="section-video__link-inner" 
         data-arts-cursor-label="Play">
      <div class="section-video__icon material-icons">play_arrow</div>
    </div>
  </a>
  <div class="section__bg">
    <div class="section-image__wrapper" data-arts-parallax data-arts-parallax-factor="0.15">
      <div class="lazy-bg" data-src="poster.jpg"></div>
    </div>
    <div class="overlay overlay_dark"></div>
  </div>
</section>

<!-- Overlay Classes: -->
<!-- .overlay          - Base overlay -->
<!-- .overlay_dark     - Dark semi-transparent overlay -->

Slider Dots & Counter

Navigation dots for sliders with SVG circle animation. Counter shows current/total.

01

04

<div class="slider__dots js-slider__dots">
  <div class="slider__dot slider__dot_active">
    <svg class="svg-circle" viewBox="0 0 60 60">
      <circle class="circle" cx="30" cy="30" r="29" fill="none"></circle>
    </svg>
  </div>
  <div class="slider__dot">...</div>
</div>

<!-- Counter -->
<div class="slider__counter slider__counter_mini">
  <div class="js-slider__counter-current">...</div>
</div>
<div class="slider__total slider__total_mini js-slider__counter-total">...</div>

CTA Section Pattern

Standard Call-to-Action layout used throughout Ryhe. Text + Button side by side.

Get in Touch

Section 9

Layout & Grid

Container Types

.container — Fixed max-width, centered

.container-fluid — Full width + gutters

.container-fluid.no-gutters — Full, no padding

Fluid Spacing

.pt-xsmall / .pb-xsmall — 30px → 50px

.pt-small / .pb-small — 30px → 120px

.pt-medium / .pb-medium — 50px → 240px

.pt-large / .pb-large — 100px → 360px

12-Column Grid

.col-lg-6

.col-lg-4

.col-lg-3

Row Modifiers

.justify-content-center

Left

Right

.no-gutters

No gap

Between

Section 10

Utility Classes

Display

.d-none — Hide

.d-block — Block

.d-flex — Flex

.d-inline-block — Inline-block

.d-lg-none — Hide on lg+

.d-lg-block — Show on lg+

Flex

.justify-content-center

.justify-content-between

.justify-content-end

.align-items-center

.align-items-start

.align-items-end

Sizing & Other

.w-100 — Width 100%

.h-100 — Height 100%

.overflow — Hidden overflow

.no-highlight — No selection

.mx-auto — Center horizontal

.order-lg-1/2 — Flex order

Fixed Margins

.mt-0 / .mb-0 — 0

.mt-0-5 / .mb-0-5 — 0.5rem

.mt-1 / .mb-1 — 1rem

.mt-2 / .mb-2 — 2rem

.mt-3 / .mb-3 — 3rem

.ml-1 / .mr-1 — Left/Right

Lazy Loading

<!-- Lazy image -->
<div class="lazy">
  <img src="#" data-src="image.jpg" alt="">
</div>

<!-- Lazy background -->
<div class="lazy-bg" data-src="image.jpg">
</div>

Kitchen Sink Reference

Complete Ryhe Framework Components

Based on deep analysis of _ryhe-base/HTML/ source files

Contents