Menu icon Foundation

My Posts




  • 4
    Replies
  • Button padding

    By roxanne sutton

    buttonsrem-calcpadding

    i am trying to adjust the button text and padding sizes, but in proportion. i am no expert with mixins, though most of it "makes sense" except the darn rem-calc() in certain circumstances. i wish there was a good walk through of the "syntax". i understan... (continued)

    Last Reply by Arjan Oosthoek over 4 years ago



  • 2
    Replies
  • altering default row and grid

    By roxanne sutton

    rowgrid

    1. i want a default for body copy of 15 pixels in the _functions.scss - i have left the default $rem-base to 16px (so as not to mess up the grid) then in _global.scss i set the _base-font-size to .9375em is this correct to reset the copy but not distu... (continued)

    Last Reply by roxanne sutton over 5 years ago


My Comments

roxanne sutton commented on herrreiprich's post about 5 years

Wing-Hou, thank you for explaining this. The only change i make, is i don't refer to a specific selector, or a specific modal, so all a, img, button with this class will close the modal they are in

 $('.btn-close-reveal').click(function(){
  $('.reveal-modal').foundation('reveal', 'close');
});

roxanne sutton commented on Marc McGee's post about 5 years

Wing-Hou i thank you for the script. I have gone one step further with it. I refer to a class, so i don't need to worry what selector uses that class. any link, button, img with that class will close the modal.

 $('.btn-close-reveal').click(function(){
  $('.reveal-modal').foundation('reveal', 'close');
});

or for cases where there might be nested, modals

$(".btn-close-reveal").click(function() {
  $(this).parents(".reveal-modal").foundation('reveal','close');
});

roxanne sutton commented on noah's post about 5 years

under codekit2 preferences > general, unselected the options for "when a file has syntax issues", this will eliminate the warnings until Foundation updates to Sass 3.3

roxanne sutton commented on noah's post about 5 years

I sent email to codekit and they responded that foundation has not upgraded to sass3.3 syntax and this is causing deprecation warnings in codekit2.

roxanne sutton commented on noah's post about 5 years

Noah,
i followed the page, but the solution uses codekit one screenshots and i do not find this option for codekit 2.

Giuseppe Rodriguez,
i have no config.rb file only a config.codekit

but i am getting the same deprecation warnings

roxanne sutton commented on Thanh Nguyen's post about 5 years

Hi, i found this due to the same needs. I would like a visible horizontal menu at large sizes, that is off-canvas at mobile sizes. I found a very accessible tutorial at http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
that may help those who wish this configuration.

roxanne sutton commented on Adda Tidjani's post about 5 years

what i am noticing is that i never pick up the .top-bar .toggle-topbar.menu-icon rule, although it IS in the compiled css. same for the anchor rule. so i am left with just the text.

roxanne sutton commented on Adda Tidjani's post about 5 years

I am looking at the sample code for F5 and i don't see a span element in the code. and it does not seem it should be necessary from the SASS either.

I am having the same problem, using SASS 3.3.0 and F5

roxanne sutton commented on Alex Reardon's post over 5 years

Thank you Rafi,
one more question. specialized mixins should also be added to the settings file?

i have made massive changes to the buttons...to add a gradient set

_buttons.scss

include exports("button") {
  @if $include-html-button-classes {

    // Default styles applied outside of media query
    button, .button, input[type="button"], input[type="submit"],  {
      @include button-base;
      @include button-size;
      @include button-style($bg:$default-color);

      @include single-transition(background-color);
      @include button-size($padding:false, $is-input:$button-med);

       a { color: $text-color;}


        &.bg-gradient {
          @include linear-gradient(#ffffff, #e6e6e6);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        }

      &.default {
        @include button-style($bg:$default-color); color: $text-color;

        &.bg-gradient {
          @include linear-gradient(#ffffff, #e6e6e6);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        }

      }

so something like this, do i copy the whole mixin to the settings.scss file?

roxanne sutton commented on Alex Reardon's post over 5 years

Rafi,
Are you saying that the components files , should NOT be touched? and any changes should be made through the _settings.scss file? and keep the component files as originals?

Posts Followed








  • 2
    Replies
  • range slider initliazation issue

    By Robert

    slidersrange-slider

    I am trying to add range slider in a panel which is insider orbit content slider. The orbit slider is being added dynamically to the page and foundation is getting reinitialized by $(document).foundation() after orbit has been added. The range sliders sh... (continued)

    Last Reply by Robert about 5 years ago




Following

    No Content

Followers

My Posts




My Comments

You commented on herrreiprich's post about 5 years

Wing-Hou, thank you for explaining this. The only change i make, is i don't refer to a specific selector, or a specific modal, so all a, img, button with this class will close the modal they are in

 $('.btn-close-reveal').click(function(){
  $('.reveal-modal').foundation('reveal', 'close');
});

You commented on Marc McGee's post about 5 years

Wing-Hou i thank you for the script. I have gone one step further with it. I refer to a class, so i don't need to worry what selector uses that class. any link, button, img with that class will close the modal.

 $('.btn-close-reveal').click(function(){
  $('.reveal-modal').foundation('reveal', 'close');
});

or for cases where there might be nested, modals

$(".btn-close-reveal").click(function() {
  $(this).parents(".reveal-modal").foundation('reveal','close');
});

You commented on noah's post about 5 years

under codekit2 preferences > general, unselected the options for "when a file has syntax issues", this will eliminate the warnings until Foundation updates to Sass 3.3

You commented on noah's post about 5 years

I sent email to codekit and they responded that foundation has not upgraded to sass3.3 syntax and this is causing deprecation warnings in codekit2.

You commented on noah's post about 5 years

Noah,
i followed the page, but the solution uses codekit one screenshots and i do not find this option for codekit 2.

Giuseppe Rodriguez,
i have no config.rb file only a config.codekit

but i am getting the same deprecation warnings

You commented on Thanh Nguyen's post about 5 years

Hi, i found this due to the same needs. I would like a visible horizontal menu at large sizes, that is off-canvas at mobile sizes. I found a very accessible tutorial at http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
that may help those who wish this configuration.

You commented on Adda Tidjani's post about 5 years

what i am noticing is that i never pick up the .top-bar .toggle-topbar.menu-icon rule, although it IS in the compiled css. same for the anchor rule. so i am left with just the text.

You commented on Adda Tidjani's post about 5 years

I am looking at the sample code for F5 and i don't see a span element in the code. and it does not seem it should be necessary from the SASS either.

I am having the same problem, using SASS 3.3.0 and F5

You commented on Alex Reardon's post over 5 years

Thank you Rafi,
one more question. specialized mixins should also be added to the settings file?

i have made massive changes to the buttons...to add a gradient set

_buttons.scss

include exports("button") {
  @if $include-html-button-classes {

    // Default styles applied outside of media query
    button, .button, input[type="button"], input[type="submit"],  {
      @include button-base;
      @include button-size;
      @include button-style($bg:$default-color);

      @include single-transition(background-color);
      @include button-size($padding:false, $is-input:$button-med);

       a { color: $text-color;}


        &.bg-gradient {
          @include linear-gradient(#ffffff, #e6e6e6);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        }

      &.default {
        @include button-style($bg:$default-color); color: $text-color;

        &.bg-gradient {
          @include linear-gradient(#ffffff, #e6e6e6);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        }

      }

so something like this, do i copy the whole mixin to the settings.scss file?

You commented on Alex Reardon's post over 5 years

Rafi,
Are you saying that the components files , should NOT be touched? and any changes should be made through the _settings.scss file? and keep the component files as originals?

Posts Followed

Following

  • No Content

Followers