Shrouded - CSS

Shrouded is a CSS library that is designed to help programmers create subtle and clean user interfaces. It is perfect for projects that require a modern and minimalist design. With Shrouded, you can easily create beautiful and responsive web pages.

Getting Started

To use Shrouded, download the CSS file and link it to your HTML page. You can also import it into your Sass or Less files if you are using a preprocessor.

<link rel="stylesheet" href="path/to/shrouded.css">

Alternatively, you can include it via a content delivery network (CDN) using the following URL:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shrouded-css/dist/shrouded.min.css">

Once you have linked the CSS file, you can start using the classes provided by Shrouded to style your elements.

Classes

Typography

Shrouded provides several classes for styling typography. These include:

• .heading - Used for headings such as h1-h6
• .subheading - Used for subheadings
• .lead - Used for introductory text
• .text - Used for regular body text
• .small - Used for small text

<h1 class="heading">Heading</h1>
<h2 class="subheading">Subheading</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Buttons

Shrouded provides several classes for styling buttons. These include:

• .btn - Used for regular buttons
• .btn-primary - Used for primary buttons
• .btn-secondary - Used for secondary buttons
• .btn-outline - Used for outlined buttons
• .btn-circle - Used for circular buttons

<button class="btn">Button</button>
<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-outline">Outlined Button</button>
<button class="btn-circle"><i class="fa fa-plus"></i></button>

Forms

Shrouded provides several classes for styling form elements. These include:

• .form-group - Used for grouping form elements
• .form-label - Used for labeling form elements
• .form-control - Used for form controls such as input and textarea
• .form-feedback - Used for displaying validation feedback

<div class="form-group">
  <label class="form-label" for="example-input">Input Label</label>
  <input class="form-control" id="example-input" type="text">
  <div class="form-feedback">Example feedback message.</div>
</div>

Cards

Shrouded provides classes for creating cards. These include:

• .card - Used for the card container
• .card-header - Used for the card header
• .card-body - Used for the card body
• .card-footer - Used for the card footer

<div class="card">
  <div class="card-header">Card Header</div>
  <div class="card-body">Card Body</div>
  <div class="card-footer">Card Footer</div>
</div>

Utility Classes

Shrouded provides several utility classes for common styling tasks. These include:

• .m-* - Used for setting margin
• .p-* - Used for setting padding
• .text-* - Used for setting text alignment
• .bg-* - Used for setting background color
• .text-*-color - Used for setting text color
• .border - Used for adding a border

<div class="m-2 p-2 text-center bg-gray text-white-color border">Example</div>

Conclusion

Shrouded is a simple and lightweight CSS library for creating beautiful and modern user interfaces. With its easy-to-use classes, you can quickly style your web pages without having to write a lot of custom CSS.