Gareth Jones 4foot30
4foot30
/ Proper breakpoints for a Bootstrap-based Drupal theme
Created
February 19, 2018 11:31
This file contains hidden or 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
| # This file lives at /docroot/themes/custom/THEME_NAME/THEME_NAME.breakpoints.yml | |
| # Mobile portrait | |
| THEME_NAME.xxs: | |
| label: xxs (Mobile portrait) | |
| mediaQuery: 'all and (min-width: 0) and (max-width: 479px)' | |
| weight: 0 | |
| multipliers: | |
| - 1x | |
| - 2x |
4foot30
/ noValidate.js
Created
September 30, 2016 19:00
Add as a browser bookmark to bypass required form fields on a page (not my code!)
This file contains hidden or 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
| javascript:for(var f%3Ddocument.forms,i%3Df.length%3Bi--%3B)f%5Bi%5D.setAttribute("novalidate","")%3B |
4foot30
/ _text.scss
Created
September 14, 2016 10:48
Breakpoint-specific versions of Bootstrap's text/left/text-right classes
This file contains hidden or 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
| // Text alignment - like Bootstrap's text-left/text-right classes, but breakpoint-specific | |
| // Usage: .text-right-sm, .text-left-md etc. | |
| @mixin make-text-left($breakpoint) { | |
| .text-left-#{$breakpoint} { | |
| text-align: left !important; | |
| } | |
| } | |
| @mixin make-text-right($breakpoint) { | |
| .text-right-#{$breakpoint} { | |
| text-align: right !important; |
4foot30
/ gulpfile.js
Last active
September 26, 2016 22:33
Half-decent example of a gulpfile for a Sass project
This file contains hidden or 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
| var cleanCSS = require('gulp-clean-css'), | |
| concat = require('gulp-concat'), | |
| gulp = require('gulp'), | |
| autoprefixer = require('gulp-autoprefixer'), | |
| gzip = require('gulp-gzip'), | |
| sass = require('gulp-sass'), | |
| rename = require('gulp-rename'), | |
| uglify = require('gulp-uglify'), | |
| watch = require('gulp-watch'); |
4foot30
/ arrows.less
Created
September 12, 2016 09:19
For drawing arrows with CSS (Bootstrap buttons, good but produces large CSS!)
This file contains hidden or 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
| // Add arrows to element | |
| // Inner arrow is the main arrow colour, outer arrow drawn underneath forms | |
| // the border/stroke around the inner arrow. | |
| // Arrows default to colours and sizes that match Bootstrap's .btn-default | |
| .arrow--left(@style: 'default', | |
| @size: 'base', | |
| @inner-arrow-color: color(~'@{btn-@{style}-bg}'), | |
| @outer-arrow-color: color(~'@{btn-@{style}-border}'), | |
| @inner-arrow-color-hover: darken(@inner-arrow-color, 10%), | |
| @outer-arrow-color-hover: darken(@outer-arrow-color, 12%), |
This file contains hidden or 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 { | |
| // Default underlining always looks terrible - use a bottom border instead | |
| color: @link-color; | |
| text-decoration: none; | |
| border-bottom: @underline-height solid transparent; | |
| .transition(~"color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease"); | |
| &:hover, &:focus { | |
| color: @link-color-hover; | |
| text-decoration: none; | |
| border-bottom: @underline-height solid @link-color-hover; |
This file contains hidden or 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
| // Floating - like Bootstrap's pull-left/pullright classes, but breakpoint-specific | |
| // Usage: .pull-right-sm, .pull-left-md etc. | |
| .make-pull-left(@breakpoint) { | |
| .pull-left-@{breakpoint} { | |
| float: left !important; | |
| } | |
| } | |
| .make-pull-right(@breakpoint) { | |
| .pull-right-@{breakpoint} { | |
| float: right !important; |
4foot30
/ visibility.less
Created
September 12, 2016 09:13
Visible/invisible classes, outside Bootstrap's usual breakpoints
This file contains hidden or 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
| // Complements Bootstrap's hidden/visible classes, but working between 0 and 479px | |
| .visible-xxs { | |
| .responsive-invisibility(); | |
| } | |
| .visible-xxs-block, | |
| .visible-xxs-inline, | |
| .visible-xxs-inline-block { | |
| display: none !important; | |
| } | |
| .hidden-xxs { |
4foot30
/ breakpoints.less
Created
September 11, 2016 20:50
Extra breakpoints for Bootstrap, for mobile portrait or large HD screens
This file contains hidden or 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
| // Define an extra-small breakpoint | |
| @screen-xxs: 0px; | |
| @screen-xxs-min: @screen-xxs; | |
| @screen-xss-max: (@screen-xs-min - 1); | |
| // Define an extra-large breakpoint | |
| @screen-xl: 1600px; | |
| @screen-xl-min: @screen-xl; | |
| @screen-lg-max: (@screen-xl-min - 1); |
4foot30
/ retina.less
Created
September 11, 2016 20:48
Retina images, @1x, @2x, @3x with extra options for background size etc.
This file contains hidden or 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
| // Extended version of Bootstrap's img-retina mixin | |
| // - adds @3x support | |
| // - lets you limit the application of the image by queries other than dpi/pixel-ratio | |
| // - lets you specify a single-parameter background size, like background-size: cover; | |
| .img-retina-extended(@file-1x; @file-2x; @file-3x; @width-1x; @height-1x: 'not-set'; @query1: 'min-width'; @queryValue1: 0px) { | |
| // @1x | |
| @media only screen and (~"@{query1}: @{queryValue1}") { | |
| background-image: url("@{file-1x}"); | |
| .img-retina-bg-size(@width-1x; @height-1x); | |
| } |
NewerOlder