S
The future web experience
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
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
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
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#
<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
<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>
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
Option 1
Option 2
Option 3
<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.primary
.button.secondary
.button.danger
.button.warning
.button.success
.button.primary.large
.button.primary.small
.button.primary.block
<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.primary
.button.secondary
.button.danger
.button.warning
.button.success
.button.primary.large
.button.primary.small
.button.primary.block
<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>
<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
<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>
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
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
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
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum convallis bibendum.
Share now
<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
#
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>