Can you help me about how to add a new font-family in a Foundation project. This new font-family can be installed locally or external like Google Font Web.
Thank you.
You can create your mixin
#mixin font-face($style-name, $file, $family, $category:"") {
$filepath: "fonts/" + $family + "/" + $file;
#font-face {
font-family: "#{$style-name}";
src: url($filepath + ".eot");
src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg');
}
%#{$style-name} {
font: {
#if $category != "" {
family: "#{$style-name}", #{$category};
}
#else {
family: "#{$style-name}";
weight: normal;
}
}
}
}
And used it like this
#include font-face($style-name, $file, $family, $category);
Answer found quickly on the web...
<style>
#import url('https://fonts.googleapis.com/css?family=yourFontFamilyName');
</style>
Now use this font-family in inline css.
Style tag is removed by some webmail(for example gmail) so you can put it inside body.
If you are going to use foundation architecture then put the above line in foundation.css
Related
I'm trying to add Normalize.css as global and use emotion for my CSS Modules.
First my .babelrc
{
"presets": [
["env", {
"modules": false,
"useBuiltIns": true
}],
"next/babel"
],
"plugins": [
"syntax-dynamic-import",
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties",
"transform-object-rest-spread",
"es6-promise",
["module-resolver", {
"root": ["./src"],
"alias": {
"styles": "./styles",
"assets": "./assets",
},
"cwd": "babelrc"
}],
["inline-import", { "extensions": [".css"] } ],
["emotion", { "inline": true }]
]
}
Adding Normalize.css
In my _document.js I added the normalize
import Document, { Head, Main, NextScript } from 'next/document';
import normalize from 'normalize.css/normalize.css';
import { extractCritical } from 'emotion-server';
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const page = renderPage();
const styles = extractCritical(page.html);
return { ...page, ...styles };
}
constructor(props) {
super(props);
const { __NEXT_DATA__, ids } = props;
if (ids) {
__NEXT_DATA__.ids = ids;
}
}
render() {
return (
<html>
<Head>
<title>SSR</title>
<style jsx global>{normalize}</style>
<style dangerouslySetInnerHTML={{ __html: this.props.css }} />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
Same as shown here
Addin my css modules with Emotion
import React, { Component } from 'react';
import Breadcrumb from 'components/Breadcrumb';
import Link from 'next/link';
import styled, { hydrate, keyframes, css, injectGlobal } from 'react-emotion';
// Adds server generated styles to emotion cache.
// '__NEXT_DATA__.ids' is set in '_document.js'
if (typeof window !== 'undefined') {
hydrate(window.__NEXT_DATA__.ids);
}
const basicStyles = css`
background-color: white;
color: cornflowerblue;
margin: 3rem 0;
padding: 1rem 0.5rem;
`
const Basic = styled.div`
${basicStyles};
`
export default class extends Component {
render() {
return (
<Basic>
<p>Basic style rendered by emotion</p>
</Basic>);
}
}
Same as shown here
Problem
Error: StyleSheet: insertRule accepts only strings.
at invariant (/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/lib/stylesheet.js:274:11)
at StyleSheet.insertRule (/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/lib/stylesheet.js:125:7)
at /home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/stylesheet-registry.js:88:29
at Array.map (native)
at StyleSheetRegistry.add (/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/stylesheet-registry.js:87:27)
at JSXStyle.componentWillMount (/home/riderman/WebstormProjects/tmp/node_modules/styled-jsx/dist/style.js:58:26)
at resolve (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2616:12)
at ReactDOMServerRenderer.render (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2746:22)
at ReactDOMServerRenderer.read (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
at renderToStaticMarkup (/home/riderman/WebstormProjects/tmp/node_modules/react-dom/cjs/react-dom-server.node.development.js:2991:25)
Added
Check source code here
https://gitlab.com/problems/test-emotion-plus-global-nextjs
Looks like there's an issue for this over on Zeit's styled-jsx page: https://github.com/zeit/styled-jsx/issues/298
According to this issue it is either external styles or that you need to add the css tag to your template literals.
Looking at your code you are using the css tag and don't see any externals styles that would be causing this. If you don't get a definite answer I'd say to follow up on issue 298 with Zeit. HTH, cheers!
Edit
Get rid of the jsx styles in there and just add normalize to your global template string:
injectGlobal`
${normalize}
html, body {
padding: 3rem 1rem;
margin: 0;
background: papayawhip;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
}
`;
I have an additional answer to this that works well in TypeScript and NextJS 9. It also keeps your import directly based on your node_modules.
Import raw-loader for the module:
yarn add raw-loader
In a global.d.ts, define a hook for raw-loader
declare module '!!raw-loader!*' {
const contents: string;
export = contents;
}
In a component called Meta I have inside my _document.tsx ( _app.tsx would be fine too, but _document ensures SSR), I have this
import normalizeCss from '!!raw-loader!normalize.css';
const Meta = () => (
<div>
<Global
styles={css`
${normalizeCss}
body {
// ...
}
`}
></Global>
</div>
);
export default Meta;
I try to learn scss list with mixins.
I wrote a simple mixin which add a background-url regarding the variables in a list.
It's written in a _mixins.scss file :
$path: "../images/";
#mixin dynamic-bg($path, $type, $ext) {
#each $source in $source-list {
&[data-bg="#{$source}"] {
background: url($path + $source + '_' + $type + '.' + $ext) no-repeat;
}
}
}
I call it in another file, and "describe" the list content just before :
a {
$source-list: "alpha", "beta", "gamma"
#include dynamic-bg($path, "logo", "png");
}
It should result in CSS like this :
a[data-bg="alpha"] {
background: url("../images/alpha_logo.png") no-repeat;
}
a[data-bg="beta"] {
background: url("../images/beta_logo.png") no-repeat;
}
a[data-bg="gamma"] {
background: url("../images/gamma_logo.png") no-repeat;
}
But I get this error :
Undefined variable: "$source-list"
It works fine if I add the list content before the mixin in _mixins.scss, but if so I can't re-use it over and over just by modifying the list's content.
Am I missing something?
Thanks in advance,
AW
It works fine if I add the list content before the mixin in _mixins.scss, but if so I can't re-use it over and over just by modifying the list's content.
When calling the mixin your list is out of scope, because you defined it within the a { ... } part. To make the list visible to your mixin you would have to define the list outside (not necessarily before the mixin, but at least before you call the mixin).
$path: "../images/";
#mixin dynamic-bg($path, $type, $ext) {
#each $source in $source-list {
&[data-bg="#{$source}"] {
background: url($path + $source + '_' + $type + '.' + $ext) no-repeat;
}
}
}
$source-list: "alpha", "beta", "gamma";
a {
#include dynamic-bg($path, "logo", "png");
}
$source-list: "new1", "new2";
strong {
#include dynamic-bg($path, "logo", "png");
}
compiles to:
a[data-bg="alpha"] {
background: url("../images/alpha_logo.png") no-repeat;
}
a[data-bg="beta"] {
background: url("../images/beta_logo.png") no-repeat;
}
a[data-bg="gamma"] {
background: url("../images/gamma_logo.png") no-repeat;
}
strong[data-bg="new1"] {
background: url("../images/new1_logo.png") no-repeat;
}
strong[data-bg="new2"] {
background: url("../images/new2_logo.png") no-repeat;
}
If you put the list inside of the a for the reason that no other definition should be able to make use of it, you'd better go for an additional (optional) mixin parameter:
#mixin dynamic-bg($path, $type, $ext, $sources: $source-list) {
#each $source in $sources {
&[data-bg="#{$source}"] {
background: url($path + $source + '_' + $type + '.' + $ext) no-repeat;
}
}
}
$source-list: "default-1", "default-2";
a {
$source-list: "alpha", "beta", "gamma";
#include dynamic-bg($path, "logo", "png", $source-list);
}
strong {
#include dynamic-bg($path, "logo", "png");
}
compiles to:
a[data-bg="alpha"] {
background: url("../images/alpha_logo.png") no-repeat;
}
a[data-bg="beta"] {
/* ... */
strong[data-bg="default-1"] {
background: url("../images/default-1_logo.png") no-repeat;
}
strong[data-bg="default-2"] {
/* ... */
or just like the following with a required parameter and no additional $source-list variable:
#mixin dynamic-bg($path, $type, $ext, $source-list) {
#each $source in $source-list {
&[data-bg="#{$source}"] {
background: url($path + $source + '_' + $type + '.' + $ext) no-repeat;
}
}
}
a {
#include dynamic-bg($path, "logo", "png", ("alpha", "beta", "gamma"));
}
strong {
#include dynamic-bg($path, "logo", "png", ("strong-1", "strong-2"));
}
I am trying to use a custom font in a pdf I generate from html with PDFKit in my Rails app. I added the font in ...app/assets/fonts/ and included it in my html template:
css:
#font-face {
font-family: 'journal';
src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.eot')});
src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.woff')} format("woff")),
url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.ttf')}) format("truetype");
}
called it in the css:
h1 {font-family: journal; }
don't use ; unless you're done declaring the rule. The universal CSS formatting here is:
selector {
propname: val1, val2, val3;
}
So you use , for multiple values, and then only at the very end a ;. What you've written instead does this:
selector {
src: some value;
src: some *overwriting* value;
}
Just declare your #font-face using the regular format and it should work fine:
#font-face {
font-family: 'journal';
src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.eot')}),
url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.woff')}) format("woff")),
url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.ttf')}) format("truetype");
}
(note that you were also missing a ) for the "woff" case)
However, if you're targetting modern browsers, there is no reason to use eot anymore. IE9+ and everything else supports woff just fine. In fact, WOFF is a compressed opentype wrapper; browsers that support opentype also support WOFF, so trying to load both WOFF and ttf or otf makes no sense: see http://caniuse.com/woff
#font-face {
font-family: 'journalregular';
src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.eot')});
}
#font-face {
font-family: 'journalregular';
src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.woff')}) format('woff');
}
#font-face {
font-family: 'journalregular';
src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.ttf')}) format('truetype');
}
#font-face {
font-family: 'journalregular';
src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.svg#journalregular')}) format('svg');
}
#font-face {
font-family: 'journalregular';
font-weight: normal;
font-style: normal;
}
That seemed to fix it. Also, I needed to call it:
h1 { font-family: 'journalregular'; }
I am new to foundation 4 and we are currently using foundation 4 in our project MVC4 + Foundation 4 (through NuGet package)
We want to use accordions on our views.
Foundation 4 offers Sections; http://foundation.zurb.com/docs/components/section.html
but as this looks too bland on the website, we looked at foundation 3 accordion which we felt suited our website; http://foundation.zurb.com/old-docs/f3/elements.php.
Need experts help in understanding how can we make the look & feel of accordions sections similar to the one's available in foundation 3.
We understand foundation 4 doesnot offer images anymore, so how can we implement the small icons on the right.
I'm no expert, but if I understand correctly you just want to add the little triangle image on the right. First of all, are you using scss files ? If not you should definitely check it out here. All you need is to install this visual studio plugin, then download and add the zurb-foundation scss files to your project.
Next up, go to the _section.scss file and look for this part of the code:
#mixin section($section-type:accordion) {
// Accordion styles
#if $section-type == accordion {
border-top: $section-border-size $section-border-style $section-border-color;
position: relative;
.title {
top: 0;
cursor: pointer;
width: 100%;
margin: 0;
background-color: $section-title-bg;
***********************************
*** add a background image here ***
***********************************
a {
padding: $section-padding;
display: inline-block;
color: $section-title-color;
font-size: emCalc(14px);
white-space: nowrap;
width: 100%;
}
&:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
}
.content {
display: none;
padding: $section-padding;
background-color: $section-content-bg;
&>*:last-child { margin-bottom: 0; }
&>*:first-child { padding-top: 0; }
&>*:last-child { padding-bottom: 0; }
}
&.active {
.content { display: block; }
.title { background: $section-title-bg-active;
**********************************************
*** add the "active" background image here ***
**********************************************
}
}
}
There are two ways to add the triangle, either use an image of your choice, or even better, use foundation's css function that creates triangles !
#include css-triangle(5px, #aaaaaa, top);
Note I have not tested modifying foundation's sections, but I'm pretty sure this should do the trick.
SCSS is always the best option. But, for others who are not yet ready to dive into SCSS, you can do it via CSS. In your CSS file, just include the following:
.section-container.accordion > section > .title:after,
.section-container.accordion > .section > .title:after {
content: '\25B8';
position:absolute;
right:10px;
font-size:22px;
}
.section-container.accordion > section.active > .title:after,
.section-container.accordion > .section.active > .title:after {
content: '\25BE';
position:absolute;
right:10px;
font-size:22px;
}
Of course, you can change the font-size as desired or you can simply ommit it. Hope that helps.
Is it possible to change the breadcrumbs separator from / to something else? eg: >
Or should I just ignore zurb and do it the traditional way?
The / separators are defined via css in foundation/scss/foundation/components/modules/_ui.scss:
ul.breadcrumbs {
li:before { content: "/"; color: #aaa; }
li:first-child:before { content: " "; }
}
To change it you need to override this CSS in your app.css file:
ul.breadcrumbs li:before { content: ">"; }
Add the following to your css:
.breadcrumbs li:not(:last-child)::after
{
content:">";
}