Notifications générales du site
𐄂
logo Logo du framework illaWeight

A Dark Mode ready minimalist CSS framework

Navbar code 

        
/** === Navigation bar === */
<nav class="navigation" aria-label="navigation">
  <div class="brand">
    <a href="/" title="Aller à la page d'accueil">
      <img src="/image.png" alt="logo de la marque" />
    </a>
  </div>
  /** Menu hamburger */
  <input class="menu-hamburger" type="checkbox" id="menu-hamburger" aria-label="Open the menu"/>
  <label class="menu-icon" for="menu-hamburger">
    <span class="hamburger-icon" aria-hidden="true"></span>
  </label>
  /** Menu principal */
  <ul class="menu">
    <li><a href="#typography">Typography</a></li>
    <li><a href="#blockquote">Blockquote</a></li>
    <li><a href="#buttons">Buttons</a></li>
    <li>
      <a href="#" aria-label="submenu">Javascript</a>
        <ul>
          <li><a href="#darkMode">Dark Mode</a></li>
        </ul>
    <li>    
    /** Dark Mode switch */
      <input type="checkbox" class="checkbox" id="themeSwitch" aria-label="Dark Mode"/>
        <label for="themeSwitch" class="checkbox-label">
          <span class="moon" title="Dark">☽</span>
          <span class="sun" title="light">✷</span>
          <span class="ball" title="Dark mode"></span>
        </label>
      <script type="module" src="/js/themeSwitch.js">alt;/script>
    </li>
  </ul>
</nav>

illaWeightCSS Preview

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id lacus eu nulla porta sagittis non nec dui. Vivamus iaculis aliquet diam. Proin eu ullamcorper metus, at imperdiet ante.

This marks the history of FeatherCSS

You need to add data-theme="dark or light" attribute to your markup to enable Dark Mode.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id lacus eu nulla porta sagittis non nec dui. Vivamus iaculis aliquet diam. Proin eu ullamcorper metus, at imperdiet ante.

This marks the history of FeatherCSS

You need to add data-theme="dark or light" attribute to your markup to enable Dark Mode.

Typography code

          
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>
    Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Duis id lacus eu nulla porta sagittis non nec dui. Vivamus iaculis
    aliquet diam. Proin eu ullamcorper metus, at imperdiet ante.   
  </p>
  <p>This <mark>marks</mark> the history of FeatherCSS</p>
  <p>
    You need to add <strong><code>data-theme="dark or light"</code></strong> attribute to your markup to enable Dark Mode.
  </p>

Spacing

illawebWeight CSS includes a wide range of shorthand responsive margin, padding utility classes to modify an element's apparence.
Margin and padding

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from 1em to 7em.

Notations

  • m- for classes that set margin.
  • p- for classes that set padding.
  • mt- / pt- for classe that set margin or padding top
  • mb- / pb- for classe that set margin or padding bottom
  • ml- / pl- for classe that set margin or padding left
  • mr- / pr- for classe that set margin or padding right

Where size is 1 to 7

exemples :

            
.mt-1{
  margin-top : 1em;
}
.pl-3{
  padding-left:3em;
}

Blockquote

This changed my life, literally.
This changed my life, literally.
          
<blockquote>This changes my life, litterally.</blocquote>

Socials

  
 <div class="socials">
    <a href="#" title="Join us on Facebook">
      <i class="fa-brands fa-facebook" aria-hidden="true"></i>
    </a>
</div>

Buttons

            
<button class="button">Default button</button>
<button class="button button-priamry">Primary button</button>
<button class="button button-clear">Default button</button>
<button class="button button-secondary">Secondary button</button>
<button class="button button-warning">Warning button</button>
<button class="button button-error">Error button</button>

List

  • Categories
  • Posts
  • Users
  • Waffles
  • Pancakes
  1. Add 100g flour into a bowl
  2. Add 2x eggs into the bowl and mix
Room Size
1,200 SQFT
Bathrooms
2
  
  <ul class="clear">
    <li>Categories</li>
    <li>Posts</li>
    <li>Users</li>
  </ul>
  <ul>
    <li>Waffles</li>
    <li>Pancakes</li>
  </ul>
  <ol>
    <li>Add 100g flour into a bowl</li>
    <li>Add 2x eggs into the bowl and mix</li>
  </ol>

  <dl>
    <dt>Room Size</dt>
    <dd>1,200 SQFT</dd>
    <dt>Bathrooms</dt>
    <dd>2
  </dl>
 
    <ul class="reset">
      <li><a href="#list">Link 1</a></li>
      <li><a href="#list">Link 2</a></li>
    </ul>

Colonnes

Aside 30%

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, officiis eum at voluptatum, dolores voluptas eaque omnis ex odit vero, quasi facilis est distinctio inventore debitis praesentium aut rem dolore!

Content 70%

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem culpa sunt provident reprehenderit vitae esse deserunt non repellendus vero, fugit et ipsa perferendis repellat voluptatum quo velit doloremque beatae necessitatibus.

col

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, vel fugit ut esse nostrum aut blanditiis id, qui quas quam fuga suscipit vero quod, voluptates amet quibusdam ipsam consequuntur repellendus!

col

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, vel fugit ut esse nostrum aut blanditiis id, qui quas quam fuga suscipit vero quod, voluptates amet quibusdam ipsam consequuntur repellendus!

col

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, vel fugit ut esse nostrum aut blanditiis id, qui quas quam fuga suscipit vero quod, voluptates amet quibusdam ipsam consequuntur repellendus!

col

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, vel fugit ut esse nostrum aut blanditiis id, qui quas quam fuga suscipit vero quod, voluptates amet quibusdam ipsam consequuntur repellendus!

Half 50%

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente ut accusantium debitis ullam possimus amet ipsam illum sint voluptatibus nemo similique tempora, cupiditate recusandae. Delectus quis temporibus cumque tempora vel.

Third 33%

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, aut repellendus blanditiis tempora corrupti illo. Aliquam laboriosam eum voluptatem illum sint eligendi vitae molestias? Soluta alias hic fugit minima! Perspiciatis?

Fourth 25%

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error sequi accusantium inventore facilis, aperiam impedit eius? Minima id veritatis totam? Nisi reprehenderit perspiciatis corporis quia, molestias pariatur dolore eum dolorem?

Fifth 20%

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi nobis dolor soluta officia cum nam eum vitae quas nihil, ut autem facilis. Repudiandae magnam, labore modi omnis doloribus corrupti quo?

Sixth 16%

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque explicabo deleniti totam dolor eveniet porro deserunt incidunt minus odio praesentium placeat, quam sequi, corporis blanditiis quae id aspernatur cupiditate velit.

            
<div class="row">
  <div class="aside">
    <h5>Aside 30%</h5>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, officiis eum at voluptatum, dolores
      voluptas eaque omnis ex odit vero, quasi facilis est distinctio inventore debitis praesentium aut rem
      dolore!</p>
  </div>
  <div class="content">
    <h5>Content 70%</h5>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem culpa sunt provident reprehenderit vitae
      esse deserunt non repellendus vero, fugit et ipsa perferendis repellat voluptatum quo velit doloremque
      beatae necessitatibus.</p>
  </div>
</div>
<div class="row">
  <div class="col">
    <h5>col</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, vel fugit ut esse nostrum aut
      blanditiis id, qui quas quam fuga suscipit vero quod, voluptates amet quibusdam ipsam consequuntur
      repellendus!</>>
  </div>
  <div class="col">
    <h5>col</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, vel fugit ut esse nostrum aut
      blanditiis id, qui quas quam fuga suscipit vero quod, voluptates amet quibusdam ipsam consequuntur
      repellendus!</p>
  </div>
  <div class="col">
    <h5>col</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, vel fugit ut esse nostrum aut
      blanditiis id, qui quas quam fuga suscipit vero quod, voluptates amet quibusdam ipsam consequuntur
      repellendus!</p>
  </div>
  <div class="col">
    <h5>col</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, vel fugit ut esse nostrum aut
      blanditiis id, qui quas quam fuga suscipit vero quod, voluptates amet quibusdam ipsam consequuntur
      repellendus!</p>
  </div>
  <div class="half">
    <h5> Half 50%</h5>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente ut accusantium debitis ullam
      possimus amet ipsam illum sint voluptatibus nemo similique tempora, cupiditate recusandae. Delectus quis
      temporibus cumque tempora vel.</p>
  </div>
  <div class="third">
    <h5>Third 33%</h5>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, aut repellendus blanditiis tempora
      corrupti illo. Aliquam laboriosam eum voluptatem illum sint eligendi vitae molestias? Soluta alias hic
      fugit minima! Perspiciatis?</p>
  </div>
  <div class="fourth">
    <h5>Fourth 25%</h5>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Error sequi accusantium inventore facilis,
      aperiam impedit eius? Minima id veritatis totam? Nisi reprehenderit perspiciatis corporis quia,
      molestias pariatur dolore eum dolorem?</p>
  </div>
  <div class="fifth">
    <h5>Fifth 20%</h5>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi nobis dolor soluta officia cum nam eum
      vitae quas nihil, ut autem facilis. Repudiandae magnam, labore modi omnis doloribus corrupti quo?</p>
  <div>
  <div class="sixth">
    <h5>Sixth 16%<h5>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque explicabo deleniti totam dolor eveniet
      porro deserunt incidunt minus odio praesentium placeat, quam sequi, corporis blanditiis quae id
      aspernatur cupiditate velit.</p>
  </div>
</div>

Card

description

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo blanditiis quod maiores vitae, delectus ex veritatis velit asperiores dignissimos incidunt repellendus non veniam excepturi enim cum aliquam. Voluptatum, perferendis deleniti?

description

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo blanditiis quod maiores vitae, delectus ex veritatis velit asperiores dignissimos incidunt repellendus non veniam excepturi enim cum aliquam. Voluptatum, perferendis deleniti?

description

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo blanditiis quod maiores vitae, delectus ex veritatis velit asperiores dignissimos incidunt repellendus non veniam excepturi enim cum aliquam. Voluptatum, perferendis deleniti?

description

Title card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam optio vero velit excepturi nesciunt non aliquid obcaecati veritatis, voluptatibus a, quia possimus consequuntur nihil fugit doloremque nisi harum aspernatur beatae.

Footer reference text
description

Title card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam optio vero velit excepturi nesciunt non aliquid obcaecati veritatis, voluptatibus a, quia possimus consequuntur nihil fugit doloremque nisi harum aspernatur beatae.

Footer reference text
description

Title card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam optio vero velit excepturi nesciunt non aliquid obcaecati veritatis, voluptatibus a, quia possimus consequuntur nihil fugit doloremque nisi harum aspernatur beatae.

Footer reference text

Title card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam optio vero velit excepturi nesciunt non aliquid obcaecati veritatis, voluptatibus a, quia possimus consequuntur nihil fugit doloremque nisi harum aspernatur beatae.

Footer reference text

Title card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam optio vero velit excepturi nesciunt non aliquid obcaecati veritatis, voluptatibus a, quia possimus consequuntur nihil fugit doloremque nisi harum aspernatur beatae.

Footer reference text

Title card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam optio vero velit excepturi nesciunt non aliquid obcaecati veritatis, voluptatibus a, quia possimus consequuntur nihil fugit doloremque nisi harum aspernatur beatae.

Footer reference text
  
<div class="card">
    <div class="card-header-text">
      <h3>title card</h3>
    </div>
    <div class="card-content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Laboriosam optio vero velit excepturi nesciunt non aliquid
        obcaecati veritatis, voluptatibus a, quia possimus
        consequuntur nihil fugit doloremque nisi harum aspernatur
        beatae.
      </p>
    </div>
    <div class="card-footer">footer reference texte</div>
</div>

Your username is available

Password is too weak

Select a maintenance drone:
Choose your monster's features:
Additional Comment

Choose your monster's colors:

  
  <div class="container">
          <form method="post">
            <div class="form">
              <p class="form-control">
                <label for="name">Username</label>
                <input type="text" name="username" id="username" placeholder="Enter your username" />
                <span class="form-success-message" aria-live="polite">
                Your username is available
                </span>
              </p>

              <p class="form-control">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="your password" />
                <span class="form-error-message" aria-live="polite">
                Password is too weak
                </span>
              </p>
                 <p class="form-control">
                <label for="meeting-time">Date</label>
                <input type="datetime-local" id="meeting-time" name="meeting-time" min="2024-11-07T00:00" max="2030-06-14T00:00" />
              </p>
              <div class="select">
                <label for="pet-select">Choose a pet:</label>
                <select name="pets" id="pet-select">
                  <option value="">--Please choose an option--</option>
                  <option value="dog">Dog</option>
                  <option value="cat">Cat</option>
                  <option value="hamster">Hamster</option>
                  <option value="parrot">Parrot</option>
                  <option value="spider">Spider</option>
                  <option value="goldfish">Goldfish</option>
                </select>
              </div>
             
              <fieldset>
                <legend>Select a maintenance drone:</legend>
                <div>
                  <input type="radio" id="huey" name="drone"  value="huey" checked />
                  <label for="huey">Huey</label>
                </div>
                <div>
                  <input type="radio" id="dewey" name="drone" value="dewey" />
                  <label for="dewey">Dewey</label>
                </div>
                <div>
                  <input type="radio" id="louie" name="drone" value="louie" />
                  <label for="louie">Louie</label>
                </div>
              </fieldset>
           
              <fieldset>
                <legend>Choose your monster's features:</legend>
                <div>
                  <input type="checkbox" id="scales" name="scales" checked />
                  <label for="scales">Scales</label>
                </div>
                <div>
                  <input type="checkbox" id="horns" name="horns" />
                  <label for="horns">Horns</label>
                </div>
              </fieldset>
            
              <div class="form-control">
                <span class="label-text">Additional Comment</span>
                <textarea id="comment" placeholder="Type your comment"rows="3"></textarea>
              </div>
             
              <p>Choose your monster's colors:</p>
              <div>
                <input type="color" id="head" name="head" value="#e66465" />
                <label for="head">Head</label>
              </div>
              <div>
                <input type="color" id="body" name="body" value="#f6b73c" />
                <label for="body">Body</label>
              </div>
              <button class="button btn-primary mt-2" type="submit">
                Send
              </button>
            </div>
          </form>
        </div>

Table

List of concurrents (caption on bottom)
Person Most interest in Age
Chris HTML tables 22
Dennis Web accessibility 45
Sarah JavaScript frameworks 29
Karen Web performance 36
Average age 33 
          
  <table>
    <caption>
      List of concurrents (<small>caption on bottom</small>)
    </caption>
    <thead>
      <tr>
        <th scope="col">Person</th>
        <th scope="col">Most interest in</th>
        <th scope="col">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Chris</th>
        <td>HTML tables</td>
        <td>22</td>
      </tr>
      <tr>
        <th scope="row">Dennis</th>
        <td>Web accessibility</td>
        <td>45</td>
      </tr>
      <tr>
        <th scope="row">Sarah</th>
        <td>JavaScript frameworks</td>
        <td>29</td>
      </tr>
      <tr>
        <th scope="row">Karen</th>
        <td>Web performance</td>
        <td>36</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row" colspan="2">Average age</th>
        <td>3<</td>
      </tr>
    </tfoot>
  </table>

Portfolio

  • All
  • Landscape
  • Architecture
  • Sky
  • Divers
description
description
description
description
description
description
description
description
description
description
description
description 
          
 <div>
  <ul class="portfolio-menu">
    <li class="current" data-target="all">All</li>
    <li data-target="landscape">Landscape</li>
    <li data-target="architect">Architecture</li>
    <li data-target="sky">Sky</li>
    <li data-target="divers">Divers</li>
  </ul>
  <div class="portfolio-item">
    <div class="card" data-item="landscape">
      <img src="https://picsum.photos/id/12/600" alt="description" />
    </div>
    <div class="card" data-item="divers">
      <img src="https://picsum.photos/id/31/600" alt="description" />
    </div>
    <div class="card" data-item="sky">
      <img src="https://picsum.photos/id/38/600" alt="description" />
    </div>
    <div class="card" data-item="landscape">
      <img src="https://picsum.photos/id/46/600" alt="description" />
    </div> 
  </div>
</div>

Javascript

Here is the javascript code used for all the functions of the css framework 
            
/** == Dark mod switch == */

const themes = {
  light: "light",
  dark: "dark",
};
const dataAttribute = "data-theme";
const checkedAttribute = "aria-checked";
const localStorageKey = "theme";

// Check if the OS is set to prefer the dark color scheme
function userPrefersDarkThemeInOs() {
  return (
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: dark)").matches
  );
}
// Set the theme attribute on the document element (aka on )
function setThemeAttribute(theme) {
  document.documentElement.setAttribute(dataAttribute, theme);
}

// Get theme attribute on the document element (aka on )
function getThemeAttribute() {
  return document.documentElement.getAttribute(dataAttribute);
}

// Get the local storage value
function getLocalStorage() {
  if (!window.localStorage) {
    return;
  }
  return window.localStorage.getItem(localStorageKey);
}

// Set the local storage value
function setLocalStorage(theme) {
  if (!window.localStorage) {
    return;
  }
  window.localStorage.setItem(localStorageKey, theme);
}

// Set the checked attribute on the switch toggle element
function setSwitch(state, toggleSwitch) {
  toggleSwitch.setAttribute(checkedAttribute, state);
}

// Perform theme switch
function switchTheme(toggleSwitch) {
  const wasChecked = toggleSwitch.getAttribute(checkedAttribute) === "true";
  setSwitch(!wasChecked, toggleSwitch);
  if (!wasChecked) {
    setThemeAttribute(themes.dark);
    setLocalStorage(themes.dark);
  } else {
    setThemeAttribute(themes.light);
    setLocalStorage(themes.light);
  }
}

// Initialise the theme switch element
function initThemeToggleSwitch(switchButtonSelector) {
  // Get theme toggle switch
  const toggleSwitch = document.querySelector(switchButtonSelector);
  if (getThemeAttribute() === themes.dark) {
    setSwitch(true, toggleSwitch);
  }

  // Add click event to theme toggle switch
  toggleSwitch.addEventListener(
    "click",
    () => switchTheme(toggleSwitch),
    false
  );
}

function initTheme() {
  const localStorageValue = getLocalStorage();
  if (localStorageValue) {
    setThemeAttribute(localStorageValue);
  } else if (userPrefersDarkThemeInOs()) {
    setThemeAttribute(themes.dark);
  }
}

initTheme();

window.addEventListener("DOMContentLoaded", () => {
  if (typeof initThemeToggleSwitch !== undefined) {
    initThemeToggleSwitch("#themeSwitch");
  }
});
        
      
          
/** === Sroll to top === */
document.addEventListener("scroll", handleScroll);

let scrollToTopBtn = document.querySelector(".top-btn");

function handleScroll() {
  let scrollableHeight =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;

  let GOLDEN_RATIO = 0.5;

  if (document.documentElement.scrollTop / scrollableHeight > GOLDEN_RATIO) {
    //show button

    scrollToTopBtn.style.display = "block";
  } else {
    //hide button

    scrollToTopBtn.style.display = "none";
  }
}

scrollToTopBtn.addEventListener("click", scrollToTop);

function scrollToTop() {
  window.scrollTo({
    top: 0,

    behavior: "smooth",
  });
}
          
          
        
          
/** === Portfolio === */
let sortMenu = document.querySelector(".portfolio-menu").children;
console.log(sortMenu);
let sortItem = document.querySelector(".portfolio-item").children;
for (const element of sortMenu) {
  console.log(element);
  element.addEventListener("click", function () {
    for (const element of sortMenu) {
      element.classList.remove("current");
    }
    this.classList.add("current");

    let targetData = this.getAttribute("data-target");

    for (const element of sortItem) {
      element.classList.remove("active");
      element.classList.add("delete");

      if (
        element.getAttribute("data-item") == targetData || targetData == "all"
      ) {
        element.classList.remove("delete");
        element.classList.add("active");
      }
    }
  });
}
          
        

/** === Alert Message === */
let alert = document.querySelector(".alert");
let closeIcon = document.querySelector(".alert-close");
let progress = document.querySelector(".progress");
let timer;
timer = setTimeout(() => {
  alert.classList.add("hidden");

  progress.classList.add("hidden");
}, 6000); //1s = 1000 milliseconds

closeIcon.addEventListener("click", () => {
  alert.classList.add("hidden");
  clearTimeout(timer);
});