A little bit bigger.
41 | *
42 | */
43 | .u-text\+\+ { font-size: larger !important; }
44 | .u-text-- { font-size: smaller !important; }
45 |
46 |
47 |
48 |
49 |
50 | /**
51 | * Alignments.
52 | */
53 | .u-text-right { text-align: right !important; }
54 | .u-text-left { text-align: left !important; }
55 | .u-text-center { text-align: center !important; }
56 | .u-text-justify { text-align: justify !important; }
57 |
58 |
59 |
60 |
61 |
62 | /**
63 | * Truncation.
64 | *
65 | * Cause long spans of text to truncate after running out of horizontal space.
66 | */
67 | .u-text-truncate { @include truncate(100%, important); }
68 |
--------------------------------------------------------------------------------
/_trumps.widths.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #WIDTHS
3 | \*------------------------------------*/
4 |
5 | // Preconfigure these settings before the @import of this file.
6 | $widths-ns: null !default;
7 |
8 | // A mixin to spit out our width classes. Pass in the columns we want the widths
9 | // to have, and an optional suffix for responsive widths. E.g. to create thirds
10 | // and quarters for a small breakpoint:
11 | //
12 | // @include widths(3 4, -sm);
13 |
14 | @mixin widths($columns, $breakpoint: null) {
15 |
16 | // Loop through the number of columns for each denominator of our fractions.
17 | @each $denominator in $columns {
18 |
19 | // Begin creating a numerator for our fraction up until we hit the
20 | // denominator.
21 | @for $numerator from 1 through $denominator {
22 |
23 | // Build a class in the format `.u-3/4`.
24 | .#{$widths-ns}u-#{$numerator}\/#{$denominator}#{$breakpoint} {
25 | width: ($numerator / $denominator) * 100% !important;
26 | }
27 |
28 | }
29 |
30 | }
31 |
32 | }
33 |
34 | /**
35 | * A series of width helper classes that you can use to size things like grid
36 | * systems. Classes take a fraction-like format (e.g. `.u-2/3`).
37 | *
38 | * Use these in your markup, e.g.:
39 | *
40 | *
41 | *
42 | */
43 |
44 | // Fill an array with our desired breakpoints and their nicknames (e.g. `lg`).
45 | $widths-breakpoints: (
46 | 'sm': 'screen and (min-width: 720px)',
47 | 'md': 'screen and (min-width: 1024px)',
48 | 'lg': 'screen and (min-width: 1280px)',
49 | 'xl': 'screen and (min-width: 1440px)',
50 | ) !default;
51 |
52 | // Which columns would we like to generate?
53 | $widths-columns: 1 2 3 4 5 !default;
54 |
55 | // Build our breakpoint-agnostic widths.
56 | @include widths($widths-columns);
57 |
58 | $alias: foo;
59 |
60 | // Build each of our breakpoints’ widths.
61 | @each $alias, $condition in $widths-breakpoints {
62 |
63 | @media #{unquote($condition)} {
64 | @include widths($widths-columns, \@#{$alias});
65 | }
66 |
67 | }
68 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Football Radar CSS – Demo
8 |
9 |
10 |
11 |
21 |
22 |
23 |
24 |
25 |
Football Radar CSS
26 |
27 |
28 |
29 |
70 |
Heading one
71 | Heading two
72 | Heading three
73 | Heading four
74 | Heading five
75 | Heading six
76 |
79 |
Heading one
80 | Heading two
81 | Heading three
82 | Heading four
83 | Heading five
84 | Heading six
85 |
88 |
105 |
108 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
--------------------------------------------------------------------------------
/main.scss:
--------------------------------------------------------------------------------
1 | /*------------------------------------*\
2 | #MAIN
3 | \*------------------------------------*/
4 |
5 | /**
6 | * SETTINGS
7 | * Config...............Project-level config.
8 | * Global...............Project-specific, globally available settings.
9 | *
10 | * TOOLS
11 | * Mixins...............Global mixins.
12 | *
13 | * GENERIC
14 | * Normalize.css........Normalise browser defaults…
15 | * Reset................…and zero them out.
16 | * Box-sizing...........More manageable box-model.
17 | * Shared...............Share certain high-level styles as broadly as possible.
18 | *
19 | * ELEMENTS
20 | * Headings.............H1–H6
21 | * Forms................Element-level form styling.
22 | *
23 | * OBJECTS
24 | * Layout...............Simple Layout abstraction tool.
25 | * List-bare............‘Unstyled’ lists: bullets and indent removed.
26 | * List-pair............Simple key–value pair list.
27 | * Pack.................Force elements to pack up into all available space.
28 | *
29 | * COMPONENTS
30 | * Forms................Component-level form styling.
31 | * Buttons..............Element-agnostic button styles.
32 | * Comments.............Comment styles.
33 | * Messaging............User feedback messaging.
34 | *
35 | * TRUMPS
36 | * Typography...........Utilities for manipulating text.
37 | * Display..............Helper classes for showing or hiding content.
38 | * Widths...............Width helper classes for use with our Layout system.
39 | *
40 | */
41 |
42 | @import "settings.config";
43 | @import "settings.global";
44 |
45 | @import "tools.mixins";
46 |
47 | @import "generic.normalize";
48 | @import "generic.reset";
49 | @import "generic.box-sizing";
50 | @import "generic.shared";
51 |
52 | @import "elements.headings";
53 | @import "elements.forms";
54 |
55 | $layout-gutter: 12px;
56 | @import "objects.layout";
57 | @import "objects.list-bare";
58 | @import "objects.list-pair";
59 | @import "objects.pack";
60 |
61 | @import "components.forms";
62 |
63 | $btn-custom: (
64 | font: inherit,
65 | );
66 | @import "components.buttons";
67 | @import "components.comments";
68 | @import "components.messaging";
69 |
70 | @import "trumps.typography";
71 | @import "trumps.display";
72 | @import "trumps.widths";
73 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@footballradar/frcss",
3 | "version": "1.0.6",
4 | "main": "index.js",
5 | "scripts": {
6 | "test": "echo \"Error: no test specified\" && exit 1"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/watch:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | sass --watch main.scss:main.css --style expanded
4 |
5 | exit 0
6 |
--------------------------------------------------------------------------------
Comment Title
37 | *Joe Bloggs
38 | * 41 | *42 | *-
43 | * General
44 | *
45 | *
46 | *48 | * Lorem ipsum.... 49 | *
50 | *