Skully

A light weight library inspired on Slack UI and based on Skeleton. This main porpouse of this is to have a base for any project and avoid to start a new one from scratch. This was made for community so feel free to improve it and share it with all of us. For a better experience is recommended to use Lato as default font-family.

Note: you can use this page for a deeper reference of how to use Skully this is include with source code.

Grid System

Skully grid system is totally based on Skeleton's, so for more information please visit it's web site. You will see an example of a grid made with this grid system.

One

Eleven

Two

Ten

1/3

2/3

1/2

Typography

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

This is regular text and this is strong , but this is secondary text.

This is a link

Panel

.panel is used to add a border or container style to a element, you can use everywhere for example on divs , forms and tables. .panel class won't add margin to yours element it must to be handle by yourself

This is a simple panel

Input inside panel

This is a notification inside a panel

Notification Action

Notifications

This is a notification, as you can see it's very easy to use ,if you want to show a lot of information in here, and you can add action buttons just right here

Notification Action Another Action

A primary notification

And this is a success notification

This one is a warning notification

And we have danger notification to alert user about dangerous actions

Forms

Here you can find simple example of how a form should be created using Skully

Name This is a normal input element , and Im a label with .help class

Last Name This input is using .error class

Phone This is a disabled input , poor it can recieve information

Gender

Occupation

Would you like to use this little framework ?

What's your opinion about this ? Love it
Not bad
Well , there're worst frameworks
mmm , Don't know how to say it ...

Please upload a file , just for fun ;-)

Buttons

By default Skully applies style to buttons and input buttons , however you can use it with other controls like a to make a button lik. Here you can find a basic usage of buttons styles.

Also you can use buttons with Font Awesome. See examples listed below.

It's a camera button

delete account

Whoat! Twitter Button

Tables

#	Name	Email
1	Carlos Castillo	co.carlos@outlook.com
2	MichaelJordan	mjordan@airjordan.com
3	Nikola Tesla	tesla.niko@teslacars.com

This is a .striped table

#	Name	Age
1	Maria Gonzales	10
2	Tim Magin	65
3	Sara Conner	78

Misc

This is a simple usage of breadcrumbs

An example of a line separator

Utils

Here's a list of utility classes that you can use to create a better experience for your website.

.u-full-width makes a element 100% width.
.u-max-full-width makes a element 100% width and prevent element get outside container.
.u-pull-right makes a element float right
.u-pull-left makes a element float left.
.u-cf clear element floating.