styles
Download now
GitHub

Quick-start Instructions


  <!DOCTYPE html> 
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/antsand/styles/css/antsand-common-styles.css">
        </head>
        <body>
        </body>
    </html>

A responsive CSS library to create stunning websites

ANTSAND Styles is a CSS open source library designed to create beautiful webpages using wireframe layouts. Style the layout of your webpage using simple .class and showoff your creativity.

Built from the grounds up. Using sass, breakpoint, susy 2 and compass

Download Now
Responsive layouts
Style for various device types. Make your layout mobile first and friendly.
Mobile
Design for mobile
Tablet
Design for tablet
Minidesktop
Design for minidesktop
Desktop
Design for desktop
Layout classes
Design for tablet
Component classes
Design for tablet
Explicit Class
Design for tablet
Theme Class
Design for tablet
Button Elements
Design for tablet
Social Elements
Design for tablet
Tooltip Elements
Design for tablet
Gallery Elements
Design for tablet
Components styles
Browse all Components
Nav Bar
Design for tablet
Carousel
Design for tablet
Testimonails
Design for tablet
Vanilla Javacsript
Raw javasctipt without using any libraries
Javascript Functions
Simple functions to add interactivity
Javascript Interactivity
Add styles to elements and components
Javascript effects
Add effects to different components

Installation

Include Styles's source Sass and Javascript files via npm. Package managed installs do not include documentation, but include our scripts, build system and readme. 

                    $ npm install antsand-styles 
                    
                    $ gem install antsand-styles -v 1.0.0  
                    
                    
                      $ git clone https://github.com/antsand/styles.git

Read Installation docs

Styles CDN

To get started quickly, include Style's compiled CSS and JS

CSS only

Insert CSS 

                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/antsand/styles/css/styles.css">
JS
Explore docs

Official Themes

Browse themes

What is Styles?

As you start to create beautiful webpages, you want your website to look unique, have elements and styles that look creative and make it easy for the viewers to read and navigate your site. Styles goal is to enable web designers and developers create stunning webpages quickly without toying too much with CSS.

Styles is a frontend tool to help you design and develop powerfull websites faster. It is written in SASS and uses Susy v2.0 and Compass. Styles being open source, you have the luxuary to download the source code and modify it to your liking.

Styles has the power to help you design websites using few CSS classes or you can design based on different component blocks or have the luxury to just style one element at a time.

It is this flexibility that makes ANTSAND Styles truely poweful.

Why designers and programmers love Styles.

  1. Create any layout using simple classes
  2. Design webpages using predfined color and themes
  3. Powerful support and resources to help you get started quickly
  4. Variety of examples to help you create beautiful webpages in minutes
Brilliant websites created using Styles, including these SEO optimized websites:

Styles layout examples

Basic grid layouts to get you started with building within the Styles grid system.

In these examples .themed-layout class is added to the columns to add some themings. This is not a class avaiable in Styles by default.

Four layout tiers

All devices including Mobile, tablet, mini desktop, desktop
.span-1-of-3-inside
.span-1-of-3-inside
.span-1-of-3-last-inside
.span-1-of-3-inside-tablet
.span-1-of-3-inside-tablet
.span-1-of-3-last-inside-tablet
.span-1-of-3-inside-minidesktop
.span-1-of-3-inside-mini-desktop
.span-1-of-3-last-inside-minidesktop
.span-1-of-3-inside-desktop
.span-1-of-3-inside-desktop
.span-1-of-3-last-inside-desktop

Three equal columns with spacing

Get three equal width coloumns with inbuilt padding. On mobile devices, the coloumns will automatically stack

.span-1-of-3-tablet
.span-1-of-3-tablet
.span-1-of-3-last-tablet

Three unequal columns

Get three equal width coloumns with inbuilt padding. On mobile devices, the coloumns will automatically stack

.span-1-of-5-tablet
.span-3-of-5-tablet
.span-1-of-5-last-tablet

Two unequal columns

Get 2 unequal width columns with inbuilt padding. On mobile devices, the coloumns will automatically stack

.span-6-of-8-tablet
.span-2-of-8-last-tablet
.span-2-of-8-tablet
.span-6-of-8-last-tablet

Full width, single column

No classes are necessary for full-width elements.

Two columns with 2 nested column

.span-6-of-8
.span-1-of-2-inside
.span-1-of-2-last-inside
.span-2-of-8-last-last-inside

Square boxes (Galleries)

Inside square boxes, the content can either be aligned in the middle or at the top.

.gallery-6-square-tablet

.gallery-2-square-sm

.gallery-square-content-middle
.gallery-6-square-tablet

.gallery-2-square-sm

.gallery-square-content-middle
.gallery-6-square-tablet

.gallery-2-square-sm

.gallery-square-content-middle
.gallery-6-square-tablet

.gallery-2-square-sm

.gallery-square-content-middle
.gallery-6-square-tablet

.gallery-2-square-sm

.gallery-square-content-middle
.gallery-6-square-tablet

.gallery-2-square-sm

.gallery-square-content-middle
.gallery-8-square-tablet

.gallery-square-content-middle
.gallery-8-square-tablet

.gallery-square-content-middle
.gallery-8-square-tablet

.gallery-square-content-middle
.gallery-8-square-tablet

.gallery-square-content-middle
.gallery-8-square-tablet

.gallery-square-content-middle
.gallery-8-square-tablet

.gallery-square-content-middle
.gallery-8-square-tablet

.gallery-square-content-middle
.gallery-8-square-tablet

.gallery-square-content-middle

Masonary Layouts

Create a masonary style layout from 2 to 9 tiles per column

.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet
.mason-item mason-item-4-tablet

Explore to see all possible column widths and layouts

Explore columns

Styles Component examples

  • Navigation bars
  • Intro Banner
  • Feature Benefits
  • Service Products
  • How it works
  • About section
  • Clients
  • Team
  • Portfolio
  • Pricing
  • Testimonials
  • Blog /News
  • Multitask section
  • Subscribe
  • F.A.Q
  • Contact
  • Flow chart
  • Footer
Home
    • Main Navigation
    • Home
      .nav-item
    • Products
      • Product 1
      • Product 2
      • Product 3
        • .nav-menu-dropdown-container
    • About Us
    • Our Work
      • .nav-item-container
      .nav-menu-align-left-right
      .nav-item-container
      .nav-menu-align-right-left

    Quick-start to make a Nav Bar 

    
<div class="nav nav-black  styles-dropshadow" style="height: 50px;padding-left: 15px;"><div class="nav-logo float-left position-relative" style="width: 25px; height: 25px;"><img src="/builds/production/images/logo.svg"> </div> <ul class="cf nav-menu-align-left-right nav-menu-container"><li class="nav-item" style="line-height: 50px; padding: 0px 15px;">
                Home 
                </li> <li class="nav-item" style="line-height: 50px; padding: 0px 15px;">
                Products
                <ul class="nav-menu-subitem-container styles-dropshadow" style="width: 150%; left: 0px;">
<li class="nav-item" style="padding: 10px;">Product 1</li> <li class="nav-item" style="padding: 10px;">Product 2</li> <li class="nav-item" style="padding: 10px;">Product 3</li>  </ul></li> <li class="nav-item" style="line-height: 50px; padding: 0px 15px;">
                About Us 
            </li> <li class="nav-item" style="line-height: 50px; padding: 0px 15px;">
                Our Work 
            </li> </ul> <ul class="nav-menu-align-right-left nav-menu-container" style="padding-right: 5px;"><img src="/builds/production/images/list_circle_active.svg" class="nav-item" style="margin: 0px 5px; right: 0px; width: 10px; height: 10px; max-width: none; max-height: none; object-fit: contain;"> <img src="/builds/production/images/list_circle_active.svg" class="nav-item" style="margin: 0px 5px; right: 0px; width: 10px; height: 10px; max-width: none; max-height: none; object-fit: contain;"> <img src="/builds/production/images/list_circle_active.svg" class="nav-item" style="margin: 0px 5px; right: 0px; width: 10px; height: 10px; max-width: none; max-height: none; object-fit: contain;"> <div style="margin-top: 6px; display: block; height: 100%; position: relative;"> </div></ul></div>
    Home
    • Intro Banner
    Sign up!

    this is a demo

    .span-1-of-2-inside
    Home
    • Feature / Benefits
    Features

    this is a demo to demonstrate feature layouts

    Feature 1

    This is a brief description of feature 1

    .gallery-3
    Feature 2

    This is a brief description of feature 2

    Feature 3

    This is a brief description of feature 3

    Products & Services
    • Service / Products
    Services

    this is a demo to demonstrate service layouts

    Service 1

    This is a brief description of service 0

    Service 2

    This is a brief description of service 1

    Service 3

    This is a brief description of service 2

    Service 4

    This is a brief description of service 3

    Service 5

    This is a brief description of service 4

    Service 6

    This is a brief description of service 1

    .gallery-3
    Home
    • How it Works
    How it works

    this is a demo to demonstrate 'How it works' layouts

    First Step

    This is a brief description of feature 1

    .gallery-3
    Second Step

    This is a brief description of feature 2

    Third Step

    This is a brief description of feature 3

    About Us
    • About Section
    About Us

    This is a demo about us section. You can position your about us page using various layouts using Styles.

    You can have two column layout or multiple colum layout. You can be creative about your page. Look below for more layout examples.

    Home
    • Clients
    Clients

    This is a section to show all your clients. You can position your clients page using various layouts using Styles.

    Client 1
    Client 2
    Client 3
    Client 4
    Client 5
    Client 6
    Client 7
    Client 8
    Home
    • Teams
    Team member 1

    CEO, Owner

    This is a brief description of the team member

    Team member 2

    CEO, Owner

    This is a brief description of the team member

    Team member 3

    CEO, Owner

    This is a brief description of the team member

    Team member 4

    CEO, Owner

    This is a brief description of the team member

    Home
    • Portfolio
    Portfolio 1

    This is where you can write a brief description about your project.

    Portfolio 2

    This is where you can write a brief description about your project.

    Home
    • Pricing
    Pricing
    Starter
    Basic
    $25
    per month
    unlimited
    Feature two
    unlimited
    Feature three
    unlimited
    Feature four
    unlimited
    Feature one
    Recommended
    Advanced
    $49
    per month
    unlimited
    Feature two
    unlimited
    Feature three
    unlimited
    Feature four
    unlimited
    Feature one
    Delux
    $99
    per month
    unlimited
    Feature two
    unlimited
    Feature three
    unlimited
    Feature four
    unlimited
    Feature one
    p
    Home
    • Testimonials
    Testimonials

    this is a demo to demonstrate testimonials

    Elisabeth Anderson

    "This is the box where you write a brief descrStyles has saved my life. "

    .testimonial
    Home
    • Blogs / News
    Home
    • Multitask
    Home
    • Subscribe
    Home
    • F.A.Q
    Home
    • Contact
    Home
    • Flowchart
    Home
    • Footer