Skip to content

Commit

Permalink
Made updates to CSS, removed modifiers.scss and moved its contents to…
Browse files Browse the repository at this point in the history
… modules.scss which got moved into design/ More variables. Cleaner.
  • Loading branch information
cballenar committed Aug 24, 2013
1 parent 2cbd050 commit c52c2ee
Show file tree
Hide file tree
Showing 9 changed files with 137 additions and 93 deletions.
23 changes: 15 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
__A SCSS framework built around 12__

## Huh... ?
Base12 is a framework that provides you with a basic SCSS folder structure for your projects. Base12 measurements are built around the number 12 .
Base12 is a framework that provides you with a basic SCSS folder structure for your projects. Its measurements are built around the number 12 for increased flexibility & math goodies.

Because Base12 uses the CSS from the [_HTML5 Boilerplate_](https://github.com/h5bp/html5-boilerplate/), it can be used in combination with it.
Because Base12 uses the starting CSS from the [_HTML5 Boilerplate_](https://github.com/h5bp/html5-boilerplate/), it can be used in combination with it.

### How do I use it?
1. Start a new project with the [Classic H5BP](http://www.initializr.com/)
Expand Down Expand Up @@ -66,7 +66,6 @@ The directory structure is as follows:
| | |- formulas/
| | |- helpers/
| | |- media/
| | |- modules/
| | |- vendors/
```
#### main.css
Expand All @@ -79,7 +78,16 @@ Here you can find and add all your partials.
The base folder contains the `variables`, `base` and `normalize` stylesheets. [Normalize](http://necolas.github.io/normalize.css/) is the reset sheet. Variables is the file where you will customize Base12. Base is the primary file in Base12, this is where most variables end up in and defines most basic styles. Ideally these files will remain untouched unless a new release comes out.

#### design/
It contains two files `design` and `modifiers`. Design, as you can imagine, is where all the styles that define the design of the site are located. Modifiers are "element modifiers" they are simple classes that change existing elements, this includes things such as `p.lead` or `.subheader`.
It contains three files `design`, `grid`, and `modules`.

##### _design.scss
As you can imagine, this is where all the styles that define the layout and design of the site are located.

##### _modules.scss
Modules includes _element modifiers_ and _objects/modules_. Modifiers are simple classes that change core elements, this includes things such as `p.lead` or `img.img-circle`. Objects and Modules are more complex, e.g., `.media`, `.callout`, etc. There are no modules included as these tend to be more tailored to the design and architecture of the site.

##### _grid.scss
Created specifically to host the grid system of your choosing. This file can end up empty if you decide to keep your grid tied to your `design` file.

#### formulas/
Contains mixins and formulas used in Base12, users should keep their own formulas in this folder.
Expand All @@ -90,9 +98,6 @@ As expected it contains helper classes, unlike `modifiers`, these helpers focus
#### media/
It contains all the media queries and stylesheet for other media, such as print and for higher resolution screens. I wasn't sure what to name this folder, I don't think media is the best name for it.

#### modules/
We all love Object Oriented CSS, right? This is where we get to put all those sweet modules we gather from across the webiverse! (?). I would recommend keeping the modules in their own files and then `@import` them into the `modules` stylesheet for easy management.

#### vendors/
Styles from plugins and third-party vendors. Also keep as separate files and `@import` into `vendors` stylesheet.

Expand All @@ -101,8 +106,10 @@ Styles from plugins and third-party vendors. Also keep as separate files and `@i
### Switches
Turn features on/off according to your preferences. At the moment the features available to switch on/off are:

- Universal Box Sizing
- REM to PX fallback
- Universal `box-sizing: border-box`
- Universal NO `background-repeat`
- Universal relativity `position: relative`
- Styled blockquotes
- Styled tables
- Styled forms
Expand Down
6 changes: 3 additions & 3 deletions css/main.css

Large diffs are not rendered by default.

36 changes: 23 additions & 13 deletions css/scss/base/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@
/* Global Styles
------------------------------------------------------------------------------ */
* {
position:relative;
background-repeat: no-repeat;
@if $bg-no-repeat == true {
background-repeat: no-repeat; }

@if $it-s-all-relative == true {
position:relative; }

@if $box-sizing-for-all == true {
-webkit-box-sizing: border-box;
Expand Down Expand Up @@ -55,12 +58,16 @@ h4,
h5,
h6 { @include rem('margin', 0 0 6px); }

// Adjust spacing after paragraphs
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 { @include rem('margin-top', 24px); }
// Adjust spacing for content
p + h1, p + h2, p + h3,
p + h4, p + h5, p + h6 { @include rem('margin-top', 24px); }

img + p,
img + ul, img + ol, img + dl,
img + h1, img + h2, img + h3,
img + h4, img + h5, img + h6 { @include rem('margin-top', 12px); }




/* Paragraphs & Lists
Expand All @@ -80,11 +87,13 @@ li {

&:last-child { margin-bottom: 0; } }

ul > li { list-style: square; }
ul { list-style: $ul-style; }
ul ul { list-style: $ul-ul-style; }
ul ul ul { list-style: $ul-ul-ul-style; }

ol li { list-style: decimal; }
ol ol li { list-style: lower-alpha; }
ol ol ol li { list-style: lower-roman; }
ol { list-style: $ol-style; }
ol ol { list-style: $ol-ol-style; }
ol ol ol { list-style: $ol-ol-ol-style; }

dl {
padding: 0;
Expand All @@ -111,7 +120,8 @@ a { color: $link-color;
&:hover { color: $link-color-h; }
&:active { color: $link-color-a; }

&, &:visited, &:hover, &:active { @include transition(all, .5s, ease); } }
@if $animate-all-links == true { // Switch animations for all links
&, &:visited, &:hover, &:active { @include transition(all, .2s, ease); } } }


/* Additional elements
Expand Down
23 changes: 20 additions & 3 deletions css/scss/base/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,25 @@

/* Switches
------------------------------------------------------------------------------------ */
$box-sizing-for-all: true;
$rem-to-px-fallback: false;
// Browser support
$rem-to-px-fallback: false; // Adds px fallback to properties that use the rem() function

// Styled elements
// Special Styles (Use with caution)
$animate-all-links: true; // adds transition(all, .2s ease); to all links
$bg-no-repeat: true; // adds * { background: no-repeat; }
$it-s-all-relative: true; // adds * { position: relative; }
$box-sizing-for-all: true; // adds * { box-sizing: border-box; } (w/ browser prefixes)

// Styled elements (Disable for absolute control)
$style-blockquotes: true;
$style-tables: true;
$style-forms: true;
$style-buttons: true;
$style-code: true;

//


/* Type - use pixels for font-size & line-height
------------------------------------------------------------------------------------ */
// Base
Expand Down Expand Up @@ -52,6 +61,14 @@ $lh-h6: 18px;
$fs-body: 15px;
$lh-body: 21px;

$ul-style: square;
$ul-ul-style: disc;
$ul-ul-ul-style: circle;

$ol-style: decimal;
$ol-ol-style: lower-alpha;
$ol-ol-ol-style: lower-roman;

// blockquote, lead, etc.
$fs-body-accent: 18px;
$lh-body-accent: 24px;
Expand Down
4 changes: 2 additions & 2 deletions css/scss/modules/_modules.scss → css/scss/design/_grid.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* Modules
/* Grid
=======================================================================================
Put all your module and object related styles here.
Place your favorite grid system here.
==================================================================================== */
61 changes: 0 additions & 61 deletions css/scss/design/_modifiers.scss

This file was deleted.

58 changes: 58 additions & 0 deletions css/scss/design/_modules.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/* Modules
=======================================================================================
Put all your modifiers, modules and objects here.
==================================================================================== */

/* Content Modifiers
------------------------------------------------------------------------------
The following styles build upon the core elements and add some
interesting visual modifications. Unlike Helpers, these elements focus
more on making things visually interesting and less on the function.
------------------------------------------------------------------------------ */

// Extend Headings to 'h' classes
.h1 { @extend h1; }
.h2 { @extend h2; }
.h3 { @extend h3; }
.h4 { @extend h4; }
.h5 { @extend h5; }
.h6 { @extend h6; }


// Paragraph lead text
p.lead {
color: $gray-dark;
@include rem('font-size', $fs-body-accent);
@include em('line-height', $fs-body-accent, $lh-body-accent); }


// Text Modifiers, used with <span> tags
.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.small-caps { font-variant: small-caps; }


// Align content, can be used in blocks
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }


// Image Modifiers
img {
&.img-scaled {
max-width: 100%;
height: auto; }

&.img-bordered {
padding: 2px;
border: $border; }

&.img-circle {
border-radius: 100%; } }


/* Modules & Objects,
------------------------------------------------------------------------------
Enter all your module and object class here, e.g., .media, .callout, etc.
------------------------------------------------------------------------------ */
13 changes: 13 additions & 0 deletions css/scss/helpers/_helpers.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,22 @@
These styles have some modifications from the ones in the H5BP.
=========================================================================== */

// Floated Elements
.pull-left { float: left; }
.pull-right { float: right; }


// Clearfix
// I decided to accomodate the different ways of naming .clearfix
// .cf - minimal one, you get a clearfix!
// .group - semantic one, you get a clearfix!
// .clearfix - standard, you get a clearfix!
// EVERYBODY GETS A CLEARFIX!!!
// P.S. Just to be clear, I'm quoting Neil Patrick Harris, playing Barney Stintson, imitating Oprah; not Oprah.
.cf,
.group,
.clearfix { zoom: 1;

&:before, &:after { content: ""; display: table; }
&:after { clear: both; } }

Expand Down
6 changes: 3 additions & 3 deletions css/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
====================================================================================
*/
@import
"design/modifiers"
, "design/design"
, "modules/modules";
"design/design"
, "design/grid"
, "design/modules";

/*!
** Helpers, Vendors & Media
Expand Down

0 comments on commit c52c2ee

Please sign in to comment.