HTML Starting point
Begin with a basic template that:
- Sets up the default HTML language
- Defines the viewport for responsiveness
- Includes jQuery for your DOM manipulation needs
- Includes the Sombra CSS file, favicon, and optional JS file
<!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>
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>
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
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>
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">
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!