S

The future web experience

Get Started
GitHub

npm install sculptorcss
v0.1.6

About

Sculptor is a CSS Framework that allows you make beautiful web-based applications. We've got inspired in designs we believe is real futuristic and in colors of the universe. Created by Fabio Soares on a 2016 saturday afternoon.

Share with friends

Give us a star on GitHub and share with friends.

Github Facebook Twitter Google+ LinkedIn

Getting Started

Download on Github Releases or use CDN

Clone our repository: 

$ git clone git@github.com:1fabiosoares/sculptor.git

Download npm package 

$ npm install sculptorcss

Download bower package 

$ bower install sculptor

Download composer package 

$ composer require 1fabiosoares/sculptor

Put it on you HTML page

Using CDN

<link rel="stylesheet" href="https://unpkg.com/sculptorcss/css/sculptor.min.css">

or using a local reference

<link rel="stylesheet" href="css/sculptor.min.css">

Examples

Typography

Heading

Heading

Heading

Heading

Heading
Heading
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

Text Modifiers

<p>Lorem ipsum</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

<p class="intent">Lorem ipsum...</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

<p class="textRight">Lorem ipsum...</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

<p class="textCenter">Lorem ipsum...</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

<p class="textJustify">Lorem ipsum...</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

Grid

Grid

This is the old fashion way 12 columns grid. With this you can make yout app repesponsive.

Metrics

  Small Devices (< 600px) Medium Devices (> 601px) Large Devices (> 1201px)
Container Width 90% 85% 70%
Class prefix .column.s# .column.m# .column.l#
Columns 12 12 12
Offset .sOff# .mOff# .lOff#
Push .sPush# .mPush# .lPush#
Pull .sPull# .mPull# .lPull#

.s4
.s4
.s4

.s12.m4
.s12.m4
.s12.m4
<div class="grid">
    <div class="column s12 m4">
        .s12.m4
    </div>
    <div class="column s12 m4">
        .s12.m4
    </div>
    <div class="column s12 m4">
        .s12.m4
    </div>
</div>

Flex Grid

.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
.column
<div class="flexRow">
    <div class="column">
        <div>.column</div>
    </div>
    <div class="column">
        <div>.column</div>
    </div>
    <div class="column">
        <div>.column</div>
    </div>
    <div class="column">
        <div>.column</div>
    </div>
</div>

Forms and Buttons

Input

<input type="text" class="formControl" placeholder="Write your name here">

Input + Grids

Text Area

<textarea rows="3" class="formControl" placeholder="Write your message here"></textarea>

Select

<select class="formControl">
    <option value="1">Option 1</option>
    <option value="2" disabled>Option 2</option>
    <option value="3">Option 3</option>
</select>

Disabled

<input type="text" class="formControl" placeholder="Disabled" disabled>

Buttons

<button class="button">Button</button>
<button class="button primary">Button</button>
<button class="button secondary">Button</button>
<button class="button danger">Button</button>
<button class="button warning">Button</button>
<button class="button success">Button</button>
<button class="button primary large">Button</button>
<button class="button primary small">Button</button>
<button class="button primary block">Button</button>
<button class="button blur">Button</button>

Buttons solid

<button class="button solid">Button</button>
<button class="button solid primary">Button</button>
<button class="button solid secondary">Button</button>
<button class="button solid danger">Button</button>
<button class="button solid warning">Button</button>
<button class="button solid success">Button</button>
<button class="button solid primary large">Button</button>
<button class="button solid primary small">Button</button>
<button class="button solid primary block">Button</button>

Simple navbar - List Based

<ul class="navbar">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>

Simple navbar - WithLogo

<ul class="navbar">
    <li><a href="#" class="logo">Logo</a></li>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>

Responsive navbar - Div based

You can use responsive navbar with <nav>, <div> or <section>

Item 1 Item 2 Item 3 Item 4 
<div class="navbar">
    <a href="#" class="logo">Logo</a>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
</div>

Fixed

<div class="navbar fixed">
    <a href="#" class="logo">Logo</a>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
</div>

With Nice backgrounds

The background Blur is also available here

Item 1 Item 2 Item 3 Item 4 
<div class="navbar niceBluePeach">
    <a href="#" class="logo">Logo</a>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
</div>
<div class="navbar blur">
    <a href="#" class="logo">Logo</a>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
</div>

Cards

Simple Cards

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

  
<div class="card">
    <div class="content">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

With header

 
Content here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

  
<div class="card">
    <div class="header">
        Content here
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

With Nice Background on header

 
Content here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

  
<div class="card">
    <div class="header niceSunThree textWhite">
        Content here
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

With image on header

 
Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

  
<div class="card">
    <div class="header image textWhite">
        <img src="http://kingofwallpapers.com/sundown/sundown-008.jpg">
        <span>Card Title</span>
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

With nice background and action

 
Content here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.

  
<div class="card niceBluePeach textWhite">
    <div class="header">
        Content here
    </div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet...</p>
        <button class="button blur block">Share now</button>
    </div>
</div>

Tables

Tables

# Name Currency Value
1 Ross BRL 40.000
2 Rachel USD 5.000
3 Joey BRL 40.000 
<table class="table">
    ...
</table>

Hoverable table

# Name Currency Value
1 Ross BRL 40.000
2 Rachel USD 5.000
3 Joey BRL 40.000 
<table class="table hoverRow">
    ...
</table>
# Name Currency Value
1 Ross BRL 40.000
2 Rachel USD 5.000
3 Joey BRL 40.000 
<table class="table hoverCell">
...
</table>

Clean table

# Name Currency Value
1 Ross BRL 40.000
2 Rachel USD 5.000
3 Joey BRL 40.000 
<table class="table clean">
...
</table>

Responsive table

# Name Currency Value
1 Ross BRL 40.000
2 Rachel USD 5.000
3 Joey BRL 40.000 
<table class="table responsive">
...
</table>

Striped table

# Name Currency Value
1 Ross BRL 40.000
2 Rachel USD 5.000
3 Joey BRL 40.000 
<table class="table striped">
...
</table>