Sombra

Sombra is a simple starter pack built with Sass that provides helpful, browser-consistent styling for buttons, forms, tables, lists, and typography, and a responsive grid system for templating.

Download Star

HTML Starting point

Begin with a basic template that:

        
          
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title></title>

<link rel="stylesheet" href="css/main.min.css">
<link rel="icon" href="img/favicon.ico">
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>

</html>

Containers

There are three container sizes for content that are centered with left and right padding. Content without a container will span the width of the viewport.

  <div class="small-container">Small</div>
  <div class="medium-container">Medium</div>
  <div class="container">Large</div>
Small - 800px
Medium - 1000px
Large - 1200px

Grid

The grid is based on percents - small-50 or large-50 is 50% of the screen width. The two breakpoints are defined by small or large classes. Resize the screen to see the different breakpoints.

<div class="row">
  <div class="small-50">50%</div>
  <div class="small-50">50%</div>
</div>
<div class="row">
  <div class="large-50">50%</div>
  <div class="large-50">50%</div>
</div>
small-50
small-50
large-50
large-50

Flex Grid

Create infinitely repeating cells with a flex grid.

  <div class="flex-row">
  	<div class="flex-column"></div>
  	<div class="flex-column"></div>
  </div>
  <div class="flex-row">
  	<div class="flex-column"></div>
  	<div class="flex-column"></div>
  	<div class="flex-column"></div>
  </div>
2
2
3
3
3

Typography

The font size is set to 1rem on the html element, so all font sizing will cascade from the root. By using em, it cascades from 1rem.

Headings all have the same line-height and margins, and only the font size is individually defined.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Buttons

Button elements, links with a button class as opposed to using the <button> tag only, and input elements should all render exactly the same.

If you want to change the color and padding etc, simply just go to the _buttons.scss file and tweak the variables.

<button>Button</button>
<input type="submit" value="Submit">
<input type="button" value="Input">
<a class="button">Link</a>
Link

Helpers

With these classes, you can easily center things or create sections faster.

Vertical Center

Vertically center an element with the vertical-center class. (Uses Flexbox.)

<div class="vertical-center">
  <div>Vertically centered</div>
</div>
Vertically centered

Text Alignment

Use text-left, text-right, and text-center to align content.

<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>

Left

Center

Right

Responsive Images

Add a responsive-image class for responsive images.

<img src="#" class="responsive-image" alt="Responsive Image">
Example of responsive-image CSS class

How to Use

This project is built with Sass (SCSS) and Gulp. Below is how I learned how to use the basics of each.

Sass is used to extend your CSS, allowing you to use useful concepts like variables and nesting, as well as compartmentalizing and organizing the code. Gulp is used to watch for changes and process those Sass files into regular CSS files, as well as minifying and adding prefixes for cross-browser compatibilty.

Using Node is the easiest way to get started. If you already have Node installed, you can just clone the project...

git clone https://github.com/CodingGabe/sombra.git

install the dev dependencies in the root of the project...

npm install

and run.

gulp

The default gulp command will run a watch to compile, minify and prefix your files.

Once you get everything installed, simply start making changes to the variables to customize and begin creating!