Upgrade your style.

Don't waste time writing code. Spend time experimenting with designs instead. Manuscript.css is a highly customizable CSS library that helps you make beautiful websites in no time.

Make beautiful web designs.


Manuscript.css is a prewritten CSS library with thoughtfully designed UI elements that actually work together. It's written such that you never need to worry about styling your web elements. What makes Manuscript.css different is that it's unique and incredibly customizable, and whatever you build looks pretty. The minimal design with an array of effects will make your website stand out from others with the same old styling. This webpage was built in 10 minutes using Manuscript.css!

Selected Examples


Header


    <header>
      <div class="content">
        <div class="header-logo">
          <img class="small-fit" src="Logo.svg"><div class="text-logo">Manuscript.css</div>
        </div>
        <div class="links">
          <div class="link underline active">Home</div>
          <div class="link underline">Install</div>
          <div class="link underline">How to Use</div>
        </div>
        <div class="menu"></div>
      </div>
    </header>
          

Typography


    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
          

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Buttons


    <button>Default</button>
    <button class="zoom">Zoom</button>
    <button class="simple">Simple</button>
    <button class="text">Text</button>
            
    <button class="success">Proceed</button>
    <button class="failure">Risk</button>
    <button class="info">Note</button>
          
Styles
Action

Form Elements


    <!--Login Forms-->
    <form>
      <div class="form-title">Sign In</div>
      <div class="form-text">E-mail</div>
      <input type="email">
      <div class="form-text">Password</div>
      <input type="password">
      <div><input type="submit" value="Login"><button class="text thin">New User?</button></div>
            </form>
    <!--Questionnaire Forms-->
    <form>
      <div class="form-title">Form Title</div>
      <div class="form-text">Question</div>
      <input type="text" class="full-width">
      <div class="form-text">Long Question</div>
      <textarea class="full-width" data-gramm_editor="false"></textarea>
      <input type="submit" value="Submit">
    </form>
          
Sign In
E-mail
Password

Form Title
Question
Long Question

Tool Tips


    <button class="tooltip" aria-label="Demo Tip">What do I do?</button>
          

Information Cards


    <div class="info-gallery center">
      <!--Adding info card with icon-->
      <div class="info-card">
        <div class="display icon">
          <i class="fas fa-laptop"></i>
        </div>
        <div class="title">Info Title</div>
        <div class="info">Hello World</div>
      </div>
      <!--Adding info card with image-->
      <div class="info-card">
        <div class="display"></div>
        <div class="title">Info Title</div>
        <div class="info">Hello World</div>
      </div>
      <!--Adding large info card-->
      <div class="info-card-large">
        <div class="display"></div>
        <div class="title">Info Title</div>
        <div class="info">Hello World</div>
      </div>
    </div>
          

Gallery Cards