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
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.min.css">
<link rel="icon" href="img/favicon.ico">
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.
Small - 800px
Medium - 1000px
Large - 1200px
The grid is based on percents -
large-50 is 50% of the screen width. The two breakpoints are defined by
large classes. Resize the screen to see the different breakpoints.
Create infinitely repeating cells with a flex grid.
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.
With these classes, you can easily center things or create sections faster.
Vertically center an element with the
vertical-center class. (Uses Flexbox.)
text-center to align content.
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...
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!