Menu icon Foundation

Developer | Nürnberg

My Posts

No Content

My Comments

Alexander Assimidis commented on hakan1001's post almost 5 years

Should the login form be fixed and just the orange can be scrolled?

Alexander Assimidis commented on owen's post almost 5 years

Set up a new scss File named smaller.scss and import your scss Files there then compile it.

If you are using Grunt it would be like this

 grunt.initConfig({
  sass: {                              // Task
    dist: {                            // Target
      options: {                       // Target options
        style: 'expanded'
      },
      files: {                         // Dictionary of files
        'main.css': 'main.scss',       // 'destination': 'source'
        'widgets.css': 'widgets.scss'
      }
    }
  }
});

If you have any further question or maybe i am understand you wrong then tell me :)

Alexander Assimidis commented on James Napolitano's post almost 5 years

You should use Media Queries for example change the font-size or use word-break.

    word-wrap: break-word;

Alexander Assimidis commented on msc-val's post almost 5 years

Why are you not using this Shortcut?

<dl class="accordion" data-accordion> <dd class="accordion-navigation"> <a href="#panel1">Accordion 1</a> <div id="panel1" class="content active"> <dl class="tabs" data-tab> <dd class="active"><a href="#panel2-1">Tab 1</a></dd> <dd><a href="#panel2-2">Tab 2</a></dd> <dd><a href="#panel2-3">Tab 3</a></dd> <dd><a href="#panel2-4">Tab 4</a></dd> </dl> <div class="tabs-content"> <div class="content active" id="panel2-1"> <p>First panel content goes here...</p> </div> <div class="content" id="panel2-2"> <p>Second panel content goes here...</p> </div> <div class="content" id="panel2-3"> <p>Third panel content goes here...</p> </div> <div class="content" id="panel2-4"> <p>Fourth panel content goes here...</p> </div> </div> </div> </dd> <dd class="accordion-navigation"> <a href="#panel2">Accordion 2</a> <div id="panel2" class="content"> Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </dd> <dd class="accordion-navigation"> <a href="#panel3">Accordion 3</a> <div id="panel3" class="content"> Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </dd> </dl>

Alexander Assimidis commented on jakkir hussain's post almost 5 years

Did you initialize foundation at the bottom of your Page or in a document ready block in your JS File?

 $(document).foundation();

Alexander Assimidis commented on owen's post almost 5 years

Hey, you dont have to seperate them just load them after in your app.scss File other styles which came last are overwrting the others before.

@import "foundation/components/grid";
@import "foundation/components/accordion";
@import "foundation/components/alert-boxes";
@import "foundation/components/block-grid";
@import "foundation/components/breadcrumbs";
@import "foundation/components/button-groups";
@import "foundation/components/buttons";
@import "foundation/components/clearing";
@import "foundation/components/dropdown";
@import "foundation/components/dropdown-buttons";
@import "foundation/components/flex-video";
@import "foundation/components/forms";
@import "foundation/components/icon-bar";
@import "foundation/components/inline-lists";
@import "foundation/components/joyride";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
@import "foundation/components/magellan";
@import "foundation/components/orbit";
@import "foundation/components/pagination";
@import "foundation/components/panels";
@import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/range-slider";
@import "foundation/components/reveal";
@import "foundation/components/side-nav";
@import "foundation/components/split-buttons";
@import "foundation/components/sub-nav";
@import "foundation/components/switches";
@import "foundation/components/tables";
@import "foundation/components/tabs";
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/top-bar";
@import "foundation/components/type";
@import "foundation/components/offcanvas";
@import "foundation/components/visibility";

// EXAMPLE
@import "custom_styles";
@import "mobile_styles";

Alexander Assimidis commented on Michael Bart's post almost 5 years

<div class="row">
    <div class="large-2 push-5 columns">  
<button>Text me</button>
</div>
  </div>

There are more ways to do this but in your case i would stretch the button and center the text because it looks like this is for mobile or?

.reveal-modal {
button {
text-align:center;
width:100%;
}
}

or

.reveal-modal {
text-align:center;
}

Alexander Assimidis commented on Bit Byte's post almost 5 years

Hide the tabs for small and show the Accordion only for small.
Could you send us an link?

Alexander Assimidis commented on Renny's post almost 5 years

Could u send us an link to your Site?
Where do you init modernizr?

Alexander Assimidis commented on Frank Kneffel's post almost 5 years

Do you see this code if u hover on the li item?

top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
    clip: auto;
    display: block;
    height: auto;
    overflow: visible;
    position: absolute !important;
    width: auto;
}

Posts Followed

No Content

Following

Followers

My Posts

No Content

My Comments

You commented on hakan1001's post almost 5 years

Should the login form be fixed and just the orange can be scrolled?

You commented on owen's post almost 5 years

Set up a new scss File named smaller.scss and import your scss Files there then compile it.

If you are using Grunt it would be like this

 grunt.initConfig({
  sass: {                              // Task
    dist: {                            // Target
      options: {                       // Target options
        style: 'expanded'
      },
      files: {                         // Dictionary of files
        'main.css': 'main.scss',       // 'destination': 'source'
        'widgets.css': 'widgets.scss'
      }
    }
  }
});

If you have any further question or maybe i am understand you wrong then tell me :)

You commented on James Napolitano's post almost 5 years

You should use Media Queries for example change the font-size or use word-break.

    word-wrap: break-word;

You commented on msc-val's post almost 5 years

Why are you not using this Shortcut?

<dl class="accordion" data-accordion> <dd class="accordion-navigation"> <a href="#panel1">Accordion 1</a> <div id="panel1" class="content active"> <dl class="tabs" data-tab> <dd class="active"><a href="#panel2-1">Tab 1</a></dd> <dd><a href="#panel2-2">Tab 2</a></dd> <dd><a href="#panel2-3">Tab 3</a></dd> <dd><a href="#panel2-4">Tab 4</a></dd> </dl> <div class="tabs-content"> <div class="content active" id="panel2-1"> <p>First panel content goes here...</p> </div> <div class="content" id="panel2-2"> <p>Second panel content goes here...</p> </div> <div class="content" id="panel2-3"> <p>Third panel content goes here...</p> </div> <div class="content" id="panel2-4"> <p>Fourth panel content goes here...</p> </div> </div> </div> </dd> <dd class="accordion-navigation"> <a href="#panel2">Accordion 2</a> <div id="panel2" class="content"> Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </dd> <dd class="accordion-navigation"> <a href="#panel3">Accordion 3</a> <div id="panel3" class="content"> Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </dd> </dl>

You commented on jakkir hussain's post almost 5 years

Did you initialize foundation at the bottom of your Page or in a document ready block in your JS File?

 $(document).foundation();

You commented on owen's post almost 5 years

Hey, you dont have to seperate them just load them after in your app.scss File other styles which came last are overwrting the others before.

@import "foundation/components/grid";
@import "foundation/components/accordion";
@import "foundation/components/alert-boxes";
@import "foundation/components/block-grid";
@import "foundation/components/breadcrumbs";
@import "foundation/components/button-groups";
@import "foundation/components/buttons";
@import "foundation/components/clearing";
@import "foundation/components/dropdown";
@import "foundation/components/dropdown-buttons";
@import "foundation/components/flex-video";
@import "foundation/components/forms";
@import "foundation/components/icon-bar";
@import "foundation/components/inline-lists";
@import "foundation/components/joyride";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
@import "foundation/components/magellan";
@import "foundation/components/orbit";
@import "foundation/components/pagination";
@import "foundation/components/panels";
@import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/range-slider";
@import "foundation/components/reveal";
@import "foundation/components/side-nav";
@import "foundation/components/split-buttons";
@import "foundation/components/sub-nav";
@import "foundation/components/switches";
@import "foundation/components/tables";
@import "foundation/components/tabs";
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/top-bar";
@import "foundation/components/type";
@import "foundation/components/offcanvas";
@import "foundation/components/visibility";

// EXAMPLE
@import "custom_styles";
@import "mobile_styles";

You commented on Michael Bart's post almost 5 years

<div class="row">
    <div class="large-2 push-5 columns">  
<button>Text me</button>
</div>
  </div>

There are more ways to do this but in your case i would stretch the button and center the text because it looks like this is for mobile or?

.reveal-modal {
button {
text-align:center;
width:100%;
}
}

or

.reveal-modal {
text-align:center;
}

You commented on Bit Byte's post almost 5 years

Hide the tabs for small and show the Accordion only for small.
Could you send us an link?

You commented on Renny's post almost 5 years

Could u send us an link to your Site?
Where do you init modernizr?

You commented on Frank Kneffel's post almost 5 years

Do you see this code if u hover on the li item?

top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
    clip: auto;
    display: block;
    height: auto;
    overflow: visible;
    position: absolute !important;
    width: auto;
}

Posts Followed

No Content

Following

Followers