1 / 8

Extra from class 5

Extra from class 5. Matt Brendzel GA Boston Programs Producer. William Neely CEO, Piecewise.com. layout. Positioning. Positioning types Set with css , position:value Relative (as in, the element is positioned relative to the other elements

jessica-farmer
Download Presentation

Extra from class 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Extra from class 5 Matt Brendzel GA Boston Programs Producer William Neely CEO, Piecewise.com

  2. layout Positioning Positioning types • Set with css, position:value • Relative (as in, the element is positioned relative to the other elements • This is the default (if you don’t set a position, it will be relative) • Absolute • Specify exactly where an element is on the page’ • Can use top:”Xpx”, left:”Xpx”, bottom:”Xpx”, and/or right:”Xpx”

  3. layout Positioning • Fixed • Like absolute only the element is positioned with respect to the window (bottom:0px would stick the element to the bottom of the page and it would stay there even if you scroll, good for headers that you want to always be visible like Facebook’s blue bar across the top) • Use relative unless you have a very good reason not to (see pinterest layout example on when you might use absolute pos)

  4. Fonts Font Awesome A font of icons like email symbols, social media icons, plus signs, hearts, and more! Because the icons are technically a font, you can use them with text without having to worry about positioning You can also change their size using “font-size” and their color using “color”

  5. Fonts Font Awesome Steps Go to http://fortawesome.github.com/Font-Awesome/ Download the font Place the css file in your css folder Copy the font folder from the download into the same folder as your index.html To insert an icon, use the tag <i></i> with a class name that matches the icon you want to use (use the link from 1 for reference) So <i class=“icon-envelope”></i> would create an envelope icon

  6. Positioning Masonry, or “Create pinterest in five minutes” Masonry takes different sized elements and positions them so they fit together like bricks (with no spaces, like Pinterest) Would be way too hard to use floats to achieve this effect

  7. Positioning Masonry Steps Add <script src=“https://raw.github.com/desandro/masonry/master/jquery.masonry.min.js”></script> below the <script src=“jquery latest”></script> tag in your template Create the elements you wish to “mason-ize” (give them a border so you can see them) Float:left the elements (use a class) …….

  8. Positioning Masonry Steps 4) Add the following code to your page 4a) replace #container with the identifier for the element that contains the items you’re “mason-izing” 4b) replace “.aList” with a class that is shared across all the items you’re “mason-izing” 5) View the page in your browser! <script type="text/javascript"> $(document).ready(function(e) { $('#main').masonry({ itemSelector : '.aList', }); </script>

More Related