SkeletonPlus

A small starterpack using skeleton, normalize.css and fork awesome. You will only find the documentation of the modules I added. To learn more and find out more about skeleton, go here

Status Bar

Status is available for any text length. Use the 4 different colors to add color to your project. By default, the bars have square corners. But if you wish, you can add the class status-rounded to have rounded them.

Success
Primary
Warning
Error
<div class="status success">Success</div> <div class="status primary">Primary</div> <div class="status status-rounded warning">Warning</div> <div class="status status-rounded error">Error</div>

ForkAwesome icons are also supported by the bar. You can found all icons here.

<div class="status success"> <i class="fa fa-check"></i>fa fa-check </div> <div class="status primary"> <i class="fa fa-gear fa-spin"></i>fa fa-gear fa-spin </div> <div class="status warning"> <i class="fa fa-pause"></i>fa fa-pause </div> <div class="status error"> <i class="fa fa-ban"></i>fa fa-ban </div>
fa fa-check
fa fa-gear fa-spin
fa fa-pause
fa fa-ban

Cards

Cards are good alternatives to structure your website. The colours are based on skeleton. They are modular and allow a perfect integration on your site. By default, all card have square corners. But if you wish, you can add the class card-rounded to have rounded them.

Card Title
Officia duis nostrud dolor aliqua cupidatat velit elit nisi cupidatat.
Card Title
Officia duis nostrud dolor aliqua cupidatat velit elit nisi cupidatat.
<div class="card"> <div class="card-content"> <div class="card-title">Card Title</div> <div class="card-body">Card content</div> </div> </div> <div class="card card-rounded"> <div class="card-content"> <div class="card-title">Card Title</div> <div class="card-body">Card content</div> </div> </div>

You can also add an image as thumbnail. If you have added card-rounded class, rounded corners will be automatically added.

<div class="card"> <img src="" alt="" class="card-image"> <div class="card-content"> <div class="card-body">Card content</div> </div> </div>
Image
Officia duis nostrud dolor aliqua cupidatat velit elit nisi cupidatat.

And card also support status bar. If you have added card-rounded class, rounded corners will be automatically added.

Card Title
Officia duis nostrud dolor aliqua cupidatat velit elit nisi cupidatat.
fa fa-archive
<div class="card"> <div class="card-content"> <div class="card-title">Card Title</div> <div class="card-body">Card content</div> </div> <div class="card-status primary"> <i class="fa fa-archive fa-fw"></i>Status text </div> </div>

Social Icons

Some Fork Awesome icons are colored by me. The list of coloured icons is below. Don't hesitate to clone the repository to help me color others. It's very simple to use because the color is automatically applied on the icon. You can find all icons here.

<i class"fa fa-reddit"></i>
Icon Fork Awesome ID Color
fa-diaspora #313739

fa-discord-alt
fa-discord
#7289DA



fa-facebook
fa-facebook-messenger
fa-facebook-official
fa-facebook-square
#4267B2

fa-github
fa-github-alt
#333
fa-keybase #33A0FF

fa-lastfm
fa-lastfm-square
#D51007


fa-mastodon
fa-mastodon-alt
fa-mastodon-square
#2B90D9


fa-reddit
fa-reddit-alien
fa-reddit-square
#FF4500