stylent css provides minimal style configuration for a quick and clean starting point. It is specially designed for better performance and higher productivity with fewer properties to result in cleaner code. It is small, powerful, elegant, and fully configurable via CSS variables.

Getting Started

You simply add the main stylent css file in the header of your HTML project, that's all!

Also, you can install it locally with NPM:

npm i @graphery/stylent.css

Desktop and mobile

stylent css is wholly prepared for work perfectly in desktop, tablet, or mobile environments. Each element adjusts its characteristics for the best style in every size. For example, when a screen width of less 768px, default font is reduced to 14px, and all headers are reduced in size.

Browser support

stylent css works perfectly in all modern browsers, but does not work in older browsers that do not have support for CSS Variables. Check the CSS Variables support in caniuse.com.

Table of content

• Typography
• Link
• Blockquote
• List
• Code
• Box
• Buttons
• Forms
• Tables
• Header, Main, Footer, Section, and Article
• Grids
• Dark mode
• Auxiliary Classes
  • Hidden
  • Text align
  • Element distribution (flex)
  • Element size
  • Selection
  • Wrap
• Customization and Theming

Typography

The typography has font-size defined in 16px and line-height in 1.5em. stylent css uses the font-family by operative system:

• Mac & iOS: -apple-system, BlinkMacSystemFont
• Windows: 'Segoe UI'
• Android: 'Roboto'
• Generic: 'Helvetica Neue', Arial, sans-serif

Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
Regular Text

Link

The Anchor element creates a hyperlink to web pages, files, email addresses, or locations in the same page.

simple link

Blockquotes

The Blockquote represents a section that is quoted from another source.

  stylent css is amazing.

Lists

The List is a very versatile and common way to display items. stylent css has three types of lists: The unordered list use ul element will be marked with an outline circles, the ordered list use ol element and your items will be marked with numbers, the description list use dl element and your items will not be marking, only spacings.

Unordered list

  
item 1
  
item 2


Ordered list

  
item 1
  
item 2


Description list 

  
item 1
  
item 1.1

Image

The Images don't have special style, only we remove the border when is included into an anchor, and the vertical-align is defined as `bottom`.

This is an inline image 

Code

The Code element represents a fragment of computer code. Just wrap anything in a code and it will appear like this. if you need a block, by default, enter the code within the pre element.

.class {
  color: #9b4dca;
}

<pre><code lang="css">.class {
  color: #9b4dca;
}</code></pre>

Box

You can define a box with the class .box

Message in a box

Buttons

The Button, an essential part of any user experience. Buttons come in three basic styles in stylent css: The button element has flat color by default, whereas .outline has a simple outline around.

Default Button (a class="button")
Default Button (<button>)
Outlined Button (class="outline")

Forms

stylent css helps to define forms that work perfectly on desktop and mobile in an easy way and with a design focused on user experience.

  

    
Example
    Name
    
    Age Range
    
      0-13
      14-17
      18-23
      24+
    
    Comment
    
    

      

        Send
      
      

        
        Send a copy to yourself
    
  

All form elements

Check how is displayed every form element with stylent css:

Multi field per row

You can combine forms element and grid for define multiple fields per row.

  

  
send


  

  

    search
  

  

    
Name
    

    
Lastname
    

  

Tables

The Table element represents data in two dimensions. stylent css displays an elegant table with thead and tbody estructure.

  

    
Fist name
Last name
Age
Location
  
  

    
Jane
Doe
27
Los Angeles, CA
    
John
 Thompson
25
Los Angeles, CA
  

Semantic blocks

The Block Semantic Tags allow you to structure HTML content in an orderly and well-defined manner. stylent css defines styles for header, main, andfooter with a maximum width of 960px, reducing their width when the screen is less than that value. Also, you can use the section orarticle tags to define isolated parts of your HTML.

  

    
Main, section and other semantic tags
    
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum felis ac
      purus malesuada rutrum. Aliquam cursus eget nisl non finibus. Fusce accumsan metus
      sit amet enim lobortis placerat. Sed volutpat diam eu bibendum euismod. Cras sit
      amet tortor sed dolor euismod scelerisque.
  

As example, this document uses this kind of tag.

Grids

The Grid Layout is a two-dimensional grid-based layout system. With stylent css you only must be include a .rom and every .col classes. Alternativatly you can use .col-1 to .col-12 for defines the column relative size.

  
.col
  
.col
  
.col
  
.col


  
.col-2
  
.col-10

    

By default, the columns of the grid have no space between them, but you can use the .gutter class to add space between columns.

  
.col
  
.col
  
.col
  
.col


  
.col-2
  
.col-10

    

Dark mode

Dark mode has gone mainstream and Apple, Microsoft and Google have added dark mode to their operating systems. That's why stylent css includes an automatic dark mode style. You don't need to do anything.

If you want to set the dark mode on your page regardless of the operating system, you can use the .dark auxiliary style, usually in the <body> tag.

Conversely, if you want to set the light mode on your page regardless of the operating system, you can use the .light auxiliary style, usually in the <body> tag.

Auxiliary Classes

stylent css provides others useful basic classes to speed up development.

Hidden

hidden text

Text align

Left
Center
Right

Element distribution (flex)

Element size

Selection

Wrap

Customization and Theming

You can define our own style with a few of CSS custom variables. If you change the initial values, you can define a custom theme for stylent css. You can create your own style and see the result directly with our

interactive theme editor

Of course, if you prefer to work directly by code, this is the list of available CSS custom variables and its initial values: