If everyone else can name their sass modules after alcoholic beverages, why don't I do it too?
The aim of Tequila is to be a 0 weight framework, meaning that if you import it and, if you don't use it, it won't add any bloat to your compiled CSS files. Tequila is built to compliment tools like Thoughtboxes Bourbon mixins and Breakpoint, but has no dependency on these whatsoever (unless documented otherwise).
@include define-type-scale((
scale: 1.414,
base-size: 1,
base-weight: 400,
line-height: 1.45,
rem: true,
));
Can be used with or without math module or anything else that defines pow() like Compass.
Set up font scaling on your webapp using http://type-scale.com/ If you have a designer, ask them to provide you with a link from this site (if not, grab it yourself) - it should resemble: http://type-scale.com/?size=16&scale=1.414&text=CSS%20Architecture%20for%20large-scale&webfont=Libre+Baskerville&font-family=gotham&font-weight=400&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%23333 The options array takes the same parameters as $type-scale, defaults are defined in $type-scale-base;
.class-name {
@include angle(after, false, 1.5deg);
}
Angle is a mixin for drawing slanted boxes (because svgs are annoying to maintain). It takes 3 parameters, the first is the pseudo selector that the slanted section should be placed onto; before, after or both.
The second parameter if whether the angle should be flipped or not, depending on which direction you want the slant to go.
The third and final parameter is the angle at which you want the slant to go.
This feature was taken from here
.class-name {
@include arrow(up, 10px, red);
}
This mixin is used to draw arrows on blocks, and takes the parameters: the direction: which way you want the arrow to point (up, down, left or right); the size: how big you want the arrow to be and the color that you want the arrow to be.
@include color-set(btn, $color-map, true);
Color set is a mixin for generating a set of something e.g. buttons. The first argument is what you want to prepend all of your color scheme classes with (for buttons it could be btn), the second parameter is a map of all of the different colors that this component can be (e.g. ( "primary": red, "secondary": blue) for generating "btn-primary" and "btn-secondary classes"). The third param is whether this block has a hover state, if your component has hover states you will need to assign two colors to your map, the first being the neutral state and the second being the hover state.
ul {
@include bullets(circle, 2em, pink);
}
UNSTABLE
Bullets is a mixin to style bullet points, because CSS does not let us style bullet points easily. With this mixin you can easily style bullet points, changing their color, size and shape simply by changing the three parameters in the mixin.
It kind of works now, but not 100% reliably.
.class-name{
...
@include pseudos() {
color: red;
...
}
}
For applying styles to the hover, focus and active pseudo selectors at the same time. Styles for these are placed within the curly braces after the parentheses.
@include selection() {
color: red;
...
}
For manipulating the visual styling of the :selection pseudo element.
.class-name {
@include text-hide();
...
}
For hiding the text within a container (good for icons set on backgrounds for screen readers)
.class-name {
background-color: hex-rgba(#eeeeee, .5);
}
This function is for adding alpha to a color that you only have the hex value for.
Instead of rewriting an entire grid system with fixed sizes (bootstrappy col-md-6 kind of stuff) I decided to take a freer approach to the grid system in a similar way to susy
You can set options for the flex grid to use by overwriting the map called $full-flex
this holds all of the options for the flex grid itself like gutters and things.
@include flexrow(stretch);
Flexrow creates a block which displays flex with fallbacks. It also adds negative margin
around the block. The argument this mixin takes is optional, but if set, changes the flex align of the block
@include flexcol(1, baseline);
Flexcol sets up an item within a flexrow, the first argument is how much space
the block should take up. Setting this to 1 will allow the block to take up 100%
of the space available to it, meaning that if it is on its own, it will be 100%
of the width. It also means that if you have two of these blocks,
they will take up 50% each, 3 will take up 33.33 respectively, 4, 25% and so on.
You can also set the first argument to either a percentage or a fraction, this will fix the block to take up this much space and this much space only, even if there are no more elements or multiple elements
The second argument is optional, pass an alignment to set a particular alignment on this block (uses align-self)
@include flexcol-at(1, 300px, baseline, false);
Soft requires breakpoint
Same old Flexcol, hooked into breakpoints
The first argument is the same as it was in flexcol, can be 1, a percentage or a
fraction depending on what you want the col to do, the second argument is the breakpoint,
as with the other breakpoint mixins you can either pass a breakpoint to this value
or a max width value. The third argument is your alignment variable,
does exactly the same as the second argument for the normal flexcol mixin above
and is still optional. The final argument is the no breakpoint boolean,
used for when you do not have the breakpoint library
The mixins below are for the big features in flexbox
@include display-flex();
This one simply sets a block to display flex, use this on the outer row. Flex row uses this
@include display-inline-flex();
This one simply sets a block to display inline flex, use this on the outer row.
@include flex-direction(row);
This changes the direction that the row will use flex, this defaults to row. To find out all of the options, see this link.
@include flex-wrap(nowrap);
This changes whether the row will wrap or not, this defaults to nowrap. To find out all of the options, see this link.
@include flex-flow(row nowrap);
Flex flow is a shorthand way of calling flex direction and flex flow
For more information see this link.
@include align-items(stretch);
This mixin aligns the flex items on the current flex line
For more information see this link.
@include align-flex-items(stretch);
This mixin aligns a flex container's lines within the flex container when there is extra space on the cross-axis.
For more information see this link.
@include justify-content(stretch);
This mixin aligns a flex container's lines within the flex container when there is extra space on the cross-axis.
For more information see this link.
For more information see this link.
@include flex(0, 1, 1);
The flex mixin is a quick way of making flex items, it takes three properties, all of which are optional, the 1st is the flex grow property, the second, flex shrink and the third, flex basis.
The flex grow property is the amount of the row you want this item to take up, the flex shrink property states by which factor the block should be shrunk, the flex basis sets the base size of the flex item
For basic usage of the flex mixin you should be able to get away with not passing any arguments to the mixin, for more complex stuff you will need to get to grips on what the grow, shrink and basis options do
For more information see this link and all will be revealed (hopefully).
@include flex-order(3);
This mixin adjusts the position of a flex item, reordering it in the DOM
For more information see this link.
@include align-flex-self(3);
This mixin works a lot like align-flex except it acts on a single flex item
For more information see this link.
These are breakpoints for targeting specific devices, for when you have that one device that won't display something on your site correctly. Use these mixins sparingly and don't build your site around them, building a site to work per specific device is never a good idea.
@include target-iphone-4(landscape);
This mixin allows you to target the iPhone 4 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device
@include target-iphone-5(landscape);
This mixin allows you to target the iPhone 5 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device
@include target-iphone-6(landscape);
This mixin allows you to target the iPhone 6 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device
@include target-iphone-6-plus(landscape);
This mixin allows you to target the iPhone 6+ and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device
@include target-galaxy-s3(landscape);
This mixin allows you to target the Samsung Galaxy S3 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device.
@include target-galaxy-s4(landscape);
This mixin allows you to target the Samsung Galaxy S4 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device.
@include target-galaxy-s5(landscape);
This mixin allows you to target the Samsung Galaxy S5 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device. This breakpoint also matches the HTC One.
@include target-ipad(landscape);
This mixin allows you to target non-retina iPads, specifically the iPad mini, iPad 1 and iPad 2, and apply styling directly to your site when it is displayed on these specific devices. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device.
@include target-ipad-retina(landscape);
This mixin allows you to target retina iPads, specifically the iPad 3 and iPad 4, and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device.
@include target-nexus-7(landscape);
This mixin allows you to target the Nexus 7 and apply styling directly to your site when it is displayed on this specific device. Specifying orientation ('landscape' or 'portrait') narrows your query to that specific orientation of device.
@include parse-font-families($font-1, $font-2, ...)
Takes infinite font families and makes sure they all have at least one fallback.