Attribute Modules for CSS

Developer
Size
5,810 Kb
Views
4,048

How do I make an attribute modules for css?

Pretty exciting way to think of setting up styles: http://amcss.github.io/.Filler text thanks to Whedon Ipsum: http://www.commercekitchen.com/whedon-ipsum/. What is a attribute modules for css? How do you make a attribute modules for css? This script and codes were developed by Bryan Fillmer on 11 December 2022, Sunday.

Attribute Modules for CSS Previews

Attribute Modules for CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Attribute Modules for CSS</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Unica+One|Vollkorn:400,700);
/** * Attribute Modules styling is pretty interesting. Working with * Angular I'm already used to thinking of things in terms of * modules, extending that to the styles as well and keeping * individual styles separated into files per module makes a lot * of sense. * * I do see this being used *with* classes still, primarily for * site-wide utility items (.container, .responsive, .cf, etc). * Effectively any items that are visual only, independent * of a module, or "global" in scope. */
/* === Global === */
body { padding: 2em; font-family: 'Vollkorn', serif; font-weight: 400; font-size: 14px; color: #4e4062; background-color: #e4cec3;
}
a,
a:visited { text-decoration: none; color: #37398f;
}
a:hover,
a:active { color: #A16772;
}
.container { max-width: 33em; margin: 0 auto;
}
img.responsive { max-width: 100%; height: auto;
}
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after { clear: both;
}
.cf { *zoom: 1;
}
/* === Modules === */
/* Headers */
[am-header] { font-family: 'Unica One', sans-serif; font-weight: 400; font-size: 1.5em; text-transform: uppercase; color: #a16772;
}
[am-header~='nav-title'] { color: #84515b;
}
/* Navigation */
[am-nav] ul { padding-left: 0; list-style: none;
}
[am-nav] ul li { display: inline-block; padding-right: 20px; font-family: 'Unica One', sans-serif; font-size: 1.5em; text-transform: uppercase;
}
[am-nav~='primary'] { border-bottom: 1px solid #a16772;
}
/* Sections */
[am-section] { border-bottom: 1px solid #a16772;
}
[am-section~='contact'] { border-bottom: none;
}
[am-section~='contact'] dt { font-weight: 700; letter-spacing: 0.05em;
}
[am-section~='contact'] dd { margin-left: 0; margin-bottom: 1em;
}
[am-section~='contact'] img { border: 1px solid #c8a6ac; border-radius: 5px;
}
/* Grid */
[am-row] { margin-left: -15px; margin-right: -15px;
}
[am-column] { box-sizing: border-box; float: left; padding-left: 15px; padding-right: 15px;
}
[am-column~='1/3'] { width: 33%;
}
[am-column~='2/3'] { width: 66%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <nav am-nav="primary"> <ul> <li am-header="nav-title">Site Title</li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <section id="about" am-Section="about"> <h2 am-header="section-title">About</h2> <!-- start whedon ipsum --> <p> You can't spend the rest of your life waiting for Xander to wake up and smell the hottie. We're gonna explode? I don't wanna explode. I just don't see why everyone's always picking on Marie-Antoinette. I love what you are, what you do, how you try. I hate to bring up our imminent arrest during your crazy time, but we gotta move. Apocalypse, we've all been there; the same old trips, why should we care? For this plan to work, River and I will have to be dead. See if you were really a witch, you'd do a spell to escape. </p> <p> In the time of gods and monsters, what is the worth of a man? So, I'm wondering, do the other cookie animals feel sorta ripped? You always hurt the one you love. Little man loved fire. So we'll integrate non-progressional evolution theory with God's creation of Eden. It's about women. You are talking crazy-person talk. Put your words in word places please. </p> <p> And now the one person who should be here is gone, and a waste like you gets to live. The only time you were ever at peace in your whole life was when you were dead. You can't spend the rest of your life waiting for Xander to wake up and smell the hottie. You're the one freaky thing in my freaky world that still makes sense to me. Nobody could do that much decoupage without calling on the powers of darkness. It's getting eerie, what's this cheery singing all about? </p> <!-- please do not remove this line --> <div style='display:none;'> <a href='http://www.commercekitchen.com'>ipsum generator</a> </div> <!-- end whedon ipsum code --> </section> <section class="cf" id="contact" am-Section="contact"> <h2 am-header="section-title">Contact</h2> <div am-Row> <div am-Column="2/3"> <img class="responsive" src="https://s3.amazonaws.com/ooomf-com-files/nQZcA7PRTyuduZPSZQ88_wanderlust.jpg"> </div> <div am-Column="1/3"> <dl> <dt>Phone</dt> <dd>123 456-7890</dd> <dt>Email</dt> <dd><a href="mailto:[email protected]">[email protected]</a></dd> </dl> </div> </div> </section>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
</body>
</html>

Attribute Modules for CSS - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Unica+One|Vollkorn:400,700);
/** * Attribute Modules styling is pretty interesting. Working with * Angular I'm already used to thinking of things in terms of * modules, extending that to the styles as well and keeping * individual styles separated into files per module makes a lot * of sense. * * I do see this being used *with* classes still, primarily for * site-wide utility items (.container, .responsive, .cf, etc). * Effectively any items that are visual only, independent * of a module, or "global" in scope. */
/* === Global === */
body { padding: 2em; font-family: 'Vollkorn', serif; font-weight: 400; font-size: 14px; color: #4e4062; background-color: #e4cec3;
}
a,
a:visited { text-decoration: none; color: #37398f;
}
a:hover,
a:active { color: #A16772;
}
.container { max-width: 33em; margin: 0 auto;
}
img.responsive { max-width: 100%; height: auto;
}
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after { clear: both;
}
.cf { *zoom: 1;
}
/* === Modules === */
/* Headers */
[am-header] { font-family: 'Unica One', sans-serif; font-weight: 400; font-size: 1.5em; text-transform: uppercase; color: #a16772;
}
[am-header~='nav-title'] { color: #84515b;
}
/* Navigation */
[am-nav] ul { padding-left: 0; list-style: none;
}
[am-nav] ul li { display: inline-block; padding-right: 20px; font-family: 'Unica One', sans-serif; font-size: 1.5em; text-transform: uppercase;
}
[am-nav~='primary'] { border-bottom: 1px solid #a16772;
}
/* Sections */
[am-section] { border-bottom: 1px solid #a16772;
}
[am-section~='contact'] { border-bottom: none;
}
[am-section~='contact'] dt { font-weight: 700; letter-spacing: 0.05em;
}
[am-section~='contact'] dd { margin-left: 0; margin-bottom: 1em;
}
[am-section~='contact'] img { border: 1px solid #c8a6ac; border-radius: 5px;
}
/* Grid */
[am-row] { margin-left: -15px; margin-right: -15px;
}
[am-column] { box-sizing: border-box; float: left; padding-left: 15px; padding-right: 15px;
}
[am-column~='1/3'] { width: 33%;
}
[am-column~='2/3'] { width: 66%;
}
Attribute Modules for CSS - Script Codes
Attribute Modules for CSS - Script Codes
Home Page Home
Developer Bryan Fillmer
Username bfillmer
Uploaded December 11, 2022
Rating 3.5
Size 5,810 Kb
Views 4,048
Do you need developer help for Attribute Modules for CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bryan Fillmer (bfillmer) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!