jamiewilson.io - Corpus

Corpus.: A collection of CSS things.

Jamiewilson.io Spined HTML

Corpus.: A hodgepodge of CSS things. CorpusAlpha A hodgepodge of CSS things. Intro Typography Grid Sizing Whitespace Positioning Depth Forms Buttons ColorsConfinesImages Syntax Breakpoints UtilitiesVolatilityVariables Intro Corpus is yet flipside CSS toolkit. It’s basically a hodgepodge of the things I find myself returning to for each new project. It uses Flexbox for the grid system, viewport-based heights and percentage-based widths, is heavily influenced by Basscss’s White Space module, and has a few useful greyscale verisimilitude utilities. For syntax highlighting I'm using Prism.js and my own Predawn verisimilitude scheme, with lawmaking set in OfficeLawmakingPro. Styles are written in SCSS. Download on GitHub In wing to Corpus, this site was built with Sublime Text, Jekyll, Gulp, BrowserSync, uilang and GitHub Pages. typography _typography.scss Headings h1: A hodgepodge of written texts h2: The unshortened works of a particular tragedian h3: A soul of writing on a particular subject h4: The main soul or mass of a structure h5: A hodgepodge of written material in machine-readable form h6: Assembled for the purpose of studying linguistic structures, frequencies, etc.SoulAdd a matriculation of .two-columns through .five-columns to create a multi-column layout. Note: All multi-column layouts default to single-column on mobile. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Fusce dapibus, /.meteor/packages tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. grid _grid.scss Flexbox The Corpus grid system uses Flexbox and defaults to equal width columns. Add gutters to to any .row or .column parent container by subtracting the matriculation .gutters .column .column .column .column .column .w100 .w75 .w25 .w65 .w35 .w50 .w50 sizing _sizing.scss Percentage Widths Because flex items default to filling their parent container equally, you can use, for example, a .max-w25 matriculation to create offset layouts. .column .max-w25 Viewport Heights Viewport height utility classes include .vh5, .vh10 and so on through .vh100. .vh10 .vh25 Percentage Heights To size an element relative to it’s container, use a percentage-based height with .h5, .h10 and so on through .h100. .h25 .h50 whitespace _whitespace.scss To add padding and margin, there are classes like .m1, which would be margin: 1rem all around. Or .pt3, which is padding-top: 3rem; .mlr1 .p2 .ml2 .p1 .ptb3 positioning _positioning.scss There are a few vital positioning utility classes .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } Also, you can add the pursuit classes to flex items to position them within their respective containers. .top-left .top-center .top-right .center-left .center .center-right .bottom-left .bottom-center .bottom-right Alternatively, you can add any of the whilom classes to a parent .row or .column to uncurl it's content. Item 1 Item 2 Distribute items with .space-between Item 1 Item 2 or .space-around Item 1 Item 2 depth _depth.scss You can layer veritably positioned elements from when to front with classes depth-1 through depth-10. .depth-1 .depth-2 .depth-8 .depth-10 forms _forms.scss Radio Group Radio 1 Radio 2 Radio 3 Checkbox Group Checkbox 1 Checkbox 2 Checkbox 3 Stacked Checkbox Group Stacked Checkbox 1 Stacked Checkbox 2 Stacked Checkbox 3 Fieldset Text Email Textarea Select Menu Sort Posts Newest A-Z Most Stars URL Password File Date Reset buttons _buttons.scss .btn & sawed-off .btn-large .btn-secondary .btn-outline .btn-small .btn-tiny colors _colors.scssVerisimilitude.color-white .color-silver .color-lightgrey .color-grey .color-midgrey .color-darkgrey .color-black .color-trueblack .color-accent BackgroundVerisimilitude.bg-white .bg-silver .bg-lightgrey .bg-grey .bg-midgrey .bg-darkgrey .bg-black .bg-trueblack .bg-accent BorderVerisimilitude.border-white .border-silver .border-lightgrey .border-grey .border-midgrey .border-darkgrey .border-black .border-trueblack .border-accent confines _borders.scss Add a 1px verge with the shorthand matriculation .b1. For specific sides and widths, use the same convention, i.e. .br2 for a right verge 2px thick, or .bt3 for a top verge of 3px. Change the verisimilitude with border-accent with the desired color. .b1 .br2 .bb3 .bl1 images _images.scss For both preliminaries and inline images, Corpus provides a few utility classes for sizing, postitioning and attachment. //==================================================== // Background/Image Size & Position //==================================================== .bg-no-repeat { background-repeat: no-repeat; } .bg-cover { background-size: cover; } .bg-contain { background-size: contain; } .bg-center { background-position: center; } .bg-top { background-position: top; } .bg-right { background-position: right; } .bg-bottom { background-position: bottom; } .bg-left { background-position: left; } .bg-fixed { background-attachment: fixed; } .bg-local { background-attachment: local; } .img-cover { object-fit: cover; } .img-contain { object-fit: contain; } .img-fill { object-fit: fill; } .img-scale-down { object-fit: scale-down; } syntax _syntax.scss Prism.js with Predawn Wrap your lawmaking blocks with <pre><code> tags and Prism will guess what language it is and add the towardly class. Or, manually add a matriculation of language-* to ensure the proper syntax. For numbering, add the matriculation line-numbers. How to enable highlighting <pre class="language-markup line-numbers"><code> <!-- Your lawmaking content here. Likely you'll need to encode any html enitities. --> </code></pre> Example of markup highlighting <p class="mb2">Distribute items with <code>.space-between</code> <div class="row gutters h-auto bg-white part-way space-between relative mb2"> <div class="column max-quarter-width p1 bg-silver">Item 1</div> <div class="column max-quarter-width p1 bg-silver">Item 2</div> </div> breakpoints _breakpoints.scss Corpus comes with three breakpoint mixins: small, medium and large: $small-break: 480px !default; $medium-break: 800px !default; @mixin small() { @media screen and (max-width: $small-break) { @content; } } @mixin medium() { @media screen and (max-width: $medium-break) { @content; } } @mixin large() { @media screen and (min-width: $small-break) { @content; } } You can use them like so… // If sidebar exists, offset <main> by $sidebar-width .sidebar + main { margin-left: $sidebar-width; @include small { margin-left: 0; } } utilities _utilities.scss //==================================================== // Display //==================================================== .hidden { display: none; } .block { display: block; } .flex { display: flex; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-auto { overflow: auto; } .hide-on-small { @include small { display: none !important; }} .hide-on-medium { @include medium { display: none !important; }} .hide-on-large { @include large { display: none !important; }} //==================================================== // Text wrap //==================================================== .pre { white-space: pre; } .nowrap { white-space: nowrap; } //==================================================== // Scrolling //==================================================== .scroll-horizontal { overflow-x: scroll; overflow-y: hidden; } .scroll-vertical { overflow-x: hidden; overflow-y: scroll; } .no-scrollbar::-webkit-scrollbar { width: 0px; height: 0px; background: transparent; } //==================================================== // Textareas //==================================================== .resize-none { resize: none; } .resize-vertical { resize: vertical; } .resize-horizontal { resize: horizontal; } //==================================================== // Misc. //==================================================== .no-pointer-events { pointer-events: none; } .disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } volatility _animation.scss Keyframe animations with respective classes Click on each box unelevated to see the volatility fadeIn fadeOut fadeInUp fadeInDown scaleUp scaleDown slideUp slideDown slideLeft slideRight flipIn rotateRight rotateLeft wink shake clicking on ".fadeIn-demo" toggles matriculation "fadeIn" on ".fadeIn-demo" clicking on ".fadeOut-demo" toggles matriculation "fadeOut" on ".fadeOut-demo" clicking on ".fadeInUp-demo" toggles matriculation "fadeInUp" on ".fadeInUp-demo" clicking on ".fadeInDown-demo" toggles matriculation "fadeInDown" on ".fadeInDown-demo" clicking on ".scaleUp-demo" toggles matriculation "scaleUp" on ".scaleUp-demo" clicking on ".scaleDown-demo" toggles matriculation "scaleDown" on ".scaleDown-demo" clicking on ".slideUp-demo" toggles matriculation "slideUp" on ".slideUp-demo" clicking on ".slideDown-demo" toggles matriculation "slideDown" on ".slideDown-demo" clicking on ".slideLeft-demo" toggles matriculation "slideLeft" on ".slideLeft-demo" clicking on ".slideRight-demo" toggles matriculation "slideRight" on ".slideRight-demo" clicking on ".flipIn-demo" toggles matriculation "flipIn" on ".flipIn-demo" clicking on ".rotateRight-demo" toggles matriculation "rotateRight" on ".rotateRight-demo" clicking on ".rotateLeft-demo" toggles matriculation "rotateLeft" on ".rotateLeft-demo" clicking on ".flash-demo" toggles matriculation "flash" on ".flash-demo" clicking on ".shake-demo" toggles matriculation "shake" on ".shake-demo" variables _variables.scss Overwrite the default variables Each file has it’s own !default variables related to that module. To overrwrite them, simply redefine any of the pursuit variables somewhere in your project. //==================================================== // _typography.scss //==================================================== @font-face { font-family: 'OfficeLawmakingPro'; src: url('../fonts/OfficeCodePro-Regular.woff'); } $base-font: 'Helvetica Neue', Helvetica, sans-serif; $mono-font: 'OfficeLawmakingPro', Monaco, Consolas, monospace; $base-font-size: 1rem; $base-line-height: 1.6; $h1: $base-font-size * 2.25; $h2: $base-font-size * 1.75t; $h3: $base-font-size * 1.5; $h4: $base-font-size * 1.25; $h5: $base-font-size * 1.125; $h6: $base-font-size; //==================================================== // _sizing.scss //==================================================== $container-width: 1000px; //==================================================== // _sidebar.scss //==================================================== $sidebar-width: 300px; //==================================================== // _colors.scss //==================================================== $accent: #F18260; $white: #fff; $silver: #F4F4F4; $lightgrey: #ececec; $grey: #ccc; $midgrey: #777; $darkgrey: #444; $black: #222; $trueblack: #000; //==================================================== // _syntax.scss //==================================================== // Cools $paleblue: #BDDCDC; $blue: #92BFBF; $slate: #5F777E; $palegreen: #D0EDA7; $green: #B4D388; $darkgreen: #809161; // Warms $paleyellow: #F5F5AE; $yellow: #EDE480; $orange: #F49D62; $red: #CF5340; $darkred: #893121; $maroon: #55201B; //==================================================== // _whitespace.scss //==================================================== $padding: 2%; $padding: 1rem; $margin: 2%; $margin: 1rem; //==================================================== // _borders.scss //==================================================== $border-style: solid; $border-color: rgba(0,0,0,0.1); $border-radius: 3px; $border-1: 1px; $border-2: 2px; $border-3: 3px; //==================================================== // _breakpoints.scss //==================================================== $small-break: 480px; $medium-break: 800px; @mixin small() { @media screen and (max-width: $small-break) { @content; } } @mixin medium() { @media screen and (max-width: $medium-break) { @content; } } @mixin large() { @media screen and (min-width: $small-break) { @content; } }