DOCSEARCHbyAlgolia
Submit Docs

Grilli Restaurant Website Template

repository·master·Indexed 20 days ago

https://github.com/codewithsadee/grilli

A fully responsive restaurant website template built with HTML, CSS, and JavaScript. Includes a design system featuring CSS variables for colors, typography, and layout, as well as integration guides for Google Fonts and Ionicon.

Tokens
894
Snippets
3
Records
3
Agent score
19%

What's inside Grilli

  1. Import Google Fonts and Ionicon

    master

    To use the typography and icons required by the Grilli design system, include the following links in your HTML file.

    Google Fonts Includes 'DM Sans' (weights 400, 700) and 'Forum'.

    Ionicon Provides the icon set via ESM and a nomodule fallback.

    <!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Forum&display=swap" rel="stylesheet">

<!-- Ionicon -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

  2. Run Grilli locally

    master

    To run the Grilli restaurant website on your local machine, clone the repository using Git. Ensure you have Git installed on your operating system first.

    # Windows
git clone https://github.com/codewithsadee/grilli.git

# Linux and macOS
sudo git clone https://github.com/codewithsadee/grilli.git

  3. Reference Grilli CSS Variables

    master

    The Grilli project uses a comprehensive set of CSS custom properties (variables) for consistent styling. Use these tokens to maintain design fidelity across colors, typography, spacing, and effects.

    Colors

    Includes various shades of black (--smoky-black-*, --eerie-black-*), gold (--gold-crayola), and white with alpha transparency.

    Gradients

    • --loading-text-gradient: A specific linear gradient for loading text effects.
    • --gradient-1: A dark-to-transparent top-down gradient.

    Typography

    • Fonts: --fontFamily-forum and --fontFamily-dm_sans.
    • Sizes: Responsive font sizes using calc() (e.g., --fontSize-display-1) and fixed sizes.
    • Weights: --weight-regular (400) and --weight-bold (700).
    • Line Height & Letter Spacing: Standardized scales for vertical and horizontal rhythm.

    Layout & Effects

    • Spacing: --section-space for consistent vertical margins.
    • Shadow: --shadow-1 for depth.
    • Border Radius: --radius-24 and --radius-circle.
    • Transitions: Standardized durations (--transition-1 to --transition-3) with ease timing.
    /* Example usage of design tokens */
.hero-title {
  font-family: var(--fontFamily-forum);
  font-size: var(--fontSize-display-1);
  color: var(--gold-crayola);
  transition: var(--transition-1);
}

.card {
  background-color: var(--eerie-black-1);
  border-radius: var(--radius-24);
  box-shadow: var(--shadow-1);
  padding: var(--section-space);
}