Yet Another CSS Library, but Modern 🤘

Github Install

The grid

The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. It's using flexbox so cells can take remaining space with the .grow css class. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.

One Eleven
Two Ten
Four Eight
Six Six
Seven Five
Nine Three
20% 20% 20% 20% 20%
Grow, it will takes available space Action

Flex

Row or colum display is made using css class and controlling allinment and justified content with css class names.

.no-wrap control the flow and avoid to wrap to new lines when it should normally wrap
Another container that should wrap due to spacing

Vertical alignment

Top Alligned
Middle Alligned
Bottom Alligned
Stretch Alligned

Horizontal alignment

Left Alligned
Center Alligned
Right Alligned
Stretch Alligned

Vertical justifying

Top Justified
Middle Justified
Bottom Justified
Between Justified

Horizontal justifying

Left Justified
Center Justified
Right Justified
Between Justified

Typography

Type is all set with ems, so font-sizes and spacial relationships can be responsively sized based on a container font-size. Out of the box, it will inherit font-size from <html>. All measurements are still base 10 though so, an <h1> with 5.0emfont-size just means 50px.

The typography base is Raleway served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and spacings.

Heading <h1>

Heading <h2>

Heading <h3>

Heading <h4>

Heading <h5>
Heading <h6>

Bolded Italicized Colored Underlined

Buttons

Buttons come in two basic flavors in Skull. The standard <button> element is plain, whereas the .primary button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class.

Anchor button
Anchor button

Cards, spacing and glued

Card 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Card 2

Lorem ipsum dolor sit amet...

Card 3

Lorem ipsum...

Card
Card
Card
Card
Card
Card
Card
Card
Card

Forms

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.

Lists

  • Unordered lists have basic styles
  • They use the circle list style
    • Nested lists styled to feel right
    • Can nest either type of list into the other
  • Just more list items mama san
  1. Ordered lists also have basic styles
  2. They use the decimal list style
    • Ordered and unordered can be nested
    • Can nest either type of list into the other
  3. Last list item just for the fun

Code

Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

.some-class {
  background-color: red;
}

Tables

Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

Name Age Gender Location
Dave Gamache 26 Male San Francisco
Scarlett Johansson 36 Female New York City

Media queries

Skull uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how Skull's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:

  • Desktop HD: 1200px
  • Desktop: 1000px
  • Tablet: 750px
  • Phablet: 550px
  • Mobile: 400px

/* Mobile first queries */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

Utilities

Skull has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.


  Yeah... It's not done yet... Sorry