Menu icon Foundation

My Posts

  • 2
    Replies
  • How to work with foundation?

    By Marek Simko

    scss

    i have created some website template, i have got some custom scss in _custom.scss and the website is looking as i want it to be... so how should i continue... css file is now more than 130kb which is, i would say, too much... so first thing to do is... (continued)

    Last Reply by Marek Simko about 5 years ago







My Comments

Marek Simko commented on Benjamin Patch's post almost 5 years

I would also like to know it

Marek Simko commented on Wing-Hou Chan's post about 5 years

this forum needs so much futures ... it would be great just to use something like ip.board or vanilla forums

Marek Simko commented on Marek Simko's post about 5 years

Thanks Karl for your answer, i didn't know that gzip is so effective...
however i will keep looking for a way to make code as clean and simple as possible ;)

Marek Simko commented on Jake Wilson's post about 5 years

Hi Jake,
Why don't you try using Foundation with Grunt + Libsass? it really isn't that hard... just follow the documentation and if you have any problems search the forum ... there is already a lot of topics ...
this article helped me to understand what is grunt for ...
http://24ways.org/2013/grunt-is-not-weird-and-hard/
just read the beginning ... installation is different with foundation ...

http://media.24ways.org/2013/coyier/drag-folder.gif
this gif also shows that using command line tools isn't that hard...

to answer your question, yes app.scss(not _app.scss) is a part of cli tool ...
It has similar role to foundation.scss. it is scss file that is used to declare what to import or not to import.

and as you said ... not changing foundations source files makes updates easier

...if you would use Foundation with Grunt + Libsass, you would just need to type these commands:

cd path/to/project-folder

foundation update

and foundations files would be updated, while you could continue working on _custom.scss and _settings.scss.
_settings.scss include all variables that are used in foundation.

"How does _settings.scss override the settings that are in _type.scss ?"

as you can see here
https://github.com/zurb/foundation/blob/master/scss/foundation/components/_type.scss

next to each variable value is !default

$header-font-family: $body-font-family !default;
$header-font-weight: normal !default;
$header-font-style: normal !default;
$header-font-color: #222 !default;
$header-line-height: 1.4 !default;
$header-font-family: $body-font-family !default;  

this mean that these values are only used if you haven't overridden them (for example in settings.scss file).
_settings.scss file does not include !default values
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_defaults

hope this helps

Marek Simko commented on Puppy Love's post about 5 years

maybe you could use interchange to load one type of orbit slider without nav arrows for mobile, and another one for bigger screens with arrows

Marek Simko commented on Todd Richards's post about 5 years

what about a button next to the download button that would open a modal? that would be nice solution

however, i have made this one using accordicon ...

    <div class="row">
      <div class="medium 10-columns centered">
        <h5>headline</h5>
        <table>
          <thead>
            <tr>
              <th>Due Date</th>
              <th>File Name</th>
              <th>Download (link)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1.1.1991</td>
              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
                <dl class="accordion" data-accordion>
                  <dd>
                    <a href="#panel1">More Info...</a>
                    <div id="panel1" class="content">
                      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>
              </td>
              <td><a href="#" class="button">Download</a></td>
            </tr>
            <tr>
              <td>1.1.1991</td>
              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
                <dl class="accordion" data-accordion>
                  <dd>
                    <a href="#panel3">More Info...</a>
                    <div id="panel3" class="content">
                      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>
              </td>
              <td><a href="#" class="button">Download</a></td>
            </tr>
            <tr>
              <td>1.1.1991</td>
              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
                <dl class="accordion" data-accordion>
                  <dd>
                    <a href="#panel2">More Info...</a>
                    <div id="panel2" class="content">
                      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>
              </td>
              <td><a href="#" class="button">Download</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

I have also changed design a little ... here is the app.scss file if you want to see it

@import "settings";

$include-html-accordion-classes: false;

@import "foundation";

    .accordion {
      @include clearfix; margin-bottom: 0;
      dd {
        display: block;
        margin-bottom: 0 !important;
//        &.active > a { background: $accordion-navigation-active-bg-color; }
       > a {
//          background: $accordion-navigation-bg-color;
//          color: $accordion-navigation-font-color;
//          padding: $accordion-navigation-padding;
//          display: block;
//          font-family: $accordion-navigation-font-family;
//          font-size: $accordion-navigation-font-size;
//          &:hover { background: $accordion-navigation-hover-bg-color; }
       }
      }
      .content {
        display: none;
//        padding: $accordion-content-padding;
        &.active {
          display: block;
          background: $accordion-content-active-bg-color;
        }
      }
    }

hope this is something you are looking for

Marek Simko commented on Adam Kelly's post about 5 years

also, if you change this variable:

$include-html-top-bar-classes: $include-html-classes;

it doesn't mean that without it it wouldn't be in your .css file, because when import foundation, everything is in your .css

however, this variable has different use.

for example you don't want to use basic buttons included in foundation BUT you want to use custom buttons using Sass mixins.

and when you want to use Sass mixins you need to load variables.

then the app .scss would look like this.

@import "settings";

$include-html-button-classes: false;

@import "foundation";

.custom-button-class { @include button; }

http://foundation.zurb.com/docs/components/buttons.html - documentation on creating your own buttons using our Sass mixins.

Marek Simko commented on Adam Kelly's post about 5 years

take a look here
http://2i.sk/2i/i/5336ad2f/37408ae793c3a3dcff82c0c837f7696b/8ea94963b0.f.png

... so this mean if you want to change variables , do it inside _settings.scss

Marek Simko commented on Marek Simko's post over 5 years

thanks Wing-Hou,
i didnt want to edit what is inside bower_components folder so i have copied it to scss folder
I think there could be some variable for including it... for example
$include-html-javascript-classes: true/false

Marek Simko commented on Marek Simko's post over 5 years

anyone?

Posts Followed

No Content

Following

    No Content

Followers

My Posts






My Comments

You commented on Benjamin Patch's post almost 5 years

I would also like to know it

You commented on Wing-Hou Chan's post about 5 years

this forum needs so much futures ... it would be great just to use something like ip.board or vanilla forums

You commented on Marek Simko's post about 5 years

Thanks Karl for your answer, i didn't know that gzip is so effective...
however i will keep looking for a way to make code as clean and simple as possible ;)

You commented on Jake Wilson's post about 5 years

Hi Jake,
Why don't you try using Foundation with Grunt + Libsass? it really isn't that hard... just follow the documentation and if you have any problems search the forum ... there is already a lot of topics ...
this article helped me to understand what is grunt for ...
http://24ways.org/2013/grunt-is-not-weird-and-hard/
just read the beginning ... installation is different with foundation ...

http://media.24ways.org/2013/coyier/drag-folder.gif
this gif also shows that using command line tools isn't that hard...

to answer your question, yes app.scss(not _app.scss) is a part of cli tool ...
It has similar role to foundation.scss. it is scss file that is used to declare what to import or not to import.

and as you said ... not changing foundations source files makes updates easier

...if you would use Foundation with Grunt + Libsass, you would just need to type these commands:

cd path/to/project-folder

foundation update

and foundations files would be updated, while you could continue working on _custom.scss and _settings.scss.
_settings.scss include all variables that are used in foundation.

"How does _settings.scss override the settings that are in _type.scss ?"

as you can see here
https://github.com/zurb/foundation/blob/master/scss/foundation/components/_type.scss

next to each variable value is !default

$header-font-family: $body-font-family !default;
$header-font-weight: normal !default;
$header-font-style: normal !default;
$header-font-color: #222 !default;
$header-line-height: 1.4 !default;
$header-font-family: $body-font-family !default;  

this mean that these values are only used if you haven't overridden them (for example in settings.scss file).
_settings.scss file does not include !default values
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_defaults

hope this helps

You commented on Puppy Love's post about 5 years

maybe you could use interchange to load one type of orbit slider without nav arrows for mobile, and another one for bigger screens with arrows

You commented on Todd Richards's post about 5 years

what about a button next to the download button that would open a modal? that would be nice solution

however, i have made this one using accordicon ...

    <div class="row">
      <div class="medium 10-columns centered">
        <h5>headline</h5>
        <table>
          <thead>
            <tr>
              <th>Due Date</th>
              <th>File Name</th>
              <th>Download (link)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1.1.1991</td>
              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
                <dl class="accordion" data-accordion>
                  <dd>
                    <a href="#panel1">More Info...</a>
                    <div id="panel1" class="content">
                      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>
              </td>
              <td><a href="#" class="button">Download</a></td>
            </tr>
            <tr>
              <td>1.1.1991</td>
              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
                <dl class="accordion" data-accordion>
                  <dd>
                    <a href="#panel3">More Info...</a>
                    <div id="panel3" class="content">
                      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>
              </td>
              <td><a href="#" class="button">Download</a></td>
            </tr>
            <tr>
              <td>1.1.1991</td>
              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
                <dl class="accordion" data-accordion>
                  <dd>
                    <a href="#panel2">More Info...</a>
                    <div id="panel2" class="content">
                      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>
              </td>
              <td><a href="#" class="button">Download</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

I have also changed design a little ... here is the app.scss file if you want to see it

@import "settings";

$include-html-accordion-classes: false;

@import "foundation";

    .accordion {
      @include clearfix; margin-bottom: 0;
      dd {
        display: block;
        margin-bottom: 0 !important;
//        &.active > a { background: $accordion-navigation-active-bg-color; }
       > a {
//          background: $accordion-navigation-bg-color;
//          color: $accordion-navigation-font-color;
//          padding: $accordion-navigation-padding;
//          display: block;
//          font-family: $accordion-navigation-font-family;
//          font-size: $accordion-navigation-font-size;
//          &:hover { background: $accordion-navigation-hover-bg-color; }
       }
      }
      .content {
        display: none;
//        padding: $accordion-content-padding;
        &.active {
          display: block;
          background: $accordion-content-active-bg-color;
        }
      }
    }

hope this is something you are looking for

You commented on Adam Kelly's post about 5 years

also, if you change this variable:

$include-html-top-bar-classes: $include-html-classes;

it doesn't mean that without it it wouldn't be in your .css file, because when import foundation, everything is in your .css

however, this variable has different use.

for example you don't want to use basic buttons included in foundation BUT you want to use custom buttons using Sass mixins.

and when you want to use Sass mixins you need to load variables.

then the app .scss would look like this.

@import "settings";

$include-html-button-classes: false;

@import "foundation";

.custom-button-class { @include button; }

http://foundation.zurb.com/docs/components/buttons.html - documentation on creating your own buttons using our Sass mixins.

You commented on Adam Kelly's post about 5 years

take a look here
http://2i.sk/2i/i/5336ad2f/37408ae793c3a3dcff82c0c837f7696b/8ea94963b0.f.png

... so this mean if you want to change variables , do it inside _settings.scss

You commented on Marek Simko's post over 5 years

thanks Wing-Hou,
i didnt want to edit what is inside bower_components folder so i have copied it to scss folder
I think there could be some variable for including it... for example
$include-html-javascript-classes: true/false

You commented on Marek Simko's post over 5 years

anyone?

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content