Skip to content

Commit acccbb6

Browse files
author
Nevin Morgan
committed
Updates
1 parent c581ef1 commit acccbb6

12 files changed

+247
-2
lines changed

‎01-settings/_index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "settings.config";

‎01-settings/_settings.config.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
///**
2+
// * ========================================================================
3+
// * #CONFIG
4+
// * ========================================================================
5+
// */
6+
7+
// A map of global config settings. Define any project-level configuration,
8+
// feature switches, etc. in here.
9+
10+
$core-config: (
11+
env: dev,
12+
healthcheck: false,
13+
debug: true,
14+
);

‎02-tools/_index.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Core functions are imported first so other tools have access
2+
@import "tools.core-functions";
3+
4+
@import "tools.maps";
5+
@import "tools.clearfix";
6+
@import "tools.breakpoints";

‎02-tools/_tools.breakpoints.scss

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
// Breakpoint viewport sizes and media queries.
2+
//
3+
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
4+
//
5+
// (xs: 0, sm: 576px, md: 768px)
6+
//
7+
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
8+
9+
// Name of the next breakpoint, or null for the last breakpoint.
10+
//
11+
// >> breakpoint-next(sm)
12+
// md
13+
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px))
14+
// md
15+
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md))
16+
// md
17+
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
18+
$n: index($breakpoint-names, $name);
19+
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
20+
}
21+
22+
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
23+
//
24+
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px))
25+
// 576px
26+
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
27+
$min: map-get($breakpoints, $name);
28+
@return if($min != 0, $min, null);
29+
}
30+
31+
// Maximum breakpoint width. Null for the largest (last) breakpoint.
32+
// The maximum value is calculated as the minimum of the next one less 0.1.
33+
//
34+
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px))
35+
// 767px
36+
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
37+
$next: breakpoint-next($name, $breakpoints);
38+
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
39+
}
40+
41+
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
42+
// Useful for making responsive utilities.
43+
//
44+
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px))
45+
// "" (Returns a blank string)
46+
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px))
47+
// "-sm"
48+
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
49+
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
50+
}
51+
52+
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
53+
// Makes the @content apply to the given breakpoint and wider.
54+
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
55+
$min: breakpoint-min($name, $breakpoints);
56+
@if $min {
57+
@media (min-width: $min) {
58+
@content;
59+
}
60+
} @else {
61+
@content;
62+
}
63+
}
64+
65+
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
66+
// Makes the @content apply to the given breakpoint and narrower.
67+
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
68+
$max: breakpoint-max($name, $breakpoints);
69+
@if $max {
70+
@media (max-width: $max) {
71+
@content;
72+
}
73+
} @else {
74+
@content;
75+
}
76+
}
77+
78+
// Media that spans multiple breakpoint widths.
79+
// Makes the @content apply between the min and max breakpoints
80+
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
81+
@include media-breakpoint-up($lower, $breakpoints) {
82+
@include media-breakpoint-down($upper, $breakpoints) {
83+
@content;
84+
}
85+
}
86+
}
87+
88+
// Media between the breakpoint's minimum and maximum widths.
89+
// No minimum for the smallest breakpoint, and no maximum for the largest one.
90+
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
91+
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
92+
@include media-breakpoint-between($name, $name, $breakpoints) {
93+
@content;
94+
}
95+
}

‎02-tools/_tools.clearfix.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
///**
2+
// * ============================================================================
3+
// * #CLEARFIX
4+
// * ============================================================================
5+
// */
6+
7+
@mixin clearfix() {
8+
&::after {
9+
display: block;
10+
content: "";
11+
clear: both;
12+
}
13+
}

‎02-tools/_tools.core-functions.scss

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
///**
2+
// * ============================================================================
3+
// * #CORE FUNCTIONS
4+
// * ============================================================================
5+
// */
6+
7+
/// Map deep get
8+
/// @author Hugo Giraudel
9+
/// @access public
10+
/// @param {Map} $map - Map
11+
/// @param {Arglist} $keys - Key chain
12+
/// @return {*} - Desired value
13+
@function map-deep-get($map, $keys...) {
14+
@each $key in $keys {
15+
$map: map-get($map, $key);
16+
}
17+
@return $map;
18+
}
19+
20+
// @param {int} $r.
21+
// @return {int} Square root of $r.
22+
@function _sqrt($r) {
23+
$x0: 1;
24+
$x1: $x0;
25+
26+
@for $i from 1 through 10 {
27+
$x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
28+
$x0: $x1;
29+
}
30+
31+
@return $x1;
32+
}
33+
34+
// @param {string} $tracking-size from photoshop.
35+
// @return Letter spacing in em.
36+
@function _tracking-to-em($tracking-size) {
37+
@return #{($tracking-size / 1000)}em;
38+
}

‎02-tools/_tools.maps.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
///**
2+
// * ============================================================================
3+
// * #MAP TOOLS
4+
// * ============================================================================
5+
// */
6+
7+
// Get core config values
8+
//
9+
// get-config(<key>)
10+
//
11+
// Example usage:
12+
// @if (get-config(debug) == true) { ... }
13+
14+
@function get-config($key) {
15+
@return map-deep-get($core-config, $key);
16+
}

‎03-generic/_generic.reset.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,6 @@ table {
5050
*/
5151

5252
fieldset {
53-
min-width: 0; /* [1] */
53+
min-width: 0; /* 1 */
5454
border: 0;
5555
}

‎03-generic/_index.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@import "generic.box-sizing";
21
@import "generic.normalize";
2+
@import "generic.box-sizing";
33
@import "generic.reset";

‎05-objects/_index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "objects.flag";

‎05-objects/_objects.flag.scss

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/**
2+
* ==========================================================================
3+
* #FLAG
4+
* ==========================================================================
5+
*/
6+
7+
/**
8+
* Usage
9+
**
10+
<div class="o-flag">
11+
<a href="#" class="o-flag__image">
12+
<img src="#" alt="alt-text" />
13+
</a>
14+
<div class="o-flag__body">
15+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo maxime, repudiandae dolorem adipisci suscipit in nam quas fuga. Quia quo at modi tempora vero quisquam corporis velit nostrum delectus explicabo, architecto distinctio inventore sapiente libero, id aliquam fugiat repellendus laborum quibusdam, veritatis et. Temporibus magnam facere tempore et!</p>
16+
</div>
17+
</div>
18+
*/
19+
20+
.o-flag {
21+
display: table;
22+
width: auto;
23+
margin: 10px;
24+
}
25+
26+
.o-flag__image,
27+
.o-flag__body {
28+
display: table-cell;
29+
vertical-align: middle;
30+
31+
.o-flag--top & {
32+
vertical-align: top;
33+
}
34+
35+
.o-flag--bottom & {
36+
vertical-align: bottom;
37+
}
38+
}
39+
40+
.o-flag__image {
41+
padding-right: 10px;
42+
43+
> img {
44+
display: block;
45+
}
46+
47+
.o-flag--rev & {
48+
padding-right: 0;
49+
padding-left: 10px;
50+
}
51+
}
52+
53+
.o-flag__body {
54+
width: 100%;
55+
}

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,12 @@ This drill-down approach gives us a much more manageable CSS architecture. Now w
5858
be an addition to whatever has gone before it. We know where each type of rule will live and where to put any new styles,
5959
and we have the confidence that all our different selectors will play nicely alongside each other.
6060

61+
### Sass specifics
62+
We use scss syntax in order to allow newcomers to the codebase to more quickly come to grips with what is happening in any given file, and to allow us to copy paste code snippets from other sources (browser inspector, designers, psd, random google foo, etc.) without the need for major reformatting.
63+
64+
#### Variables and Mixin scoping
65+
We are keeping global variables in the settings section, and any variables that are specific to a particular element, object, component, or trump should be at the top of that file. Mixins / Functions that are used in more than one location (global) are likewise stored in the tools section, and any mixins / functions that are specific to the particular element, object, component, or trump should be at the top of the file directly following the variables.
66+
6167
# Naming Convention (BEMIT)
6268
We are using a combination of BEM and the additional information structure of ITCSS to provide a class naming convention
6369
that enables us to know where it applies in the cascade, and at what screen widths.

0 commit comments

Comments
 (0)