Here are a few common tasks you might do in your templates, as they would be written in ExpressionEngine vs. Craft CMS.
razwan
/ _baseline.scss
Created
April 14, 2014 16:20
Aligning type to baseline the right way with SASS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $base-font-size: 16px; | |
| $base-line-height: 1.5; | |
| // this value may vary for each font | |
| // unitless value relative to 1em | |
| $cap-height: 0.68; | |
| @mixin baseline($font-size, $scale: 2) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Use em or rem font-size in Bootstrap 3 | |
| */ | |
| @font-size-root: 14px; | |
| @font-unit: 0rem; // Pick em or rem here | |
| // Convert all variables to em |
simbo
/ Bootstrap media query ruleset mixins.less
Last active
June 8, 2023 16:55
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ============================================================================= | |
| Media queries for different screen sizes | |
| ========================================================================== */ | |
| // xs only | |
| .screen-xs(@rules) { | |
| @media (max-width: @screen-xs-max) { @rules(); } | |
| } | |
| // sm and larger |
mlouro
/ gulpfile.js
Last active
April 12, 2025 09:11
gulpfile.js with browserify, jshint, libsass, browserSync for livereload, image optimization and system notifications on errors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| var gulp = require('gulp'); | |
| var gutil = require('gulp-util'); | |
| var del = require('del'); | |
| var uglify = require('gulp-uglify'); | |
| var gulpif = require('gulp-if'); | |
| var exec = require('child_process').exec; | |
| var notify = require('gulp-notify'); |
hatefulcrawdad
/ modern-scale.scss
Last active
February 26, 2024 07:02
SCSS version of http://typecast.com/blog/a-more-modern-scale-for-web-typography
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // -------------------------------------------------------------------------------------- | |
| // A More Modern Scale for Web Typography | |
| // Based on this article: http://typecast.com/blog/a-more-modern-scale-for-web-typography | |
| // -------------------------------------------------------------------------------------- | |
| $body-font-size: 1em !default; | |
| // Adjusts body typography to be default | |
| // for each browser. | |
| @mixin reset-body-font-size($font-size: 100%, $size-adjustment: 0.5) { |
firepol
/ bootstrap_ms.css
Last active
September 23, 2020 19:14
— forked from andyl/bootstrap_ms.css
updated max-width: 767px to avoid breaking the existing behavior on col-sm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .col-ms-1, | |
| .col-ms-2, | |
| .col-ms-3, | |
| .col-ms-4, | |
| .col-ms-5, | |
| .col-ms-6, | |
| .col-ms-7, | |
| .col-ms-8, | |
| .col-ms-9, | |
| .col-ms-10, |
erikflowers
/ Bootstrap-3-Smallest-Column-Mixin
Last active
December 21, 2015 06:19
If you are building your Bootstrap 3 grid entirely using mixins, you need to declare a base column mixin for proper, full width columns at the smallest level. Otherwise, they lack the proper padding, min-height, and position as the same HTML markup column would have by default. This is used by adding .make-column(); at the base level before you …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Generate a mixin for mobile full width columns, to maintain the same attributes | |
| .make-column(@gutter: @grid-gutter-width) { | |
| position: relative; | |
| // Prevent columns from collapsing when empty | |
| min-height: 1px; | |
| // Inner gutter via padding | |
| padding-left: (@gutter / 2); | |
| padding-right: (@gutter / 2); | |
| } |
justincarroll
/ bootstrap-masonry-template.htm
Last active
August 15, 2020 16:48
This is my template for using Masonry 3 with Bootstrap 3. For those of you who follow this gist a lot has changed since Bootstrap 2.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Bootstrap Masonry Template</title> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700"> |
