├── .node-version ├── LICENSE ├── README.md ├── changelog.md ├── package.json └── scss ├── _mixins.scss ├── _thimble-core.scss ├── _thimble-overrides.scss └── thimble.scss /.node-version: -------------------------------------------------------------------------------- 1 | 18.2.0 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 The Agile League 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ThimbleCSS 2 | ============== 3 | 4 | A nimble micro CSS Framework. 5 | Powered by the [Agile League](https://agileleague.com/) 6 | 7 | v2.3.0 8 | 9 | Full Documentation at [ThimbleCSS](https://thimblecss.com/) 10 | 11 | **Install with npm** 12 | ``` 13 | $ npm install thimblecss 14 | ``` 15 | 16 | **Install with Yarn** 17 | ``` 18 | $ yarn add thimblecss 19 | ``` 20 | 21 | **Manually Compile with sass** 22 | 23 | ``` 24 | $ sass --watch thimble.scss:style.css 25 | ``` 26 | 27 | ### Featuring 28 | * Grid with basic alignment and ordering 29 | * Basic typography styles 30 | * Simple media containers 31 | 32 | That's it! No bloat or modules to override, just the basics for a fast and lightweight build. 33 | 34 | 35 | ### Set up Thimble 36 | 37 | To customize, copy the variables found in scss/_thimble-overrides.scss to a settings file in your site/app 38 | 39 | For Complete documentation, please visit [ThimbleCSS](http://thimblecss.com/) 40 | 41 | 42 | ### License 43 | 44 | Licensed under the [MIT LIcense](http://opensource.org/licenses/MIT) 45 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | Change Log 2 | ============== 3 | 4 | ## V2.3.0 5 | - remove legacy precompiled css file 6 | 7 | ## V2.2.6 8 | - add edge and half-edge classes to grid 9 | - rework visibility utility to remove display inherit 10 | - add sizing-down mixin 11 | 12 | ## V2.2.5 13 | - add xlarge container size 14 | 15 | ## V2.2.4 16 | - add responsive fit and fill classes 17 | - add back in min-height and min-width to cell base class 18 | 19 | ## V2.2.3 20 | - Add responsive heading sizes 21 | 22 | ## V2.2.2 23 | - Add $line-height variable to overrides 24 | - Use $line-height to apply margin-bottom to headers in rem 25 | 26 | ## V2.2.1 27 | - Update Sanitize. Based on https://github.com/csstools/sanitize.css/ 28 | - Remove legacy webkit and moz prefixes 29 | - Remove transform mixin 30 | - Remove keyframe mixin 31 | - Remove trailing semi-colons from core 32 | - Remove header class sizing 33 | - Remove super-header for all but h1 34 | - Add reduced motion query to core 35 | - Add text underline class 36 | - Add !default to sass overrides 37 | - Add orange and violet colors 38 | - Update large media break to 1280px 39 | 40 | ## V2.14 41 | - Fix mixins typo for large-down media query 42 | 43 | ## V2.13 44 | - Rename full, small-full, large-full to container, small-container, large-container respectively 45 | - Add align-full 46 | - Add align-wide 47 | - Update Readme 48 | 49 | ## V2.12 50 | - Add h6 sizing in augmented fourth headers 51 | - Add collapse-padding option to grid 52 | - Fix super-header sizing 53 | 54 | ## V2.11 55 | - Add large site width option 56 | 57 | ## V2.1 58 | - Fix xlarge hide class 59 | - Update typography system to augmented fourth scale 60 | - remove class requirement for headers 61 | 62 | ## v2.0 63 | - Remove cards 64 | - Remove buttons 65 | - Remove box styles 66 | - Remove Style Guide 67 | - Removed .css version 68 | - Rebuild grid - Renamed Rows and columns to reflect a single grid box, removed padding from grid cells and replaced with margins for better background handling 69 | - create mixin for grid and typographic breakpoint sizing 70 | - create mobile first media mixins 71 | 72 | ## v1.1-beta 73 | - add style-guide html and css 74 | - move scss to own file 75 | - pull out mixins 76 | - add .em class for italics 77 | 78 | ## v1.0.4-beta 79 | - remove modernizr tags 80 | - fix small validation errors in .css file 81 | - move css into own folder 82 | 83 | ## v1.0.3.5-beta 84 | - Fix multiline css media query 85 | 86 | ## v1.0.3-beta 87 | - Add variable for header font 88 | - Clean up white-space 89 | - Remove some old vendor prefixes 90 | - Remove ordinal flex prefix 91 | - Remove old flexbox standards 92 | 93 | ## v1.0.2-beta 94 | - Add class 'inside' to rows to allow align properly inside other Rows 95 | - fix row's min-width 96 | - fix cell's max-width 97 | - add medium only media queries anc cell widths 98 | 99 | ## v1.0.1-beta 100 | ### Fixed bugs 101 | - Fix column row's spacing with .cell.fit 102 | 103 | ### Implemented enhancements 104 | - Add Changelog! 105 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "thimblecss", 3 | "version": "2.3.0", 4 | "description": "A nimble micro CSS Framework", 5 | "main": "scss/thimble.scss", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/agileleague/thimblecss.git" 9 | }, 10 | "keywords": [ 11 | "css", 12 | "css3", 13 | "flexbox", 14 | "front-end", 15 | "framework", 16 | "html", 17 | "html5", 18 | "mobile-first", 19 | "responsive", 20 | "sanitize", 21 | "scss", 22 | "web" 23 | ], 24 | "author": "Drew Nolte ", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/agileleague/thimblecss/issues" 28 | }, 29 | "homepage": "https://thimblecss.com" 30 | } 31 | -------------------------------------------------------------------------------- /scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | 3 | // Style Scroll Bar 4 | @mixin scrollbar($track, $bar, $width, $radius) { 5 | &::-webkit-scrollbar {background: $track; width:$width} 6 | &::-webkit-scrollbar-thumb {background: $bar; border-radius:$radius} 7 | &::-webkit-scrollbar-corner {background: $track} 8 | scrollbar-base-color: $bar; 9 | scrollbar-3dlight-color: $bar; 10 | scrollbar-highlight-color: $bar; 11 | scrollbar-track-color: $track; 12 | scrollbar-arrow-color: $track; 13 | scrollbar-shadow-color: $bar; 14 | scrollbar-dark-shadow-color: $bar 15 | } 16 | 17 | // CSS Mutli-columns 18 | @mixin columns($count, $gap) { 19 | column-count:$count; 20 | column-gap:$gap; 21 | break-inside:avoid 22 | } 23 | 24 | // Quick XY center with flexbox 25 | @mixin quick-center { 26 | display: flex; 27 | align-items: center 28 | } 29 | 30 | // Media 31 | $small: 'only screen and (min-width: #{$small-break})'; 32 | $medium: 'only screen and (min-width: #{$medium-break})'; 33 | $large: 'only screen and (min-width: #{$large-break})'; 34 | $xlarge: 'only screen and (min-width: #{$xlarge-break})'; 35 | 36 | $small-down: 'only screen and (max-width: #{$small-break - 1px})'; 37 | $medium-down: 'only screen and (max-width: #{$medium-break - 1px})'; 38 | $large-down: 'only screen and (max-width: #{$large-break - 1px})'; 39 | $xlarge-down: 'only screen and (max-width: #{$xlarge-break - 1px})'; 40 | -------------------------------------------------------------------------------- /scss/_thimble-core.scss: -------------------------------------------------------------------------------- 1 | // ThimbleCSS Core v2.2.6 2 | 3 | // Sanitize 4 | *, *::before, *::after { 5 | box-sizing:border-box; 6 | } 7 | ::before, 8 | ::after { 9 | text-decoration: inherit; 10 | vertical-align: inherit; 11 | } 12 | html { 13 | -ms-text-size-adjust:100%; 14 | -webkit-text-size-adjust:100%; 15 | -moz-tab-size: 4; 16 | tab-size: 4; 17 | -webkit-tap-highlight-color:transparent; 18 | -moz-osx-font-smoothing:grayscale; 19 | -webkit-font-smoothing:subpixel-antialiased; 20 | line-height:$line-height; 21 | } 22 | body { 23 | margin:0; 24 | font-family:$body-font; 25 | color:$font-color; 26 | } 27 | hr { 28 | color: inherit; 29 | height: 0; 30 | } 31 | main {display:block} 32 | pre { 33 | font-family: monospace, monospace; 34 | font-size: 1em; 35 | overflow: auto 36 | } 37 | h1, h2, h3, h4, h5, h6, p, blockquote, figure, ol, ul {margin:0;padding:0} 38 | 39 | // typography 40 | ::selection {background-color:$green;color:#fff} 41 | :focus {outline:0} 42 | p { 43 | margin-bottom:1.1rem; 44 | text-rendering:optimizeLegibility 45 | } 46 | em, i, .em { 47 | font-style:italic; 48 | line-height:inherit 49 | } 50 | .uppercase {text-transform:uppercase} 51 | .capitalize {text-transform:capitalize} 52 | .lowercase {text-transform:lowercase} 53 | .underline {text-decoration:underline} 54 | strong, b, .strong { 55 | font-weight:bolder; 56 | line-height:inherit 57 | } 58 | small, .small {font-size:80%} 59 | .large {font-size:140%} 60 | sup, .sup, sub, .sub { 61 | position:relative; 62 | font-size:75%; 63 | line-height:0; 64 | vertical-align:baseline 65 | } 66 | sup, .sup {top:-.5em} 67 | sub, .sub {bottom:-.25em} 68 | .ellipsis, .ellipsis li { 69 | text-overflow:ellipsis; 70 | white-space:nowrap; 71 | overflow:hidden; 72 | } 73 | .text-clip, .text-clip li { 74 | text-overflow:clip; 75 | white-space:nowrap; 76 | overflow:hidden 77 | } 78 | 79 | // Headings 80 | h1, h2, h3, h4, h5, h6 { 81 | font-family:$header-font; 82 | font-weight:normal; 83 | text-rendering:optimizeLegibility; 84 | font-size:inherit; 85 | color:$header-color; 86 | margin-bottom: $line-height + rem; 87 | } 88 | h1.super-header {font-size:3.998rem;line-height:1.22} 89 | h1 {font-size:2.827rem;line-height:1.4} 90 | h2 {font-size:1.999rem;line-height:1.55} 91 | h3 {font-size:1.414rem;line-height:1.7} 92 | h4 {font-size:1rem;line-height:1.85} 93 | h5 {font-size: .707rem;line-height:2} 94 | h6 {font-size: .707rem;line-height:2} 95 | 96 | @media #{$medium} { 97 | h1.super-header {font-size:5.653rem;line-height:1.18} 98 | h1 {font-size:3.998rem;line-height:1.22} 99 | h2 {font-size:2.827rem;line-height:1.4} 100 | h3 {font-size:1.999rem;line-height:1.55} 101 | h4 {font-size:1.414rem;line-height:1.7} 102 | h5 {font-size:1rem;line-height:1.85} 103 | } 104 | 105 | .sub-header {color:$subfont-color} 106 | 107 | .super-header.vw {font-size:7vw} 108 | h1.vw {font-size:6vw} 109 | h2.vw {font-size:5vw} 110 | h3.vw {font-size:4.5vw} 111 | h4.vw {font-size:4vw} 112 | h5.vw {font-size:3.5vw} 113 | h6.vw {font-size:3vw} 114 | 115 | // Links 116 | a { 117 | text-decoration:none; 118 | transition:$normal-speed; 119 | color:$link-color; 120 | cursor:pointer; 121 | &:active, &:hover { 122 | color:$link-hover; 123 | } 124 | } 125 | 126 | // Floats & Clears 127 | .float-left {float:left} 128 | .float-right {float:right} 129 | .clear:before,.clear:after {content:'';display:table} 130 | .clear:after {clear:both} 131 | .clear {zoom:1} 132 | 133 | // Lists 134 | ul, ol, dl { 135 | list-style-position:outside; 136 | margin-bottom:1.15rem; 137 | ul, ol, dl { 138 | margin-bottom:0 139 | } 140 | } 141 | ul { 142 | margin-left:1.2rem; 143 | list-style-type:disc; 144 | ul { 145 | list-style-type:circle 146 | } 147 | &.lined, &.none { 148 | list-style-type:none; 149 | margin-left:0 150 | } 151 | &.lined li { 152 | border-bottom:solid 1px rgba(0,0,0,0.2) 153 | } 154 | } 155 | ol { 156 | margin-left:1.55rem; 157 | list-style-type:decimal 158 | } 159 | 160 | // Media 161 | img, iframe { 162 | max-width:100%; 163 | height:auto; 164 | border:0; 165 | border-style:none 166 | } 167 | svg:not(:root) { 168 | overflow:hidden 169 | } 170 | .video-container { 171 | position:relative; 172 | padding-bottom:56.25%; 173 | height:0; 174 | overflow:hidden; 175 | iframe, object, embed, video { 176 | position:absolute; 177 | top:0; 178 | left:0; 179 | width:100%; 180 | height:100% 181 | } 182 | } 183 | 184 | // Center container 185 | .container { 186 | margin:0 auto; 187 | max-width:$site-width; 188 | width:100% 189 | } 190 | .small-container { 191 | margin:0 auto; 192 | max-width:$small-site-width; 193 | width:100% 194 | } 195 | .large-container { 196 | margin:0 auto; 197 | max-width:$large-site-width; 198 | width:100% 199 | } 200 | .xlarge-container { 201 | margin:0 auto; 202 | max-width:$xlarge-site-width; 203 | width:100% 204 | } 205 | .align-wide { 206 | margin-left: calc(25% - 25vw); 207 | margin-right: calc(25% - 25vw); 208 | width: auto; 209 | max-width:100vw 210 | } 211 | .align-full { 212 | margin-left: calc( -50vw + 50% ); 213 | margin-right: calc( -50vw + 50% ); 214 | max-width: 100vw; 215 | width:100vw 216 | } 217 | 218 | // Grid 219 | .grid { 220 | position:relative; 221 | display:flex; 222 | -webkit-backface-visibility:hidden; 223 | backface-visibility:hidden; 224 | flex-flow:row wrap; 225 | &.collapse-padding { 226 | > .cell { 227 | padding-left:0; 228 | padding-right:0 229 | } 230 | } 231 | &.edge { 232 | margin-left:-($cell-margin+$cell-padding); 233 | margin-right:-($cell-margin+$cell-padding); 234 | } 235 | &.half-edge { 236 | margin-left:-$cell-margin; 237 | margin-right:-$cell-margin; 238 | } 239 | } 240 | .nowrap {flex-wrap:nowrap} 241 | .wrap-reverse {flex-wrap:wrap-reverse} 242 | 243 | // Justify Grid (Vertical Alignment) 244 | .justify-start {justify-content:flex-start} 245 | .justify-end {justify-content:flex-end} 246 | .justify-center {justify-content:center} 247 | .justify-space {justify-content:space-between} 248 | .justify-around { justify-content:space-around} 249 | 250 | // Alignment (Horizontal Alignment) 251 | .align-top {align-items:flex-start;align-self:flex-start} 252 | .align-bottom {align-items:flex-end;align-self:flex-end} 253 | .align-center {align-items:center;align-self:center} 254 | .align-baseline {align-items:baseline} 255 | .align-stretch {align-items:stretch} 256 | 257 | // Grid Direction 258 | .reverse {flex-direction:row-reverse} 259 | .vertical { 260 | flex-direction:column; 261 | flex-wrap:nowrap; 262 | &.reverse { 263 | flex-direction:column-reverse; 264 | flex-wrap:nowrap 265 | } 266 | } 267 | 268 | // Functions 269 | $celladjust:$cell-margin*2; 270 | $cell-sizes: ( 271 | (twelve, 12), 272 | (eleven, 11), 273 | (ten, 10), 274 | (nine, 9), 275 | (eight, 8), 276 | (seven, 7), 277 | (six, 6), 278 | (five, 5), 279 | (four, 4), 280 | (three, 3), 281 | (two, 2), 282 | (one, 1) 283 | ); 284 | 285 | @mixin sizing($size) { 286 | // Visibilty 287 | .#{$size}hide {display:none!important} 288 | 289 | // Typography 290 | .#{$size}text-left {text-align:left} 291 | .#{$size}text-right {text-align:right} 292 | .#{$size}text-center {text-align:center} 293 | .#{$size}text-justify {text-align:justify} 294 | 295 | @each $size-text, $size-int in $cell-sizes { 296 | // Create Cell Sizes 297 | .#{$size}#{$size-text} { 298 | max-width:calc( 100%/12 * #{$size-int} - #{$celladjust} ); 299 | flex: 0 0 calc( 100%/12 * #{$size-int} - #{$celladjust} ); 300 | &.collapse { 301 | max-width:calc( 100%/12 * #{$size-int} ); 302 | flex: 0 0 calc( 100%/12 * #{$size-int} ) 303 | } 304 | } 305 | 306 | // Create Cell ordering 307 | .#{$size}order-#{$size-int} {order:#{$size-int}} 308 | } 309 | 310 | .#{$size}fifth { 311 | max-width:calc( 20% - #{$celladjust} ); 312 | flex: 0 0 calc( 20% - #{$celladjust} ); 313 | &.collapse { 314 | max-width:20%; 315 | flex: 0 0 20% 316 | } 317 | } 318 | 319 | // Create Responsive fit/fills 320 | .#{$size}fit { 321 | flex:0 0 auto; 322 | width:auto; 323 | max-width:auto; 324 | } 325 | .#{$size}fill { 326 | flex:1 1 0; 327 | width:auto; 328 | max-width:auto; 329 | } 330 | } 331 | 332 | @mixin sizing-down($size) { 333 | .#{$size}show {display:none!important} 334 | } 335 | 336 | // Cells 337 | .cell { 338 | flex:1 1 auto; 339 | max-width:100%; 340 | min-width:0; 341 | min-height:0; 342 | margin-left:$cell-margin; 343 | margin-right:$cell-margin; 344 | padding-left:$cell-padding; 345 | padding-right:$cell-padding; 346 | &.fit { 347 | flex:0 0 auto; 348 | width:auto 349 | } 350 | &.fill { 351 | flex:1 1; 352 | width:auto 353 | } 354 | &.collapse { 355 | margin-left:0; 356 | margin-right:0 357 | } 358 | &.collapse-padding { 359 | padding-left:0; 360 | padding-right:0 361 | } 362 | } 363 | 364 | @include sizing(null); 365 | 366 | // Media Queries 367 | @media #{$small-down} { 368 | @include sizing-down(small-); 369 | } 370 | @media #{$small} { 371 | @include sizing(small-); 372 | } 373 | 374 | @media #{$medium-down} { 375 | @include sizing-down(medium-); 376 | } 377 | @media #{$medium} { 378 | @include sizing(medium-); 379 | 380 | // VW Headers 381 | .super-header.vw {font-size:5vw} 382 | h1.vw {font-size:3.5vw} 383 | h2.vw {font-size:3vw} 384 | h3.vw {font-size:2.5vw} 385 | h4.vw {font-size:2vw} 386 | h5.vw {font-size:1.5vw} 387 | } 388 | 389 | @media #{$large-down} { 390 | @include sizing-down(large-); 391 | } 392 | @media #{$large} { 393 | @include sizing(large-) 394 | } 395 | 396 | @media #{$xlarge-down} { 397 | @include sizing-down(xlarge-); 398 | } 399 | @media #{$xlarge} { 400 | @include sizing(xlarge-) 401 | } 402 | 403 | // Reduced Motion 404 | @media (prefers-reduced-motion: reduce) { 405 | *, ::before, ::after { 406 | animation-delay: -1ms !important; 407 | animation-duration: 1ms !important; 408 | animation-iteration-count: 1 !important; 409 | background-attachment: initial !important; 410 | scroll-behavior: auto !important; 411 | transition-delay: 0s !important; 412 | transition-duration: 0s !important 413 | } 414 | } -------------------------------------------------------------------------------- /scss/_thimble-overrides.scss: -------------------------------------------------------------------------------- 1 | // ThimbleCSS Overrides 2 | 3 | // Colors 4 | $blue: #2266a7 !default; 5 | $violet: #540D6E !default; 6 | $yellow: #FFE066 !default; 7 | $orange: #EA9643 !default; 8 | $red: #f15a3b !default; 9 | $green: #57a290 !default; 10 | 11 | $gray:#6e7e85 !default; 12 | $black:#181818 !default; 13 | 14 | // Typography 15 | $body-font: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif !default; 16 | $header-font: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif !default; 17 | 18 | $line-height:1.5; 19 | 20 | $header-color:$black !default; 21 | $font-color:#3d3d3d !default; 22 | $subfont-color: rgba($font-color,.6) !default; 23 | 24 | $link-color:$blue !default; 25 | $link-hover:$red !default; 26 | 27 | // Transitions 28 | $fast-speed:all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !default; 29 | $normal-speed:all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !default; 30 | $slow-speed:all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !default; 31 | $slowest-speed:all 0.75s cubic-bezier(0.4, 0, 0.2, 1) !default; 32 | 33 | // Shadows 34 | $base-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.14) !default; 35 | $hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), 0 4px 20px rgba(0, 0, 0, 0.18) !default; 36 | $selected-shadow: 0 12px 16px rgba(0, 0, 0, 0.25), 0 18px 40px rgba(0, 0, 0, 0.19) !default; 37 | $solid-shadow: 3px 3px 0px rgba(0,0,0,0.2) !default; 38 | 39 | // Metrics 40 | $site-width:960px !default; 41 | $small-site-width:760px !default; 42 | $large-site-width:1024px !default; 43 | $xlarge-site-width:1280px !default; 44 | 45 | $cell-margin:.5rem !default; 46 | $cell-padding:.5rem !default; 47 | 48 | // Media Break Adjustments 49 | $small-break: 480px !default; 50 | $medium-break: 768px !default; 51 | $large-break: 1024px !default; 52 | $xlarge-break: 1280px !default; -------------------------------------------------------------------------------- /scss/thimble.scss: -------------------------------------------------------------------------------- 1 | // ThimbleCSS v2.2.6 2 | 3 | @import 'thimble-overrides'; 4 | @import 'mixins'; 5 | @import 'thimble-core'; 6 | --------------------------------------------------------------------------------