Menu icon Foundation

Developer | London,Uk

A Freelance Web Developer From The Heart Of London

My Posts



  • 1
    Reply
  • Does F6 Grid (Flexbox) Depend on Js

    By Jason Demitri

    grid

    Im working on the new foundation project located here >>https://github.com/Relution-Development/Foundation-Remix Im working on merging the flexbox grid from foundation Sites into foundationApps so i can achieve the image below with grid-blocks grid-... (continued)

    Last Reply by Rafi Benkual about 1 year ago









My Comments

Jason Demitri commented on SHERIF's post about 1 year

try ...
 
```
nav.top-bar {

height: 110px;

transition: height .33s ease;

}

.top-bar.expanded {

height: 272px;

transition: height .33s ease; }

```

Jason Demitri commented on Karol's post about 1 year

It says that you are using foundation 5. something are you aware that this version was never made to work with angularJs Foundation for apps is

Jason Demitri commented on Mark Landeryou's post about 1 year

2 Ways of doing this

Option One - READ THE DOCS

You will notice that there is a _settings.scss sheet as read here in the docs http://foundation.zurb.com/sites/docs/v/5.5.3/components/typography.html

In Foundation 5 To change the color of the H1 or H2 text you need to change the variable associated with it in this case the following are used:

// We use these to control header font styles
$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
$header-font-weight: bold;
$header-font-style: normal;
$header-font-color: #222;
$header-line-height: 1.4;
$header-top-margin: .2rem;
$header-bottom-margin: .5rem;
$header-text-rendering: optimizeLegibility;


If you change header-font-color just before you load foundation.scss like so

$header-font-color: pink;
@import "foundation";

Then all should work

Option 2 QUICK AND DIRTY HACK

Add the following to your stylesheet

h1,h2,h3,h4,h5,h6{
    color:red;
}


and all should work heres a codePen for the fun of it . . . only catch is im unable to edit foundations variables before the stylesheet is loaded http://codepen.io/Blu-Jay/pen/WwrpXo

Jason Demitri commented on Robert Strunk's post about 1 year

Foundation is not installed via sass it's built using sass

Foundation is installable as a gem, via npm or bower and all allow versions to be specified ie

Bower install foundation 5.* 

This would install version 5.3.latest bower version

But this is only an example read the install docs for more detail. Here are the ones for foundation 5.

Hope it helps :)

Jason Demitri commented on Robin Luther's post about 1 year

Most people use slimPhp as a backed but you could use Larvael or symfony .

Use foundation and angular as the front end sending requests to ur restful php API

For more info Google angular and slim or angular and restful API's there is a good example of this here http://code.tutsplus.com/tutorials/creating-an-api-centric-web-application--net-23417

Bare in mind this is how twitters site is actually designed :) hope it helps

Jason Demitri commented on Jason Demitri's post about 1 year

Thank you for the reply :)

negative margins . . . . completly flew over my head through frustration

flex direction il keep

and global-width is a requirement of foundation 6 :( Float grid :(

before you use the flex-grid you have to use the normal grid and so there is no replacement or alternative in foundationApps as apps works as you said from the view port

Im guessing this means that to remove the global-width from my main sheet as a requirement i can put into the sheet settings for the grid and pretend its not there

or

come up with a functions that calculates it based on the grid-frame or viewport then make sure all elements even that of foundation 6 must be contained into the grid-frame to work

Once again thanks for the reply gives me a better idea of were im heading

Jason Demitri commented on Ale Urrutia's post about 1 year

Do the same as you previously done.

Either create a new .scss or use the app.scss

include foundation as you usually would

@import "foundation";

Then when you upgrade only foundation as a dependency the foundation stylesheets would change but not you app.scss eg components/grid.scss or bower_components/foundation-sites/foundation.scss

To override components you can either use the settings.scss file or write your own code

@import "foundation"

.grid-frame{
border:2px solid red;
}

You can also use the mixins that each component has to build upon them into your own components

Heres an example that makes a shinny blue button :)

@import "foundation";
@import "compass";

.my-special-button{
@include button();
background-color: #1e5799; // Old browsers
@include filter-gradient(#1e5799, #7db9e8, vertical); // IE6-9
@include background-image(linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%));
}

Hope this helps

For more information read the docs on the specific component you wish to use

Jason Demitri commented on Luke Radic's post about 1 year

Im confused have you downloaded the css and unpacked it and are using that

or

have you used the foundation cli tool ?

AND when you say making changes css or scss and by editing the main stylesheet or overwriting the values by creating you own ie you have foundation.css then apps.css and in apps.css .columns{} contains values that overwrite foundations defaults

Jason Demitri commented on Luke Radic's post about 1 year

Looked at your codepen and its identical even copy and pasted it into mine and works perfectly

BUT on your pen dont know if its just me but your missing dependencies

Settings >> CSS
- add css base as normalize
- and add foundation 6 css
Settings >> JS
- add foundation 6 js

Jason Demitri commented on Jacob Herper's post about 1 year

Sounds like you are looking for a drop down

Docs:
http://foundation.zurb.com/sites/docs/dropdown.html

Even though the documents show the dropdown attached to a button there is not reason why the dropdown trigger cannot be attached to a form element and so instead of

<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>

You can use
HTML
<input type="password" id="right-label" placeholder="Password Please" data-toggle="example-dropdown">

Ive created an example here http://codepen.io/Blu-Jay/pen/wMRBLx

Posts Followed


  • 1
    Reply
  • Topbar issue on Surface

    By Karol

    angularsurfacetopbar

    I have some issue with foundation + angularjs + microsoft surface tablet. Please look at this plunker: https://plnkr.co/edit/xcCXD7YluTpULKER2pX6?p=preview Everything works as expected on desktop browsers (newest Chrome, FF, IE) and apple mobile devices... (continued)

    Last Reply by Jason Demitri about 1 year ago






  • 2
    Replies
  • Popovers like with Bootstrap?

    By Jacob Herper

    I am looking for a solution to realise a popover similar to this: http://getbootstrap.com/javascript/#popovers Unfortunately I could not find anything close to that with Foundation. Is there any way to realise a password requirements popover similar to t... (continued)

    Last Reply by Jacob Herper about 1 year ago



  • 2
    Replies
  • Flex Grid and Off Canvas

    By John Roy

    flex gridoff canvas

    Hello. Can anyone tell me if Flex grid and Off Canvas work together? I have a site using foundation sites and have included Flex Grid instead of the standard grid. All works well and I have a layout with a header and footer attached to the top and bot... (continued)

    Last Reply by John Roy about 1 year ago



Following

    No Content

Followers

My Posts

My Comments

You commented on SHERIF's post about 1 year

try ...
 
```
nav.top-bar {

height: 110px;

transition: height .33s ease;

}

.top-bar.expanded {

height: 272px;

transition: height .33s ease; }

```

You commented on Karol's post about 1 year

It says that you are using foundation 5. something are you aware that this version was never made to work with angularJs Foundation for apps is

You commented on Mark Landeryou's post about 1 year

2 Ways of doing this

Option One - READ THE DOCS

You will notice that there is a _settings.scss sheet as read here in the docs http://foundation.zurb.com/sites/docs/v/5.5.3/components/typography.html

In Foundation 5 To change the color of the H1 or H2 text you need to change the variable associated with it in this case the following are used:

// We use these to control header font styles
$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
$header-font-weight: bold;
$header-font-style: normal;
$header-font-color: #222;
$header-line-height: 1.4;
$header-top-margin: .2rem;
$header-bottom-margin: .5rem;
$header-text-rendering: optimizeLegibility;


If you change header-font-color just before you load foundation.scss like so

$header-font-color: pink;
@import "foundation";

Then all should work

Option 2 QUICK AND DIRTY HACK

Add the following to your stylesheet

h1,h2,h3,h4,h5,h6{
    color:red;
}


and all should work heres a codePen for the fun of it . . . only catch is im unable to edit foundations variables before the stylesheet is loaded http://codepen.io/Blu-Jay/pen/WwrpXo

You commented on Robert Strunk's post about 1 year

Foundation is not installed via sass it's built using sass

Foundation is installable as a gem, via npm or bower and all allow versions to be specified ie

Bower install foundation 5.* 

This would install version 5.3.latest bower version

But this is only an example read the install docs for more detail. Here are the ones for foundation 5.

Hope it helps :)

You commented on Robin Luther's post about 1 year

Most people use slimPhp as a backed but you could use Larvael or symfony .

Use foundation and angular as the front end sending requests to ur restful php API

For more info Google angular and slim or angular and restful API's there is a good example of this here http://code.tutsplus.com/tutorials/creating-an-api-centric-web-application--net-23417

Bare in mind this is how twitters site is actually designed :) hope it helps

You commented on Jason Demitri's post about 1 year

Thank you for the reply :)

negative margins . . . . completly flew over my head through frustration

flex direction il keep

and global-width is a requirement of foundation 6 :( Float grid :(

before you use the flex-grid you have to use the normal grid and so there is no replacement or alternative in foundationApps as apps works as you said from the view port

Im guessing this means that to remove the global-width from my main sheet as a requirement i can put into the sheet settings for the grid and pretend its not there

or

come up with a functions that calculates it based on the grid-frame or viewport then make sure all elements even that of foundation 6 must be contained into the grid-frame to work

Once again thanks for the reply gives me a better idea of were im heading

You commented on Ale Urrutia's post about 1 year

Do the same as you previously done.

Either create a new .scss or use the app.scss

include foundation as you usually would

@import "foundation";

Then when you upgrade only foundation as a dependency the foundation stylesheets would change but not you app.scss eg components/grid.scss or bower_components/foundation-sites/foundation.scss

To override components you can either use the settings.scss file or write your own code

@import "foundation"

.grid-frame{
border:2px solid red;
}

You can also use the mixins that each component has to build upon them into your own components

Heres an example that makes a shinny blue button :)

@import "foundation";
@import "compass";

.my-special-button{
@include button();
background-color: #1e5799; // Old browsers
@include filter-gradient(#1e5799, #7db9e8, vertical); // IE6-9
@include background-image(linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%));
}

Hope this helps

For more information read the docs on the specific component you wish to use

You commented on Luke Radic's post about 1 year

Im confused have you downloaded the css and unpacked it and are using that

or

have you used the foundation cli tool ?

AND when you say making changes css or scss and by editing the main stylesheet or overwriting the values by creating you own ie you have foundation.css then apps.css and in apps.css .columns{} contains values that overwrite foundations defaults

You commented on Luke Radic's post about 1 year

Looked at your codepen and its identical even copy and pasted it into mine and works perfectly

BUT on your pen dont know if its just me but your missing dependencies

Settings >> CSS
- add css base as normalize
- and add foundation 6 css
Settings >> JS
- add foundation 6 js

You commented on Jacob Herper's post about 1 year

Sounds like you are looking for a drop down

Docs:
http://foundation.zurb.com/sites/docs/dropdown.html

Even though the documents show the dropdown attached to a button there is not reason why the dropdown trigger cannot be attached to a form element and so instead of

<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>

You can use
HTML
<input type="password" id="right-label" placeholder="Password Please" data-toggle="example-dropdown">

Ive created an example here http://codepen.io/Blu-Jay/pen/wMRBLx

Posts Followed

Following

  • No Content

Followers